Refactor CSS for clarity

src/components/code-comparison/code-comparison.js

@@ -2,40 +2,42 @@ const css = String.raw;
 const sheet = new CSSStyleSheet();
 
 sheet.replaceSync(css`
-  @scope (code-comparison) {
-    :scope {
-      display: block grid;
-      position: relative;
-    }
-
-    [slot="before"],
-    [slot="after"] {
-      display: block grid;
-      grid-area: 1 / 1;
-    }
-
-    [slot="after"] {
-      clip-path: inset(0 0 0 var(--code-comparison-position, 50%));
-    }
-
-    div:nth-of-type(2) {
-      grid-area: 1 / 1;
-      inline-size: 0;
-      inset-inline-start: var(--code-comparison-position, 50%);
-      position: relative;
-      z-index: 2;
-    }
-
-    button {
-      align-items: center;
-      cursor: col-resize;
-      display: block flex;
-      inset-block-start: 50%;
-      justify-content: center;
-      position: absolute;
-      touch-action: none;
-      translate: -50% -50%;
-      z-index: 3;
+  @layer components {
+    @scope (code-comparison) {
+      :scope {
+        display: block grid;
+        position: relative;
+      }
+
+      [slot="before"],
+      [slot="after"] {
+        display: block grid;
+        grid-area: 1 / 1;
+      }
+
+      [slot="after"] {
+        clip-path: inset(0 0 0 var(--code-comparison-position, 50%));
+      }
+
+      div:nth-of-type(2) {
+        grid-area: 1 / 1;
+        inline-size: 0;
+        inset-inline-start: var(--code-comparison-position, 50%);
+        position: relative;
+        z-index: 2;
+      }
+
+      button {
+        align-items: center;
+        cursor: col-resize;
+        display: block flex;
+        inset-block-start: 50%;
+        justify-content: center;
+        position: absolute;
+        touch-action: none;
+        translate: -50% -50%;
+        z-index: 3;
+      }
     }
   }
 `);

src/components/copy-clipboard/copy-clipboard.js

@@ -2,55 +2,57 @@ const css = String.raw;
 const sheet = new CSSStyleSheet();
 
 sheet.replaceSync(css`
-  @scope (copy-clipboard) {
-    :scope {
-      position: relative;
-    }
-
-    textarea,
-    input[type="text"] {
-      anchor-name: --textarea;
-    }
-
-    button {
-      align-items: center;
-      bottom: calc(anchor(bottom) + var(--length-xs));
-      display: block flex;
-      min-inline-size: 7em;
-      opacity: 0;
-      place-content: center;
-      position: absolute;
-      position-anchor: --textarea;
-      right: calc(anchor(right) + var(--length-xs));
-      transition: opacity var(--duration) var(--timing-function);
-
-      :scope:is(:hover, :focus-within) & {
-        opacity: 1;
+  @layer components {
+    @scope (copy-clipboard) {
+      :scope {
+        position: relative;
       }
-    }
 
-    span {
-      align-items: center;
-      display: block flex;
-      gap: 0.25em;
-      transition: opacity var(--duration) var(--timing-function);
+      textarea,
+      input[type="text"] {
+        anchor-name: --textarea;
+      }
 
-      &[aria-hidden="true"] {
+      button {
+        align-items: center;
+        display: block flex;
+        inset-block-end: calc(anchor(bottom) + var(--length-xs));
+        inset-inline-end: calc(anchor(right) + var(--length-xs));
+        min-inline-size: 7em;
         opacity: 0;
-      }
+        place-content: center;
+        position: absolute;
+        position-anchor: --textarea;
+        transition: opacity var(--duration) var(--timing-function);
 
-      &[aria-hidden="false"] {
-        opacity: 1;
+        :scope:is(:hover, :focus-within) & {
+          opacity: 1;
+        }
       }
 
-      &:nth-of-type(2) {
-        position: absolute;
+      span {
+        align-items: center;
+        display: block flex;
+        gap: 0.25em;
+        transition: opacity var(--duration) var(--timing-function);
+
+        &[aria-hidden="true"] {
+          opacity: 0;
+        }
+
+        &[aria-hidden="false"] {
+          opacity: 1;
+        }
+
+        &:nth-of-type(2) {
+          position: absolute;
+        }
       }
-    }
 
-    svg {
-      block-size: 1lh;
-      inline-size: 1lh;
+      svg {
+        block-size: 1lh;
+        inline-size: 1lh;
+      }
     }
   }
 `);

src/components/prompt-cycler/prompt-cycler.js

@@ -2,27 +2,29 @@ const css = String.raw;
 const sheet = new CSSStyleSheet();
 
 sheet.replaceSync(css`
-  @scope (prompt-cycler) {
-    nav {
-      align-items: center;
-      display: block flex;
-      justify-content: center;
-    }
+  @layer components {
+    @scope (prompt-cycler) {
+      nav {
+        align-items: center;
+        display: block flex;
+        justify-content: center;
+      }
 
-    span {
-      > span {
-        appearance: none;
-        padding: 0;
+      span {
+        > span {
+          appearance: none;
+          padding: 0;
+        }
       }
-    }
 
-    p {
-      block-size: 1px;
-      clip-path: inset(50%);
-      inline-size: 1px;
-      overflow: hidden;
-      position: absolute;
-      white-space: nowrap;
+      p {
+        block-size: 1px;
+        clip-path: inset(50%);
+        inline-size: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+      }
     }
   }
 `);

src/components/what/what.css

@@ -8,7 +8,6 @@
   }
 
   li {
-    all: unset;
     background-color: var(--color-bg-secondary);
     border-radius: var(--length-xs);
     container-type: inline-size;
@@ -32,13 +31,13 @@
   }
 
   ul {
-    all: unset;
     display: block grid;
     gap: var(--length);
     grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr));
-    margin-block-start: var(--length-l);
+    list-style: none;
+    margin-block: var(--length-l) 0;
 
-    &:has(li:hover, li:focus-within) li:not(:hover, li:focus-within) {
+    &:has(li:hover, li:focus-within) li:not(:hover, :focus-within) {
       opacity: 0.55;
     }
   }

src/elements.css

@@ -44,7 +44,7 @@ body {
   background-color: var(--color-bg);
   color: var(--color-fg);
   container: inline-size;
-  font-family: Recursive, system-ui;
+  font-family: Recursive, "Recursive Fallback", sans-serif;
   font-kerning: normal;
   font-optical-sizing: auto;
   font-size: var(--font-size);

src/fonts.css

@@ -19,3 +19,14 @@
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
     U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+@font-face {
+  ascent-override: 82.84%;
+  descent-override: 21.8%;
+  font-family: "Recursive Fallback";
+  font-style: normal;
+  font-weight: 400;
+  line-gap-override: 0%;
+  size-adjust: 114.67%;
+  src: local("Arial");
+}

src/pages/skill.astro

@@ -3,9 +3,11 @@ import SubLayout from "../layouts/SubLayout.astro";
 import { getEntry, render } from "astro:content";
 
 const entry = await getEntry("skill", "skill");
-const { Content } = await render(entry!);
+const { Content, headings } = await render(entry!);
+const heading = headings.find((h) => h.depth === 1);
+const title = `${heading?.text ?? entry!.data.name} - ModernCSS.AI`;
 ---
 
-<SubLayout title="llms.txt - ModernCSS.AI" description="Modern CSS rules for creating robust, responsive and accessible UIs.">
+<SubLayout title={title} description={entry!.data.description}>
   <Content />
 </SubLayout>