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

2
config/filters/index.js
View file

@ -5,7 +5,7 @@ const values = Object.values;
const entries = Object.entries;
const minifyCss = async (css) => {
const output = await postcss([cssnano]).process(css);
const output = await postcss([cssnano]).process(css, undefined);
return output.css;
};

13
src/_includes/css/colorVariables.njk Normal file
View file

@ -0,0 +1,13 @@
{% set allColors = colors | entries %}
html {
{% for color in allColors %}
{% set colorName = color | first %}
{% set colorRanges = color | last | entries %}
{% for colorValue in colorRanges %}
{% set value = colorValue | first %}
{% set hex = colorValue | last %}
--color-{{ colorName }}-{{ value }}: {{ hex }};
{% endfor %}
{% endfor %}
}

4
src/_layouts/base.html
View file

@ -24,6 +24,10 @@
<style>
{{ fontCss | minifyCss | safe }}
</style>
{% set colorCss %} {% include "css/colorVariables.njk" %} {% endset %}
<style>
{{ colorCss | minifyCss | safe }}
</style>
</head>
<body>

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);
}
}

28
src/data/colors.js Normal file
View file

@ -0,0 +1,28 @@
/**
* Color namer https://colornamer.robertcooper.me/
*/
const colors = {
aqua: {
50: "#aae9d2",
100: "#99e5ce",
200: "#79ddcc",
300: "#58d4d0",
400: "#38bdcc",
500: "#2c8daa",
600: "#226186",
700: "#193d61",
800: "#10203d",
900: "#060a18",
950: "#020206",
},
carotte: {
400: "#ed5215",
},
neutrals: {
white: "#ffffff",
black: "#000000",
},
};
module.exports = colors;