Refactored ArticleHeader

src/styles/components/blocks/terms.css

@@ -0,0 +1,103 @@
+@layer components.blocks {
+  .terms {
+    @mixin ma var(--size-0);
+
+    display: grid;
+  }
+
+  .term {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-8);
+    justify-content: space-between;
+  }
+
+  .term__name {
+    @mixin typo_heading-3;
+    hyphens: auto;
+    overflow-wrap: break-word;
+  }
+
+  .term__kind {
+    @mixin typo_label;
+
+    font-size: var(--type--2);
+    color: var(--color-text-quarternary);
+  }
+
+  .term__body {
+    @mixin ma var(--size-0);
+  }
+
+  .term__definition {
+    @mixin typo_body;
+    @mixin ma var(--size-0);
+  }
+
+  .term__see {
+    @mixin typo_label;
+    @mixin mt var(--size-8);
+    @mixin mb var(--size-0);
+    @mixin pt var(--size-5);
+    @mixin border-t var(--border-hairline), solid, var(--color-border-subtle);
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-5);
+
+    font-size: var(--type--2);
+    color: var(--color-text-quarternary);
+  }
+
+  .term__see-label::after {
+    content: " ⟫";
+  }
+
+  .terms .term__link {
+    color: var(--color-text-primary);
+    text-decoration: underline;
+    text-underline-offset: var(--size-2);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--color-primary);
+    }
+  }
+
+  .terms--cross {
+    @mixin my var(--space-9);
+
+    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
+    gap: var(--border-card);
+    border: var(--border-card) solid var(--color-border-strong);
+    background-color: var(--color-border-strong);
+  }
+
+  .terms--cross .term {
+    @mixin py var(--size-8);
+    @mixin px var(--size-9);
+
+    color: var(--color-text-primary);
+    background-color: var(--color-surface-base);
+
+    &:not(:first-of-type) {
+      box-shadow: 0 calc(-1 * var(--border-card)) 0 var(--color-border-normal);
+    }
+  }
+
+  .terms--cross .term:target {
+    color: var(--color-text-on-accent);
+    background-color: var(--color-primary);
+  }
+
+  .terms--cross .term:target .term__kind {
+    color: var(--color-text-on-accent);
+  }
+
+  .terms--cross .term__body {
+    @mixin py var(--size-8);
+    @mixin px var(--size-9);
+
+    background-color: var(--color-surface-elevated-1);
+  }
+}