From 18f428ec3f2f295405cb5f94a3b19d3cdcfa434f Mon Sep 17 00:00:00 2001
From: Jan Jastrow <mail@jastrow.me>
Date: Sat, 6 May 2023 00:38:34 +0200
Subject: [PATCH] Move to native CSS vars

---
 _source/scss/main.scss | 44 +++++++++++++++++++++++++++++-------------
 package.json           |  2 +-
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/_source/scss/main.scss b/_source/scss/main.scss
index ac8543c..1633a52 100644
--- a/_source/scss/main.scss
+++ b/_source/scss/main.scss
@@ -1,13 +1,31 @@
-$color_primary: #4BB5A9;
-$color_secondary: #D6E8E6;
-$svg_color: #111;
+:root {
+	--primary-color: #4BB5A9;
+    --primary-color__dark: hsl(173, 42%, 45%);
+    --secondary-color: #caf0ec;
+    --svg-color: #111111;
+
+	--font-system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	--font-sans-serif: system-ui, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+*, *:before, *:after {
+    box-sizing: inherit;
+	margin: 0;
+    padding: 0;
+}
+
+html {
+    box-sizing: border-box;
+	height: 100%;
+    text-size-adjust: 100%;
+}
 
 body {
-    background-color: $color_secondary;
-    color: $svg_color;
+    background-color: var(--secondary-color);
+    color: var(--svg-color);
     display: flex;
     flex-direction: column;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-family: var(--font-system-ui);
     font-size: 1rem;
     line-height: 1.5;
 }
@@ -46,8 +64,8 @@ header {
     }
 
     a {
-        background-color: $color_primary;
-        color: $svg_color;
+        background-color: var(--primary-color);
+        color: var(--svg-color);
         display: block;
         font-weight: 700;
         margin: 0.3em 0;
@@ -55,11 +73,11 @@ header {
         text-decoration: none;
 
         &:visited {
-            color: $svg_color;
+            color: var(--svg-color);
         }
 
         &:hover, &:active, &:focus {
-            background-color: darken($color_primary, 5%);
+            background-color: var(--primary-color__dark);
         }
     }
 }
@@ -72,7 +90,7 @@ header {
 
     svg {
         height: 24px;
-        fill: $svg_color;
+        fill: var(--svg-color);
         width: 24px;
     }
 }
@@ -82,10 +100,10 @@ footer {
     margin: 0 0 0 0.75em;
 
     a {
-        color: $svg_color;
+        color: var(--svg-color);
         
         &:visited {
-        color: $svg_color;
+        color: var(--svg-color);
         }
     }
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index bb7244e..c9bc45d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "Website_Jan.su",
 	"description": "My personal website",
-	"version": "2.1.0",
+	"version": "2.1.1",
 	"homepage": "https://jan.su",
 	"url": "",
 	"email": "jan@schwerkraftlabor.de",