mirror of
https://github.com/Lissy93/web-check.git
synced 2024-11-22 08:13:59 +01:00
Global and reusable stylings
This commit is contained in:
Alicia Sykes
parent
50cc152491
commit
f9e6878cea
@ -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;
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user