From 9509940029637cdb527093a986ac482c7d71e0da Mon Sep 17 00:00:00 2001
From: punkfairie <23287005+punkfairie@users.noreply.github.com>
Date: Sat, 21 Sep 2024 15:04:04 -0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(css):=20support=20light=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 style.css | 136 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 82 insertions(+), 54 deletions(-)

diff --git a/style.css b/style.css
index d035b5b..6aad30b 100644
--- a/style.css
+++ b/style.css
@@ -1,86 +1,114 @@
 :root {
-	--font: "Cartograph CF";
-	--bgcolor: #1f1d2e;
-	--linkcolor: #e0def4;
+  --base: #191724;
+  --surface: #1f1d2e;
+  --overlay: #26233a;
+  --text: #e0def4;
+  --love: #eb6f92;
+  --gold: #f6c177;
+  --rose: #ebbcba;
+  --pine: #31748f;
+  --foam: #9ccfd8;
+  --iris: #c4a7e7;
+
+  @media (prefers-color-scheme: light) {
+    --base: #faf4ed;
+    --surface: #fffaf3;
+    --overlay: #f2e9e1;
+    --text: #575279;
+    --love: #b4637a;
+    --gold: #ea9d34;
+    --rose: #d7827e;
+    --pine: #286983;
+    --foam: #56949f;
+    --iris: #907aa9;
+  }
+
+  --font: "FairiesevkaSans Nerd Font Propo";
+  --bgcolor: var(--surface);
+  --linkcolor: var(--text);
 }
 
 /*-----------------------------------------------------------*/
 input {
-    height: inherit;
-    width: 680px;
-    background: #26233a;
-    color: #ebbcba;
-    font: "Cartograph CF";
-    font-weight: mono;
-    line-height: 1.8em;
-    box-shadow: 1px 1px 3px #000000;
-    border: none;
-    text-align: center;
-    border-radius: 8px;
-    outline: none;
-    padding: 7px 14px;
-    font-size: 18;
-    grid-column: 1 / -1;
-    margin: 0px 0px 30px 0px;;
+  height: inherit;
+  width: 680px;
+  background: var(--overlay);
+  color: var(--rose);
+  font: var(--font);
+  font-weight: mono;
+  line-height: 1.8em;
+  box-shadow: 1px 1px 3px #000000;
+  border: none;
+  text-align: center;
+  border-radius: 8px;
+  outline: none;
+  padding: 7px 14px;
+  font-size: 18;
+  grid-column: 1 / -1;
+  margin: 0px 0px 30px 0px;
 }
 body {
-/*
+  /*
 	background-image: url('../background/bg.jpg');
 	background-repeat : no-repeat;
 */
-	background-color: #191724;
-	background-size: cover;
+  background-color: var(--base);
+  background-size: cover;
 }
 
 .everything {
-	display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
 }
 
 .link {
-	display: inline-block;
-	margin: 1%;
-	height: 185px;
-	width: 140px;
-	text-align: left;
-	padding-left: 3%;
-	background-color: var(--bgcolor);
-	border-radius: 8px;
-	box-shadow: 2px 2px 8px #000000;
+  display: inline-block;
+  margin: 1%;
+  height: 185px;
+  width: 140px;
+  text-align: left;
+  padding-left: 3%;
+  background-color: var(--bgcolor);
+  border-radius: 8px;
+  box-shadow: 2px 2px 8px #000000;
 }
 
 .box {
-	width: 750px;
+  width: 750px;
 }
 
 ul {
-	padding-inline-start: 0;
-	list-style: none;
+  padding-inline-start: 0;
+  list-style: none;
 }
 
 a {
-	display: block;
-	line-height: 2.4em;
-	font-family: var(--font);
-	color: var(--linkcolor);
-	font-size: 1rem;
-	text-decoration: none;
-	outline: none;
-	transition: .2s;
+  display: block;
+  line-height: 2.4em;
+  font-family: var(--font);
+  color: var(--linkcolor);
+  font-size: 1rem;
+  text-decoration: none;
+  outline: none;
+  transition: 0.2s;
 }
 
 a:hover {
-	color: #9ccfd8;
+  color: var(--foam);
 }
 
 .time {
-    font-family: "Cartograph CF"; monospace;
-    font-weight: mono;
-    font-size: 5.5rem;
-    margin: 50px 0px 50px 0px;
-    color: var(--linkcolor);
-	text-shadow: -5px 5px 0px #eb6f92, -10px 10px #f6c177, -15px 15px 0px #C3A5E6, -20px 20px 0px #31748f;
+  font-family: var(--font), monospace;
+  font-weight: mono;
+  font-size: 5.5rem;
+  margin: 50px 0px 50px 0px;
+  color: var(--linkcolor);
+  text-shadow:
+    -5px 5px 0px var(--love),
+    -10px 10px var(--gold),
+    -15px 15px 0px var(--iris),
+    -20px 20px 0px var(--pine);
 }