From 7acbb5e64bb9f128c7df1d9ffad15ebe47d24925 Mon Sep 17 00:00:00 2001
From: Robin King <robin2.king@live.uwe.ac.uk>
Date: Fri, 24 Mar 2023 15:36:35 +0000
Subject: [PATCH] feat(about.html-&&-styles.css): style blockquote
---
about.html | 20 ++++++++-
styles.css | 116 +++++++++++++++++++++++++++++++++++++++++++++++------
2 files changed, 122 insertions(+), 14 deletions(-)
diff --git a/about.html b/about.html
index 4c88722..b0fdeed 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-dark.min.svg" alt="Create Against Hate Logo">
+ <img src="assets\main-logo\logo-long.min.svg" alt="Create Against Hate Logo">
<!-- Navigation Bar -- index.html && about.html && rules.html && location.html -->
<nav aria-label="Create Against Hate Main Navigation">
<ul role="menubar" class="navbar">
@@ -47,8 +47,24 @@
<div class="hamburger--bottom"></div>
</button>
</header>
- <main>
+ <main id="about">
<!-- Hero -- uses class="hero" -- index.html && about.html -->
+ <section class="hero">
+ <article>
+ <h1>About</h1>
+ <img src="assets/img/Stop-Hate-UK-Logo.png" alt="">
+ <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">
+ <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.
+ </blockquote>
+ <p>”</p>
+ </div>
+ </article>
+ <img src="assets/img/stop-asian-hate.jpg" alt="Stop Asian Hate Protest">
+ </section>
<!-- About -- uses class="text-section" -- about.html && rules.html && location.html -->
</main>
<footer>
diff --git a/styles.css b/styles.css
index 910f4eb..490c287 100644
--- a/styles.css
+++ b/styles.css
@@ -93,6 +93,13 @@
scroll-behavior: smooth;
}
+ /** Put content in grid **/
+ body {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-auto-rows: auto;
+ }
+
section {
/* Creates border present between all sections */
border-bottom: var(--main-dark) .15rem solid;
@@ -116,7 +123,7 @@
font-family: "Poppins", sans-serif;
}
- h2 {
+ h1, h2 {
font-size: clamp(1.75rem, 0.8917rem + 3.8147vw, 3.3331rem);
}
@@ -362,8 +369,6 @@
grid-gap: 2rem;
min-height: 90vh;
-
- padding-top: 0;
}
.hero article {
@@ -371,12 +376,6 @@
grid-auto-rows: auto;
}
- .hero article > * {
- display: flex;
-
- justify-content: space-evenly;
- }
-
.hero > img {
height: 100%;
}
@@ -429,6 +428,21 @@
background-color: var(--accent-pink);
}
+ /** 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:hover span[class|="icon"],
+ #about #main-navigation .navbar a[aria-current="page"] span[class|="icon"] {
+ background-color: var(--accent-blue);
+ }
+
/** Toggleable class used to show and hide navbar **/
#main-navigation.show {
top: 0;
@@ -516,6 +530,7 @@
/*** Homepage Styles ***/
/** Hero Section **/
#home .hero {
+ padding-top: 0;
padding-right: 0;
padding-bottom: 0;
@@ -534,6 +549,12 @@
color: var(--accent-purple);
}
+ #home .hero article > * {
+ display: flex;
+
+ justify-content: space-evenly;
+ }
+
#home .hero article p {
margin: 0;
}
@@ -683,8 +704,8 @@
/* Remove initial styles of the checkbox */
appearance: none;
- height: 1em;
- width: 1em;
+ height: 1.25em;
+ width: 1.25em;
border: solid var(--main-dark);
border-width: 0.1rem 0.15rem 0.15rem 0.1rem;
@@ -725,6 +746,63 @@
cursor: pointer;
}
+/*** About Page Styling ***/
+ /** Hero Section **/
+ #about .hero {
+ grid-template-rows: repeat(4, 1fr);
+
+ background-color: var(--section-purple);
+
+ color: white;
+ }
+
+ #about .hero h1 {
+ text-align: center;
+ }
+
+ #about .hero article {
+ grid-row-gap: 1.5em;
+ }
+
+ #about .hero article * {
+ margin: 0;
+ }
+
+ #about .hero article img {
+ background-color: white;
+ }
+
+ /* Blockquote section */
+ #about .hero .quote {
+ position: relative;
+ padding: 2rem;
+
+ margin-block: 1rem;
+
+ border-block: .15rem var(--main-dark) solid;
+
+ background-color: white;
+
+ color: var(--main-dark);
+ }
+
+ #about .hero .quote p {
+ position: absolute;
+ left: 50%;
+ top: 2rem;
+
+ transform: translateX(-50%);
+
+ font-size: 10em;
+ line-height: 0;
+ font-family: 'Engravers MT', serif;
+ }
+
+ #about .hero .quote p:last-of-type {
+ top: unset;
+ bottom: -2rem;
+ }
+
/* 64em == 1024px */
@media only screen and (min-width: 64em) {
/*** Global Styles ***/
@@ -747,6 +825,10 @@
grid-template-columns: 1fr;
}
+ .hero > img {
+ max-height: 50vh;
+ }
+
/*** Main Navigation Styles ***/
#main-navigation nav {
position: fixed;
@@ -769,6 +851,11 @@
transition: all .3s;
}
+ #main-navigation img {
+ width: 70%;
+ margin: 0 auto;
+ }
+
#main-navigation.show nav {
left: 0;
@@ -852,6 +939,11 @@
z-index: 2;
}
+ #main-navigation img {
+ width: 100%;
+ margin: 0 auto;
+ }
+
#main-navigation .navbar {
display: grid;
grid-template-columns: repeat(4, 1fr);
@@ -937,7 +1029,7 @@
#sitemap {
grid-area: 1 / 1 / span 1 / span 2;
- border-bottom: 0.2rem solid var(--main-dark);
+ border-bottom: var(--main-dark) .15rem solid;
}
#sitemap ul {
--
GitLab