Refactored ArticleHeader

src/styles/components/blocks/sidenote.css

@@ -0,0 +1,80 @@
+@layer components.blocks {
+  .sidenote-ref {
+    @mixin px var(--size-1);
+
+    font-family: var(--font-mono);
+    font-size: 0.75em;
+    font-weight: var(--font-weight-emphasis);
+    color: var(--color-text-primary);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-primary);
+    }
+
+    &:focus-visible {
+      @mixin focus-ring;
+    }
+  }
+
+  .sidenote {
+    @mixin typo_body-small;
+    @mixin pt var(--size-3);
+    @mixin border-t var(--border-card), solid, var(--color-border-strong);
+
+    scroll-margin-block-start: calc(var(--layout-header-height) + var(--size-8));
+    color: var(--color-text-secondary);
+
+    /* Hangs, so the first line starts against the marker. */
+    & .sidenote__marker {
+      @mixin me var(--size-4);
+
+      float: inline-start;
+      font-family: var(--font-mono);
+      font-weight: var(--font-weight-emphasis);
+      color: var(--color-text-primary);
+    }
+
+    &:target {
+      color: var(--color-text-primary);
+
+      & .sidenote__marker {
+        color: var(--color-primary);
+      }
+    }
+  }
+
+  .sidenote--optional {
+    @mixin border-t var(--border-hairline), solid, var(--color-border-normal);
+
+    color: var(--color-text-tertiary);
+
+    & .sidenote__marker {
+      color: var(--color-text-quiet);
+    }
+  }
+
+  .sidenote--example {
+    & .sidenote__marker {
+      color: var(--color-primary);
+    }
+  }
+
+  @media (--bp-tablet-down) {
+    .sidenote {
+      @mixin my var(--space-6);
+
+      display: block;
+    }
+  }
+
+  @media (--bp-desktop) {
+    .sidenote {
+      @mixin my var(--size-0);
+
+      position: absolute;
+      inset-inline-start: calc(100% + var(--layout-gutter));
+      width: var(--layout-margin-width);
+    }
+  }
+}