Added ArticleHeader

src/components/Article/Content/MarkdocRenderer/MarkdocRenderer.module.css

@@ -10,13 +10,18 @@
   @media screen and (--bp-margin) {
     @mixin px 0;
 
+    position: relative;
+
     display: flex;
     gap: var(--spacing-generous);
+
     max-width: none;
 
+    font-size: clamp(1rem, 2.5vw, 1.25rem);
+
     & .content {
       flex: 1 1 auto;
-      min-width: 50ch;
+      min-width: 40ch;
       max-width: 75ch;
     }
   }

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

@@ -0,0 +1,26 @@
+.cover {
+  @mixin border-t var(--size-3), solid, var(--color-surface-inverse);
+}
+
+.image {
+  width: 100%;
+  height: auto;
+  max-height: 60vh;
+  object-fit: cover;
+}
+
+.caption {
+  padding: var(--spacing-snug);
+  font-family: var(--font-mono);
+  color: var(--color-text-inverse);
+  background-color: var(--color-surface-inverse);
+}
+
+.captionwrapper {
+  font-size: var(--font-size-responsive);
+  text-align: center;
+}
+
+.captiontext {
+  font-size: var(--typo-size-sm);
+}

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

@@ -0,0 +1,4 @@
+.container {
+  margin-bottom: var(--spacing-comfortable);
+  border-bottom: var(--size-4) solid var(--color-text-primary);
+}

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;
+}

src/components/Article/Header/Meta/index.tsx

