From 3d812fdaccf02e1fb8dbb38e0f721c117df6fb7d Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <rawr@sebin-nyshkim.net>
Date: Fri, 11 Jul 2025 21:09:43 +0200
Subject: [PATCH] feat: :lipstick: change to radial gradient, keep the same
 across all viewport sizes

---
 src/components/page-content.webc | 18 +++++-------------
 src/components/profile.webc      | 16 +++++-----------
 2 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/components/page-content.webc b/src/components/page-content.webc
index 64a5655..94517a1 100644
--- a/src/components/page-content.webc
+++ b/src/components/page-content.webc
@@ -22,27 +22,19 @@
   }
 
   :host::before {
-    --shadow-inset: -0.5em -0.5em 0.5em 0.5em;
-    --gradient-dir: to right;
-
     content: '';
     position: absolute;
-    inset: var(--shadow-inset);
+    inset: 0.5em -0.5em -0.5em 0.5em;
 
-    background: linear-gradient(
-      var(--gradient-dir),
-      oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h),
-      oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h)
+    background: radial-gradient(
+      ellipse at top left,
+      oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h) 60%,
+      oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h)
     );
 
     border-radius: inherit;
 
     transform: translate3d(0, 0, -1px);
-
-    @media (min-width: 64em) {
-      --shadow-inset: 1em -1.5em -1em 1em;
-      --gradient-dir: to left;
-    }
   }
 
   :host > :not(.character-nav, .slider) {
diff --git a/src/components/profile.webc b/src/components/profile.webc
index d97e4cd..7ff8795 100644
--- a/src/components/profile.webc
+++ b/src/components/profile.webc
@@ -54,25 +54,19 @@
   }
 
   :host::before {
-    --shadow-inset: -0.5em -0.5em 0.5em 0.5em;
-
     content: '';
     position: absolute;
-    inset: var(--shadow-inset);
+    inset: -0.5em 0.5em 0.5em -0.5em;
 
-    background: linear-gradient(
-      to right,
-      oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h),
-      oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h)
+    background: radial-gradient(
+      ellipse at bottom right,
+      oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h) 60%,
+      oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h)
     );
 
     border-radius: inherit;
 
     transform: translate3d(0, 0, -1px);
-
-    @media (min-width: 64em) {
-      --shadow-inset: 1em 1em -1em -1.5em;
-    }
   }
 
   :host .avatar {