7 files changed, 390 insertions(+), 32 deletions(-)

M Makefile
A audio.slim
M element.slim
M index.scss
M index.slim
A transcript.slim
M util.rb

@@ 6,7 6,7 @@ all: \
 entr:
 	( echo Makefile; find -name '*.rb' -o -name '*.slim' -o -name '*.scss' -o -name '*.purs' -o -name '*.dhall'; find assets/ ) | entr make
 
-index.html: index.slim util.rb element.slim
+index.html: index.slim util.rb element.slim transcript.slim
 	/usr/share/doc/ruby-slim/examples/slimrb -r./util -p index.slim > $@
 
 index.css: index.scss _font-face.scss

@@ 0,0 1,5 @@
+- if File.exists?("assets/audio/#{type}/#{n}.opus")
+	audio controls="controls"
+		source src="assets/audio/#{type}/#{n}.opus" type="audio/ogg; codecs=opus"
+		source src="assets/audio/#{type}/#{n}.mp3" type="audio/mpeg"
+		a href="assets/audio/#{type}/#{n}.opus" listen

@@ 1,3 1,6 @@
 .element class=type style=style
-	- Dir["assets/ELEMENTS/#{type}/*.png"].each do |path|
+	- Dir["assets/ELEMENTS/#{type}/*.png"].sort.reverse.each do |path|
 		img src=path alt=type
+	== transcript type, $element_count[type]
+	== render :audio, type: type.to_s.downcase, n: ($element_count[type] + 1)
+	- $element_count[type] += 1

