starting work on abstracting card design

src/styles/components.scss

@@ -318,3 +318,61 @@ $news-accent-bg: #f8e8b1;
         }
     }
 }
+
+//
+// Cards
+//
+
+.card {
+    display: grid;
+
+    --card-base-internal: var(--card-base, #f8f8f8);
+
+    background: var(--card-base-internal);
+    color: color-mix(in srgb, var(--card-base-internal), #000 80%);
+
+    @include neo-brutalist-card($size: 3px, $offset: 9px);
+
+    row-gap: 0.5rem;
+    padding: 1rem;
+
+    // Variants
+
+    &.large {
+        padding: 2rem;
+
+        @include neo-brutalist-card($size: 4px, $offset: 8px);
+
+        row-gap: 1rem;
+
+        & > .title {
+            font-size: 36px;
+            font-weight: 700;
+        }
+
+        & > .text {
+            font-size: 18px;
+        }
+    }
+
+    // Child Items
+
+    & > .title {
+        color: color-mix(in srgb, var(--card-base-internal), #000 75%);
+        font-size: 26px;
+        font-weight: 700;
+    }
+
+    & > .text {
+        font-size: 16px;
+    }
+
+    & > .tags {
+        display: flex;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+        font-size: 14px;
+        font-weight: 600;
+        color: #555;
+    }
+}

src/styles/main.scss

@@ -27,10 +27,13 @@ $screen-desktop-min: 1024px;
     margin: 0;
 }
 
+html {
+    height: 100%;
+}
+
 html,
 body {
     min-height: 100%;
-    height: 100%;
     margin: 0;
 
     font-family: 'Open Sans', sans-serif;
@@ -93,10 +96,10 @@ a {
 
 body {
     // for the header spacing
-    padding-top: 6rem;
+    // padding-top: 6rem;
 
     display: grid;
-    grid-template-rows: 1fr auto;
+    grid-template-rows: auto 1fr auto;
 
     header {
         z-index: 10;
@@ -105,8 +108,10 @@ body {
         border-bottom: $border-large;
         background: $header-bg;
 
+        grid-column: 1 / -1;
+
         top: 0;
-        position: fixed;
+        position: sticky;
         width: 100%;
 
         display: flex;
@@ -143,6 +148,8 @@ body {
     }
 
     footer {
+        z-index: 10;
+
         min-height: 6rem;
         border-top: $border-large;
         background: $footer-bg;

src/styles/pages.scss

@@ -417,8 +417,84 @@
 }
 
 .design {
+    grid-template-columns: 2fr 10fr;
+
+    @media screen and (max-width: 1400px) {
+        grid-template-columns: 1fr;
+    }
+
+    aside {
+        margin: 1rem;
+        padding: 1rem;
+
+        @include neo-brutalist-card();
+
+        background: #f0f0f0;
+
+        align-self: start;
+        position: sticky;
+        top: 7rem;
+        height: calc(100dvh - 8rem - 6rem);
+
+        nav {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+
+            ul {
+                list-style: none;
+                padding: 0;
+                margin: 0;
+
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+
+                li {
+                    padding-left: calc((var(--depth) - 1) * 1rem);
+
+                    a {
+                        font-size: 16px;
+                        font-weight: 600;
+
+                        color: #444;
+
+                        &:hover {
+                            color: #666;
+                            text-decoration: underline;
+                        }
+                    }
+                }
+            }
+        }
+
+        @media screen and (max-width: 1400px) {
+            display: none;
+        }
+    }
+
+    footer {
+        grid-column: 1 / -1;
+    }
+
     main {
         justify-self: center;
+
+        // trick to fix anchor links with sticky header
+        & > h1,
+        & > h2,
+        & > h3,
+        & > h4 {
+            padding-top: 7rem;
+            margin-top: -7rem;
+        }
+    }
+
+    pre[data-language='astro'] {
+        --code-bg: #fff7ef;
+
+        width: 100%;
+        max-width: 46rem;
     }
 
     .container {
@@ -430,21 +506,25 @@
         z-index: 1;
 
         &.large {
-            min-width: calc(100vw - 4rem);
+            min-width: calc(100% - 4rem);
+        }
+
+        &:not(.large) {
+            & > .content {
+                display: grid;
+                place-content: center;
+            }
         }
 
         & > .content {
             padding: 2rem;
 
-            // display: grid;
-            // place-content: center;
-
             overflow: auto;
         }
 
         // label in the top left corner
         &::before {
-            content: 'Result';
+            content: 'Preview';
             position: absolute;
 
             bottom: 100%;

src/styles/typography.scss

@@ -39,7 +39,7 @@
 
     pre,
     code {
-        background: #f0f0f0 !important;
+        background: var(--code-bg, #f0f0f0) !important;
 
         font-family: 'Source Code Pro', monospace;
         font-weight: 400;
@@ -75,7 +75,15 @@
 
     p {
         line-height: 1.75;
-        margin: 0.5rem auto;
+        margin: 1rem auto;
+    }
+
+    strong {
+        font-weight: 500;
+    }
+
+    em {
+        font-style: italic;
     }
 
     @include geometric-headings;