From 2a0d1275f73575626666b2b4101c6a427a6a0dad Mon Sep 17 00:00:00 2001
From: Adam Argyle <argyle@google.com>
Date: Wed, 30 Oct 2024 08:46:34 -0700
Subject: [PATCH] refactor to use cascade layers

---
 src/components/biome.astro             |  52 ++--
 src/components/feature.filmstrip.astro |  73 ++---
 src/components/footer.astro            |  17 +-
 src/components/header.primary.astro    |  54 ++--
 src/components/hero.astro              |  94 +++---
 src/components/main.aside.astro        | 398 +++++++++++++------------
 src/components/nav.bento.astro         |  76 ++---
 src/components/theme.switch.astro      | 170 +++++------
 src/components/video.astro             |  20 +-
 src/components/youtube.astro           |  17 +-
 src/features/_layout.astro             | 150 +++++-----
 src/pages/index.astro                  |  94 +++---
 src/styles/code.css                    |  16 +
 src/styles/global.css                  |  51 ++--
 14 files changed, 661 insertions(+), 621 deletions(-)
 create mode 100644 src/styles/code.css

diff --git a/src/components/biome.astro b/src/components/biome.astro
index d04e9c9..6167784 100644
--- a/src/components/biome.astro
+++ b/src/components/biome.astro
@@ -23,36 +23,38 @@ const { title, description, features } = Astro.props;
 </section>
 
 <style>
