wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: move color variables to global data

Browse source
This commit is contained in:
Devin Haska 2024-02-01 15:50:39 -08:00
parent f9926b3bac
commit 23c9baad10
7 changed files with 57 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/assets/css/global.css
View file

@ -1,5 +1,4 @@
@import "global/reset.css";
/* @import "global/fonts.css"; */
@import "global/variables.css";
@import "global/global-styles.css";

82
src/assets/css/global/fonts.css
View file

@ -1,82 +0,0 @@
@supports not (font-variation-settings: normal) {
@font-face {
font-family: Quattro;
font-style: normal;
font-display: swap;
font-weight: 450;
src:
local(""),
url("/assets/fonts/quattro/iAWriterQuattroS-Regular.woff2")
format("woff2");
}
@font-face {
font-family: Quattro;
font-style: bold;
font-display: swap;
font-weight: 650;
src:
local(""),
url("/assets/fonts/quattro/iAWriterQuattroS-Bold.woff2") format("woff2");
}
@font-face {
font-family: Quattro;
font-style: italic;
font-display: swap;
font-weight: 450;
src:
local(""),
url("/assets/fonts/quattro/iAWriterQuattroS-Italic.woff2") format("woff2");
}
@font-face {
font-family: Quattro;
font-style: italic;
font-display: swap;
font-weight: 650;
src:
local(""),
url("/assets/fonts/quattro/iAWriterQuattroS-BoldItalic.woff2")
format("woff2");
}
@font-face {
font-family: AnekLatin;
font-style: bold;
font-display: swap;
font-weight: 700;
src:
local(""),
url("/assets/fonts/aneklatin/AnekLatin-Bold.ttf") format("truetype");
}
@font-face {
font-family: AnekLatin;
font-style: bold;
font-display: swap;
font-weight: 800;
src:
local(""),
url("/assets/fonts/aneklatin/AnekLatin-ExtraBold.ttf") format("truetype");
}
}
@supports (font-variation-settings: normal) {
@font-face {
font-family: Quattro;
src: url("/assets/fonts/quattro/iAWriterQuattroV.ttf") format("truetype");
font-weight: 450 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: AnekLatin;
src: url("/assets/fonts/aneklatin/AnekLatin-VariableFont_wdth,wght.ttf")
format("truetype");
font-weight: 700 800;
font-style: normal;
font-display: swap;
}
}

34
src/assets/css/global/variables.css
View file

@ -3,28 +3,16 @@
--transition-duration: 250ms;
--transition-timing: ease;
--color-indiglo-50: #aae9d2;
--color-indiglo-100: #99e5ce;
--color-indiglo-200: #79ddcc;
--color-indiglo-300: #58d4d0;
--color-indiglo-400: #38bdcc;
--color-indiglo-500: #2c8daa;
--color-indiglo-600: #226186;
--color-indiglo-700: #193d61;
--color-indiglo-800: #10203d;
--color-indiglo-900: #060a18;
--color-indiglo-950: #020206;
--color-light: white;
--color-dark: black;
--color-light: var(--color-neutrals-white);
--color-dark: var(--color-neutrals-black);
--color-bg: var(--color-light);
--color-text: var(--color-dark);
--color-primary: var(--color-indiglo-400);
--color-primary-highlight: var(--color-indiglo-300);
--color-primary-subtle: var(--color-indiglo-500);
--color-primary-faded: var(--color-indiglo-600);
--color-secondary: #ed5215;
--color-primary: var(--color-aqua-400);
--color-primary-highlight: var(--color-aqua-300);
--color-primary-subtle: var(--color-aqua-500);
--color-primary-faded: var(--color-aqua-600);
--color-secondary: var(--color-carotte-400);
}
@media (prefers-color-scheme: dark) {
@ -32,9 +20,9 @@
--color-bg: var(--color-dark);
--color-text: var(--color-light);
--color-primary: var(--color-indiglo-300);
--color-primary-highlight: var(--color-indiglo-200);
--color-primary-subtle: var(--color-indiglo-400);
--color-primary-faded: var(--color-indiglo-100);
--color-primary: var(--color-aqua-300);
--color-primary-highlight: var(--color-aqua-200);
--color-primary-subtle: var(--color-aqua-400);
--color-primary-faded: var(--color-aqua-100);
}
}