From e804c7c39cfe5e211c7dfed3e0b65ce5b9940eec Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Fri, 8 Nov 2024 18:02:02 -0800
Subject: [PATCH] improve light theme on frontpage

---
 src/styles/components/featurelist.css | 24 +++++++++++--
 src/styles/main-page.css              | 51 +++++++++++++++++++++++----
 2 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/src/styles/components/featurelist.css b/src/styles/components/featurelist.css
index 2efb80a..2201634 100644
--- a/src/styles/components/featurelist.css
+++ b/src/styles/components/featurelist.css
@@ -18,17 +18,17 @@
   align-items: center;
   margin-block: 0.618rem;
   border-radius: 9px;
-  background-color: hsla(var(--blue) 100 81 / 0.05);
+  background-color: hsla(var(--blue) 60 98 / 0.6);
   padding-inline: 0.618rem;
   padding-block: 1.217rem;
-  border: 1px solid hsla(0 0 100 / 0.05);
+  border: 1px solid hsla(0 0 0 / 0.1);
   &::before {
     content: "";
     position: absolute;
     inset: 0.618rem;
     z-index: -1;
     background-image: radial-gradient(
-      hsla(0 0 100 / 0.1) 1px,
+      hsla(0 0 0 / 0.4) 1px,
       transparent 1px
     );
     background-position: 50% 50%;
@@ -39,12 +39,30 @@
   }
 }
 
+html.dark .featurelist-item {
+  background-color: hsla(var(--blue) 100 81 / 0.05);
+  border-color: hsla(0 0 100 / 0.05);
+
+  &::before {
+    background-image: radial-gradient(
+      hsla(0 0 100 / 0.1) 1px,
+      transparent 1px
+    );
+  }
+}
+
 .feature-text {
   text-align: center;
   font-size: 1.2rem;
   & .feature-title {
     margin-bottom: 0.517rem;
   }
+  & .feature-subtitle {
+    color: #303030;
+  }
+}
+
+html.dark .feature-text {
   & .feature-subtitle {
     color: #afafaf;
   }
diff --git a/src/styles/main-page.css b/src/styles/main-page.css
index 419c2e3..e0e677c 100644
--- a/src/styles/main-page.css
+++ b/src/styles/main-page.css
@@ -22,6 +22,16 @@
 }
 
 h1.gradient-text {
+  background: linear-gradient(
+    30deg,
+    hsl(var(--green) 80 42),
+    hsl(var(--blue) 80 49)
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+html.dark h1.gradient-text {
   background: linear-gradient(
     30deg,
     hsl(var(--green) 100 62),
@@ -44,6 +54,12 @@ h1.gradient-text {
     font-weight: 400;
     letter-spacing: 0.018rem;
     margin-bottom: 0.117rem;
+    color: hsl(var(--blue) 40 33);
+  }
+}
+
+html.dark .main-page_hero-text {
+  & h2 {
     color: hsl(var(--blue) 100 83);
   }
 }
@@ -78,14 +94,38 @@ h1.gradient-text {
   height: 3.67rem;
   border-radius: 9px;
   overflow: hidden;
-  border: 1px solid transparent;
-  transition: border-color 0.3s;
+  border: 1px solid hsl(var(--green) 10 10);
+  transition: background-color 0.3s, border-color 0.3s;
+
+  background-color: hsl(var(--green) 38 30);
+  color: hsl(194 0 100);
 
   &:hover {
     cursor: pointer;
     text-decoration: none;
+    border-color: hsl(var(--green) 20 20);
+    background-color: hsl(var(--green) 48 40);
   }
 
+  &.main-page_bluecard {
+    border-color: hsl(var(--blue) 10 10);
+    background-color: hsl(var(--blue) 38 30);
+
+    &:hover {
+      border-color: hsl(var(--blue) 20 20);
+      background-color: hsl(var(--blue) 48 40);
+    }
+  }
+
+  & h3 {
+    z-index: 2;
+  }
+}
+
+html.dark .main-page_link-card {
+  background-color: transparent;
+  border-color: transparent;
+
   &::before {
     content: "";
     position: absolute;
@@ -111,6 +151,9 @@ h1.gradient-text {
   }
 
   &.main-page_bluecard {
+    background-color: transparent;
+    border-color: transparent;
+
     &::before {
       background: linear-gradient(
         115deg,
@@ -126,10 +169,6 @@ h1.gradient-text {
       }
     }
   }
-
-  & h3 {
-    z-index: 2;
-  }
 }
 
 .baselayout footer {