From af7a05419eaa77fc6d26885c8aaac8e7315c6c76 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Mon, 20 May 2024 18:21:12 +0200
Subject: [PATCH] feat: extract variables.css

---
 src/layouts/Layout.astro  | 28 +---------------------------
 src/layouts/variables.css | 28 ++++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 27 deletions(-)
 create mode 100644 src/layouts/variables.css

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index ed4fd23..3b2d175 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,4 +1,5 @@
 ---
+import "./variables.css";
 import "./reset.css";
 import Head from "../components/Head.astro";
 import Nav from "../components/Nav.astro";
@@ -19,33 +20,6 @@ const { title, description } = Astro.props;
     <Nav links={links} />
     <slot />
     <style>
-      :root {
-        --content-width: 700px;
-        --font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
-        --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
-        --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
-        --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
-
-        --color-border: hsl(17, 24%, 90%);
-        --color-link: var(--color-brand-blue-3);
-
-        --color-brand-blue-1: #3054bf;
-        --color-brand-blue-2: #203880;
-        --color-brand-blue-3: #416fff;
-        --color-brand-blue-4: #101c40;
-        --color-brand-blue-5: #3964e6;
-
-        --color-brand-complement: orange;
-
-        --ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
-        --text-color-dark: black;
-        --text-color-light: #f8f9fa;
-
-        --bg-dark: #343a40;
-        --bg-darker: #212529;
-        --bg-darkest: #000;
-      }
-
       html,
       body,
       * {
diff --git a/src/layouts/variables.css b/src/layouts/variables.css
new file mode 100644
index 0000000..8efe5ba
--- /dev/null
+++ b/src/layouts/variables.css
@@ -0,0 +1,28 @@
+:root {
+	--content-width: 700px;
+	--font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
+	--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
+	--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
+	--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
+
+	--color-border: hsl(17, 24%, 90%);
+	--color-link: var(--color-brand-blue-5);
+
+	--color-brand-blue-1: #3054bf;
+	--color-brand-blue-2: #203880;
+	--color-brand-blue-3: #416fff;
+	--color-brand-blue-4: #101c40;
+	--color-brand-blue-5: #3964e6;
+
+	--color-brand-complement: orange;
+
+	--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
+	--text-color-dark: #232323;
+	--text-color-dark-faded: #555;
+	--text-color-light: #f8f9fa;
+	--text-color-light-faded: #999;
+
+	--bg-dark: #343a40;
+	--bg-darker: #212529;
+	--bg-darkest: #000;
+}