@@ 31,6 31,7 @@ html, body {
 	color: $fg;
 	text-align: center;
 	line-height: 1.7;
+	background: white url(assets/sky.png);
 
 	* {
 		box-sizing: border-box;


@@ 39,6 40,11 @@ html, body {
 
 h1, h2, h3, h4 { font-family: abhaya, sans-serif; }
 
+body > section > h1 {
+	font-size: 2.2rem;
+	margin-bottom: 0em;
+}
+
 #path, #logo {
 	display: inline-block;
 	position: relative;


@@ 49,6 55,35 @@ h1, h2, h3, h4 { font-family: abhaya, sans-serif; }
 	}
 }
 
+table {
+	margin: 0 auto;
+	text-align: center;
+	th {
+		font-family: abhaya, sans-serif;
+		font-size: 1.2em;
+		img { display: inline; max-width: 50%; }
+		&:last-of-type img { max-width: 50%; }
+		width: 20%;
+	}
+	td {
+		margin: 0px;
+		font-family: abhaya, sans-serif;
+		font-weight: bold;
+		font-size: 1.3em;
+	}
+}
+
+#links {
+	text-align: left;
+	margin: 2em;
+	font-family: abhaya, sans-serif;
+	ul {
+		font-family: segoe, sans-serif;
+		font-weight: bold;
+		font-size: 1.1em;
+	}
+}
+
 @keyframes fade {
 	from {
 		opacity: 1;


@@ 80,6 115,10 @@ h1, h2, h3, h4 { font-family: abhaya, sans-serif; }
 	position: absolute;
 	width: 7%;
 
+	&:nth-of-type(2n) {
+		img { transform: scaleX(-1); }
+	}
+
 	img {
 		position: absolute;
 		width: 100%;


@@ 98,10 137,53 @@ h1, h2, h3, h4 { font-family: abhaya, sans-serif; }
 	}
 }
 
+.signbush {
+	.PROTEST.SIGN {
+		position: absolute;
+		top: 19%;
+		left: 14%;
+		width: 35%;
+		transition: top 2s;
+
+		img {
+			position: absolute;
+			width: 100%;
+		}
+	}
+
+	.EGGPLANT {
+		width: 35%;
+	}
+
+	& > img {
+		position: relative;
+		width: 100%;
+	}
+
+	&:hover .PROTEST.SIGN {
+		top: -35%;
+	}
+}
+
+.grass {
+	.FLOWERS {
+		top: 94.1%;
+		transition: top 2s;
+	}
+
+	&:hover .FLOWERS {
+		top: 92%;
+	}
+}
+
 .CHERRIES {
 	position: absolute;
 	width: 10%;
 
+	&:nth-of-type(2n) {
+		img { transform: scaleX(-1); }
+	}
+
 	img {
 		position: absolute;
 		width: 100%;


@@ 111,7 193,7 @@ h1, h2, h3, h4 { font-family: abhaya, sans-serif; }
 
 .FLOWERS {
 	position: absolute;
-	width: 7%;
+	width: 14%;
 
 	img {
 		position: absolute;


@@ 122,7 204,7 @@ h1, h2, h3, h4 { font-family: abhaya, sans-serif; }
 
 .BEE {
 	position: absolute;
-	width: 15%;
+	width: 12%;
 
 	img {
 		position: absolute;


@@ 133,7 215,7 @@ h1, h2, h3, h4 { font-family: abhaya, sans-serif; }
 
 .SITTINGBIRD {
 	position: absolute;
-	width: 15%;
+	width: 12%;
 
 	img {
 		position: absolute;


@@ 141,3 223,90 @@ h1, h2, h3, h4 { font-family: abhaya, sans-serif; }
 		@include framedelay(12, fade, 3);
 	}
 }
+
+.element {
+	audio { display: none; }
+
+	&.active {
+		.transcript {
+			opacity: 1;
+			left: calc(50% - 15em);
+			button {
+				background: transparent;
+				border: 0px solid transparent;
+				position: absolute;
+				top: 1em;
+				right: 1em;
+			}
+		}
+		audio {
+			display: block;
+			position: fixed;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			width: 100vw;
+			z-index: 100;
+		}
+	}
+}
+
+.transcript {
+	position: fixed;
+	left: -100vw;
+	top: 25vh;
+	max-height: 50vh;
+	overflow-y: auto;
+	transition: opacity 1s;
+	opacity: 0;
+	background: #fff;
+	border: 0.2em solid black;
+	border-radius: 2em;
+	padding: 2em;
+	width: 30em;
+	z-index: 2;
+
+	cite {
+		display: block;
+	}
+}
+
+.graph {
+	position: absolute;
+	display: inline;
+	width: 33%;
+	opacity: 0;
+	transition: opacity 1s;
+	right: -500vw;
+
+	img { max-width: 100%; }
+	z-index: 100;
+
+	button {
+		position: absolute;
+		top: 2.6%;
+		right: 19%;
+		background: transparent;
+		border: 0px solid transparent;
+	}
+
+	&.active {
+		right: inherit;
+		opacity: 1;
+	}
+}
+
+#credits {
+	padding: 2em;
+	text-align: center;
+
+	ul, li {
+		padding: 0;
+		list-style-type: none;
+	}
+
+	img {
+		height: 14vw;
+		padding: 1em;
+	}
+}

@@ 21,10 21,36 @@ html
 		link type="text/css" rel="stylesheet" href="index.css"
 		base target="_blank"
 	body
+		audio autoplay="autoplay"
+			source src="assets/music.opus" type="audio/ogg; codecs=opus"
+			source src="assets/music.mp3" type="audio/mpeg"
+			a href="assets/music.opus" background music
+
 		#logo
 			img alt="SHORE 50" src="assets/SHORE50Logo_Elements/WebsiteLogo_BASE.png"
 			== render :element, type: "BEE", style: "top: 50%; right: 25%;"
-			== render :element, type: "SITTINGBIRD", style: "top: 13%; left: 40%;"
+			== render :element, type: "SITTINGBIRD", style: "top: 14.5%; left: 42%;"
+
+		section
+			h1 Interactivity
+			p This is an interactive website. By clicking any icons and components on the site that are changing colour, you will be offered both audio components with readable transcripts.
+
+		p A lot can change in 50 years, and yet much can also stay the same. SHORE Centre has been privileged to provide services in Waterloo Region since 1972. While the SHORE of today is very different, at our core we have continued to work towards a community that values reproductive rights and inclusive sexual health education.  As we reflect on and celebrate the last 50 years, we wanted to find a way to really explore where we have been and to dream about where we need to go. We believe deeply in learning from those who came before us, while also looking to young people for their insights and wisdom on the future of reproductive rights. The SHORE 50 project provided just that: the ability to use storytelling and art to hear about our past and be inspired on our journey forward.
+		p This website brings together the voices of alumni members of the board of directors, alumni staff, educators and volunteers as they share some of their experiences, which were then shared with a group of youth from across Waterloo Region. Together, lead artist Catherine Mellinger and the group of youth with whom she worked, developed the theme, design and structure of the website. This website is in no way attempting to provide a timeline for 50 years of work in reproductive justice or sexual health education. The goal is to engage the community in Waterloo Region and beyond to hear the voices of the people doing the work on the front lines and whose life passion has been to move reproductive justice and sexual health education at SHORE Centre forward. What emerged are four narrative themes, each assigned to a fruit throughout the website you are about to explore.
+
+		table
+			tr
+				th: img alt="Bananas" src="assets/ELEMENTS/BANANA/3.Banana_yellow.png"
+				th: img alt="Cherries" src="assets/ELEMENTS/CHERRIES/1.Cherries_RED.png"
+				th: img alt="Eggplant" src="assets/ELEMENTS/EGGPLANT/6.Eggplant_purple.png"
+				th: img alt="Flowers" src="assets/ELEMENTS/FLOWERS/5.Flower_Blue.png"
+			tr
+				td The why
+				td The political
+				td The barriers
+				td The hopes
+
+		p Why fruit you ask? Emojis and sexts, the Garden of Eden and our very greenbelt.
 
 		#path
 			img#bg src="assets/WebMainImage_FULL_BASE.png"


@@ 33,54 59,195 @@ html
 			== render :element, type: "BANANA", style: "top: 4%; left: 22%;"
 			== render :element, type: "BANANA", style: "top: 6%; left: 15%;"
 
+			== render :element, type: "SITTINGBIRD", style: "top: 3.5%; right: 30%;"
+			.graph style="top: -3.5%; right: 0%;"
+				button X
+				img src="assets/ELEMENTS/GRAPHS/Graph1.png" alt="Graph"
+
 			== render :element, type: "BANANA", style: "top: 10.5%; left: 26%;"
 			== render :element, type: "BANANA", style: "top: 13%; left: 27%;"
 			== render :element, type: "BANANA", style: "top: 12%; left: 36%;"
 
-			== render :element, type: "BANANA", style: "top: 16%; left: 0%;"
-			== render :element, type: "BANANA", style: "top: 17.5%; left: 4%;"
-			== render :element, type: "BANANA", style: "top: 16.5%; left: 11%;"
-
 			== render :element, type: "BANANA", style: "top: 16%; right: 4%;"
 			== render :element, type: "BANANA", style: "top: 15%; right: 15%;"
 			== render :element, type: "BANANA", style: "top: 17%; right: 15%;"
 
+			.signbush style="position: absolute; top: 18.5%; left: 18%; width: 25%;"
+				== render :element, type: "PROTEST SIGN", style: ""
+				img src="assets/BUSH1.png"
 			== render :element, type: "EGGPLANT", style: "top: 18%; left: 35%;"
 			== render :element, type: "EGGPLANT", style: "top: 20%; left: 37%;"
 			== render :element, type: "EGGPLANT", style: "top: 18%; left: 43%;"
 
-			== render :element, type: "EGGPLANT", style: "top: 27%; left: 1%;"
-			== render :element, type: "EGGPLANT", style: "top: 29%; left: 2%;"
-			== render :element, type: "EGGPLANT", style: "top: 28%; left: 7%;"
-
-			== render :element, type: "EGGPLANT", style: "top: 37%; left: 10%;"
-			== render :element, type: "EGGPLANT", style: "top: 36.5%; left: 14%;"
-			== render :element, type: "EGGPLANT", style: "top: 37.25%; left: 18.5%;"
+			.signbush style="position: absolute; top: 26.2%; left: 1%; width: 20%;"
+				== render :element, type: "PROTEST SIGN", style: ""
+				img src="assets/BUSH2.png"
+				== render :element, type: "EGGPLANT", style: "top: 1%; left: 1%;"
+				== render :element, type: "EGGPLANT", style: "top: 25%; left: 25%;"
+				== render :element, type: "EGGPLANT", style: "top: 50%; left: 1%;"
+
+			== render :element, type: "SITTINGBIRD", style: "top: 31%; left: 30%;"
+			.graph style="top: 24%; left: 40%;"
+				button X
+				img src="assets/ELEMENTS/GRAPHS/Graph2.png" alt="Graph"
+
+			.signbush style="position: absolute; top: 36.5%; left: 12.5%; width: 17%;"
+				== render :element, type: "PROTEST SIGN", style: ""
+				img src="assets/BUSH3.png"
+				== render :element, type: "EGGPLANT", style: "top: 1%; left: 1%;"
+				== render :element, type: "EGGPLANT", style: "top: 25%; left: 50%;"
+				== render :element, type: "EGGPLANT", style: "top: 50%; left: 1%;"
 
 			== render :element, type: "CHERRIES", style: "top: 32%; right: 25%;"
 			== render :element, type: "CHERRIES", style: "top: 34%; right: 27%;"
 			== render :element, type: "CHERRIES", style: "top: 37.25%; right: 18.5%;"
-
-			== render :element, type: "EGGPLANT", style: "top: 50.25%; right: 32%;"
-			== render :element, type: "EGGPLANT", style: "top: 53%; right: 35%;"
-			== render :element, type: "EGGPLANT", style: "top: 52%; right: 28%;"
+			== render :element, type: "CHERRIES", style: "top: 32%; right: 40%;"
+			== render :element, type: "CHERRIES", style: "top: 34%; right: 39%;"
+			== render :element, type: "CHERRIES", style: "top: 37.25%; right: 30%;"
+
+			.signbush style="position: absolute; top: 49.5%; left: 55%; width: 25%;"
+				== render :element, type: "PROTEST SIGN", style: ""
+				img src="assets/BUSH4.png"
+				== render :element, type: "EGGPLANT", style: "top: 10%; left: 2%;"
+				== render :element, type: "EGGPLANT", style: "top: 53%; right: 30%;"
+				== render :element, type: "EGGPLANT", style: "top: 52%; left: 5%;"
+
+			== render :element, type: "SITTINGBIRD", style: "top: 59.6%; right: 30%;"
+			.graph style="top: 52.5%; left: 67%;"
+				button X
+				img src="assets/ELEMENTS/GRAPHS/Graph3.png" alt="Graph"
 
 			== render :element, type: "CHERRIES", style: "top: 50%; left: 7%;"
 			== render :element, type: "CHERRIES", style: "top: 53%; left: 2%;"
+			== render :element, type: "CHERRIES", style: "top: 51%; left: 0%;"
 			== render :element, type: "CHERRIES", style: "top: 49%; left: 0%;"
 
-			== render :element, type: "EGGPLANT", style: "top: 66%; right: 32%;"
-			== render :element, type: "EGGPLANT", style: "top: 68%; right: 35%;"
-			== render :element, type: "EGGPLANT", style: "top: 69%; right: 28%;"
-
-			== render :element, type: "EGGPLANT", style: "top: 80%; right: 7%;"
-			== render :element, type: "EGGPLANT", style: "top: 82%; right: 11%;"
-			== render :element, type: "EGGPLANT", style: "top: 81%; right: 17%;"
+			.signbush style="position: absolute; top: 65.5%; right: 19%; width: 27%;"
+				== render :element, type: "PROTEST SIGN", style: ""
+				img src="assets/BUSH5.png"
+				== render :element, type: "EGGPLANT", style: "top: 2%; left: 2%;"
+				== render :element, type: "EGGPLANT", style: "top: 29%; left: 25%;"
+				== render :element, type: "EGGPLANT", style: "top: 53%; left: 5%;"
+
+			== render :element, type: "SITTINGBIRD", style: "top: 69.3%; left: 1%;"
+			.graph style="top: 62%; left: 10%;"
+				button X
+				img src="assets/ELEMENTS/GRAPHS/Graph4.png" alt="Graph"
+
+			.signbush style="position: absolute; top: 80%; right: 3.9%; width: 30%;"
+				== render :element, type: "PROTEST SIGN", style: "left: 25%"
+				img src="assets/BUSH7.png"
+				== render :element, type: "EGGPLANT", style: "top: 10%; right: 35%;"
+				== render :element, type: "EGGPLANT", style: "top: 30%; right: 55%;"
+				== render :element, type: "EGGPLANT", style: "top: 11%; right: 17%;"
 
 			== render :element, type: "CHERRIES", style: "top: 76%; right: 40%;"
 			== render :element, type: "CHERRIES", style: "top: 78%; right: 45%;"
 			== render :element, type: "CHERRIES", style: "top: 79%; right: 35%;"
-
-			== render :element, type: "FLOWERS", style: "top: 94%; left: 10%;"
-			== render :element, type: "FLOWERS", style: "top: 94%; left: 30%;"
-			== render :element, type: "FLOWERS", style: "top: 94%; left: 50%;"
+			== render :element, type: "CHERRIES", style: "top: 77%; right: 32%;"
+
+			== render :element, type: "SITTINGBIRD", style: "top: 74.3%; left: 25.3%;"
+			.graph style="top: 67.5%; left: 35%;"
+				button X
+				img src="assets/ELEMENTS/GRAPHS/Graph4.png" alt="Graph"
+
+			.grass
+				== render :element, type: "FLOWERS", style: "left: 5%;"
+				== render :element, type: "FLOWERS", style: "left: 15%;"
+				== render :element, type: "FLOWERS", style: "left: 25%;"
+				== render :element, type: "FLOWERS", style: "left: 35%;"
+				==	render :element, type: "FLOWERS", style: "left: 45%;"
+				== render :element, type: "FLOWERS", style: "left: 55%;"
+				img src="assets/GRASS.png" style="position: absolute; top: 94.1%; left: 2%; width: 80%;"
+
+		section#links
+			p We hope you enjoy this interactive experience. If you would like more information on the timeline of Reproductive Justice events in Canada, please visit:
+			ul
+				li: a href="https://nafcanada.org/history-abortion-canada/" Abortion History Canada
+				li: a href="https://www.arcc-cdac.ca/media/2020/06/Abortion-Chronology.pdf" Pro-Choice Action Network : Abortion Chronology
+				li: a href="https://www.arcc-cdac.ca/resources/" Abortion Rights Coalition of Canada
+				li: a href="https://www.actioncanadashr.org/campaigns/abortion-caravan-celebrating-50-years" Action Canada Abortion Caravan: Celebrating 50 Years
+				li: a href="https://www.actioncanadashr.org/resources/sexual-health-hub" Action Canada Sexual Health Education Hub
+				li: a href="https://www.shorecentre.ca/youth/" SHORE Centre: Teens and Youth Support
+				li: a href="https://www.shorecentre.ca/teachers/" Shore Centre: Teacher & Educator Resources
+
+		section#credits
+			h1 Credits
+
+			ul
+				li Catherine Mellinger — Lead Artist
+				li Website Developed by <a href="https://mboa.dev/">MBOA</a>
+				li Adam Harendorf — Audio editor
+				li Music used with permission: "Like Water, Like Earth" by Christa Couture
+				li SHORE Centre — Organizational Partner
+
+			section
+				h1 Participating youth
+
+				markdown:
+					- **Hawa Patel** — illustrator, admin and workshop participant
+					- **Kaitlyn Roblero** — audio transcripts, admin and workshop participant
+					- **Kate Maillet** — workshop participant
+					- **Orianna Lily Jiwani** — workshop participant
+					- **Chau Nguyen** — workshop participant
+
+			section
+				h1 Interview Participants
+
+				ul
+					li TK Pritchard
+					li Jane Arnold
+					li Lyndsey Butcher
+					li Caroline Dutka
+					li Burna Wilton
+					li Monica Bennett
+					li Wendy Newberry
+					li Hugh Cameron
+					li Valerie Hall
+					li Priscilla Carrara
+					li Hugh Cameron
+					li Joy Roberts
+					li Cheryl Opolko
+					li Eleanor McGrath
+					li Donna Letchford
+					li Sue Morris
+
+			section
+				p We would like to acknowledge funding support from both the Region of Waterloo Arts Fund and the Ontario Arts Council.
+
+				img src="assets/FunderLogos/50_Logo_SC.png" alt="Shore Centre"
+				img src="assets/FunderLogos/OAC_REVISED_NEWCOLOURS_250x64_RGB.png" alt="Ontario Arts Council"
+				img src="assets/FunderLogos/af-logo-horizontal-colour.png" alt="Arts Fund"
+				a href="https://mboa.dev": img src="assets/MBOA.svg" alt="Software Development by MBOA"
+
+		javascript:
+			document.body.addEventListener("click", function() {
+				if (document.querySelector("body > audio").paused) {
+					document.querySelector("body > audio").play();
+				}
+			});
+			document.querySelectorAll(".element button").forEach(function(close) {
+				close.addEventListener("click", function(e) {
+					e.stopPropagation();
+					close.parentElement.parentElement.classList.remove("active");
+					close.parentElement.parentElement.querySelector("audio").pause();
+				});
+			});
+			document.querySelectorAll(".element audio").forEach(function(audio) {
+				audio.parentElement.addEventListener("click", function(e) {
+					document.querySelectorAll(".element audio").forEach(function(otherAudio) {
+						otherAudio.parentElement.classList.remove("active");
+						otherAudio.load();
+					});
+					audio.parentElement.classList.add("active");
+					audio.play();
+				});
+			});
+			document.querySelectorAll(".graph").forEach(function(graph, i) {
+				document.querySelectorAll(".SITTINGBIRD")[i+1].addEventListener("click", function() {
+					graph.classList.toggle("active");
+				});
+				graph.querySelector("button").addEventListener("click", function() {
+					graph.classList.remove("active");
+				});
+			});

@@ 0,0 1,4 @@
+aside.transcript
+	button X
+	= text
+	cite= attribution

@@ 1,3 1,13 @@
+$element_count = Hash.new(0)
+
 def render(template, **kwargs)
 	Slim::Template.new(template.to_s + ".slim").render(nil, kwargs)
 end
+
+def transcript(type, index, **kwargs)
+	transcripts = open("assets/transcripts_#{type.to_s.downcase}.txt").read.split(/^===\n/)
+	return unless transcripts[index]
+
+	txt, attr = transcripts[index].split(/^\$\$\$\n/)
+	render :transcript, text: txt, attribution: attr, **kwargs
+end