Refactored ArticleHeader

src/styles/components/blocks/footnote.css

@@ -0,0 +1,109 @@
+@layer components.blocks {
+  .footnote-ref {
+    font-family: var(--font-mono);
+    font-size: 0.7em;
+    font-weight: var(--font-weight-emphasis);
+    line-height: 1;
+
+    & a {
+      @mixin px var(--size-1);
+
+      color: var(--color-text-primary);
+      text-decoration: none;
+
+      &:hover {
+        color: var(--color-primary);
+      }
+
+      &:focus-visible {
+        @mixin focus-ring;
+      }
+    }
+  }
+
+  .footnotes {
+    --footnote-marker: 1.5rem;
+
+    @mixin mt var(--space-10);
+    @mixin pt var(--space-6);
+    @mixin border-t var(--border-boundary), solid, var(--color-border-strong);
+
+    counter-reset: fn;
+
+    & .footnotes__title {
+      @mixin typo_label;
+      @mixin mt var(--size-0);
+      @mixin mb var(--size-5);
+    }
+
+    & ol {
+      @mixin ma var(--size-0);
+      @mixin pl var(--size-0);
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--size-4);
+      list-style: none;
+
+      & li {
+        @mixin typo_body-small;
+
+        counter-increment: fn;
+        scroll-margin-block-start: calc(var(--layout-header-height) + var(--size-8));
+
+        display: grid;
+        grid-template-columns: var(--footnote-marker) minmax(0, 1fr);
+        column-gap: var(--slot-prose-gap);
+
+        color: var(--color-text-secondary);
+
+        &::before {
+          content: counter(fn);
+          font-family: var(--font-mono);
+          font-weight: var(--font-weight-emphasis);
+          color: var(--color-text-primary);
+        }
+
+        &:target {
+          color: var(--color-text-primary);
+
+          &::before {
+            color: var(--color-primary);
+          }
+        }
+      }
+    }
+
+    & .footnotes__note {
+      @mixin ma var(--size-0);
+    }
+
+    & a {
+      color: var(--color-text-link);
+      text-decoration: underline;
+      text-decoration-thickness: var(--size-1);
+      text-underline-offset: var(--size-2);
+
+      &:visited {
+        color: var(--color-text-link-visited);
+      }
+
+      &:hover {
+        color: var(--color-text-link-hover);
+      }
+
+      &:focus-visible {
+        @mixin focus-ring;
+      }
+    }
+
+    & a.footnotes__back {
+      color: var(--color-text-quiet);
+      text-decoration: none;
+
+      &:hover {
+        color: var(--color-text-primary);
+      }
+    }
+  }
+}