diff --git a/about.html b/about.html
index f251af893c36f49e182e85c21de3d73964a749e4..e8dc3db50263e9a5dd1bfe7e0e8056ab98566dbe 100644
--- a/about.html
+++ b/about.html
@@ -12,7 +12,7 @@
<body id="about">
<header id="main-navigation">
<img src="assets/main-logo/logo-long.min.svg" alt="Create Against Hate Logo">
- <!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
+ <!-- Navigation Bar -->
<nav aria-label="Create Against Hate Main Navigation">
<ul role="menubar" class="navbar">
<li role="none">
@@ -47,13 +47,14 @@
</button>
</header>
<main class="link--blue text--white">
- <!-- Hero -- uses class="hero" -- index.html && about.html -->
+ <!-- Hero -->
<section class="hero">
<article>
<h1>About</h1>
<img src="assets/img/Stop-Hate-UK-Logo.png" alt="Stop Hate UK Logo">
<p><i>Create Against Hate</i> was created in support of <i>Stop Hate UK</i>. Find out more about our chosen charity below!</p>
<p><i>Source: <a href="https://www.stophateuk.org/about-us/" target="_blank" rel="noopener">stophateuk.org/about-us/</a></i></p>
+ <!-- Quote from Stop Hate UK -->
<div class="quote text--dark">
<p>“</p>
<blockquote cite="https://www.stophateuk.org/about-us/">
@@ -84,7 +85,6 @@
</section>
</main>
<footer>
- <!-- Footer -->
<!-- Copyright -->
<p><i>Create Against Hate</i> © Robin King 2022</p>
<!-- Sitemap -->
diff --git a/index.html b/index.html
index 7d0f195bbc13af326befd96ee0d5826723fb6e99..2cfdbd7e2e985d69ccbbfd303a45063097bec875 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
<body id="home">
<header id="main-navigation">
- <!-- Navigation Bar, index.html && about.html && rules.html && location.html -->
+ <!-- Navigation Bar -->
<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 -->
<section id="home__hero" class="hero">
<article>
<img src="assets/main-logo/logo-dark.min.svg" alt="Create Against Hate Main Logo">
@@ -138,7 +138,6 @@
</section>
</main>
<footer>
- <!-- 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 89e9ec30095375ef39b9059524c68b38ac56c2fc..a3f13b3023fb6847630d6d2ddd4d3002ebfc5a14 100644
--- a/location.html
+++ b/location.html
@@ -56,15 +56,15 @@
<article class="link--pink">
<h1>Directions</h1>
<div class="tablist text--dark">
- <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 role="tablist" aria-orientation="vertical">
+ <button role="tab" aria-selected="true"><span class="icon--walking"></span>Walking</button>
+ <button role="tab"><span class="icon--biking"></span>Biking</button>
+ <button role="tab"><span class="icon--boat"></span>Boat</button>
+ <button role="tab"><span class="icon--bus"></span>Bus</button>
+ <button role="tab"><span class="icon--car"></span>Car</button>
+ <button role="tab"><span class="icon--coach"></span>Coach</button>
+ <button role="tab"><span class="icon--train"></span>Train</button>
+ </div>
<div class="tablist--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>
diff --git a/rules.html b/rules.html
index 3e2a0696a98e10413547a83a9ccf93fc75abb84f..9422a27d2fa1ebff37f856eb39fce21c66974661 100644
--- a/rules.html
+++ b/rules.html
@@ -85,10 +85,10 @@
<!-- Carousel -->
<div role="region" class="carousel link--pink" aria-roledescription="carousel" aria-label="Game jam suggestions">
<button type="button" class="carousel-button__left">
- ⮜
+ <
</button>
<button type="button" class="carousel-button__right">
- ⮞
+ >
</button>
<div class="carousel__inner">
<div role="group" class="slide" aria-roledescription="slide" aria-label="1 of 5">
@@ -126,7 +126,6 @@
</section>
</main>
<footer>
- <!-- Footer -- index.html && about.html && rules.html && location.html -->
<!-- Copyright -->
<p><i>Create Against Hate</i> © Robin King 2022</p>
<!-- Sitemap -->
diff --git a/styles.css b/styles.css
index 9472d5e8d5137aec162f321746642f24fae08626..3d442a3bae7513ad5f25eb4a1ca315cdb989c0bd 100644
--- a/styles.css
+++ b/styles.css
@@ -677,7 +677,12 @@
transition: all 1s ease;
}
- .tablist > ul li button {
+ .tablist > div[role="tablist"] {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .tablist > div[role="tablist"] button {
position: relative;
z-index: 2;
padding: .5rem;
@@ -689,15 +694,15 @@
text-align: left;
}
- .tablist > ul li:last-of-type button {
+ .tablist > div[role="tablist"] button:last-of-type {
border-bottom: .1rem solid;
}
- .tablist > ul li button span[class|="icon"]{
+ .tablist > div[role="tablist"] button span[class|="icon"]{
background-color: black;
}
- .tablist > ul li button[aria-selected="true"]{
+ .tablist > div[role="tablist"] button[aria-selected="true"]{
border-right: 0;
background-color: var(--accent-blue);
@@ -1129,11 +1134,12 @@
padding: 1em 2em;
- border: .1rem solid rgba(255, 255, 255, 0.2);
+ border: .1rem solid hsla(0, 0%, 100%, .5);
border-radius: 1rem;
- background-color: hsla(255, 255, 255, .7);
+ background-color: hsla(0, 0%, 100%, .3);
+ -webkit-backdrop-filter: blur(.5rem);
backdrop-filter: blur(.5rem);
}
@@ -1368,6 +1374,7 @@
text-align: center;
+ -webkit-backdrop-filter: initial;
backdrop-filter: initial;
}
}