From 97839db2f716f843252ae4ba099aa58532dfa0b1 Mon Sep 17 00:00:00 2001
From: Robin King <robin2.king@live.uwe.ac.uk>
Date: Sun, 19 Mar 2023 23:21:53 +0000
Subject: [PATCH] feat(styles.css): start configuring global styles
---
styles.css | 207 ++++++++++++++++++++++++++++++++++++-----------------
1 file changed, 141 insertions(+), 66 deletions(-)
diff --git a/styles.css b/styles.css
index 297eabe..f456a5c 100644
--- a/styles.css
+++ b/styles.css
@@ -1,69 +1,144 @@
-/*** Globals ***/
-
-:root {
- /** This is the primary background colour for the website **/
- /* USAGE: index.html:hero && rules.html:rules && All borders */
- --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;
-
- /** 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;
-
- /** 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;
-
- /** Purple accent colour used on homepage **/
- /* USAGE: index.html:hero > text */
- --accent-purple: #b144c4;
-
- /** Purple background colour for footer **/
- /* USAGE: All pages:footer */
- --footer-purple: #1f172c;
-}
+/*** CREDITS ***/
+ /** Dynamic text sizes calculated using https://clamp.font-size.app **/
+
+/* Base stylesheet is for desktop, media queries alter layout for tablet and mobile */
+
+/*** Font Imports ***/
+
+ /* 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");
+ }
+
+/*** Global Styles ***/
+
+ :root {
+ /** This is the primary background colour for the website **/
+ /* USAGE: index.html:hero && rules.html:rules && All borders */
+ --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;
-@media only screen and (min-width: 1024px) {
- section, header, footer {
- /* Restrict content of website to max 1024px */
- padding-block: calc((100vw - 1024px) / 2);
+ /* 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;
+
+ /** 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;
+
+ /** 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;
+
+ /** Purple accent colour used on homepage **/
+ /* USAGE: index.html:hero > text */
+ --accent-purple: #b144c4;
+
+ /** Purple background colour for footer **/
+ /* USAGE: All pages:footer */
+ --footer-purple: #1f172c;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+
+ box-sizing: border-box;
}
+
+ html {
+ background-color: var(--main-dark);
+
+ font-family: "Segoe UI", sans-serif;
+
+ scroll-behavior: smooth;
+ }
+
+ section {
+ /* Creates border present between all sections */
+ border-bottom: var(--main-dark) 0.25rem solid;
+ }
+
+ footer {
+ background-color: var(--footer-purple);
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ font-family: "Poppins", sans-serif;
+ }
+
+ h2 {
+ font-size: clamp(3rem, 2.4578rem + 2.4096vw, 4rem);
+ }
+
+ img {
+ /* Creates border present around majority of images */
+ border: var(--main-dark) solid;
+ border-width: 0.3rem 0.45rem 0.45rem 0.3rem;
+ }
+
+
+/*** Navigation Styles ***/
+
+
+
+
+/* 64em == 1024px */
+@media only screen and (min-width: 64em) {
+ /*** Global Styles ***/
+ section, header, footer {
+ /* Restrict content of website to max 64em */
+ padding-block: calc((100vw - 64em) / 2);
+ }
+}
+
+/* 37.5625em == 601px */
+@media only screen and (max-width: 37.5625em) {
+ /*** Global Styles -- Tablet ***/
+
+}
+
+/* 22.5em == 360px */
+@media only screen and (max-width: 22.5em) {
+ /*** Global Styles -- Mobile ***/
+
}
\ No newline at end of file
--
GitLab