chore: improve styles

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

web/src/components/project.module.css

@@ -68,15 +68,22 @@ div.graph {
   align-items: center;
   gap: 0.2rem;
 
+  &:hover {
+    &::after {
+      opacity: 0.3;
+    }
+  }
+
   &::after {
     content: "";
     position: absolute;
     left: 0;
     width: var(--percentage);
     height: 100%;
     background: var(--pico-h5-color);
-    opacity: 0.08;
+    opacity: 0.09;
     z-index: -1;
-    transition: width 0.3s ease-in-out;
+    transition: width 0.3s ease-in-out, opacity 0.1s ease-in-out;
+    border-radius: 1rem;
   }
 }

web/src/global.css

@@ -1,10 +1,28 @@
 @import "@explodingcamera/css/all.css" layer(base);
 @import "@picocss/pico/css/pico.lime.min.css" layer(pico);
 
+@layer pico {
+  :root {
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --pico-background-color: #0a0c10;
+      --pico-card-background-color: #141a1d;
+    }
+  }
+}
+
 .full {
   min-height: 100%;
 }
 
+body {
+  --color: oklab(0.51 -0.1 0 / 0.1);
+  background: linear-gradient(215deg, var(--color), transparent 50%),
+    radial-gradient(var(--color), transparent 40%) no-repeat -60vw -40vh /90vw 300vh;
+}
+
 h1,
 h2,
 h3,