2 files changed, 46 insertions(+), 35 deletions(-)

M index.scss
M index.slim

@@ 76,12 76,9 @@ table {
 #links {
 	text-align: left;
 	margin: 2em;
-	font-family: abhaya, sans-serif;
-	ul {
-		font-family: segoe, sans-serif;
-		font-weight: bold;
-		font-size: 1.1em;
-	}
+	font-family: segoe, sans-serif;
+	font-size: 1.1em;
+	font-weight: bold;
 }
 
 @keyframes fade {


@@ 128,7 125,7 @@ table {
 
 .EGGPLANT {
 	position: absolute;
-	width: 7%;
+	width: 4.5%;
 
 	img {
 		position: absolute;


@@ 152,7 149,7 @@ table {
 	}
 
 	.EGGPLANT {
-		width: 35%;
+		width: 17%;
 	}
 
 	& > img {


@@ 232,7 229,7 @@ table {
 			opacity: 1;
 			left: calc(50% - 15em);
 			button {
-				background: transparent;
+				background: white;
 				border: 0px solid transparent;
 				position: absolute;
 				top: 1em;


@@ 273,14 270,12 @@ table {
 
 .graph {
 	position: absolute;
-	display: inline;
 	width: 33%;
 	opacity: 0;
 	transition: opacity 1s;
-	right: -500vw;
+	z-index: -100;
 
 	img { max-width: 100%; }
-	z-index: 100;
 
 	button {
 		position: absolute;


@@ 291,8 286,8 @@ table {
 	}
 
 	&.active {
-		right: inherit;
 		opacity: 1;
+		z-index: 100;
 	}
 }
 


@@ 306,7 301,11 @@ table {
 	}
 
 	img {
+		vertical-align: middle;
 		height: 14vw;
 		padding: 1em;
+		&:nth-of-type(2) {
+			max-height: 100px;
+		}
 	}
 }

@@ 21,36 21,41 @@ 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: 14.5%; left: 42%;"
 
+		p.music ▶️  Click for site music
+		audio loop="loop" controls="controls"
+			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
+
+
 		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 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 and 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.
+		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 nature element 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="Eggplant" src="assets/ELEMENTS/EGGPLANT/6.Eggplant_purple.png" style="max-width:35%"
 				th: img alt="Flowers" src="assets/ELEMENTS/FLOWERS/5.Flower_Blue.png"
+				th: img alt="Birds" src="assets/ELEMENTS/SITTINGBIRD/SittingBird_orange.png"
 			tr
 				td The why
 				td The political
 				td The barriers
 				td The hopes
+				td Community Insight
 
 		p Why fruit you ask? Emojis and sexts, the Garden of Eden and our very greenbelt.
+		p Oh, and please pay attention to what the little birds are telling you.
 
 		#path
 			img#bg src="assets/WebMainImage_FULL_BASE.png"


@@ 76,15 81,15 @@ html
 				== 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: 20%; left: 39%;"
 			== render :element, type: "EGGPLANT", style: "top: 18%; left: 43%;"
 
 			.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: "EGGPLANT", style: "top: 7%; left: 10%;"
+				== render :element, type: "EGGPLANT", style: "top: 27%; left: 40%;"
+				== render :element, type: "EGGPLANT", style: "top: 50%; left: 5%;"
 
 			== render :element, type: "SITTINGBIRD", style: "top: 31%; left: 30%;"
 			.graph style="top: 24%; left: 40%;"


@@ 94,7 99,7 @@ html
 			.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: 10%; left: 10%;"
 				== render :element, type: "EGGPLANT", style: "top: 25%; left: 50%;"
 				== render :element, type: "EGGPLANT", style: "top: 50%; left: 1%;"
 


@@ 108,7 113,7 @@ html
 			.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: 15%; left: 20%;"
 				== render :element, type: "EGGPLANT", style: "top: 53%; right: 30%;"
 				== render :element, type: "EGGPLANT", style: "top: 52%; left: 5%;"
 


@@ 125,8 130,8 @@ html
 			.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: 7%; left: 10%;"
+				== render :element, type: "EGGPLANT", style: "top: 33%; left: 30%;"
 				== render :element, type: "EGGPLANT", style: "top: 53%; left: 5%;"
 
 			== render :element, type: "SITTINGBIRD", style: "top: 69.3%; left: 1%;"


@@ 137,9 142,9 @@ html
 			.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: "EGGPLANT", style: "top: 35%; right: 35%;"
+				== render :element, type: "EGGPLANT", style: "top: 36%; right: 60%;"
+				== render :element, type: "EGGPLANT", style: "top: 20%; right: 17%;"
 
 			== render :element, type: "CHERRIES", style: "top: 76%; right: 40%;"
 			== render :element, type: "CHERRIES", style: "top: 78%; right: 45%;"


@@ 149,7 154,7 @@ html
 			== 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"
+				img src="assets/ELEMENTS/GRAPHS/Graph5.png" alt="Graph"
 
 			.grass
 				== render :element, type: "FLOWERS", style: "left: 5%;"


@@ 213,6 218,8 @@ html
 					li Sue Morris
 
 			section
+				p <strong>Special thanks</strong> — Nate Salter for their support, guidance and keen eye. TK Pritchard for their willingness, constant support and vision for this community.
+
 				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"


@@ 221,11 228,16 @@ html
 				a href="https://mboa.dev": img src="assets/MBOA.svg" alt="Software Development by MBOA"
 
 		javascript:
-			document.body.addEventListener("click", function() {
+			window.addEventListener("load", function() {
 				if (document.querySelector("body > audio").paused) {
-					document.querySelector("body > audio").play();
+					document.querySelector("body > audio").volume = 0.20;
 				}
 			});
+			document.querySelectorAll("p.music").forEach(function(p) {
+				p.addEventListener("click", function(e) {
+					document.querySelector("body > audio").play();
+				});
+			});
 			document.querySelectorAll(".element button").forEach(function(close) {
 				close.addEventListener("click", function(e) {
 					e.stopPropagation();