From 2c06226078d7ef69b6b489441deb454fe62d9948 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Wed, 9 Apr 2025 19:09:13 +0200
Subject: [PATCH] refactor: :lipstick: adjust icon shadows and min grid column
 width

---
 src/components/traits.webc | 12 ++++--------
 src/css/colors.css         |  2 ++
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/traits.webc b/src/components/traits.webc
index 4d91aee..71e5082 100644
--- a/src/components/traits.webc
+++ b/src/components/traits.webc
@@ -9,7 +9,7 @@
 <style>
   .trait-list {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
     gap: 0.75em;
 
     margin: 0;
@@ -26,13 +26,11 @@
     justify-items: start;
 
     & .icon-box {
-      --icon-size: 2em;
-
       position: relative;
       grid-area: icon;
 
-      width: var(--icon-size);
-      height: var(--icon-size);
+      width: 2em;
+      height: 2em;
 
       background: linear-gradient(
         to bottom right,
@@ -40,7 +38,7 @@
         oklch(from var(--clr-box-background) l c h) 50%
       );
 
-      box-shadow: 0.0625em 0.0625em 0.3em oklch(from var(--clr-box-background) calc(l + 0.1) c h);
+      box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
       border-radius: 0.5em;
       overflow: hidden;
       z-index: 1;
@@ -56,8 +54,6 @@
     }
 
     & svg {
-      width: 100%;
-      height: 100%;
       padding: 0.5em;
     }
 
diff --git a/src/css/colors.css b/src/css/colors.css
index 67b65f0..37929cc 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -19,6 +19,7 @@
 
   --clr-box-background: oklch(from var(--theme-c-eerie-black) calc(l * 3.75) c h);
   --clr-box-border: oklch(from var(--theme-c-onyx) calc(l * 1.75) c h);
+  --clr-box-shadow: oklch(from var(--theme-c-night) calc(l * 4) c h);
 
   --clr-color-box-background: oklch(from var(--theme-c-gunmetal) calc(l * 2.5) c h);
 
@@ -30,6 +31,7 @@
 
     --clr-box-background: var(--theme-c-eerie-black);
     --clr-box-border: var(--theme-c-onyx);
+    --clr-box-shadow: var(--theme-c-night);
 
     --clr-color-box-background: var(--theme-c-gunmetal);
   }