From e14d5db9da87db67fe52759c8292a1215c62402d Mon Sep 17 00:00:00 2001
From: Elias Fink <mail@eliasfink.de>
Date: Thu, 26 Jun 2025 18:56:46 +0200
Subject: [PATCH] Updated colors with new var names, outsourced css

---
 colors/colors.css | 35 ++++++++++++++++++++++++++
 colors/index.php  | 64 +++++++++--------------------------------------
 2 files changed, 47 insertions(+), 52 deletions(-)
 create mode 100644 colors/colors.css

diff --git a/colors/colors.css b/colors/colors.css
new file mode 100644
index 0000000..3986abd
--- /dev/null
+++ b/colors/colors.css
@@ -0,0 +1,35 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+}
+
+#content {
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    max-width: 500px;
+    position: absolute;
+    transform: translate(-50%, -50%);
+}
+
+.color-palette {
+    width: 100%;
+    max-width: 500px;
+}
+
+.single-color {
+    width: 20%;
+    float: left;
+    text-align: center;
+    display: inline-block;
+}
+
+.single-color div {
+    padding-top: 50%;
+    margin-top: 50px;
+    margin-bottom: 2px;
+}
\ No newline at end of file
diff --git a/colors/index.php b/colors/index.php
index 7d3212f..415bad5 100644
--- a/colors/index.php
+++ b/colors/index.php
@@ -2,49 +2,9 @@
     
     <link rel="stylesheet" href="https://static.eliasfink.de/fonts/montserrat/montserrat.css">
 
-    <style>
-
-        * {
-            margin: 0;
-            padding: 0;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-        }
-
-        #content {
-            top: 50%;
-            left: 50%;
-            width: 100%;
-            max-width: 500px;
-            position: absolute;
-            transform: translate(-50%, -50%);
-        }
-
-        .color-palette {
-            width: 100%;
-            max-width: 500px;
-        }
-
-        .single-color {
-            width: 20%;
-            float: left;
-            text-align: center;
-            display: inline-block;
-        }
-        
-        .single-color div {
-            padding-top: 50%;
-            margin-top: 50px;
-            margin-bottom: 2px;
-        }
-
-        
+    <link rel="stylesheet" href="colors.css">
     
-    </style>
-    
-    <title>Colors &ndash; eliasfink.de</title>
+    <title>Colors &ndash; Elias Fink</title>
 
 </head>
 
@@ -54,46 +14,46 @@
     
         <div id="blue" class="color-palette">
             <div class="single-color">
-                <div style="background-color: var(--blue-1);"></div>
+                <div style="background-color: var(--blue-darkest);"></div>
                 <span>#001A33</span>
             </div>
             <div class="single-color">
-                <div style="background-color: var(--blue-2);"></div>
+                <div style="background-color: var(--blue-darker);"></div>
                 <span>#004D99</span>
             </div>
             <div class="single-color">
-                <div style="background-color: var(--blue-3);"></div>
+                <div style="background-color: var(--blue-medium);"></div>
                 <span>#0080FF</span>
             </div>
             <div class="single-color">
-                <div style="background-color: var(--blue-4);"></div>
+                <div style="background-color: var(--blue-lighter);"></div>
                 <span>#66B3FF</span>
             </div>
             <div class="single-color">
-                <div style="background-color: var(--blue-5);"></div>
+                <div style="background-color: var(--blue-lightest);"></div>
                 <span>#CCE6FF</span>
             </div>
         </div>
 
         <div id="grey" class="color-palette">
             <div class="single-color">
-                <div style="background-color: var(--grey-1);"></div>
+                <div style="background-color: var(--grey-darkest);"></div>
                 <span>#161A1D</span>
             </div>
             <div class="single-color">
-                <div style="background-color: var(--grey-2);"></div>
+                <div style="background-color: var(--grey-darker);"></div>
                 <span>#434D56</span>
             </div>
             <div class="single-color">
-                <div style="background-color: var(--grey-3);"></div>
+                <div style="background-color: var(--grey-medium);"></div>
                 <span>#708090</span>
             </div>
             <div class="single-color">
-                <div style="background-color: var(--grey-4);"></div>
+                <div style="background-color: var(--grey-lighter);"></div>
                 <span>#A9B3BC</span>
             </div>
             <div class="single-color">
-                <div style="background-color: var(--grey-5);"></div>
+                <div style="background-color: var(--grey-lightest);"></div>
                 <span>#E2E6E9</span>
             </div>
         </div>