From c1e3a50deacd6cb57208b40afcb7cb23b55198dc Mon Sep 17 00:00:00 2001
From: robee <robin.code22@gmail.com>
Date: Fri, 21 Apr 2023 23:47:35 +0100
Subject: [PATCH] fix(*): restructure css
---
about.html | 4 +-
index.html | 28 +-
location.html | 8 +-
rules.html | 12 +-
scripts/slides.js | 3 -
scripts/tablist.js | 6 +-
styles.css | 1522 +++++++++++++++++++++++---------------------
7 files changed, 822 insertions(+), 761 deletions(-)
diff --git a/about.html b/about.html
index 76dffb8..59875e1 100644
--- a/about.html
+++ b/about.html
@@ -46,7 +46,7 @@
<span class="hamburger--bottom"></span>
</button>
</header>
- <main>
+ <main class="link--blue text--white">
<!-- Hero -- uses class="hero" -- index.html && about.html -->
<section class="hero">
<article>
@@ -54,7 +54,7 @@
<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>
- <div class="quote">
+ <div class="quote text--dark">
<p>“</p>
<blockquote cite="https://www.stophateuk.org/about-us/">
<i>Stop Hate UK</i> is a leading anti-hate and anti-discrimination organisation for corporate, statutory, and community sectors. Today, we operate the UK's only free dedicated 24-hour anti-Hate Crime reporting service for all monitored strands of a person's identity or perceived identity.
diff --git a/index.html b/index.html
index cea14e7..7d0f195 100644
--- a/index.html
+++ b/index.html
@@ -52,12 +52,12 @@
<img src="assets/main-logo/logo-dark.min.svg" alt="Create Against Hate Main Logo">
<p>26 – 28 August 2023</p>
<p>Hosted at the M Shed or online via Zoom</p>
- <div>
+ <div class="flex">
<a href="https://twitter.com" class="btn--twitter" target="_blank" rel="noopener"><span
class="icon--twitter"></span>Tweet</a>
<a href="#home__sign-up" class="btn--primary">Sign Up Now</a>
</div>
- <div>
+ <div class="flex">
<p>Created in support of:</p>
<img src="assets/img/Stop-Hate-UK-Logo.png" alt="Stop Hate UK Logo">
</div>
@@ -65,24 +65,17 @@
<img src="assets/img/placeholder-sketches/hero.jpg" alt="Create Against Hate Hero Image">
</section>
<!-- About -->
- <section id="home__about">
+ <section id="home__about" class="text--white link--pink">
<h2>About the Jam</h2>
<article class="grid-2x2">
<img src="assets/img/placeholder-sketches/gaming.jpg"
alt="Drawing of two characters playing a video game and having a good time">
<div>
<p>
- <i>Create Against Hate</i> is a manga-themed charity game jam created in support of <a
- href="https://www.stophateuk.org/" target="_blank" rel="noopener"><i>Stop Hate UK</i></a>.
- <i>Stop Hate UK</i> is a UK-based charity dedicated to the prevention of hate crimes and to
- support the victims of hate-based discrimination. <a href="about.html">Find out more →</a>
+ <i>Create Against Hate</i> is a manga-themed charity game jam created in support of <a href="https://www.stophateuk.org/" target="_blank" rel="noopener"><i>Stop Hate UK</i></a>. <i>Stop Hate UK</i> is a UK-based charity dedicated to the prevention of hate crimes and to support the victims of hate-based discrimination. <a href="about.html">Find out more →</a>
</p>
<p>
- In particular, hate crimes against East and South East Asian communities have increased as a
- result of the COVID-19 pandemic, with reports rising 50% over two years, prompting the creation
- of the <a href="https://www.stophateuk.org/on-your-side-report-and-support-service/"
- target="_blank" rel="noopener"><i>On Your Side: Support and Report Service</i></a>, which
- <i>Stop Hate UK</i> helps lead.
+ In particular, hate crimes against East and South East Asian communities have increased as a result of the COVID-19 pandemic, with reports rising 50% over two years, prompting the creation of the <a href="https://www.stophateuk.org/on-your-side-report-and-support-service/" target="_blank" rel="noopener"><i>On Your Side: Support and Report Service</i></a>, which <i>Stop Hate UK</i> helps lead.
</p>
</div>
<div>
@@ -92,8 +85,7 @@
jam dedicated to combatting hate. <a href="rules.html">Click here for rules and ideas →</a>
</p>
<p>
- All games created during the jam will be available for free with the option to donate to <i>Stop
- Hate UK</i> at checkout.
+ All games created during the jam will be available for free with the option to donate to <i>Stop Hate UK</i> at checkout.
</p>
</div>
<img src="assets/img/placeholder-sketches/donations.jpg"
@@ -102,7 +94,7 @@
</section>
<!-- Sign Up Form -->
<section id="home__sign-up">
- <form action="./index.html" method="post" autocomplete="on">
+ <form action="index.html" method="post" autocomplete="on">
<h2>Sign Up Now</h2>
<fieldset class="personal-details">
<input type="text" placeholder="First Name (Required)" required>
@@ -110,11 +102,11 @@
<input type="email" placeholder="Email (Required)" required>
<input type="tel" placeholder="Telephone (Optional)">
</fieldset>
- <fieldset class="online-in-person" role="radiogroup">
+ <fieldset class="online-in-person flex" role="radiogroup">
<input type="radio" name="online-in-person" id="online" value="online">
- <label for="online">Online</label>
+ <label for="online" class="flex jc-centre ai-centre">Online</label>
<input type="radio" name="online-in-person" id="in-person" value="in-person">
- <label for="in-person">In Person</label>
+ <label for="in-person" class="flex jc-centre ai-centre">In Person</label>
</fieldset>
<fieldset class="areas-of-interest">
<legend>Areas of Interest</legend>
diff --git a/location.html b/location.html
index 323ac41..21d0b68 100644
--- a/location.html
+++ b/location.html
@@ -49,12 +49,12 @@
</header>
<main>
<!-- Map -->
- <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>
+ <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" 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">
+ <article class="link--pink">
<h1>Directions</h1>
- <div>
+ <div class="tablist">
<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>
@@ -64,7 +64,7 @@
<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">
+ <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>
</div>
diff --git a/rules.html b/rules.html
index d24c793..3e2a069 100644
--- a/rules.html
+++ b/rules.html
@@ -13,7 +13,7 @@
<body id="rules">
<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 -->
<nav aria-label="Create Against Hate Main Navigation">
<ul role="menubar" class="navbar">
<li role="none">
@@ -48,8 +48,8 @@
</button>
</header>
<main>
- <!-- Rules -- uses class="text-section" -- about.html && rules.html && location.html -->
- <section id="rules__jam-rules" class="text-section">
+ <!-- Rules -->
+ <section id="rules__jam-rules" class="text-section text--white link--blue">
<h1>Jam Rules</h1>
<p>We want all our participants to have a great time, make new friends and finish their game knowing they've contributed to an amazing cause in <i>Stop Hate UK</i>!</p>
<p>To make this jam a success, all participants must comply with the following rules:</p>
@@ -77,13 +77,13 @@
Sign Up Now!
</a>
</section>
- <!-- Ideas -- uses class="text-section" -- about.html && rules.html && location.html -->
+ <!-- Ideas -->
<section id="rules__get-help" class="text-section">
<h2>Help! I literally have no ideas!</h2>
<p>We get it! Someone told you this jam's screaming your name, but you're currently wondering <i>"what on Earth <b>is</b> a manga, anyway?"</i> Or maybe it's already August 26 and every member of your team was hoping someone else would have some ideas. The clock's ticking and you're starting to panic!</p>
<p>Worry no more! We've created a list of suggestions which all participants are free to use.</p>
- <!-- Slideshow -->
- <div role="region" class="carousel" aria-roledescription="carousel" aria-label="Game jam suggestions">
+ <!-- Carousel -->
+ <div role="region" class="carousel link--pink" aria-roledescription="carousel" aria-label="Game jam suggestions">
<button type="button" class="carousel-button__left">
⮜
</button>
diff --git a/scripts/slides.js b/scripts/slides.js
index e574986..8390b2a 100644
--- a/scripts/slides.js
+++ b/scripts/slides.js
@@ -7,9 +7,6 @@ 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.]
**/
diff --git a/scripts/tablist.js b/scripts/tablist.js
index 8425724..b1c3f87 100644
--- a/scripts/tablist.js
+++ b/scripts/tablist.js
@@ -2,8 +2,8 @@
* [Code to control directions tablist.] *
******************************************/
-const tabs = Array.from(document.querySelectorAll('#location__transport [role="tab"]'));
-const directionsContent = document.querySelector('#location__transport--content')
+const tabs = Array.from(document.querySelectorAll('.tablist [role="tab"]'));
+const directionsContent = document.querySelector('.tablist--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>`,
@@ -13,7 +13,7 @@ const directions = [
<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>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>`,
diff --git a/styles.css b/styles.css
index 0b3eec0..cd6316b 100644
--- a/styles.css
+++ b/styles.css
@@ -1,146 +1,270 @@
/*** CREDITS ***/
/** Dynamic text sizes (like for h1 and h2) calculated using https://clamp.font-size.app **/
-/* Base stylesheet is for desktop, media queries alter layout for tablet and mobile */
+/**** STRUCTURE ****/
+ /*** Font Imports ***/
+ /** Open Sans Font Import **/
+ /** Poppins Bold Font Import **/
+ /** Segoe UI Semilight Configuration **/
+
+ /*** Global Styles ***/
+ /** Colour Variables **/
+ /** Remove all margins, padding and set box-sizing **/
+ /** Default background-color, font and scroll-behaviour **/
+ /** Set body to grid layout **/
+ /** Style main sections of website **/
+ /** Create border present between all sections **/
+ /** Text Styling **/
+ /** Link Styling **/
+ /** Creates border present around majority of images **/
+ /** Page Backgrounds **/
+
+ /*** Icons ***/
+ /** Define extendable icon class **/
+ /** Navigation **/
+ /** Social **/
+ /** Directions **/
+ /** Links **/
+
+ /*** Components ***/
+ /** Buttons **/
+ /** Carousel **/
+ /** Navigation Bar **/
+ /** Tablist **/
+
+ /*** Utilities ***/
+ /** Flex **/
+ /** Colours **/
+
+ /*** Reusable Layouts ***/
+ /** Hero **/
+ /** Text-Section **/
+
+ /*** Homepage Styles ***/
+ /** Hero Section **/
+ /** About Section **/
+ /** Sign Up Form Section **/
+
+ /*** About Page Styles ***/
+ /** Hero Section **/
+ /** About Section **/
+
+ /*** Rules Page Styles ***/
+ /** Rules Section **/
+ /** Help Section **/
+
+ /*** Find Us Page Styling ***/
+ /** Style Directions **/
+
+ /*** Desktop-Specific Styles ***/
+ /** Global Styles **/
+ /** Reusable Layouts **/
+
+ /*** Tablet-Specific Styles ***/
+ /** Global Styles **/
+ /** Components **/
+ /* Navigation Bar */
+ /** Reusable Layouts **/
+ /* Hero */
+ /* Text Section */
+ /** Homepage Styles **/
+ /* Hero Section */
+ /* About Section */
+ /* Sign Up Form Section */
+ /** Rules Page Styles **/
+
+ /*** Mobile-Specific Styles ***/
+ /** Global Styles **/
+ /* Footer Styles */
+ /** Components **/
+ /* Navigation Bar */
+ /** Homepage Styles **/
+ /* Sign Up Form Section */
+
+/************************************************************************************************************************************************/
+/************************************************************************************************************************************************/
/*** Font Imports ***/
- /* Poppins Bold Font Import */
- @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
+ /** Open Sans Font Import (Fallback for Segoe UI) **/
+ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,700;1,300;1,700&display=swap');
+
+ /** Poppins Bold Font Import **/
+ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
+
+ /** Segoe UI Semilight Configuration **/
+ @font-face {
+ font-family: "Segoe UI";
+ font-weight: 300;
+ src: local("Segoe UI Semilight");
+ }
+
- /* Open Sans Font Import */
- @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,700;1,300;1,700&display=swap');
- /* Segoe UI Semilight Configuration */
- @font-face {
- font-family: "Segoe UI";
- font-weight: 300;
- src: local("Segoe UI Semilight");
- }
/*** Global Styles ***/
- :root {
- /** This is the primary background colour for the website **/
- --main-dark: #03080c;
-
- /** These are colours used for the main sections of the website **/
- --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 **/
- --accent-pink: #c30576;
- --accent-pink-lighter: #fa2aa6;
- --accent-baby-pink: #fd98d4;
-
- /** Blue accent colours used across website **/
- --accent-blue: #00eded;
- --accent-blue-lighter: #54ffff;
- --accent-baby-blue: #c1ffff;
-
- /** Purple accent colour used on homepage **/
- --accent-purple: #b144c4;
-
- /** Purple background colour for footer **/
- --footer-purple: #1f172c;
- }
+ /** Colour Variables **/
+ :root {
+ /** This is the primary background colour for the website **/
+ --main-dark: #03080c;
- * {
- margin: 0;
- padding: 0;
+ /** These are colours used for the main sections of the website **/
+ --section-blue: #194263;
+ --section-pink: #fb5aba;
+ --section-baby-pink: #fd98d4;
+ --section-purple: #6e539a;
+ --section-purple-saturated: #6f277b;
+ --form-filled: #2c74ae;
- box-sizing: border-box;
- }
+ /** Pink accent colours used across website **/
+ --accent-pink: #c30576;
+ --accent-pink-lighter: #fa2aa6;
+ --accent-baby-pink: #fd98d4;
- html {
- background-color: var(--main-dark);
+ /** Blue accent colours used across website **/
+ --accent-blue: #00eded;
+ --accent-blue-lighter: #54ffff;
- font-family: "Segoe UI", "Open Sans", Arial, Helvetica, sans-serif;
- font-weight: 300;
+ /** Purple accent colour used on homepage **/
+ --accent-purple: #b144c4;
- scroll-behavior: smooth;
- }
+ /** Purple background colour for footer **/
+ --footer-purple: #1f172c;
+ }
+
+ /** Remove all margins, padding and set box-sizing **/
+ * {
+ margin: 0;
+ padding: 0;
+
+ box-sizing: border-box;
+ }
+
+ /** Default background-color, font and scroll-behaviour **/
+ html {
+ background-color: var(--main-dark);
+
+ font-family: "Segoe UI", "Open Sans", Arial, Helvetica, sans-serif;
+ font-weight: 300;
+
+ scroll-behavior: smooth;
+ }
- /** Put content in grid **/
+ /** Set body to grid layout **/
body {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
-
- section {
- /* Creates border present between all sections */
+
+ /** Create border present between all sections **/
+ section {
border-bottom: var(--main-dark) .15rem solid;
- }
+ }
- footer {
- background-color: var(--footer-purple);
- }
+ /** Style main sections of website **/
+ section, header, footer {
+ padding: 2rem;
+ }
- section, header, footer {
- padding: 2rem;
- }
+ header {
+ padding-block: 1rem;
+ }
- header {
- padding-block: 1rem;
- }
+ footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1em;
+
+ color: white;
+
+ background-color: var(--footer-purple);
+ }
+
+ footer p {
+ margin: 0;
+ }
+
+ footer a {
+ text-decoration: underline;
+ }
+
+ footer a, footer a:visited {
+ color: white;
+ }
+
+ footer ul {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ footer ul li {
+ margin-right: 1em;
+ }
+
+ footer ul li span[class|="icon"] {
+ margin: 0;
+ }
- h1, h2, h3, h4, h5, h6 {
- margin-bottom: .5em;
+ /** Text Styling **/
+ h1, h2 {
+ margin-bottom: .5em;
- font-family: "Poppins", sans-serif;
- }
+ font-family: "Poppins", sans-serif;
+ font-size: clamp(1.75rem, 0.8917rem + 3.8147vw, 3.3331rem);
+ }
- h1, h2 {
- font-size: clamp(1.75rem, 0.8917rem + 3.8147vw, 3.3331rem);
- }
+ p {
+ margin-bottom: 1em;
+ }
- p {
- margin-bottom: 1em;
- }
+ ul {
+ list-style-type: none;
+ }
+
+ button {
+ border: none;
+
+ cursor: pointer;
+ }
/** Link Styling **/
- a {
- color: var(--accent-blue);
+ a, a:visited {
+ color: white;
text-decoration: none;
}
- #home__about a, #locations__directions a {
- color: var(--accent-baby-pink);
+ /** Creates border present around majority of images **/
+ img {
+ max-width: 100%;
+ border: var(--main-dark) solid;
+ border-width: .25rem .35rem .35rem .25rem;
+
+ object-fit: cover;
}
-
- a:visited, #home__about a:visited, #locations__directions a:visited {
- color: var(--accent-baby-blue);
+
+ /** Page Backgrounds **/
+ #home, #rules {
+ background-color: var(--main-dark);
}
- ul {
- list-style-type: none;
- }
-
- img {
- max-width: 100%;
+ #about {
+ background-color: var(--section-purple);
+ }
- /* Creates border present around majority of images */
- border: var(--main-dark) solid;
- border-width: .25rem .35rem .35rem .25rem;
+ #location {
+ background-color: var(--section-pink);
+ }
- object-fit: cover;
- }
- button {
- border: none;
- cursor: pointer;
- }
/*** Icons ***/
/** Define extendable icon class **/
- /** Icons created using mask can easily have their colour and size manipulated relative to their label **/
+ /* Icons created using mask can easily have their colour and size manipulated relative to their label */
span[class|="icon"] {
display: inline-block;
@@ -149,7 +273,7 @@
margin-right: .5em;
- background-color: #fff;
+ background-color: white;
transform: translateY(15%);
@@ -182,7 +306,6 @@
}
/** Social **/
-
.icon--twitter {
-webkit-mask: url("assets/icons/twitter-logo-white.svg");
mask: url("assets/icons/twitter-logo-white.svg");
@@ -243,11 +366,9 @@
-webkit-mask-size: contain;
mask-size: contain;
- background-color: var(--accent-blue);
-
display: inline-block;
- margin-left: .2em;
+ margin-left: .4em;
height: .5em;
width: .5em;
@@ -262,314 +383,423 @@
height: 0;
width: 0;
}
-
- #home__about a[target="_blank"]::after, #locations__directions a[target="_blank"]::after {
- background-color: var(--accent-baby-pink);
- }
-
- a:visited::after, #home__about a:visited::after, #locations__directions a:visited::after {
- background-color: var(--accent-baby-blue);
- }
-/*** Buttons ***/
- /** Define extendable btn class **/
- a[class|="btn"],
- button[class|="btn"] {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 2.5rem;
- width: 35%;
- max-width: 14rem;
- min-width: 8rem;
- margin: 5%;
+/*** Components ***/
+ /** Buttons **/
+ /* Define extendable btn class */
+ [class|="btn"] {
+ position: relative;
- color: white;
- font-size: 1rem;
- }
+ display: flex;
+ align-items: center;
+ justify-content: center;
- /** Main Site Buttons **/
+ height: 2.5rem;
+ width: 35%;
+ max-width: 14rem;
+ min-width: 8rem;
- .btn--primary {
- box-shadow: .25rem .25rem 0 white;
+ margin: 5%;
- background-color: var(--accent-pink);
-
- font-family: "Poppins", sans-serif;
-
- transition: all .25s;
- text-transform: uppercase;
- }
-
- .btn--primary:hover {
- box-shadow: 0 0 0 white;
- }
-
- .btn--primary:active {
- background-color: var(--accent-pink-lighter);
- }
-
- /* Button outline on click */
- .btn--primary::after {
- content: "";
- position: absolute;
-
- transition: all .025s;
- transform: scale(.85);
- }
-
- .btn--primary:active::after {
- height: 3.5rem;
- width: 110%;
- max-width: 15rem;
- min-width: 9rem;
- border: .25rem solid var(--accent-pink-lighter);
- border-radius: .2rem;
-
- transform: scale(1);
- }
-
- /* Modifiers for blue button */
- .btn--primary.blue {
- background-color: var(--accent-blue);
- box-shadow: .25rem .25rem 0 var(--main-dark);
-
- color: var(--main-dark);
+ font-size: 1rem;
}
+
+ /* Main Site Buttons */
+ .btn--primary {
+ box-shadow: .25rem .25rem 0 white;
+
+ background-color: var(--accent-pink);
- .btn--primary.blue:hover {
- box-shadow: 0 0 0 var(--main-dark);
- }
+ font-family: "Poppins", sans-serif;
- .btn--primary.blue:active {
- background-color: var(--accent-blue-lighter);
+ transition: all .25s;
+ text-transform: uppercase;
}
-
- .btn--primary.blue:active::after {
- border: .25rem solid var(--accent-blue-lighter);
+
+ .btn--primary:hover {
+ box-shadow: 0 0 0 white;
}
- /** Twitter Button **/
- /* Twitter Share Button */
- .btn--twitter {
- border-radius: 1.25rem;
-
- background-color: #1d9bf0;
- box-shadow: none;
-
- font-family: "Segoe UI", sans-serif;
+ .btn--primary:active {
+ background-color: var(--accent-pink-lighter);
}
+
+ /* Button outline on click */
+ .btn--primary::after {
+ content: "";
+ position: absolute;
+
+ transition: all .025s;
+ transform: scale(.85);
+ }
+
+ .btn--primary:active::after {
+ height: 3.5rem;
+ width: 110%;
+ max-width: 15rem;
+ min-width: 9rem;
+ border: .25rem solid var(--accent-pink-lighter);
+ border-radius: .2rem;
+
+ transform: scale(1);
+ }
+
+ /* Modifiers for blue button */
+ .btn--primary.blue {
+ background-color: var(--accent-blue);
+ box-shadow: .25rem .25rem 0 var(--main-dark);
+
+ color: var(--main-dark);
+ }
+
+ .btn--primary.blue:hover {
+ box-shadow: 0 0 0 var(--main-dark);
+ }
+
+ .btn--primary.blue:active {
+ background-color: var(--accent-blue-lighter);
+ }
+
+ .btn--primary.blue:active::after {
+ border: .25rem solid var(--accent-blue-lighter);
+ }
- .btn--twitter:hover {
- background-color: #62c0ff;
- }
+ /* Twitter Button */
+ .btn--twitter {
+ border-radius: 1.25rem;
- .btn--twitter:active {
- background-color: #1077bb;
- }
+ background-color: #1d9bf0;
+ box-shadow: none;
-/*** Reusable Styles ***/
- /** Hero **/
- /* USAGE: index.html && about.html */
- .hero {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- grid-gap: 2rem;
- }
+ font-family: "Segoe UI", sans-serif;
+ }
- .hero article {
- display: grid;
- grid-auto-rows: auto;
- }
+ .btn--twitter:hover {
+ background-color: #62c0ff;
+ }
- .hero > img, .hero figure img {
- height: 100%;
- }
+ .btn--twitter:active {
+ background-color: #1077bb;
+ }
- .hero figure {
+ /** Carousel **/
+ .carousel {
position: relative;
- }
- .hero figcaption {
- position: absolute;
- bottom: 0;
+ margin: auto;
- width: 100%;
- padding: .5rem;
+ border: var(--main-dark) solid;
+ border-width: .25rem .35rem .35rem .25rem;
- background-color: hsla(0, 0%, 0%, .85);
- }
+ width: 60vw;
+ height: 50vh;
- /** Text-Section **/
- .text-section {
- padding-inline: 4rem;
+ max-width: 80%;
}
-/*** Page Backgrounds ***/
- #home, #rules {
- background-color: var(--main-dark);
- }
+ .carousel__inner {
+ display: flex;
- #about {
- background-color: var(--section-purple);
- }
+ height: 100%;
- #location {
- background-color: var(--section-pink);
- }
+ overflow: hidden;
+ }
-/*** Main Navigation Styles ***/
+ /* Button Controls */
+ button[class^="carousel-button"] {
+ position: absolute;
- #main-navigation {
- /* This will apply when the js script applies position:sticky on scroll */
- top: -100%;
- z-index: 3;
+ background-color: transparent;
+ font-size: 3rem;
- display: flex;
- justify-content: flex-end;
- align-items: center;
+ margin: .25em;
- background-color: inherit;
+ top: 50%;
+ z-index: 2;
- transition: all .3s;
- }
+ transform: translateY(-50%);
+ }
- /** Event Logo **/
- #main-navigation img {
- width: calc(100%/3);
- min-width: calc(64em/6);
+ .carousel-button__right {
+ right: 0;
+ }
- border: none;
+ .slide {
+ display: flex;
- margin-right: auto;
- }
+ flex-shrink: 0;
- #main-navigation .navbar {
- display: flex;
- }
+ width: 100%;
+ height: 100%;
+ }
- #main-navigation .navbar li {
- padding: 1em .5em;
- }
+ .slide img {
+ object-position: 0% 0%;
+ border-width: 0 .25rem 0 0;
+
+ width: 60%;
+ min-width: 0;
+ height: 100%;
+ }
- #main-navigation .navbar a {
- color: white;
- }
+ .slide__text-content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
- #main-navigation .navbar a:hover,
- #main-navigation .navbar a[aria-current="page"] {
- color: var(--accent-pink);
- }
+ padding: 5%;
+ padding-right: 3rem;
- #main-navigation .navbar a:hover span[class|="icon"],
- #main-navigation .navbar a[aria-current="page"] span[class|="icon"] {
- background-color: var(--accent-pink);
- }
+ width: 40%;
+ height: 100%;
- /** Colour navbar for different pages **/
- #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: black;
+ background-color: white;
}
- #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: black;
- }
+ /** Navigation Bar **/
+ #main-navigation {
+ /* This will apply when the js script applies position:sticky on scroll */
+ top: -100%;
+ z-index: 3;
+
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+
+ background-color: inherit;
- /** Toggleable class used to show and hide navbar **/
- #main-navigation.show {
- top: 0;
+ transition: all .3s;
}
- /** Hamburger button for tablet **/
- .hamburger {
- position: fixed;
- top: 1.5rem;
- right: 1.5rem;
+ /* Event Logo */
+ #main-navigation img {
+ width: calc(100%/3);
+ min-width: calc(64em/6);
- display: none;
+ border: none;
- width: 2.5rem;
+ margin-right: auto;
+ }
- background-color: transparent;
+ #main-navigation .navbar {
+ display: flex;
}
- /** Create the bars of the hamburger button **/
- span[class|="hamburger"] {
- display: block;
+ #main-navigation .navbar li {
+ padding: 1em .5em;
- width: 100%;
- height: .3rem;
+ background-color: inherit;
+ }
- margin-bottom: .5rem;
+ /* Colour links */
+ #main-navigation .navbar li a[aria-current="page"],
+ #main-navigation .navbar li a:hover {
+ color: var(--accent-pink);
+ }
- border-radius: .15rem;
+ #main-navigation .navbar li a[aria-current="page"] span[class|="icon"],
+ #main-navigation .navbar li a:hover span[class|="icon"] {
+ background-color: var(--accent-pink);
+ }
- background-color: white;
+ #about #main-navigation .navbar li a[aria-current="page"],
+ #about #main-navigation .navbar li a:hover,
+ #location #main-navigation .navbar li a[aria-current="page"],
+ #location #main-navigation .navbar li a:hover {
+ color: var(--main-dark);
+ }
- box-shadow: 3px 5px 19px 0px rgba(0, 0, 0, .41);
+ #about #main-navigation .navbar li a[aria-current="page"] span[class|="icon"],
+ #about #main-navigation .navbar li a:hover span[class|="icon"],
+ #location #main-navigation .navbar li a[aria-current="page"] span[class|="icon"],
+ #location #main-navigation .navbar li a:hover span[class|="icon"] {
+ background-color: var(--main-dark);
+ }
- transition: all .3s;
- }
+ /* Toggleable class used to show and hide navbar */
+ #main-navigation.show {
+ top: 0;
+ }
- /** Animate hamburger **/
+ /* Hamburger button for tablet */
+ .hamburger {
+ position: fixed;
+ top: 1.5rem;
+ right: 1.5rem;
- .hamburger.open span[class|="hamburger"]:nth-of-type(1) {
- transform: rotate(-35deg) scaleX(.5) translate(-55%, 0);
- }
+ display: none;
- .hamburger.open span[class|="hamburger"]:nth-of-type(2) {
- transform-origin: left;
- transform: scaleX(.85);
- }
+ width: 2.5rem;
- .hamburger.open span[class|="hamburger"]:nth-of-type(3) {
- transform: rotate(35deg) scaleX(.5) translate(-55%, 0);
- }
+ background-color: transparent;
+ }
-/*** Footer Styles ***/
- footer {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 1em;
+ /* Create the bars of the hamburger button */
+ span[class|="hamburger"] {
+ display: block;
- color: white;
- }
+ width: 100%;
+ height: .3rem;
- footer p {
- margin: 0;
- }
+ margin-bottom: .5rem;
- footer a {
- text-decoration: underline;
- }
+ border-radius: .15rem;
- footer a, footer a:visited {
- color: white;
- }
+ background-color: white;
+
+ box-shadow: 3px 5px 19px 0px rgba(0, 0, 0, .41);
+
+ transition: all .3s;
+ }
+
+ /* Animate hamburger */
+ .hamburger.open span[class|="hamburger"]:nth-of-type(1) {
+ transform: rotate(-35deg) scaleX(.5) translate(-55%, 0);
+ }
+
+ .hamburger.open span[class|="hamburger"]:nth-of-type(2) {
+ transform-origin: left;
+ transform: scaleX(.85);
+ }
+
+ .hamburger.open span[class|="hamburger"]:nth-of-type(3) {
+ transform: rotate(35deg) scaleX(.5) translate(-55%, 0);
+ }
+
+ /** Tablist **/
+ .tablist {
+ display: flex;
+ }
+
+ .tablist > ul li button {
+ position: relative;
+ z-index: 2;
+ padding: .5rem;
+ width: 6rem;
+
+ border: var(--main-dark) .1rem solid;
+ border-bottom: 0;
+
+ text-align: left;
+ }
+
+ .tablist > ul li:last-of-type button {
+ border-bottom: .1rem solid;
+ }
+
+ .tablist > ul li button span[class|="icon"]{
+ background-color: black;
+ }
+
+ .tablist > ul li button[aria-selected="true"]{
+ border-right: 0;
+
+ background-color: var(--accent-blue);
+ }
+
+ .tablist--content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ padding: 2rem;
+ margin-left: -.1rem;
+
+ border: var(--main-dark) .1rem solid;
+
+ background-color: white;
+ }
+
+
+
+
+/*** Utilities ***/
+ /** Flex **/
+ .flex {
+ display: flex;
+ }
+
+ .jc-centre {
+ justify-content: center;
+ }
+ .ai-centre {
+ align-items: center;
+ }
+
+ /** Colours **/
+ /* Pink Links */
+ .link--pink a:not([class|="btn"]), .link--pink a:not([class|="btn"]):visited {
+ color: var(--accent-baby-pink);
+ }
+
+ .link--pink a[target="_blank"]::after, .link--pink a[target="_blank"]:visited::after {
+ background-color: var(--accent-baby-pink);
+ }
+
+ /* Blue Links */
+ .link--blue a:not([class|="btn"]), .link--blue a:not([class|="btn"]):visited {
+ color: var(--accent-blue);
+ }
+
+ .link--blue a[target="_blank"]::after, .link--blue a[target="_blank"]:visited::after {
+ background-color: var(--accent-blue);
+ }
+
+ /* White Text */
+ .text--white {
+ color: white;
+ }
+
+ /* Dark Text */
+ .text--dark {
+ color: var(--main-dark);
+ }
+
+
+
+
+/*** Reusable Layouts ***/
+ /** Hero **/
+ /* 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 > img, .hero figure img {
+ height: 100%;
+ }
+
+ .hero figure {
+ position: relative;
+ }
+
+ .hero figcaption {
+ position: absolute;
+ bottom: 0;
+
+ width: 100%;
+ padding: .5rem;
+
+ background-color: hsla(0, 0%, 0%, .85);
+ }
+
+ /** Text-Section **/
+ .text-section {
+ padding-inline: 4rem;
+ }
- footer ul {
- display: flex;
- flex-wrap: wrap;
- }
- footer ul li {
- margin-right: 1em;
- }
- footer ul li span[class|="icon"] {
- margin: 0;
- }
/*** Homepage Styles ***/
/** Hero Section **/
@@ -593,8 +823,6 @@
}
#home .hero article > * {
- display: flex;
-
justify-content: space-evenly;
}
@@ -611,7 +839,7 @@
}
/* Align the Stop Hate UK Logo */
- #home .hero article div:last-of-type {
+ #home .hero article div:last-of-type {
flex-wrap: wrap;
gap: 1em;
@@ -631,8 +859,6 @@
/** About Section **/
#home__about {
background-color: var(--section-blue);
-
- color: white;
}
.grid-2x2 {
@@ -644,7 +870,7 @@
.grid-2x2 img {
width: 100%;
- /* This trick makes the image height correspond to the text height instead of vice versa */
+ /* This makes the image height correspond to the text height instead of vice versa */
height: 0;
min-height: 100%;
}
@@ -692,19 +918,11 @@
opacity: 0;
}
- .online-in-person {
- display: flex;
- }
-
.online-in-person input[type="radio"]:focus + label {
border-color: var(--accent-blue);
}
.online-in-person label {
- display: flex;
- align-items: center;
- justify-content: center;
-
margin-block: 1rem;
height: 2rem;
@@ -788,12 +1006,11 @@
cursor: pointer;
}
-/*** About Page Styling ***/
- /** Hero Section **/
- #about .hero {
- color: white;
- }
+
+
+/*** About Page Styles ***/
+ /** Hero Section **/
#about .hero h1 {
text-align: center;
}
@@ -824,8 +1041,6 @@
border-block: .15rem var(--main-dark) solid;
background-color: white;
-
- color: var(--main-dark);
}
#about .hero .quote p {
@@ -854,19 +1069,16 @@
/** About Section **/
#about .text-section {
background-color: var(--section-purple-saturated);
-
- color: white;
}
-/*** Rules Page Styling ***/
+
+
+
+/*** Rules Page Styles ***/
h1, h2 {
text-align: center;
}
/** Rules Section **/
- #rules__jam-rules.text-section {
- color: white;
- }
-
#rules__jam-rules ol {
list-style-position: inside;
}
@@ -885,97 +1097,9 @@
}
- /* Slideshow */
- .carousel {
- position: relative;
-
- margin: auto;
-
- border: var(--main-dark) solid;
- border-width: .25rem .35rem .35rem .25rem;
-
- width: 60vw;
- height: 50vh;
-
- max-width: 80%;
- }
- .carousel__inner {
- display: flex;
-
- height: 100%;
-
- overflow: hidden;
- }
-
- /* Button Controls */
- button[class^="carousel-button"] {
- position: absolute;
-
- background-color: transparent;
- font-size: 3rem;
-
- margin: .25em;
-
- top: 50%;
- z-index: 2;
-
- transform: translateY(-50%);
- }
-
- .carousel-button__right {
- right: 0;
- }
-
- .slide {
- display: flex;
-
- flex-shrink: 0;
-
- width: 100%;
- height: 100%;
- }
-
- .slide img {
- object-position: 0% 0%;
- border-width: 0 .25rem 0 0;
-
- width: 60%;
- min-width: 0;
- height: 100%;
- }
-
- .slide__text-content {
- display: flex;
- justify-content: center;
- align-items: center;
-
- padding: 5%;
- padding-right: 3rem;
-
- width: 40%;
- height: 100%;
-
- background-color: white;
- }
-
- .slide__text-content a {
- 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::after {
- background-color: var(--accent-baby-pink);
- }
-/*** Find Us Page Styling ***/
+/*** Find Us Page Styles ***/
#googleMap {
width: 100%;
height: 90vh;
@@ -988,7 +1112,7 @@
position: relative;
}
- /** Style the tablist with directions **/
+ /** Style Directions **/
#location .text-section {
/* Overlay the map */
@@ -997,357 +1121,305 @@
left: 2rem;
padding: 1rem;
- min-width: 30rem;
- max-width: 50%;
+ width: 70%;
+ max-width: 40rem;
- border: .15rem solid;
+ border: var(--main-dark) solid;
+ border-width: .20rem .3rem .3rem .20rem;
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;
- }
+/*** Desktop-Specific Styles ***/
+ @media only screen and (min-width: 64em) {
+ /* 64em == 1024px */
+ /** Global Styles **/
+ section, header, footer, #home .hero {
+ /* Restrict content of website to max 64em */
+ padding-inline: calc((100vw - 64rem + 2rem) / 2);
+ }
+
+ /** Reusable Layouts **/
+ .text-section {
+ padding-inline: calc((100vw - 64rem + 4rem) / 2);
+ }
+ }
- #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;
- }
+/*** Tablet-Specific Styles ***/
+ @media only screen and (max-width: 37.5625em) {
+ /* 37.5625em == 601px */
+ /** Global Styles **/
+ h2 {
+ text-align: center;
+ }
+
+ /** Components **/
+ /* Navigation Bar */
+ #main-navigation nav {
+ position: fixed;
+ top: 0;
+ left: -100vw;
+ z-index: 2;
- #location__transport--content {
- display: flex;
- flex-direction: column;
- justify-content: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
- padding: 2rem;
- margin-left: -.1rem;
+ visibility: hidden;
- border: var(--main-dark) .1rem solid;
+ width: 100vw;
+ height: 100vh;
- background-color: white;
- }
+ background-color: inherit;
- #location__transport--content a {
- color: var(--accent-pink);
- }
+ transition: all .3s;
+ }
- #location__transport--content a::after {
- background-color: var(--accent-pink);
- }
+ #main-navigation img {
+ width: 70%;
+ margin: 0 auto;
+ }
- #location__transport--content a:visited {
- color: var(--accent-baby-pink);
- }
+ #main-navigation.show nav {
+ left: 0;
- #location__transport--content a:visited::after {
- background-color: var(--accent-baby-pink);
- }
+ visibility: initial;
+ }
-/* 64em == 1024px */
-@media only screen and (min-width: 64em) {
- /*** Global Styles ***/
- section, header, footer, #home .hero {
- /* Restrict content of website to max 64em */
- padding-inline: calc((100vw - 64rem + 2rem) / 2);
- }
+ #main-navigation .navbar {
+ flex-direction: column;
- .text-section {
- padding-inline: calc((100vw - 64rem + 4rem) / 2);
- }
-}
+ font-size: 1.75rem;
+ }
-/* 37.5625em == 601px */
-@media only screen and (max-width: 37.5625em) {
- /*** Global Styles -- Tablet ***/
- h2 {
- text-align: center;
- }
- /*** Reusable Styles -- Tablet ***/
- /** Hero **/
- /* USAGE: index.html && about.html */
- .hero {
- grid-template-columns: 1fr;
- }
+ .hamburger {
+ z-index: 3;
+ display: initial;
+ }
- .hero > img {
- max-height: 50vh;
- }
+ /** Reusable Layouts **/
+ /* Hero */
+ .hero {
+ grid-template-columns: 1fr;
+ }
- /** Text Section **/
- .text-section {
- padding-inline: 2rem;
- }
+ .hero > img {
+ max-height: 50vh;
+ }
- /*** Main Navigation Styles ***/
- #main-navigation nav {
- position: fixed;
- top: 0;
- left: -100vw;
- z-index: 2;
+ /* Text Section */
+ .text-section {
+ padding-inline: 2rem;
+ }
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- align-items: center;
+ /** Homepage Styles **/
+ /* Hero Section */
+ #home .hero {
+ padding: 2rem;
+ }
- visibility: hidden;
+ #home .hero > img {
+ display: none;
+ }
- width: 100vw;
- height: 100vh;
+ #home .hero article div:last-of-type {
+ flex-direction: column;
+ flex-wrap: nowrap;
+ align-items: center;
- background-color: inherit;
+ padding-bottom: 0;
+ }
- transition: all .3s;
- }
+ /* About Section */
+ .grid-2x2 {
+ grid-template-columns: 1fr;
+ grid-template-rows: repeat(3, auto);
+ grid-gap: 0;
+ }
- #main-navigation img {
- width: 70%;
- margin: 0 auto;
- }
+ .grid-2x2 img:first-of-type {
+ order: 3;
+ height: 100%;
+ }
- #main-navigation.show nav {
- left: 0;
+ .grid-2x2 img:last-of-type {
+ display: none;
+ }
- visibility: initial;
- }
+ /* Sign Up Form Section */
+ #home__sign-up {
+ padding: 0;
+ }
- #main-navigation .navbar {
- flex-direction: column;
+ #home__sign-up form {
+ width: 100%;
- font-size: 1.75rem;
- }
+ margin: 0 auto;
+ padding: 2rem;
- .hamburger {
- z-index: 3;
- display: initial;
- }
+ background-color: var(--section-pink);
+ }
+ /* Areas of Interest section */
+ .areas-of-interest ul {
+ grid-template-columns: repeat(2, auto);
+ }
- /*** Homepage Styles ***/
- /** Hero Section **/
- #home .hero {
- padding: 2rem;
+ /** Rules Page Styles **/
+ .carousel {
+ width: 80vw;
+ min-width: 100%;
+ height: auto;
}
- #home .hero > img {
- display: none;
+ button[class^="carousel-button"] {
+ top: 65%;
}
- #home .hero article div:last-of-type {
+ .slide {
flex-direction: column;
- flex-wrap: nowrap;
- align-items: center;
-
- padding-bottom: 0;
}
- /** About Section **/
- .grid-2x2 {
- grid-template-columns: 1fr;
- grid-template-rows: repeat(3, auto);
- grid-gap: 0;
- }
-
- .grid-2x2 img:first-of-type {
- order: 3;
- height: 100%;
- }
+ .slide img {
+ width: 100%;
+ height: 10rem;
- .grid-2x2 img:last-of-type {
- display: none;
+ border-width: 0 0 .25rem 0;
}
- /** Sign Up Form Section **/
- #home__sign-up {
- padding: 0;
- }
-
- #home__sign-up form {
+ .slide__text-content {
+ padding-inline: 3.5rem;
width: 100%;
+ height: 10em;
- margin: 0 auto;
- padding: 2rem;
-
- background-color: var(--section-pink);
- }
- /* Areas of Interest section */
- .areas-of-interest ul {
- grid-template-columns: repeat(2, auto);
+ text-align: center;
}
+ }
- /*** Rules Page Styling ***/
- .carousel {
- width: 80vw;
- min-width: 100%;
- height: auto;
- }
-
- button[class^="carousel-button"] {
- top: 65%;
- }
-
- .slide {
- flex-direction: column;
- }
-
- .slide img {
- width: 100%;
- height: 10rem;
- border-width: 0 0 .25rem 0;
- }
- .slide__text-content {
- padding-inline: 3.5rem;
- width: 100%;
- height: 10em;
-
- text-align: center;
- }
-}
-/* 22.5em == 360px */
+/*** Mobile-Specific Styles ***/
@media only screen and (max-width: 22.5em) {
- /*** Global Styles -- Mobile ***/
- /*** Main Navigation Styles ***/
- #main-navigation nav {
- /* Remove styles set for tablet */
- all: unset;
- position: fixed;
- bottom: 0;
- right: 0;
- z-index: 2;
- }
+ /* 22.5em == 360px */
+ /** Global Styles **/
+ /* Footer Styles */
+ footer {
+ display: grid;
+ grid-template: repeat(2, auto) / repeat(2, 1fr);
+ gap: 0;
- #main-navigation img {
- width: 100%;
- margin: 0 auto;
- }
+ padding: 0;
+ /* Space for navbar */
+ padding-bottom: 3rem;
+ }
- #main-navigation .navbar {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
+ footer > * {
+ justify-content: flex-end;
+ padding: 2rem;
+ }
- border-top: var(--main-dark) .1rem solid;
+ #sitemap {
+ grid-area: 1 / 1 / span 1 / span 2;
+ border-bottom: var(--main-dark) .15rem solid;
+ }
- width: 100vw;
- height: 3rem;
+ #sitemap ul {
+ flex-direction: column;
+ align-items: center;
+ gap: 1em;
+ }
- background-color: var(--footer-purple);
- }
+ /** Components **/
+ /* Navigation Styles */
+ #main-navigation nav {
+ /* Remove styles set for tablet */
+ all: unset;
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ z-index: 2;
+ }
- #main-navigation .navbar li {
- padding: 0;
+ #main-navigation img {
+ width: 100%;
+ margin: 0 auto;
+ }
- border-right: var(--main-dark) .1rem solid;
- }
+ #main-navigation .navbar {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
- #main-navigation .navbar li:last-of-type {
- border-right: none;
- }
+ border-top: var(--main-dark) .1rem solid;
- #main-navigation .navbar a {
- display: flex;
- justify-content: center;
- align-items: center;
+ width: 100vw;
+ height: 3rem;
- width: 100%;
- height: 100%;
+ background-color: var(--footer-purple);
+ }
- }
+ #main-navigation .navbar li {
+ padding: 0;
- #main-navigation .navbar span[class|="icon"] {
- /* Remove margin so icons are centred properly */
- margin: 0;
+ border-right: var(--main-dark) .1rem solid;
+ }
- font-size: 1.5rem;
+ #main-navigation .navbar li:last-of-type {
+ border-right: none;
+ }
- /* Remove transform so icons are centred properly */
- transform: translateY(0);
- }
+ #main-navigation .navbar a {
+ display: flex;
+ justify-content: center;
+ align-items: center;
- /** 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"],
- #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;
- }
+ width: 100%;
+ height: 100%;
- #main-navigation .navbar a:hover 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;
}
- /** Hover and current page states **/
- #main-navigation .navbar a:hover,
- #main-navigation .navbar a[aria-current="page"] {
- background-color: var(--accent-pink);
- }
+ #main-navigation .navbar span[class|="icon"] {
+ /* Remove margin so icons are centred properly */
+ margin: 0;
- .hideable-text {
- display: none;
- }
+ font-size: 1.5rem;
- .hamburger {
- display: none;
- }
+ /* Remove transform so icons are centred properly */
+ transform: translateY(0);
+ }
- /*** Footer Styles ***/
- footer {
- display: grid;
- grid-template: repeat(2, auto) / repeat(2, 1fr);
- gap: 0;
+ /** Hover and current page states **/
+ #main-navigation .navbar a:hover,
+ #main-navigation .navbar a[aria-current="page"] {
+ background-color: var(--accent-pink);
+ }
- padding: 0;
- /* Space for navbar */
- padding-bottom: 3rem;
- }
+ #main-navigation .navbar li a[aria-current="page"],
+ #main-navigation .navbar li a:hover {
+ color: var(--main-dark);
+ }
- footer > * {
- justify-content: flex-end;
- padding: 2rem;
- }
+ #main-navigation .navbar li a[aria-current="page"] span[class|="icon"],
+ #main-navigation .navbar li a:hover span[class|="icon"] {
+ background-color: var(--main-dark);
+ }
- #sitemap {
- grid-area: 1 / 1 / span 1 / span 2;
- border-bottom: var(--main-dark) .15rem solid;
- }
+ .hideable-text {
+ display: none;
+ }
- #sitemap ul {
- flex-direction: column;
- align-items: center;
- gap: 1em;
- }
+ .hamburger {
+ display: none;
+ }
- /*** Homepage Styles ***/
- /** Sign Up Form Section **/
+ /** Homepage Styles **/
+ /* Sign Up Form Section */
.personal-details {
grid-template-columns: 1fr;
}
--
GitLab