working on css design system

2024-08-02 19:07:18 +02:00
parent 3885b5135b
commit fb43eddefc
16 changed files with 1283 additions and 1103 deletions
@@ -24,108 +24,132 @@
            margin-bottom: 0.25rem;
        }

-        p + h#{$i} {
-            margin-top: 0.75rem * $factor;
-        }
+        // p + h#{$i} {
+        //     margin-top: 0.75rem * $factor;
+        // }
    }
 }

-@include geometric-headings;
-
-.text-content {
-    & > * {
-        max-width: 46rem;
-    }
-
-    pre,
-    code {
-        background: var(--code-bg, #f0f0f0) !important;
-
-        font-family: 'Source Code Pro', monospace;
-        font-weight: 400;
-        font-size: 16px;
-    }
-
-    code {
-        border-radius: 0.25rem;
-        padding: 0.125rem;
-    }
-
-    pre {
-        margin: 2rem auto;
-
-        padding: 0.5rem 1rem;
-
-        // width: 100%;
-        max-width: 80ch;
-
-        width: fit-content;
-
-        line-height: 1.5;
-
-        border-radius: 0.25rem;
-
-        box-shadow: 0.25rem 0.25rem 0 0 #333;
-        border: 2px solid #333;
-
-        code {
-            padding: 0;
-        }
-    }
-
-    p {
-        line-height: 1.75;
-        margin: 1rem auto;
-    }
-
-    strong {
-        font-weight: 500;
-    }
-
-    em {
-        font-style: italic;
-    }
-
+@layer typography {
    @include geometric-headings;

-    h1 {
-        margin-bottom: 2rem;
-        text-align: center;
-    }
+    .text-content,
+    .text {
+        line-height: 1.5;

-    h1,
-    h2,
-    h3,
-    h4 {
-        font-weight: 700;
-        color: #333;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    ol,
-    ul {
-        margin-left: auto;
-        margin-right: auto;
-    }
-
-    a,
-    a:visited {
-        color: var(--zone-color, #1e6733);
-        font-weight: 600;
-
-        &:hover {
-            text-decoration: underline 2px solid;
-        }
-    }
-
-    padding: 2rem 0 3rem;
-
-    @media screen and (max-width: 1024px) {
        & > * {
-            margin: 0 0.75rem;
+            max-width: 46rem;
+        }
+
+        pre,
+        code {
+            background: color-mix(in lab, var(--card-base-internal, #ededed), #fff 35%) !important;
+            // background: color-mix(in lab, var(--zone-color), #fff 75%) !important;
+            // background: var(--code-bg, #00000022) !important;
+
+            font-family: 'Source Code Pro', monospace;
+            font-weight: 400;
+            font-size: 16px;
+        }
+
+        code {
+            border-radius: 0.25rem;
+            padding: 0.125rem 0.3rem;
+        }
+
+        pre {
+            margin: 2rem auto;
+
+            padding: 0.5rem 1rem;
+
+            // width: 100%;
+            max-width: 80ch;
+
+            width: fit-content;
+
+            line-height: 1.5;
+
+            border-radius: 0.25rem;
+
+            box-shadow: 0.25rem 0.25rem 0 0 #333;
+            border: 2px solid #333;
+
+            code {
+                padding: 0;
+            }
+        }
+
+        p {
+            line-height: 1.75;
+            margin: 0 auto;
+        }
+
+        p + p {
+            margin-top: 1rem;
+        }
+
+        h1 + p,
+        h2 + p,
+        h3 + p,
+        h4 + p {
+            margin-top: 1rem;
+        }
+
+        p:has(+ h1, + h2, + h3, + h4) {
+            margin-bottom: 1rem;
+        }
+
+        strong {
+            font-weight: 600;
+        }
+
+        em {
+            font-style: italic;
+        }
+
+        @include geometric-headings;
+
+        h1 {
+            margin-bottom: 2rem;
+            text-align: center;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4 {
+            font-weight: 700;
+            color: #333;
+
+            // trick to fix anchor links with sticky header
+            padding-top: 7rem;
+            margin-top: -6.5rem;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        ol,
+        ul {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        a,
+        a:visited {
+            color: var(--zone-color, #1e6733);
+            font-weight: 600;
+
+            &:hover {
+                text-decoration: underline 2px solid;
+            }
+        }
+
+        @media screen and (max-width: 1024px) {
+            & > * {
+                margin: 0 0.75rem;
+            }
        }
    }
 }