~singpolyma/shore50

6f406739fe12a19247829bc882adde1226793435 — Stephen Paul Weber 1 year, 2 months ago 7308e9c
Commit
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
M Makefile => Makefile +1 -1
@@ 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

A audio.slim => audio.slim +5 -0
@@ 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

M element.slim => element.slim +4 -1
@@ 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

M index.scss => index.scss +172 -3
@@ 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;
	}
}

M index.slim => index.slim +194 -27
@@ 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");
				});
			});

A transcript.slim => transcript.slim +4 -0
@@ 0,0 1,4 @@
aside.transcript
	button X
	= text
	cite= attribution

M util.rb => util.rb +10 -0
@@ 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