Added ArticleHeader

src/components/Article/Header/Meta/Meta.module.css

@@ -0,0 +1,71 @@
+.meta {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--spacing-comfortable);
+  font-size: var(--font-size-responsive);
+}
+
+.section {
+  @mixin py var(--spacing-snug);
+}
+
+.label {
+  @mixin mb var(--spacing-tight);
+  @mixin pb var(--spacing-tight);
+  @mixin border-b var(--size-1), solid, var(--color-surface-inverse);
+
+  display: block;
+  font-size: var(--typo-size-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--typo-spacing-comfortable);
+}
+
+.author {
+  @mixin anim-txt-characterglitch;
+
+  font-family: var(--font-mono);
+  font-size: var(--typo-size-sm);
+  font-weight: var(--typo-weight-bold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
+
+.taglist {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-tight);
+}
+
+.tag {
+  padding: var(--spacing-tight) var(--spacing-snug);
+  border: var(--size-1) solid var(--color-palette-charcoal-gray);
+
+  font-family: var(--font-mono), monospace;
+  font-size: var(--typo-size-sm);
+  font-weight: var(--typo-weight-bold);
+  text-transform: uppercase;
+  letter-spacing: var(--typo-spacing-relaxed);
+
+  background: var(--color-palette-charcoal-gray);
+
+  & .link {
+    color: var(--color-palette-off-white);
+    transition: color 0.5s ease-in-out;
+
+    &:hover {
+      color: var(--color-primary);
+    }
+  }
+}
+
+.updatedate {
+  font-family: var(--font-mono), monospace;
+  font-size: var(--typo-size-sm);
+  font-weight: var(--typo-weight-bold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+}