From 188be2370da5279a96ca5bf585f65fe12fb56b85 Mon Sep 17 00:00:00 2001
From: Robin King <robin2.king@live.uwe.ac.uk>
Date: Fri, 24 Mar 2023 16:25:52 +0000
Subject: [PATCH] feat(about.html-&&-styles.css): complete about page
---
about.html | 23 ++++++++++++++---
styles.css | 76 ++++++++++++++++++++++++++++++++++++++++++------------
2 files changed, 79 insertions(+), 20 deletions(-)
diff --git a/about.html b/about.html
index b0fdeed..1fdfcc4 100644
--- a/about.html
+++ b/about.html
@@ -47,12 +47,12 @@
<div class="hamburger--bottom"></div>
</button>
</header>
- <main id="about">
+ <main>
<!-- 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="">
+ <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">
@@ -63,9 +63,26 @@
<p>”</p>
</div>
</article>
- <img src="assets/img/stop-asian-hate.jpg" alt="Stop Asian Hate Protest">
+ <figure>
+ <img src="assets/img/stop-asian-hate.jpg" alt="Stop Asian Hate Protest">
+ <figcaption><i>Photo by Jason Leung on <a href="https://unsplash.com/photos/WVBGF0NNBBE" title="Stop Asian Hate Protest on Unsplash" target="_blank" rel="noopener">Unsplash</a></i></figcaption>
+ </figure>
</section>
<!-- About -- uses class="text-section" -- about.html && rules.html && location.html -->
+ <section class="text-section">
+ <p><em>Stop Hate UK</em> was originally established in direct response to the murder of Stephen Lawrence.</p>
+
+ <p>On a daily basis, people who are directly affected by hate crimes contact their 24-hour helplines, giving valuable insight into what people experience and how it makes them feel. </p>
+
+ <p><em>Stop Hate UK</em> is also one of the three lead organisations responsible for the delivery of the <a href="https://www.stophateuk.org/on-your-side-report-and-support-service/" target="_blank" rel="noopener"><em>On Your Side: Support and Report Service</em></a>. This was created in response to an increase in hate crimes against East and South East Asian communities, with reports rising 50% over two years.</p>
+
+ <p><em>Stop Hate UK</em> also helps victims or witnesses safely report hate crimes and works hard to raise awareness about hate-based discrimination, while advocating for at-risk communities.</p>
+
+ <p>By supporting <em>Create Against Hate</em> you also support <em>Stop Hate UK's</em> vision of a world which is free from hate, harassment, and discrimination. <a href="index.html#home__sign-up">Sign up now →</a></p>
+
+ <p>For more information, or if you know someone who could benefit from <em>Stop Hate UK's</em> services, please visit their <a href="https://www.stophateuk.org" title="Stop Hate UK Website" target="_blank" rel="noopener">website</a>.</p>
+
+ </section>
</main>
<footer>
<!-- Footer -- index.html && about.html && rules.html && location.html -->
diff --git a/styles.css b/styles.css
index 490c287..0db7a34 100644
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,5 @@
/*** CREDITS ***/
- /** Dynamic text sizes calculated using https://clamp.font-size.app **/
+ /** 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 */
@@ -376,10 +376,28 @@
grid-auto-rows: auto;
}
- .hero > img {
+ .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;
+ }
/*** Main Navigation Styles ***/
@@ -429,19 +447,19 @@
}
/** Colour navbar for different pages **/
- #about #main-navigation {
- background-color: var(--section-purple);
- }
+ #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,
+ #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);
- }
+ #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 {
@@ -749,8 +767,6 @@
/*** About Page Styling ***/
/** Hero Section **/
#about .hero {
- grid-template-rows: repeat(4, 1fr);
-
background-color: var(--section-purple);
color: white;
@@ -760,7 +776,12 @@
text-align: center;
}
+ #about .hero img {
+ text-align: center;
+ }
+
#about .hero article {
+ grid-template-rows: repeat(4, auto);
grid-row-gap: 1.5em;
}
@@ -772,7 +793,7 @@
background-color: white;
}
- /* Blockquote section */
+ /* Blockquote */
#about .hero .quote {
position: relative;
padding: 2rem;
@@ -789,13 +810,19 @@
#about .hero .quote p {
position: absolute;
left: 50%;
- top: 2rem;
transform: translateX(-50%);
font-size: 10em;
line-height: 0;
font-family: 'Engravers MT', serif;
+
+ -webkit-user-select: none;
+ user-select: none;
+ }
+
+ #about .hero .quote p:first-of-type {
+ top: 2rem;
}
#about .hero .quote p:last-of-type {
@@ -803,6 +830,12 @@
bottom: -2rem;
}
+ /** text-section **/
+ #about .text-section {
+ background-color: var(--section-purple-saturated);
+
+ color: white;
+ }
/* 64em == 1024px */
@media only screen and (min-width: 64em) {
/*** Global Styles ***/
@@ -810,6 +843,10 @@
/* Restrict content of website to max 64em */
padding-inline: calc((100vw - 64rem + 2rem) / 2);
}
+
+ .text-section {
+ padding-inline: calc((100vw - 64rem + 4rem) / 2);
+ }
}
/* 37.5625em == 601px */
@@ -829,6 +866,11 @@
max-height: 50vh;
}
+ /** Text Section **/
+ .text-section {
+ padding-inline: 2rem;
+ }
+
/*** Main Navigation Styles ***/
#main-navigation nav {
position: fixed;
--
GitLab