refactor: 💄 adjust icon shadows and min grid column width

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;
     }
 

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);
   }