From f9e6878cea15dd929c3124458f2f68b688f88ce3 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 3 Jun 2024 23:39:10 +0100 Subject: [PATCH] Global and reusable stylings --- src/styles/colors.scss | 10 ++-- src/styles/global.scss | 48 ++++++++------- src/styles/typography.scss | 120 ++++++++++++++++++++++++++++++++++--- 3 files changed, 144 insertions(+), 34 deletions(-) diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 3ce4583..4fcc4b3 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -1,14 +1,16 @@ :root { - --primary: #9fef00; + --primary: #d6fb41; --primary-lighter: #cff97a; --text-color: #ffffff; - --text-color-secondary: #a4b1cd; - --background: #141d2b; + --text-color-secondary: #ffffffb6; + --text-color-thirdly: #ffffff5b; + --background: #111211; --background-darker: #111927; --background-lighter: #1a2332; + --background-50: #11121180; --bg-shadow-color: #0f1620; --fg-shadow-color: #456602; - --primary-transparent: #9fef0030; + --primary-transparent: #d6fb4130; // Action Colors --info: #04e4f4; diff --git a/src/styles/global.scss b/src/styles/global.scss index 59979b6..0f93579 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,6 +1,7 @@ /* Global Stylesheet */ - +@import './colors.scss'; @import './media-queries.scss'; +@import './typography.scss'; /* CSS Reset - Normalize dimensions and spacing across browsers */ *, @@ -9,21 +10,29 @@ box-sizing: border-box; margin: 0; padding: 0; + font-family: inherit; +} + +::selection { + background: var(--primary); + color: var(--background); } /* HTML and body basic setup */ html { - font-size: 16px; // Default text size; consider accessibility and user preferences - scroll-behavior: smooth; // Smooth scrolling on click to hash links + font-size: 16px; + scroll-behavior: smooth; } body { - font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; + font-family: 'Hubot Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif; line-height: 1; color: var(--text-color); background: var(--background); overflow-x: hidden; font-weight: 400; + margin: 0; + min-height: 100vh; } /* Links */ @@ -70,22 +79,19 @@ input, button, textarea, select { } /* Utility Classes */ -.text-center { - text-align: center; -} -.hidden { - display: none; -} +.text-center { text-align: center; } +.hidden { display: none; } +.bold { font-weight: 600; } +.italic { font-style: italic; } +.underline { text-decoration: underline; } +.uppercase { text-transform: uppercase; } -/* Responsive Design - Example of a simple breakpoint */ @media (max-width: 768px) { html { - font-size: 14px; // Smaller font size on smaller screens + font-size: 14px; } } - - h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5em; @@ -100,6 +106,13 @@ h4 { font-size: 1.2rem; } h5 { font-size: 1rem; } h6 { font-size: 0.85rem; } +// Responsive font sizes +@media (max-width: 768px) { + h1 { font-size: 2rem; } + h2 { font-size: 1.6rem; } + h3 { font-size: 1.4rem; } +} + p { margin-top: 0; margin-bottom: 1em; @@ -113,11 +126,4 @@ a { } } -// Responsive font sizes -@media (max-width: 768px) { - h1 { font-size: 2rem; } - h2 { font-size: 1.6rem; } - h3 { font-size: 1.4rem; } - // Adjust more as necessary -} diff --git a/src/styles/typography.scss b/src/styles/typography.scss index e65f93f..39e3a45 100644 --- a/src/styles/typography.scss +++ b/src/styles/typography.scss @@ -1,62 +1,164 @@ @font-face { font-family: 'Inter'; - src: url('../assets/fonts/Inter-Thin.ttf') format('truetype'); + src: url('/fonts/Inter-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; + font-display: swap; } @font-face { font-family: 'Inter'; - src: url('../assets/fonts/Inter-ExtraLight.ttf') format('truetype'); + src: url('/fonts/Inter-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; + font-display: swap; } @font-face { font-family: 'Inter'; - src: url('../assets/fonts/Inter-Light.ttf') format('truetype'); + src: url('/fonts/Inter-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; + font-display: swap; } @font-face { font-family: 'Inter'; - src: url('../assets/fonts/Inter-Regular.ttf') format('truetype'); + src: url('/fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; + font-display: swap; } @font-face { font-family: 'Inter'; - src: url('../assets/fonts/Inter-Medium.ttf') format('truetype'); + src: url('/fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; + font-display: swap; } @font-face { font-family: 'Inter'; - src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype'); + src: url('/fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; + font-display: swap; } @font-face { font-family: 'Inter'; - src: url('../assets/fonts/Inter-Bold.ttf') format('truetype'); + src: url('/fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; + font-display: swap; } @font-face { font-family: 'Inter'; - src: url('../assets/fonts/Inter-ExtraBold.ttf') format('truetype'); + src: url('/fonts/Inter-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; + font-display: swap; } @font-face { font-family: 'Inter'; - src: url('../assets/fonts/Inter-Black.ttf') format('truetype'); + src: url('/fonts/Inter-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; + font-display: swap; } + +// Regular Weights and Styles +@font-face { + font-family: 'Hubot Sans'; + src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-Regular.woff2') format('woff2'), + url('/fonts/Hubot-Sans/TTF/HubotSans-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Hubot Sans'; + src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-Italic.woff2') format('woff2'), + url('/fonts/Hubot-Sans/TTF/HubotSans-Italic.ttf') format('truetype'); + font-weight: 400; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Hubot Sans'; + src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-Bold.woff2') format('woff2'), + url('/fonts/Hubot-Sans/TTF/HubotSans-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Hubot Sans'; + src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-BoldItalic.woff2') format('woff2'), + url('/fonts/Hubot-Sans/TTF/HubotSans-BoldItalic.ttf') format('truetype'); + font-weight: 700; + font-style: italic; + font-display: swap; +} + +// Light, Medium, and ExtraBold variants +@font-face { + font-family: 'Hubot Sans'; + src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-Light.woff2') format('woff2'), + url('/fonts/Hubot-Sans/TTF/HubotSans-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Hubot Sans'; + src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-LightItalic.woff2') format('woff2'), + url('/fonts/Hubot-Sans/TTF/HubotSans-LightItalic.ttf') format('truetype'); + font-weight: 300; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Hubot Sans'; + src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-Medium.woff2') format('woff2'), + url('/fonts/Hubot-Sans/TTF/HubotSans-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Hubot Sans'; + src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-MediumItalic.woff2') format('woff2'), + url('/fonts/Hubot-Sans/TTF/HubotSans-MediumItalic.ttf') format('truetype'); + font-weight: 500; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Hubot Sans'; + src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-ExtraBold.woff2') format('woff2'), + url('/fonts/Hubot-Sans/TTF/HubotSans-ExtraBold.ttf') format('truetype'); + font-weight: 800; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Hubot Sans'; + src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-ExtraBoldItalic.woff2') format('woff2'), + url('/fonts/Hubot-Sans/TTF/HubotSans-ExtraBoldItalic.ttf') format('truetype'); + font-weight: 800; + font-style: italic; + font-display: swap; +} +