diff --git a/about.html b/about.html index c5fdd77f06b289dca4f1d978a9a7b620b160278d..76dffb841a4bfc543165fb84e15da65d1639d27d 100644 --- a/about.html +++ b/about.html @@ -5,7 +5,7 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> - <script src="scripts.js" async></script> + <script src="scripts/nav.js" async></script> <title>Create Against Hate</title> </head> diff --git a/assets/img/placeholder-sketches/PXL_20221214_170210512.jpg b/assets/img/placeholder-sketches/PXL_20221214_170210512.jpg deleted file mode 100644 index d1505efa9283784596c22fcd889a8d8d9f8ce538..0000000000000000000000000000000000000000 Binary files a/assets/img/placeholder-sketches/PXL_20221214_170210512.jpg and /dev/null differ diff --git a/assets/img/placeholder-sketches/PXL_20221214_170223254.jpg b/assets/img/placeholder-sketches/PXL_20221214_170223254.jpg deleted file mode 100644 index 352fc9e25aaa5b1724581d45f665820d5226ed54..0000000000000000000000000000000000000000 Binary files a/assets/img/placeholder-sketches/PXL_20221214_170223254.jpg and /dev/null differ diff --git a/index.html b/index.html index dc177c0e45446cc95652d3c475bace0114570ca4..cea14e7542448ca2c4a386d092562f9ba25c4740 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,13 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> - <script src="scripts.js" async></script> + <script src="scripts/nav.js" async></script> <title>Create Against Hate</title> </head> <body id="home"> <header id="main-navigation"> - <!-- Navigation Bar -- index.html && about.html && rules.html && location.html --> + <!-- Navigation Bar, index.html && about.html && rules.html && location.html --> <nav aria-label="Create Against Hate Main Navigation"> <ul role="menubar" class="navbar"> <li role="none"> @@ -46,7 +46,7 @@ </button> </header> <main> - <!-- Hero -- index.html && about.html --> + <!-- Hero, index.html && about.html --> <section id="home__hero" class="hero"> <article> <img src="assets/main-logo/logo-dark.min.svg" alt="Create Against Hate Main Logo"> @@ -146,7 +146,7 @@ </section> </main> <footer> - <!-- Footer -- index.html && about.html && rules.html && location.html --> + <!-- Footer, index.html && about.html && rules.html && location.html --> <!-- Copyright --> <p><i>Create Against Hate</i> © Robin King 2022</p> <!-- Sitemap --> diff --git a/location.html b/location.html index 22b1aaf928cffd2203b93a09c87a82325bb6bdf1..323ac414f4f2dac10ce7f847c7af4a05e21f0d71 100644 --- a/location.html +++ b/location.html @@ -5,14 +5,15 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> - <script src="scripts.js" async></script> + <script src="scripts/nav.js" async></script> + <script src="scripts/tablist.js" async></script> <title>Create Against Hate</title> </head> <body id="location"> <header id="main-navigation"> <img src="assets/main-logo/logo-long-dark.min.svg" alt="Create Against Hate Logo"> - <!-- Navigation Bar -- index.html && about.html && rules.html && location.html --> + <!-- Navigation Bar, index.html && about.html && rules.html && location.html --> <nav aria-label="Create Against Hate Main Navigation"> <ul role="menubar" class="navbar"> <li role="none"> @@ -48,11 +49,33 @@ </header> <main> <!-- Map --> - <!-- Directions -- uses class="text-section" -- about.html && rules.html && location.html --> - <!-- Tabs --> + <iframe id="googleMap" title="Google Maps" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2486.5721314652883!2d-2.6008121233674015!3d51.447651215066415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48718dd658d5706f%3A0x767f1d6261554e46!2sM%20Shed!5e0!3m2!1sen!2suk!4v1682085581070!5m2!1sen!2suk" allowfullscreen="" referrerpolicy="no-referrer-when-downgrade"></iframe> + <!-- Directions, uses class="text-section", about.html && rules.html && location.html --> + <section class="text-section"> + <article id="location__transport"> + <h1>Directions</h1> + <div> + <ul role="tablist" aria-orientation="vertical"> + <li><button role="tab" aria-selected="true"><span class="icon--walking"></span>Walking</button></li> + <li><button role="tab"><span class="icon--biking"></span>Biking</button></li> + <li><button role="tab"><span class="icon--boat"></span>Boat</button></li> + <li><button role="tab"><span class="icon--bus"></span>Bus</button></li> + <li><button role="tab"><span class="icon--car"></span>Car</button></li> + <li><button role="tab"><span class="icon--coach"></span>Coach</button></li> + <li><button role="tab"><span class="icon--train"></span>Train</button></li> + </ul> + <div id="location__transport--content"> + <p>The M Shed is located on the harbourside, a five to 10 minute walk from the city centre or a 20 minute walk from Bristol Temple Meads train station.</p> + </div> + </div> + </article> + </section> + <section> + <p>Too far to travel? Not a problem! Why not join us on Zoom instead? <a class="btn--primary" href="index.html#home__sign-up"> Sign Up Now!</a></p> + </section> </main> <footer> - <!-- Footer -- index.html && about.html && rules.html && location.html --> + <!-- Footer, index.html && about.html && rules.html && location.html --> <!-- Copyright --> <p><i>Create Against Hate</i> © Robin King 2022</p> <!-- Sitemap --> diff --git a/rules.html b/rules.html index 85e55c7842bd81214a8d14e3b6cb0da5d785f383..d24c7938add7aef03857359a0bf8e145eb1024fb 100644 --- a/rules.html +++ b/rules.html @@ -5,7 +5,8 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> - <script src="scripts.js" async></script> + <script src="scripts/nav.js" async></script> + <script src="scripts/slides.js" async></script> <title>Create Against Hate</title> </head> diff --git a/scripts.js b/scripts/nav.js similarity index 68% rename from scripts.js rename to scripts/nav.js index b8c5374f24572294d21241fbd9719fc42c6b01b5..8a556ea6069ff6dc89b88d0301b6f1f9b1e4e6eb 100644 --- a/scripts.js +++ b/scripts/nav.js @@ -70,49 +70,4 @@ document.addEventListener('scroll', () => { if (window.innerWidth > 601) { desktopNavControls(); } -}); - -/******************************** - * [Code to control slideshow.] * -*********************************/ - -const slides = Array.from(document.querySelectorAll(".slide")); -const carousel = document.querySelector(".carousel"); -const lControl = document.querySelector(".carousel-button__left"); -const rControl = document.querySelector(".carousel-button__right"); - -// Ensures first slide is visible on page load -slides[0].scrollIntoView(); - -/** - * [Scroll slide to specific index.] -**/ - -function scrollSlide(slideNumber) { - slides[slideNumber].scrollIntoView({ - behavior: 'smooth' - }); -} - -/** - * [Reset scroll if window resized.] -**/ - -window.addEventListener('resize', () => { - scrollSlide(0); -}) - -let currSlide = 0; - -// Move slides to the left -lControl.addEventListener('click', () => { - currSlide > 0 ? currSlide-- : currSlide = slides.length - 1; - scrollSlide(currSlide); -}); - - -// Move slides to the right -rControl.addEventListener('click', () => { - currSlide < slides.length - 1 ? currSlide++ : currSlide = 0; - scrollSlide(currSlide); }); \ No newline at end of file diff --git a/scripts/slides.js b/scripts/slides.js new file mode 100644 index 0000000000000000000000000000000000000000..e5749866196a34ac71a449172b894e847d4d277c --- /dev/null +++ b/scripts/slides.js @@ -0,0 +1,44 @@ +/******************************** + * [Code to control slideshow.] * +*********************************/ + +const slides = Array.from(document.querySelectorAll(".slide")); +const carousel = document.querySelector(".carousel"); +const lControl = document.querySelector(".carousel-button__left"); +const rControl = document.querySelector(".carousel-button__right"); + +// Ensures first slide is visible on page load +slides[0].scrollIntoView(); + +/** + * [Scroll slide to specific index.] +**/ + +function scrollSlide(slideNumber) { + slides[slideNumber].scrollIntoView({ + behavior: 'smooth' + }); +} + +/** + * [Reset scroll if window resized.] +**/ + +window.addEventListener('resize', () => { + scrollSlide(0); +}) + +let currSlide = 0; + +// Move slides to the left +lControl.addEventListener('click', () => { + currSlide > 0 ? currSlide-- : currSlide = slides.length - 1; + scrollSlide(currSlide); +}); + + +// Move slides to the right +rControl.addEventListener('click', () => { + currSlide < slides.length - 1 ? currSlide++ : currSlide = 0; + scrollSlide(currSlide); +}); \ No newline at end of file diff --git a/scripts/tablist.js b/scripts/tablist.js new file mode 100644 index 0000000000000000000000000000000000000000..8425724374daf949ac73a85ab4d6ab98d281676d --- /dev/null +++ b/scripts/tablist.js @@ -0,0 +1,44 @@ +/***************************************** + * [Code to control directions tablist.] * +******************************************/ + +const tabs = Array.from(document.querySelectorAll('#location__transport [role="tab"]')); +const directionsContent = document.querySelector('#location__transport--content') +const directions = [ + `<p>The M Shed is located on the harbourside, a five to 10 minute walk from the city centre or a 20 minute walk from Bristol Temple Meads train station.</p>`, + + `<p>There is a dedicated cycle track to the south/back of M Shed. There is no cyclist access on the dockside at the front of the museum. There are several bicycle stands on Museum Street, outside the south/back entrance of the building. There's a tyre pump at the end of M Shed on Wapping Road.</p>`, + + `<p>You can catch a ferry from Bristol Temple Meads and Hotwells to Prince Street Bridge on the Floating Harbour, which is a five minute walk away.</p> + + <p>Boats run every 40-50 minutes – visit the <a href="www.bristolferry.com" target="_blank" rel="noopener">Bristol Ferry Boats website</a> for timetables and fares.</p>`, + + `<p>You can catch any bus with a city centre drop off – you’ll be dropped off at Broad Quay which is about a five minute walk away.</p> + + <p>For timetables please visit the <a href="https://travelwest.info/" target="_blank" rel="noopener">TravelWest website</a>.</p>`, + + `<p>The M Shed is located on the harbourside in the city centre on Wapping Road (BS1 4RN) around two miles from the M32 motorway.</p> + + <p>There are two car parks nearby at The Grove (BS1 4RB) and Wapping Wharf (BS1 4RH). You can find more car parks on the <a href="https://travelwest.info/drive/bristol-car-parking-map" target="_blank" rel="noopener">Travel West website</a>.</p>`, + + `<p>The M Shed is located on the harbourside in the city centre on Wapping Road (BS1 4RN) around two miles from the M32.</p> + + <p>For details on coach pick up/set down points and parking, visit the <a href="https://travelwest.info/bus/bristol-coach-parking/" target="_blank" rel="noopener">TravelWest website</a> or <a href="https://visitbristol.co.uk/your-visit/travelling-around-bristol/coach-parking" target="_blank" rel="noopener">Visit Bristol coach parking</a>.</p>`, + + `<p>It's about a 20 minute walk from Bristol Temple Meads train station to M Shed.</p> + + <p>A number of buses leave from Bristol Temple Meads to the city centre, around a five minute walk away.</p> + + <p>For timetables please visit the <a href="https://travelwest.info/" target="_blank" rel="noopener">TravelWest website</a>.</p>` +] + +for (let i = 0; i < tabs.length; i++) { + tabs[i].addEventListener('click', () => { + tabs.forEach(tab => { + tab.setAttribute('aria-selected', 'false'); + }) + tabs[i].setAttribute('aria-selected', 'true'); + + directionsContent.innerHTML = directions[i]; + }) +} \ No newline at end of file diff --git a/styles.css b/styles.css index 92e5e2053dda4376d922506ac7015134f612de08..0b3eec01eb2307152756adf9b6223c5325139ea0 100644 --- a/styles.css +++ b/styles.css @@ -22,63 +22,31 @@ :root { /** This is the primary background colour for the website **/ - /* USAGE: index.html:hero && rules.html:rules && All borders */ - --main-dark: #03080c; + --main-dark: #03080c; /** These are colours used for the main sections of the website **/ - /* USAGE: index.html:about && location.html:directions */ - --section-blue: #194263; - - /* USAGE: index.html:sign-up-form && location.html:map */ - --section-pink: #fb5aba; - - /* USAGE: rules.html:rules */ - --section-baby-pink: #fd98d4; - - /* USAGE: about.html:hero */ - --section-purple: #6e539a; - - /* USAGE: about.html:about */ - --section-purple-saturated: #6f277b; - - /** The colour of checked items in the sign up form **/ - /* USAGE: index.html:sign-up-form > online-in-person && index.html:sign-up-form > interests */ - --form-filled: #2c74ae; + --section-blue: #194263; + --section-pink: #fb5aba; + --section-baby-pink: #fd98d4; + --section-purple: #6e539a; + --section-purple-saturated: #6f277b; + --form-filled: #2c74ae; /** Pink accent colours used across website **/ - /* USAGE: index.html:hero > sign up button && rules.html:rules > sign up button */ - --accent-pink: #c30576; - - /* USAGE: index.html:hero > sign up button:active && rules.html:rules > sign up button:active */ - --accent-pink-lighter: #fa2aa6; - - /* USAGE: index.html:about > hyperlinks && locations.html:directions > hyperlinks */ - --accent-baby-pink: #fd98d4; + --accent-pink: #c30576; + --accent-pink-lighter: #fa2aa6; + --accent-baby-pink: #fd98d4; /** Blue accent colours used across website **/ - /* USAGE: - index.html:hero > text - && index.html:sign-up-form > sign up button - && about.html:hero > hyperlinks - && about.html:about > hyperlinks - && rules.html:rules > hyperlinks - && location.html:directions > selected tab + sign up button - */ - --accent-blue: #00eded; - - /* USAGE: index.html:sign-up-form > sign up button:active && location.html:directions > sign up button:active */ - --accent-blue-lighter: #54ffff; - - /* USAGE: All pages:visited hyperlinks */ - --accent-baby-blue: #c1ffff; + --accent-blue: #00eded; + --accent-blue-lighter: #54ffff; + --accent-baby-blue: #c1ffff; /** Purple accent colour used on homepage **/ - /* USAGE: index.html:hero > text */ - --accent-purple: #b144c4; + --accent-purple: #b144c4; /** Purple background colour for footer **/ - /* USAGE: All pages:footer && All pages:main navigation on mobile */ - --footer-purple: #1f172c; + --footer-purple: #1f172c; } * { @@ -230,6 +198,42 @@ mask: url("assets/icons/fbook-logo.svg"); } + /** Directions **/ + .icon--walking { + -webkit-mask: url("assets/icons/person-walking-solid.svg"); + mask: url("assets/icons/person-walking-solid.svg"); + } + + .icon--biking { + -webkit-mask: url("assets/icons/bicycle-solid.svg"); + mask: url("assets/icons/bicycle-solid.svg"); + } + + .icon--boat { + -webkit-mask: url("assets/icons/sailboat-solid.svg"); + mask: url("assets/icons/sailboat-solid.svg"); + } + + .icon--bus { + -webkit-mask: url("assets/icons/bus-solid.svg"); + mask: url("assets/icons/bus-solid.svg"); + } + + .icon--car { + -webkit-mask: url("assets/icons/car-solid.svg"); + mask: url("assets/icons/car-solid.svg"); + } + + .icon--coach { + -webkit-mask: url("assets/icons/bus-simple-solid.svg"); + mask: url("assets/icons/bus-simple-solid.svg"); + } + + .icon--train { + -webkit-mask: url("assets/icons/train-subway-solid.svg"); + mask: url("assets/icons/train-subway-solid.svg"); + } + /** Links **/ /* Add open in new tab icon for target blank links */ a[target="_blank"]::after { @@ -370,41 +374,54 @@ /*** Reusable Styles ***/ /** Hero **/ - /* USAGE: index.html && about.html */ - .hero { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-gap: 2rem; - } + /* USAGE: index.html && about.html */ + .hero { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2rem; + } - .hero article { - display: grid; - grid-auto-rows: auto; - } + .hero article { + display: grid; + grid-auto-rows: auto; + } - .hero > img, .hero figure img { - height: 100%; - } + .hero > img, .hero figure img { + height: 100%; + } - .hero figure { - position: relative; - } + .hero figure { + position: relative; + } - .hero figcaption { - position: absolute; - bottom: 0; + .hero figcaption { + position: absolute; + bottom: 0; - width: 100%; - padding: .5rem; + width: 100%; + padding: .5rem; - background-color: hsla(0, 0%, 0%, .85); - } + background-color: hsla(0, 0%, 0%, .85); + } - /*** Text-Section ***/ + /** Text-Section **/ .text-section { padding-inline: 4rem; } +/*** Page Backgrounds ***/ + #home, #rules { + background-color: var(--main-dark); + } + + #about { + background-color: var(--section-purple); + } + + #location { + background-color: var(--section-pink); + } + /*** Main Navigation Styles ***/ #main-navigation { @@ -416,19 +433,20 @@ justify-content: flex-end; align-items: center; - background-color: var(--main-dark); + background-color: inherit; transition: all .3s; } - #main-navigation img { - width: calc(100%/3); - min-width: calc(64em/6); + /** Event Logo **/ + #main-navigation img { + width: calc(100%/3); + min-width: calc(64em/6); - border: none; + border: none; - margin-right: auto; - } + margin-right: auto; + } #main-navigation .navbar { display: flex; @@ -453,18 +471,18 @@ } /** Colour navbar for different pages **/ - #about #main-navigation { - background-color: var(--section-purple); - } - #about #main-navigation .navbar a:hover, - #about #main-navigation .navbar a[aria-current="page"] { - color: var(--accent-blue); + #about #main-navigation .navbar a[aria-current="page"], + #location #main-navigation .navbar a:hover, + #location #main-navigation .navbar a[aria-current="page"] { + color: black; } #about #main-navigation .navbar a:hover span[class|="icon"], - #about #main-navigation .navbar a[aria-current="page"] span[class|="icon"] { - background-color: var(--accent-blue); + #about #main-navigation .navbar a[aria-current="page"] span[class|="icon"], + #location #main-navigation .navbar a:hover span[class|="icon"], + #location #main-navigation .navbar a[aria-current="page"] span[class|="icon"] { + background-color: black; } /** Toggleable class used to show and hide navbar **/ @@ -773,8 +791,6 @@ /*** About Page Styling ***/ /** Hero Section **/ #about .hero { - background-color: var(--section-purple); - color: white; } @@ -943,22 +959,110 @@ background-color: white; } - /* The blue colour is not very visible on the white background */ - .slide__text-content a { - color: var(--accent-pink); - } + .slide__text-content a { + color: var(--accent-pink); + } - .slide__text-content a::after { - background-color: var(--accent-pink); - } + .slide__text-content a::after { + background-color: var(--accent-pink); + } - .slide__text-content a:visited { - color: var(--accent-baby-pink); - } + .slide__text-content a:visited { + color: var(--accent-baby-pink); + } - .slide__text-content a:visited::after { - background-color: var(--accent-baby-pink); - } + .slide__text-content a:visited::after { + background-color: var(--accent-baby-pink); + } + +/*** Find Us Page Styling ***/ + #googleMap { + width: 100%; + height: 90vh; + + border: .15rem 0 solid; + border-color: var(--main-dark); + } + + #location main { + position: relative; + } + + /** Style the tablist with directions **/ + + #location .text-section { + /* Overlay the map */ + position: absolute; + top: 30%; + left: 2rem; + + padding: 1rem; + min-width: 30rem; + max-width: 50%; + + border: .15rem solid; + + background-color: var(--section-pink); + } + + #location__transport > div { + display: flex; + } + + #location__transport > div > ul li button { + position: relative; + z-index: 2; + padding: .5rem; + width: 6rem; + + border: var(--main-dark) .1rem solid; + border-bottom: 0; + + text-align: left; + } + + #location__transport > div > ul li:last-of-type button { + border-bottom: .1rem solid; + } + + #location__transport > div > ul li button span[class|="icon"]{ + background-color: black; + } + + #location__transport > div > ul li button[aria-selected="true"]{ + border-right-color: white; + + background-color: white; + } + + #location__transport--content { + display: flex; + flex-direction: column; + justify-content: center; + + padding: 2rem; + margin-left: -.1rem; + + border: var(--main-dark) .1rem solid; + + background-color: white; + } + + #location__transport--content a { + color: var(--accent-pink); + } + + #location__transport--content a::after { + background-color: var(--accent-pink); + } + + #location__transport--content a:visited { + color: var(--accent-baby-pink); + } + + #location__transport--content a:visited::after { + background-color: var(--accent-baby-pink); + } /* 64em == 1024px */ @media only screen and (min-width: 64em) { @@ -971,9 +1075,6 @@ .text-section { padding-inline: calc((100vw - 64rem + 4rem) / 2); } - - - /* */ } /* 37.5625em == 601px */ @@ -984,14 +1085,14 @@ } /*** Reusable Styles -- Tablet ***/ /** Hero **/ - /* USAGE: index.html && about.html */ - .hero { - grid-template-columns: 1fr; - } + /* USAGE: index.html && about.html */ + .hero { + grid-template-columns: 1fr; + } - .hero > img { - max-height: 50vh; - } + .hero > img { + max-height: 50vh; + } /** Text Section **/ .text-section { @@ -1187,12 +1288,20 @@ /** Reset anchor tag styles in nav because the list background should be coloured instead **/ #main-navigation .navbar a:hover, - #main-navigation .navbar a[aria-current="page"] { + #main-navigation .navbar a[aria-current="page"], + #about #main-navigation .navbar a:hover, + #about #main-navigation .navbar a[aria-current="page"], + #location #main-navigation .navbar a:hover, + #location #main-navigation .navbar a[aria-current="page"] { color: white; } #main-navigation .navbar a:hover span[class|="icon"], - #main-navigation .navbar a[aria-current="page"] span[class|="icon"] { + #main-navigation .navbar a[aria-current="page"] span[class|="icon"], + #about #main-navigation .navbar a:hover span[class|="icon"], + #about #main-navigation .navbar a[aria-current="page"] span[class|="icon"], + #location #main-navigation .navbar a:hover span[class|="icon"], + #location #main-navigation .navbar a[aria-current="page"] span[class|="icon"] { background-color: white; }