@@ -31,22 +31,20 @@ export default function Meta({
       {tags && tags.length > 0 && (
         <div className={styles.section}>
           <span className={styles.label}>Tags</span>
-          <span className={styles.author}>
-            <ul className={styles.taglist}>
-              {tags.map((tag) => (
-                <li key={tag.slug} className={styles.tag}>
-                  <Link className={styles.link} href={`/tags/${tag.slug}`}>
-                    {tag.name}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </span>
+          <ul className={styles.taglist}>
+            {tags.map((tag) => (
+              <li key={tag.slug} className={styles.tag}>
+                <Link className={styles.link} href={`/tags/${tag.slug}`}>
+                  {tag.name}
+                </Link>
+              </li>
+            ))}
+          </ul>
         </div>
       )}
       {publicationDate && (
-        <div className={styles.metasection}>
-          <span className={styles.metalabel}>Last Update</span>
+        <div className={styles.section}>
+          <span className={styles.label}>Last Update</span>
           <time className={styles.updatedate}>
             ⟫
             {updateDate

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

@@ -0,0 +1,42 @@
+.overline {
+  @mixin px var(--spacing-comfortable);
+
+  background-color: var(--color-surface-inverse);
+}
+
+.wrapper {
+  @mixin py var(--spacing-snug);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--typo-size-responsive);
+}
+
+.breadcrumbs {
+  display: flex;
+  font-family: var(--font-mono);
+  font-size: var(--typo-size-sm);
+  color: var(--color-text-inverse);
+}
+
+.current {
+  font-weight: var(--typo-weight-bold);
+  color: var(--color-primary);
+}
+
+.link {
+  color: var(--color-text-inverse);
+  transition: color 0.5s ease-in-out;
+
+  &:hover {
+    color: var(--color-tertiary);
+  }
+}
+
+.publicationDate {
+  font-family: var(--font-mono), monospace;
+  font-size: var(--typo-size-xs);
+  font-weight: var(--typo-weight-bold);
+  color: var(--color-text-inverse);
+}

src/components/Article/Header/Overline/index.tsx

@@ -30,17 +30,19 @@ export default function Overline({
   });
   return (
     <div className={styles.overline}>
-      <ul className={styles.breadcrumbs}>
-        <li className={styles.crumb}>
-          <Link href="/" className={styles.link}>
-            dave-dmg.de
-          </Link>
-        </li>
-        {breadcrumber}
-      </ul>
-      <time className={styles.publicationDate}>
-        ⟫ {toMilitaryDTG(publicationDate)}
-      </time>
+      <div className={styles.wrapper}>
+        <ul className={styles.breadcrumbs}>
+          <li className={styles.crumb}>
+            <Link href="/" className={styles.link}>
+              dave-dmg.de
+            </Link>
+          </li>
+          {breadcrumber}
+        </ul>
+        <time className={styles.publicationDate}>
+          ⟫ {toMilitaryDTG(publicationDate)}
+        </time>
+      </div>
     </div>
   );
 }

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

@@ -0,0 +1,13 @@
+.wrapper {
+  @mixin py var(--spacing-cozy);
+}
+
+.title {
+  font-family: var(--el-h1-font-family), serif;
+  font-size: var(--el-h1-font-size);
+  font-weight: var(--el-h1-font-weight);
+  line-height: var(--el-h1-line-height);
+  color: var(--el-h1-color);
+  text-transform: var(--el-h1-text-transform);
+  letter-spacing: var(--el-h1-letter-spacing);
+}

src/components/Article/Header/Title/index.tsx

@@ -1,5 +1,4 @@
 import styles from './Title.module.css';
-import { JSX } from 'react';
 
 interface TitleProps {
   title: string;

src/components/Content/Sidenote/Container/Container.module.css

@@ -1,6 +1,6 @@
 .container {
   flex: 1 0 auto;
-  min-width: 16rem;
+  min-width: var(--size-96);
 }
 
 .wrapper {
@@ -17,10 +17,10 @@
   position: relative;
   padding-left: var(--size-12);
   font-family: var(--font-mono);
-
+  
   @media screen and (--bp-margin) {
-    min-width: 16rem;
-    margin-right: var(--spacing-generous);
+    min-width: var(--size-64);
+    margin-top: 0;
     padding: var(--spacing-cozy) var(--spacing-cozy) var(--spacing-cozy) var(--size-12) ;
     border: var(--size-1) solid var(--color-surface-inverse);
 

src/styles/mixins/borders.css

@@ -0,0 +1,49 @@
+@define-mixin border-l $width: var(--size-1), $style: solid, $color: var(--color-surface-inverse) {
+  border-left: $width $style $color;
+}
+
+@define-mixin border-r $width: var(--size-1), $style: solid, $color: var(--color-surface-inverse) {
+  border-right: $width $style $color;
+}
+
+@define-mixin border-t $width: var(--size-1), $style: solid, $color: var(--color-surface-inverse) {
+  border-top: $width $style $color;
+}
+
+@define-mixin border-b $width: var(--size-1), $style: solid, $color: var(--color-surface-inverse) {
+  border-bottom: $width $style $color;
+}
+
+@define-mixin border-x $width: var(--size-1), $style: solid, $color: var(--color-surface-inverse) {
+  border-right: $width $style $color;
+  border-left: $width $style $color;
+}
+
+@define-mixin border-y $width: var(--size-1), $style: solid, $color: var(--color-surface-inverse) {
+  border-top: $width $style $color;
+  border-bottom: $width $style $color;
+}
+
+@define-mixin rounded-top $radius {
+  border-top-left-radius: $radius;
+  border-top-right-radius: $radius;
+}
+
+@define-mixin rounded-bottom $radius {
+  border-bottom-right-radius: $radius;
+  border-bottom-left-radius: $radius;
+}
+
+@define-mixin rounded-left $radius {
+  border-top-left-radius: $radius;
+  border-bottom-left-radius: $radius;
+}
+
+@define-mixin rounded-right $radius {
+  border-top-left-radius: $radius;
+  border-bottom-left-radius: $radius;
+}
+
+@define-mixin circle {
+  border-radius: 50%;
+}

src/styles/mixins/spacing.css

@@ -1,12 +1,12 @@
-@∂efine-mixin ma $spacing {
+@define-mixin ma $spacing {
   margin: $spacing;
 }
 
-@∂efine-mixin mt $spacing {
+@define-mixin mt $spacing {
   margin-top: $spacing;
 }
 
-@∂efine-mixin mb $spacing {
+@define-mixin mb $spacing {
   margin-bottom: $spacing;
 }
 
@@ -41,15 +41,15 @@
   }
 }
 
-@∂efine-mixin pa $spacing {
+@define-mixin pa $spacing {
   padding: $spacing;
 }
 
-@∂efine-mixin pt $spacing {
+@define-mixin pt $spacing {
   padding-top: $spacing;
 }
 
-@∂efine-mixin pb $spacing {
+@define-mixin pb $spacing {
   padding-bottom: $spacing;
 }