From 71afaa324c6387e59415dc4abc931543d90b60fc Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <rawr@sebin-nyshkim.net>
Date: Wed, 9 Jul 2025 02:31:50 +0200
Subject: [PATCH] fix: :lipstick: cut off box shadows of slider items

In order for box shadows to render as intended the slider needs to be able to fill the full width of the page content container. This also necessitates a different approach to layouting all other page content children and removes the need for a layouting container element
---
 src/components/page-content.webc | 10 ++++++++++
 src/components/slider.webc       | 10 +++++++---
 src/components/trait-card.webc   | 17 ++++++++---------
 src/layouts/character.webc       |  8 +-------
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/page-content.webc b/src/components/page-content.webc
index b32eec5..f898f62 100644
--- a/src/components/page-content.webc
+++ b/src/components/page-content.webc
@@ -8,6 +8,8 @@
   :host {
     grid-area: content;
 
+    hyphens: auto;
+
     width: 100%;
     max-width: 65ch;
 
@@ -18,6 +20,14 @@
     overflow: clip;
   }
 
+  :host > :not(.character-nav, .slider) {
+    margin-inline: var(--inbox-spacing);
+  }
+
+  :host > :last-child {
+    margin-block: 0 var(--inbox-spacing);
+  }
+
   :host :where(h1, h2, h3, h4, h5, h6) {
     --heading-spacing: 0.25em;
     position: relative;
diff --git a/src/components/slider.webc b/src/components/slider.webc
index 595cf5c..c5ae862 100644
--- a/src/components/slider.webc
+++ b/src/components/slider.webc
@@ -118,6 +118,7 @@
       '. progress .';
     align-items: center;
     gap: 1em;
+    margin-block: var(--inbox-spacing);
   }
 
   :host :where(.prev, .next, .indicator-btn) {
@@ -168,11 +169,11 @@
   }
 
   :host :where(.prev, .next) {
-    --btn-alignment: -0.75em;
+    --btn-alignment: 0.25em;
     grid-row: track;
 
-    @media (min-width: 48em) {
-      --btn-alignment: 0.5em;
+    @media (min-width: 40em) {
+      --btn-alignment: calc(var(--inbox-spacing) + 1rem);
     }
   }
 
@@ -215,6 +216,7 @@
 
   :host .track > * {
     scroll-snap-align: center;
+    padding-inline: var(--inbox-spacing);
   }
 
   :host .track::-webkit-scrollbar {
@@ -253,6 +255,8 @@
     place-content: center;
     place-items: center;
     font-size: 0.875em;
+
+    padding-inline: var(--inbox-spacing);
   }
 
   :host .indicator-btn {
diff --git a/src/components/trait-card.webc b/src/components/trait-card.webc
index 162c7c9..72925e7 100644
--- a/src/components/trait-card.webc
+++ b/src/components/trait-card.webc
@@ -14,25 +14,24 @@
 
 <style webc:scoped="trait-card">
   :host {
-    --card-margin-inline: 0.5em;
-
+    --spacing-inline: 0.75em;
     position: relative;
     display: grid;
     font-size: 0.875em;
 
-    margin-block: 2em 0.5em;
-    margin-inline: var(--card-margin-inline);
     border-radius: 1em;
+    padding-block: 2em 1em;
+    margin-inline: var(--spacing-inline);
 
-    @media (min-width: 48em) {
-      --card-margin-inline: 4em;
+    @media (min-width: 40em) {
+      --spacing-inline: 4.5em;
     }
   }
 
   :host .icon-box {
     position: absolute;
-    top: -1.25em;
-    left: 1.5em;
+    top: 0.5em;
+    left: 2.75em;
 
     width: 3em;
     height: 3em;
@@ -44,7 +43,7 @@
     box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
     border-radius: 0.5em;
     overflow: hidden;
-    z-index: 2;
+    z-index: 1;
   }
 
   :host .icon-box > * {
diff --git a/src/layouts/character.webc b/src/layouts/character.webc
index 5be8bd5..c8f1137 100644
--- a/src/layouts/character.webc
+++ b/src/layouts/character.webc
@@ -27,7 +27,7 @@ layout: base.webc
 
   <page-content :@char="$data.firstName.toLowerCase()">
     <h1 @text="$data.eleventyNavigation.key"></h1>
-    <article @raw="content"></article>
+    <template @raw="content" webc:nokeep></template>
   </page-content>
 
   <footer>
@@ -74,12 +74,6 @@ layout: base.webc
     margin-inline: var(--inbox-spacing);
   }
 
-  article {
-    margin-block: var(--inbox-spacing);
-    margin-inline: var(--inbox-spacing);
-    hyphens: auto;
-  }
-
   footer {
     --columns: 1fr;