From 873bd432f88a82e493fb238624e1b14be2e4b9e7 Mon Sep 17 00:00:00 2001 From: Stephen Paul Weber Date: Thu, 13 Apr 2023 21:08:28 -0500 Subject: [PATCH] Final --- index.scss | 25 ++++++++++++------------ index.slim | 56 +++++++++++++++++++++++++++++++++--------------------- 2 files changed, 46 insertions(+), 35 deletions(-) diff --git a/index.scss b/index.scss index 6237689..f17e044 100644 --- a/index.scss +++ b/index.scss @@ -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; + } } } diff --git a/index.slim b/index.slim index b3174ee..ef18a18 100644 --- a/index.slim +++ b/index.slim @@ -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 Special thanks — 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(); -- 2.45.2