diff --git a/config/filters/index.js b/config/filters/index.js
index 4207a9e..472aae2 100644
--- a/config/filters/index.js
+++ b/config/filters/index.js
@@ -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;
};
diff --git a/src/_includes/css/colorVariables.njk b/src/_includes/css/colorVariables.njk
new file mode 100644
index 0000000..bd68029
--- /dev/null
+++ b/src/_includes/css/colorVariables.njk
@@ -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 %}
+}
diff --git a/src/_layouts/base.html b/src/_layouts/base.html
index 0476eae..718a81d 100644
--- a/src/_layouts/base.html
+++ b/src/_layouts/base.html
@@ -24,6 +24,10 @@
+ {% set colorCss %} {% include "css/colorVariables.njk" %} {% endset %}
+
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index 64184ae..aa3baf4 100644
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@@ -1,5 +1,4 @@
@import "global/reset.css";
-/* @import "global/fonts.css"; */
@import "global/variables.css";
@import "global/global-styles.css";
diff --git a/src/assets/css/global/fonts.css b/src/assets/css/global/fonts.css
deleted file mode 100644
index a8d9918..0000000
--- a/src/assets/css/global/fonts.css
+++ /dev/null
@@ -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;
- }
-}
diff --git a/src/assets/css/global/variables.css b/src/assets/css/global/variables.css
index 704349c..767ab3b 100644
--- a/src/assets/css/global/variables.css
+++ b/src/assets/css/global/variables.css
@@ -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);
}
}
diff --git a/src/data/colors.js b/src/data/colors.js
new file mode 100644
index 0000000..847c096
--- /dev/null
+++ b/src/data/colors.js
@@ -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;