-  section {
-    display: grid;
-    gap: var(--size-3);
-    grid-column: main-features;
-
-    > header {
-      margin-block-end: var(--size-8);
-      padding-block-end: var(--size-10);
-      background: var(--surface-1);
-      border-image: conic-gradient(var(--surface-document) 0 0) fill 0
-        //0 100vw;;
-
-      > h2 {
-        font-family: "Jersey10", sans-serif;
-        font-weight: normal;
-        font-size: var(--font-size-8);
+  @layer components.biome {
+    section {
+      display: grid;
+      gap: var(--size-3);
+      grid-column: main-features;
+
+      > header {
+        margin-block-end: var(--size-8);
+        padding-block-end: var(--size-10);
+        background: var(--surface-1);
+        border-image: conic-gradient(var(--surface-document) 0 0) fill 0
+          //0 100vw;;
+
+        > h2 {
+          font-family: "Jersey10", sans-serif;
+          font-weight: normal;
+          font-size: var(--font-size-8);
+        }
       }
-    }
 
-    > .features-list {
-      grid-column: 1;
+      > .features-list {
+        grid-column: 1;
 
-      &:not(:first-of-type) {
-        margin-block-start: var(--size-11);
+        &:not(:first-of-type) {
+          margin-block-start: var(--size-11);
+        }
       }
     }
-  }
 
-  .features-list {
-    display: grid;
-    gap: var(--size-10);
+    .features-list {
+      display: grid;
+      gap: var(--size-10);
+    }
   }
 </style>
diff --git a/src/components/feature.filmstrip.astro b/src/components/feature.filmstrip.astro
index d78e614..54afbd1 100644
--- a/src/components/feature.filmstrip.astro
+++ b/src/components/feature.filmstrip.astro
@@ -5,10 +5,9 @@ import shuffle from "./../util/shuffle";
 const { biomes } = Astro.props;
 
 // Flatten all Biome features to one flat array
-const features = biomes.reduce(
-  (features, biome) => [...features, ...biome.features],
-  []
-).map((feature) => feature.title);
+const features = biomes
+  .reduce((features, biome) => [...features, ...biome.features], [])
+  .map((feature) => feature.title);
 ---
 
 <div class="feature-grid">
@@ -38,46 +37,48 @@ const features = biomes.reduce(
     }
   }
 
-  .feature-grid {
-    display: grid;
-    place-content: center;
-    gap: var(--size-3);
-    padding-block: var(--size-10) var(--size-13);
-    max-inline-size: 100vw;
-    overflow: clip;
-
-    > .row {
+  @layer components.feature-filmstrip {
+    .feature-grid {
       display: grid;
-      grid-auto-flow: column;
-      grid-auto-columns: max(10vw, 15ch);
+      place-content: center;
       gap: var(--size-3);
+      padding-block: var(--size-10) var(--size-13);
+      max-inline-size: 100vw;
+      overflow: clip;
+
+      > .row {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: max(10vw, 15ch);
+        gap: var(--size-3);
 
-      @media (prefers-reduced-motion: no-preference) {
-        @supports (animation-timeline: view()) {
-          animation: pan-x linear both;
-          animation-timeline: view(block);
+        @media (prefers-reduced-motion: no-preference) {
+          @supports (animation-timeline: view()) {
+            animation: pan-x linear both;
+            animation-timeline: view(block);
+          }
         }
-      }
 
-      &:first-of-type {
-        animation-direction: reverse;
-      }
+        &:first-of-type {
+          animation-direction: reverse;
+        }
 
-      > .card {
-        aspect-ratio: 3/4;
-        padding: var(--size-3);
-        background: var(--surface-3);
-        border-radius: var(--radius-3);
-        box-shadow: var(--shadow-1);
+        > .card {
+          aspect-ratio: 3/4;
+          padding: var(--size-3);
+          background: var(--surface-3);
+          border-radius: var(--radius-3);
+          box-shadow: var(--shadow-1);
 
-        display: grid;
-        place-content: center;
-        place-items: center;
-        text-align: center;
-        overflow: clip;
+          display: grid;
+          place-content: center;
+          place-items: center;
+          text-align: center;
+          overflow: clip;
 
-        font-size: var(--font-size-4);
-        font-weight: 100;
+          font-size: var(--font-size-4);
+          font-weight: 100;
+        }
       }
     }
   }
diff --git a/src/components/footer.astro b/src/components/footer.astro
index 16ad105..4401ff9 100644
--- a/src/components/footer.astro
+++ b/src/components/footer.astro
@@ -1,16 +1,19 @@
 ---
+
 ---
 
 <footer id="outro">
   <h3>It's a good time to be a front-end dev.</h3>
-  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> 
+  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 </footer>
 
 <style>
-  footer {
-    block-size: 75vh;
-    display: grid;
-    place-content: center;
-    text-align: center;
+  @layer components.footer {
+    footer {
+      block-size: 75vh;
+      display: grid;
+      place-content: center;
+      text-align: center;
+    }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/header.primary.astro b/src/components/header.primary.astro
index 32ca670..1da7777 100644
--- a/src/components/header.primary.astro
+++ b/src/components/header.primary.astro
@@ -20,38 +20,40 @@ import ThemeSwitch from "./theme.switch.astro";
 </header>
 
 <style>
-  header {
-    display: flex;
-    place-items: center;
-    justify-content: space-between;
-    padding-block: var(--size-3);
-    padding-inline: var(--size-5);
-    background: var(--surface-document);
-
-    @media (width <= 960px) {
-      position: sticky;
-      top: 0;
-      z-index: 1;
-    }
-
-    > .page-controls {
+  @layer components.primary-header {
+    header {
       display: flex;
       place-items: center;
-      gap: var(--size-3);
-    }
-  }
+      justify-content: space-between;
+      padding-block: var(--size-3);
+      padding-inline: var(--size-5);
+      background: var(--surface-document);
 
-  .hamburger {
-    color: var(--text-2);
-    border-radius: var(--radius-round);
-    aspect-ratio: var(--ratio-square);
+      @media (width <= 960px) {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
 
-    &:is(:hover, :focus-visible) {
-      color: var(--text-1);
+      > .page-controls {
+        display: flex;
+        place-items: center;
+        gap: var(--size-3);
+      }
     }
 
-    @media (width >= 960px) {
-      display: none;
+    .hamburger {
+      color: var(--text-2);
+      border-radius: var(--radius-round);
+      aspect-ratio: var(--ratio-square);
+
+      &:is(:hover, :focus-visible) {
+        color: var(--text-1);
+      }
+
+      @media (width >= 960px) {
+        display: none;
+      }
     }
   }
 </style>
diff --git a/src/components/hero.astro b/src/components/hero.astro
index 40b6a7d..ab3cac5 100644
--- a/src/components/hero.astro
+++ b/src/components/hero.astro
@@ -16,64 +16,66 @@ import NavBento from "./nav.bento.astro";
 </section>
 
 <style>
-  .hero {
-    margin-block: var(--size-12);
-    max-inline-size: 1024px;
-    margin-inline: auto;
-    padding-inline: var(--size-5);
-    display: grid;
-    gap: var(--size-8);
+  @layer components.hero {
+    .hero {
+      margin-block: var(--size-12);
+      max-inline-size: 1024px;
+      margin-inline: auto;
+      padding-inline: var(--size-5);
+      display: grid;
+      gap: var(--size-8);
 
-    > h1 {
-      font-family: "Jersey10", sans-serif;
-      font-size: var(--font-size-6);
-      font-weight: normal;
-      text-align: center;
-      max-inline-size: 100%;
+      > h1 {
+        font-family: "Jersey10", sans-serif;
+        font-size: var(--font-size-6);
+        font-weight: normal;
+        text-align: center;
+        max-inline-size: 100%;
 
-      > span {
-        border-radius: var(--radius-2);
-        margin-inline-start: var(--size-2);
-        padding-inline: var(--size-2);
-        padding-block: var(--size-1);
-        box-shadow: 0 0 0 var(--border-size-2);
+        > span {
+          border-radius: var(--radius-2);
+          margin-inline-start: var(--size-2);
+          padding-inline: var(--size-2);
+          padding-block: var(--size-1);
+          box-shadow: 0 0 0 var(--border-size-2);
+        }
       }
-    }
 
-    p {
-      text-align: center;
-      max-inline-size: max-content;
-      margin-inline: auto;
-    }
+      p {
+        text-align: center;
+        max-inline-size: max-content;
+        margin-inline: auto;
+      }
 
-    .hero-title {
-      font-family: "Jersey10", sans-serif;
-      font-weight: normal;
-      margin-block-start: var(--size-12);
-      font-size: var(--font-size-8);
+      .hero-title {
+        font-family: "Jersey10", sans-serif;
+        font-weight: normal;
+        margin-block-start: var(--size-12);
+        font-size: var(--font-size-8);
+      }
     }
-  }
 
-  .video {
-    aspect-ratio: 16/9;
-    background: var(--surface-3);
-    border-radius: var(--radius-3);
+    .video {
+      aspect-ratio: 16/9;
+      background: var(--surface-3);
+      border-radius: var(--radius-3);
 
-    display: grid;
-    place-content: center;
+      display: grid;
+      place-content: center;
 
-    @media (prefers-reduced-motion: no-preference) {
-      transition: clip-path 3s var(--ease-2);
-      clip-path: inset(0 0 0 0 round 30px);
+      @media (prefers-reduced-motion: no-preference) {
+        transition: clip-path 3s var(--ease-2);
+        clip-path: inset(0 0 0 0 round 30px);
 
-      @starting-style {
-        clip-path: inset(100px 100px 100px 100px round 30px);
+        @starting-style {
+          clip-path: inset(100px 100px 100px 100px round 30px);
+        }
       }
-    }
 
-    > svg {
-      block-size: 5rem;
-      inline-size: 5rem;
+      > svg {
+        block-size: 5rem;
+        inline-size: 5rem;
+      }
     }
   }
 </style>
diff --git a/src/components/main.aside.astro b/src/components/main.aside.astro
index 9b75048..4dd4564 100644
--- a/src/components/main.aside.astro
+++ b/src/components/main.aside.astro
@@ -121,251 +121,253 @@ const { biomes } = Astro.props;
 </script>
 
 <style>
-  aside {
-    grid-area: main-sidenav;
-    grid-row: 1;
-    container: main-aside / inline-size;
-
-    @media (width <= 960px) {
-      display: none;
+  @layer components.aside {
+    aside {
+      grid-area: main-sidenav;
+      grid-row: 1;
+      container: main-aside / inline-size;
+
+      @media (width <= 960px) {
+        display: none;
+      }
     }
-  }
-
-  .dynamic-aside {
-    display: grid;
-    grid-template-columns: 40px 1fr;
-    align-self: start;
-    position: sticky;
-    top: var(--size-3);
-    block-size: calc(100dvh - (var(--size-3) * 2));
 
-    > nav {
-      block-size: max-content;
+    .dynamic-aside {
       display: grid;
-      border-radius: var(--radius-3);
-      overflow: clip;
-
-      > details {
-        @media (prefers-reduced-motion: no-preference) {
-          interpolate-size: allow-keywords;
+      grid-template-columns: 40px 1fr;
+      align-self: start;
+      position: sticky;
+      top: var(--size-3);
+      block-size: calc(100dvh - (var(--size-3) * 2));
+
+      > nav {
+        block-size: max-content;
+        display: grid;
+        border-radius: var(--radius-3);
+        overflow: clip;
+
+        > details {
+          @media (prefers-reduced-motion: no-preference) {
+            interpolate-size: allow-keywords;
+          }
+
+          &::details-content {
+            opacity: 0;
+            block-size: 0;
+            overflow-y: clip;
+            transition:
+              content-visibility 0.5s allow-discrete,
+              opacity 0.5s,
+              block-size 0.5s;
+          }
+
+          &[open]::details-content {
+            opacity: 1;
+            block-size: auto;
+          }
         }
 
-        &::details-content {
-          opacity: 0;
-          block-size: 0;
-          overflow-y: clip;
-          transition:
-            content-visibility 0.5s allow-discrete,
-            opacity 0.5s,
-            block-size 0.5s;
+        > details:nth-child(1) {
+          &,
+          & > summary {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+          }
         }
 
-        &[open]::details-content {
-          opacity: 1;
-          block-size: auto;
+        > details:nth-child(2) {
+          &,
+          & > summary {
+            border-radius: 0;
+          }
         }
-      }
 
-      > details:nth-child(1) {
-        &,
-        & > summary {
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
+        > details:nth-child(3) {
+          &,
+          & > summary {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+          }
         }
       }
 
-      > details:nth-child(2) {
-        &,
-        & > summary {
-          border-radius: 0;
-        }
-      }
-
-      > details:nth-child(3) {
-        &,
-        & > summary {
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
-        }
-      }
-    }
-
-    ul {
-      padding: 0;
-      display: grid;
+      ul {
+        padding: 0;
+        display: grid;
 
-      > li {
-        display: flex;
-        position: relative;
+        > li {
+          display: flex;
+          position: relative;
 
-        padding-inline: var(--size-3);
-        padding-block: var(--size-2);
+          padding-inline: var(--size-3);
+          padding-block: var(--size-2);
 
-        &::before {
-          content: "";
-          position: absolute;
-          top: 0;
-          left: 0;
-          background: var(--link);
+          &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: var(--link);
 
-          inline-size: 3px;
-          block-size: 100%;
+            inline-size: 3px;
+            block-size: 100%;
 
-          transform: scaleY(0);
-          animation: i-spy linear;
-          animation-timeline: var(--_view-timeline);
-        }
+            transform: scaleY(0);
+            animation: i-spy linear;
+            animation-timeline: var(--_view-timeline);
+          }
 
-        & code {
-          padding: 0;
-          background: none;
+          & code {
+            padding: 0;
+            background: none;
+          }
         }
       }
     }
-  }
 
-  .track {
-    /* managed by script */
-    --scroll-direction: 1;
+    .track {
+      /* managed by script */
+      --scroll-direction: 1;
 
-    container-type: size;
-    position: relative;
-    width: 2px;
-    border-right: 2px dashed var(--surface-2);
+      container-type: size;
+      position: relative;
+      width: 2px;
+      border-right: 2px dashed var(--surface-2);
 
-    > [data-icon] {
-      max-inline-size: initial;
-      color: black;
-    }
+      > [data-icon] {
+        max-inline-size: initial;
+        color: black;
+      }
 
-    @media (prefers-reduced-motion: no-preference) {
-      @supports (animation-timeline: view()) {
-        > [data-icon] {
-          animation: truck-ride linear both;
-          animation-timeline: view();
-          view-timeline: --features-view;
-          animation-range-start: entry calc(100vh - 3rem);
+      @media (prefers-reduced-motion: no-preference) {
+        @supports (animation-timeline: view()) {
+          > [data-icon] {
+            animation: truck-ride linear both;
+            animation-timeline: view();
+            view-timeline: --features-view;
+            animation-range-start: entry calc(100vh - 3rem);
+          }
         }
-      }
-      @supports not (animation-timeline: view()) {
-        > [data-icon] {
-          display: none;
+        @supports not (animation-timeline: view()) {
+          > [data-icon] {
+            display: none;
+          }
         }
       }
-    }
 
-    @container (width >= 30ch) {
-      &::before,
-      &::after {
-        content: "";
-        aspect-ratio: 1;
-        background: var(--surface-3);
-        border-radius: var(--radius-round);
-        display: block;
-        top: -10px;
-        left: -4px;
-        width: 10px;
-        position: absolute;
-      }
+      @container (width >= 30ch) {
+        &::before,
+        &::after {
+          content: "";
+          aspect-ratio: 1;
+          background: var(--surface-3);
+          border-radius: var(--radius-round);
+          display: block;
+          top: -10px;
+          left: -4px;
+          width: 10px;
+          position: absolute;
+        }
 
-      &::after {
-        top: auto;
-        bottom: -10px;
+        &::after {
+          top: auto;
+          bottom: -10px;
+        }
       }
     }
-  }
 
-  .mobile-sidenav {
-    --_left-pad: var(--size-8);
-    --_x: calc(var(--_left-pad) / 2 * -1);
+    .mobile-sidenav {
+      --_left-pad: var(--size-8);
+      --_x: calc(var(--_left-pad) / 2 * -1);
 
-    block-size: 100dvh;
-    max-block-size: 100dvh;
-    overflow: auto;
+      block-size: 100dvh;
+      max-block-size: 100dvh;
+      overflow: auto;
 
-    display: grid;
-    align-content: start;
-    gap: var(--size-7);
+      display: grid;
+      align-content: start;
+      gap: var(--size-7);
 
-    padding-block: var(--size-3);
-    padding-inline: var(--_left-pad) var(--size-5);
+      padding-block: var(--size-3);
+      padding-inline: var(--_left-pad) var(--size-5);
 
-    @media (width > 960px) {
-      display: none;
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-      transition:
-        translate 0.5s var(--ease-spring-1),
-        box-shadow 0.5s ease,
-        display 0.5s linear allow-discrete,
-        overlay 0.5s linear allow-discrete;
-    }
+      @media (width > 960px) {
+        display: none;
+      }
 
-    &:not(:popover-open) {
-      translate: -100% 0;
-    }
+      @media (prefers-reduced-motion: no-preference) {
+        transition:
+          translate 0.5s var(--ease-spring-1),
+          box-shadow 0.5s ease,
+          display 0.5s linear allow-discrete,
+          overlay 0.5s linear allow-discrete;
+      }
 
-    &:popover-open {
-      translate: var(--_x) 0;
-      box-shadow:
-        3px 0px 2px #00000005,
-        8px 0px 5px #00000007,
-        15px 0px 10px #00000008,
-        27px 0px 18px #0000000a,
-        50px 0px 33px #0000000c,
-        119px 0px 80px #00000011;
-
-      @starting-style {
+      &:not(:popover-open) {
         translate: -100% 0;
       }
-    }
 
-    > header {
-      > h2 {
-        color: light-dark(deeppink, yellow);
-        font-size: var(--font-size-5);
+      &:popover-open {
+        translate: var(--_x) 0;
+        box-shadow:
+          3px 0px 2px #00000005,
+          8px 0px 5px #00000007,
+          15px 0px 10px #00000008,
+          27px 0px 18px #0000000a,
+          50px 0px 33px #0000000c,
+          119px 0px 80px #00000011;
+
+        @starting-style {
+          translate: -100% 0;
+        }
       }
-    }
 
-    > section {
-      display: grid;
-      gap: var(--size-2);
-    }
-
-    h2 {
-      font-family: "Jersey10", sans-serif;
-      font-weight: normal;
-      font-size: var(--font-size-4);
-    }
-
-    ul {
-      list-style-type: none;
-      padding: 0;
-      display: grid;
-      border-left: 1px solid var(--surface-2);
+      > header {
+        > h2 {
+          color: light-dark(deeppink, yellow);
+          font-size: var(--font-size-5);
+        }
+      }
 
-      > li {
-        padding-inline-start: var(--size-5);
-        line-height: 2;
-        position: relative;
+      > section {
+        display: grid;
+        gap: var(--size-2);
+      }
 
-        &::before {
-          content: "";
-          position: absolute;
-          top: 0;
-          left: -2px;
-          background: var(--link);
-          inline-size: 4px;
-          block-size: 100%;
-
-          transform: scaleY(0);
-          animation: i-spy linear;
-          animation-timeline: var(--_view-timeline);
-        }
+      h2 {
+        font-family: "Jersey10", sans-serif;
+        font-weight: normal;
+        font-size: var(--font-size-4);
+      }
 
-        > a:not(:hover, :focus-visible) {
-          color: var(--text-2);
+      ul {
+        list-style-type: none;
+        padding: 0;
+        display: grid;
+        border-left: 1px solid var(--surface-2);
+
+        > li {
+          padding-inline-start: var(--size-5);
+          line-height: 2;
+          position: relative;
+
+          &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: -2px;
+            background: var(--link);
+            inline-size: 4px;
+            block-size: 100%;
+
+            transform: scaleY(0);
+            animation: i-spy linear;
+            animation-timeline: var(--_view-timeline);
+          }
+
+          > a:not(:hover, :focus-visible) {
+            color: var(--text-2);
+          }
         }
       }
     }
diff --git a/src/components/nav.bento.astro b/src/components/nav.bento.astro
index 5496569..fb1dc18 100644
--- a/src/components/nav.bento.astro
+++ b/src/components/nav.bento.astro
@@ -17,52 +17,54 @@
 </nav>
 
 <style>
-  nav.bento > ul {
-    display: grid;
-    --_size: 20vmin;
-    grid: repeat(2, var(--_size)) / repeat(3, var(--_size));
-    gap: var(--size-3);
-    max-inline-size: max-content;
-    margin-inline: auto;
-    padding: 0;
-
-    > li {
-      list-style-type: none;
-      padding: 0;
+  @layer components.bento {
+    nav.bento > ul {
       display: grid;
-      border-radius: var(--radius-3);
-      overflow: clip;
-
-      &:first-of-type {
-        grid-row: span 2;
-        grid-column: span 2;
-        max-inline-size: 100%;
-      }
+      --_size: 20vmin;
+      grid: repeat(2, var(--_size)) / repeat(3, var(--_size));
+      gap: var(--size-3);
+      max-inline-size: max-content;
+      margin-inline: auto;
+      padding: 0;
 
-      > a {
+      > li {
+        list-style-type: none;
+        padding: 0;
         display: grid;
+        border-radius: var(--radius-3);
+        overflow: clip;
 
-        > span {
-          grid-area: 1 / 1;
-          place-self: end center;
+        &:first-of-type {
+          grid-row: span 2;
+          grid-column: span 2;
+          max-inline-size: 100%;
         }
 
-        &::after {
-          content: "";
-          grid-area: 1 / 1;
-          background: var(--surface-3);
-          border-radius: var(--radius-3);
-          box-shadow: var(--shadow-2);
-        }
-        @media (prefers-reduced-motion: no-preference) {
+        > a {
+          display: grid;
+
+          > span {
+            grid-area: 1 / 1;
+            place-self: end center;
+          }
+
           &::after {
-            transition: transform 0.75s var(--ease-bounce-2);
+            content: "";
+            grid-area: 1 / 1;
+            background: var(--surface-3);
+            border-radius: var(--radius-3);
+            box-shadow: var(--shadow-2);
           }
+          @media (prefers-reduced-motion: no-preference) {
+            &::after {
+              transition: transform 0.75s var(--ease-bounce-2);
+            }
 
-          &:hover::after {
-            transform: translateY(-1.5lh);
-            transition-duration: 1s;
-            transition-timing-function: var(--ease-spring-2);
+            &:hover::after {
+              transform: translateY(-1.5lh);
+              transition-duration: 1s;
+              transition-timing-function: var(--ease-spring-2);
+            }
           }
         }
       }
diff --git a/src/components/theme.switch.astro b/src/components/theme.switch.astro
index 23cf634..409ff84 100644
--- a/src/components/theme.switch.astro
+++ b/src/components/theme.switch.astro
@@ -56,7 +56,7 @@
     document.querySelector("#theme-toggle").addEventListener("click", onClick);
 
     // Restore :root have a viewTransitionName
-    document.documentElement.style.viewTransitionName = 'root';
+    document.documentElement.style.viewTransitionName = "root";
     pageLoading = false;
   };
 
@@ -130,113 +130,115 @@
 </style>
 
 <style>
-  .theme-toggle {
-    --size: var(--size-5);
-    --icon-fill: hsl(210 10% 30%);
-    --icon-fill-hover: hsl(210 10% 15%);
-
-    background: none;
-    border: none;
-    padding: 0;
-
-    inline-size: var(--size);
-    block-size: var(--size);
-    aspect-ratio: 1;
-    border-radius: 50%;
-
-    cursor: pointer;
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-
-    outline-offset: 5px;
-
-    & > svg {
-      inline-size: 100%;
-      block-size: 100%;
-      stroke-linecap: round;
-    }
-
-    [data-theme="dark"] & {
-      --icon-fill: hsl(210 10% 70%);
-      --icon-fill-hover: hsl(210 15% 90%);
-    }
-
-    @media (hover: none) {
-      --size: 48px;
-    }
+  @layer components.theme-switch {
+    .theme-toggle {
+      --size: var(--size-5);
+      --icon-fill: hsl(210 10% 30%);
+      --icon-fill-hover: hsl(210 10% 15%);
+
+      background: none;
+      border: none;
+      padding: 0;
+
+      inline-size: var(--size);
+      block-size: var(--size);
+      aspect-ratio: 1;
+      border-radius: 50%;
+
+      cursor: pointer;
+      touch-action: manipulation;
+      -webkit-tap-highlight-color: transparent;
+
+      outline-offset: 5px;
+
+      & > svg {
+        inline-size: 100%;
+        block-size: 100%;
+        stroke-linecap: round;
+      }
 
-    &:is(:hover, :focus-visible) :is(.moon, .sun, .sun-beams) {
-      fill: var(--icon-fill-hover);
-    }
-  }
+      [data-theme="dark"] & {
+        --icon-fill: hsl(210 10% 70%);
+        --icon-fill-hover: hsl(210 15% 90%);
+      }
 
-  .sun-and-moon {
-    & > :is(.moon, .sun, .sun-beams) {
-      transform-origin: center center;
-    }
+      @media (hover: none) {
+        --size: 48px;
+      }
 
-    & > :where(.moon, .sun) {
-      fill: var(--icon-fill);
+      &:is(:hover, :focus-visible) :is(.moon, .sun, .sun-beams) {
+        fill: var(--icon-fill-hover);
+      }
     }
 
-    & > .sun-beams {
-      stroke: var(--icon-fill);
-      stroke-width: 2px;
-    }
+    .sun-and-moon {
+      & > :is(.moon, .sun, .sun-beams) {
+        transform-origin: center center;
+      }
 
-    [data-theme="dark"] & {
-      & > .sun {
-        transform: scale(1.75);
+      & > :where(.moon, .sun) {
+        fill: var(--icon-fill);
       }
 
       & > .sun-beams {
-        opacity: 0;
+        stroke: var(--icon-fill);
+        stroke-width: 2px;
       }
 
-      & > .moon > circle {
-        transform: translateX(-7px);
-
-        @supports (cx: 1) {
-          transform: translateX(0);
-          cx: 17;
+      [data-theme="dark"] & {
+        & > .sun {
+          transform: scale(1.75);
         }
-      }
-    }
 
-    @media (prefers-reduced-motion: no-preference) {
-      & > .sun {
-        transition: transform 1s var(--ease-spring-3);
-      }
-
-      & > .sun-beams {
-        transition:
-          transform 0.75s var(--ease-spring-2),
-          opacity 0.5s var(--ease-3);
-      }
+        & > .sun-beams {
+          opacity: 0;
+        }
 
-      & .moon > circle {
-        transition: transform 0.25s var(--ease-out-5);
+        & > .moon > circle {
+          transform: translateX(-7px);
 
-        @supports (cx: 1) {
-          transition: cx 0.25s var(--ease-out-5);
+          @supports (cx: 1) {
+            transform: translateX(0);
+            cx: 17;
+          }
         }
       }
 
-      [data-theme="dark"] & {
+      @media (prefers-reduced-motion: no-preference) {
         & > .sun {
-          transform: scale(1.75);
-          transition-timing-function: var(--ease-3);
-          transition-duration: 0.25s;
+          transition: transform 1s var(--ease-spring-3);
         }
 
         & > .sun-beams {
-          transform: rotateZ(-25deg);
-          transition-duration: 0.15s;
+          transition:
+            transform 0.75s var(--ease-spring-2),
+            opacity 0.5s var(--ease-3);
         }
 
-        & > .moon > circle {
-          transition-delay: 0.25s;
-          transition-duration: 0.5s;
+        & .moon > circle {
+          transition: transform 0.25s var(--ease-out-5);
+
+          @supports (cx: 1) {
+            transition: cx 0.25s var(--ease-out-5);
+          }
+        }
+
+        [data-theme="dark"] & {
+          & > .sun {
+            transform: scale(1.75);
+            transition-timing-function: var(--ease-3);
+            transition-duration: 0.25s;
+          }
+
+          & > .sun-beams {
+            transform: rotateZ(-25deg);
+            transition-duration: 0.15s;
+          }
+
+          & > .moon > circle {
+            transition-delay: 0.25s;
+            transition-duration: 0.5s;
+          }
         }
       }
     }
diff --git a/src/components/video.astro b/src/components/video.astro
index f445351..6d4e2c4 100644
--- a/src/components/video.astro
+++ b/src/components/video.astro
@@ -28,16 +28,18 @@ const { src, width = 720, height = 480 } = Astro.props;
     }
   }
 
-  @supports (animation-timeline: view()) {
-    video {
-      animation: rounded-mask-reveal linear both;
-      animation-timeline: view();
-      animation-range: cover 0% cover 25%;
+  @layer components.video {
+    @supports (animation-timeline: view()) {
+      video {
+        animation: rounded-mask-reveal linear both;
+        animation-timeline: view();
+        animation-range: cover 0% cover 25%;
+      }
     }
-  }
 
-  video {
-    border-radius: var(--radius-3);
-    overflow: clip;
+    video {
+      border-radius: var(--radius-3);
+      overflow: clip;
+    }
   }
 </style>
diff --git a/src/components/youtube.astro b/src/components/youtube.astro
index e0b2332..05bd96c 100644
--- a/src/components/youtube.astro
+++ b/src/components/youtube.astro
@@ -6,7 +6,12 @@ interface Props {
   title?: string;
 }
 
-const { id, width = 560, height = 315, title = 'YouTube video player' } = Astro.props;
+const {
+  id,
+  width = 560,
+  height = 315,
+  title = "YouTube video player",
+} = Astro.props;
 const src = `https://www.youtube.com/embed/${id}`;
 ---
 
@@ -22,9 +27,11 @@ const src = `https://www.youtube.com/embed/${id}`;
   allowfullscreen></iframe>
 
 <style define:vars={{ aspectRatio: width / height }}>
-  iframe {
-    width: 100%;
-    height: auto;
-    aspect-ratio: var(--aspectRatio);
+  @layer components.youtube {
+    iframe {
+      width: 100%;
+      height: auto;
+      aspect-ratio: var(--aspectRatio);
+    }
   }
 </style>
diff --git a/src/features/_layout.astro b/src/features/_layout.astro
index c6b791c..af346a8 100644
--- a/src/features/_layout.astro
+++ b/src/features/_layout.astro
@@ -7,101 +7,103 @@
 </article>
 
 <style>
-  article {
-    --_inline-padding: var(--size-8);
-
-    display: grid;
-    gap: var(--size-8);
-    padding: var(--size-7) var(--_inline-padding);
-    border: 1px solid var(--surface-2);
-    border-radius: var(--radius-3);
-    box-shadow: var(--shadow-3);
-    font-weight: 300;
-    backdrop-filter: blur(5px);
-    background: var(--surface-1);
-
-    @media (width <= 720px) {
-      --_inline-padding: var(--size-3);
-      gap: var(--size-5);
-    }
+  @layer components.feature {
+    article {
+      --_inline-padding: var(--size-8);
 
-    > header {
       display: grid;
-      gap: var(--size-6);
-
-      > h3 {
-        font-family: "Jersey10", sans-serif;
-        font-size: var(--font-size-7);
-        font-weight: normal;
-        line-height: .9;
-        scroll-margin-block-start: 3.5rem;
+      gap: var(--size-8);
+      padding: var(--size-7) var(--_inline-padding);
+      border: 1px solid var(--surface-2);
+      border-radius: var(--radius-3);
+      box-shadow: var(--shadow-3);
+      font-weight: 300;
+      backdrop-filter: blur(5px);
+      background: var(--surface-1);
+
+      @media (width <= 720px) {
+        --_inline-padding: var(--size-3);
+        gap: var(--size-5);
+      }
 
-        > code {
-          font-size: .6em
+      > header {
+        display: grid;
+        gap: var(--size-6);
+
+        > h3 {
+          font-family: "Jersey10", sans-serif;
+          font-size: var(--font-size-7);
+          font-weight: normal;
+          line-height: 0.9;
+          scroll-margin-block-start: 3.5rem;
+
+          > code {
+            font-size: 0.6em;
+          }
         }
       }
-    }
 
-    > footer {
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      gap: var(--size-2);
-      border-block-start: 1px solid var(--surface-2);
-      padding-block-start: var(--size-6);
-      margin-block-start: var(--size-5);
-
-      > .articles {
+      > footer {
         display: flex;
+        justify-content: space-between;
         flex-wrap: wrap;
-        gap: var(--size-2) var(--_inline-padding);
-
-        > a {
-          white-space: nowrap;
+        gap: var(--size-2);
+        border-block-start: 1px solid var(--surface-2);
+        padding-block-start: var(--size-6);
+        margin-block-start: var(--size-5);
+
+        > .articles {
+          display: flex;
+          flex-wrap: wrap;
+          gap: var(--size-2) var(--_inline-padding);
+
+          > a {
+            white-space: nowrap;
+          }
         }
       }
-    }
 
-    & .video-placeholder {
-      aspect-ratio: 16 / 9;
-      background: var(--surface-3);
-      border-radius: var(--radius-3);
-      overflow: clip;
+      & .video-placeholder {
+        aspect-ratio: 16 / 9;
+        background: var(--surface-3);
+        border-radius: var(--radius-3);
+        overflow: clip;
 
-      display: grid;
-      place-content: center;
+        display: grid;
+        place-content: center;
 
-      > svg {
-        block-size: 5rem;
-        inline-size: 5rem;
+        > svg {
+          block-size: 5rem;
+          inline-size: 5rem;
+        }
       }
-    }
-
-    & .resources {
-      display: grid;
-      gap: var(--size-3);
 
-      > ul {
+      & .resources {
         display: grid;
         gap: var(--size-3);
-        padding-inline: var(--size-3);
 
-        > li {
-          padding-inline-start: 0;
+        > ul {
+          display: grid;
+          gap: var(--size-3);
+          padding-inline: var(--size-3);
+
+          > li {
+            padding-inline-start: 0;
+          }
         }
       }
-    }
 
-    & .support {
-      display: grid;
-      gap: var(--size-3);
-      background: light-dark(var(--surface-1), var(--gray-10));
-      margin-inline: calc(var(--_inline-padding) * -1);
-      padding-inline: var(--_inline-padding);
-      padding-block: var(--size-6) var(--size-3);
-
-      > baseline-status {
-        padding: 0;
+      & .support {
+        display: grid;
+        gap: var(--size-3);
+        background: light-dark(var(--surface-1), var(--gray-10));
+        margin-inline: calc(var(--_inline-padding) * -1);
+        padding-inline: var(--_inline-padding);
+        padding-block: var(--size-6) var(--size-3);
+
+        > baseline-status {
+          padding: 0;
+        }
       }
     }
   }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0c4dba4..b372d36 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -63,7 +63,8 @@ const biomes = [
   },
   {
     title: "Developer Experience",
-    description: "Lorem ipsum dolor sit amet developer experience adipisicing elit.",
+    description:
+      "Lorem ipsum dolor sit amet developer experience adipisicing elit.",
     backdrop: "jungle",
     features: [
       BackdropInheritance,
@@ -86,8 +87,10 @@ const biomes = [
 const timelines = biomes.reduce(
   (timelines, biome) => [
     `--vtl--${slugify(biome.title)}`,
-    ...(biome.features.map(feature => `--vtl--${slugify(biome.title)}--${slugify(feature.title)}`)),
-    ...timelines
+    ...biome.features.map(
+      (feature) => `--vtl--${slugify(biome.title)}--${slugify(feature.title)}`
+    ),
+    ...timelines,
   ],
   []
 );
@@ -113,14 +116,17 @@ const timelines = biomes.reduce(
     <Hero />
     <FeatureFilmstrip biomes={biomes} />
 
-    <main style={`timeline-scope: ${timelines.join(', ')}`}>
+    <main style={`timeline-scope: ${timelines.join(", ")}`}>
       <MainAside biomes={biomes} />
 
       <div class="biomes">
         {
           biomes.map((biome) => {
             return (
-              <div class={`biome ${biome.backdrop}`} style={`view-timeline-name: --vtl--${slugify(biome.title)};`}>
+              <div
+                class={`biome ${biome.backdrop}`}
+                style={`view-timeline-name: --vtl--${slugify(biome.title)};`}
+              >
                 <Biome {...biome} />
               </div>
             );
@@ -134,60 +140,62 @@ const timelines = biomes.reduce(
 </html>
 
 <style>
-  main {
-    display: grid;
-    gap: var(--size-4);
-    grid-template-areas: ". main-features main-sidenav .";
-    grid-template-columns:
-      [fullbleed-start]
-      auto
-      fit-content(720px)
-      minmax(0, 30ch)
-      auto
-      [fullbleed-end];
-
-    @media (width <= 960px) {
-      grid-template-areas: ". main-features .";
+  @layer page.biomes {
+    main {
+      display: grid;
+      gap: var(--size-4);
+      grid-template-areas: ". main-features main-sidenav .";
       grid-template-columns:
         [fullbleed-start]
         auto
         fit-content(720px)
+        minmax(0, 30ch)
         auto
         [fullbleed-end];
+
+      @media (width <= 960px) {
+        grid-template-areas: ". main-features .";
+        grid-template-columns:
+          [fullbleed-start]
+          auto
+          fit-content(720px)
+          auto
+          [fullbleed-end];
+      }
     }
-  }
 
-  .biomes {
-    grid-column: fullbleed;
-    grid-row: 1;
+    .biomes {
+      grid-column: fullbleed;
+      grid-row: 1;
 
-    display: grid;
-    row-gap: 10vh;
-    grid-template-columns: subgrid;
-  }
+      display: grid;
+      row-gap: 10vh;
+      grid-template-columns: subgrid;
+    }
 
-  .biome {
-    grid-column: fullbleed;
+    .biome {
+      grid-column: fullbleed;
 
-    display: grid;
-    grid-template-columns: subgrid;
+      display: grid;
+      grid-template-columns: subgrid;
 
-    padding-block-end: var(--size-8);
+      padding-block-end: var(--size-8);
 
-    background-attachment: fixed;
-    background-size: cover;
-    background-position: top center;
+      background-attachment: fixed;
+      background-size: cover;
+      background-position: top center;
 
-    &.desert {
-      background-image: url(/biomes/desert.svg);
-    }
+      &.desert {
+        background-image: url(/biomes/desert.svg);
+      }
 
-    &.arctic {
-      background-image: url(/biomes/arctic.svg);
-    }
+      &.arctic {
+        background-image: url(/biomes/arctic.svg);
+      }
 
-    &.jungle {
-      background-image: url(/biomes/jungle.svg);
+      &.jungle {
+        background-image: url(/biomes/jungle.svg);
+      }
     }
   }
 </style>
diff --git a/src/styles/code.css b/src/styles/code.css
new file mode 100644
index 0000000..2f514ba
--- /dev/null
+++ b/src/styles/code.css
@@ -0,0 +1,16 @@
+.astro-code {
+  --astro-code-color-text: var(--text-1);
+  --astro-code-color-background: var(--surface-2);
+}
+
+[data-theme="light"] .astro-code {
+  --astro-code-token-function: var(--purple-8);
+  --astro-code-token-constant: var(--blue-9);
+  --astro-code-token-keyword: var(--pink-6);
+}
+
+[data-theme="dark"] .astro-code {
+  --astro-code-token-function: var(--green-3);
+  --astro-code-token-constant: var(--cyan-2);
+  --astro-code-token-keyword: var(--pink-4);
+}
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 5efd5d5..30339b4 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,10 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-@import "open-props/style"; /* todo: import only what's needed */
-@import "open-props/normalize";
-@import "open-props/switch/light";
-@import "open-props/switch/dark";
+@layer base, reset, theme, components, utilities;
+
+@import "open-props/style" layer(base); /* todo: import only what's needed */
+@import "open-props/normalize" layer(reset);
+@import "open-props/switch/light" layer(theme);
+@import "open-props/switch/dark" layer(theme);
+
+@import "./code.css" layer(components.code);
 
 @font-face {
 	font-family: 'Jersey10';
@@ -19,33 +23,18 @@
   navigation: auto;
 }
 
-:root {
-	--surface-document: light-dark(white, var(--surface-1));
-}
-
-html {
-  background-color: var(--surface-document);
-}
-
-pre {
-	padding-block: var(--size-3);
-	padding-inline: var(--size-4);
-	border-radius: var(--radius-3);
-}
+@layer components.page {
+	:root {
+		--surface-document: light-dark(white, var(--surface-1));
+	}
 
-.astro-code {
-	--astro-code-color-text: var(--text-1);
-	--astro-code-color-background: var(--surface-2);
-}
-
-[data-theme="light"] .astro-code {
-	--astro-code-token-function: var(--purple-8);
-	--astro-code-token-constant: var(--blue-9);
-	--astro-code-token-keyword: var(--pink-6);
-}
+	html {
+		background-color: var(--surface-document);
+	}
 
-[data-theme="dark"] .astro-code {
-	--astro-code-token-function: var(--green-3);
-	--astro-code-token-constant: var(--cyan-2);
-	--astro-code-token-keyword: var(--pink-4);
+	pre {
+		padding-block: var(--size-3);
+		padding-inline: var(--size-4);
+		border-radius: var(--radius-3);
+	}
 }
\ No newline at end of file