fix: 💄 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

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

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 {

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 > * {

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;