Merge branch 'chore/perfect-css'

1 files changed, 112 insertions, 9 deletions

diff --git a/style.css b/style.css
index 452a13b..bda5c63 100644
--- a/style.css
+++ b/style.css
@@ -19,6 +19,20 @@
     src: url('./fonts/CormorantGaramond-Medium.ttf') format('truetype');
 }
 
+@font-face {
+    font-family: 'CormorantGaramond';
+    font-style: normal;
+    font-weight: 700;
+    src: url('./fonts/CormorantGaramond-Bold.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'CormorantGaramond';
+    font-style: italic;
+    font-weight: 500;
+    src: url('./fonts/CormorantGaramond-MediumItalic.ttf') format('truetype');
+}
+
 :root {
     --bg-main: #FBF8F1;
     --text-main: #4A3F35;
@@ -41,6 +55,16 @@
     background: #ff4081;
 }
 
+:not(pre) > code {
+    font-family: var(--font-mono), monospace;
+    background: var(--code-bg);
+    color: var(--code-text);
+    padding: 0.15em 0.4em;
+    border-radius: 4px;
+    font-size: 0.85em;
+    white-space: nowrap; /* Keeps small code snippets from breaking across lines */
+}
+
 body {
     background:
         radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
@@ -99,9 +123,21 @@ figcaption {
     margin-top: 0.5rem;
 }
 
+p, ul, ol {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
 h1, h2, h3 {
     line-height: 1.2;
-    font-family: var(--font-serif);
+    font-family: var(--font-header);
+}
+
+h4, h5, h6 {
+    font-family: var(--font-mono);
+    line-height: 1.3;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
 }
 
 h1, h2 {
@@ -112,16 +148,10 @@ h1, h2 {
     position: relative;
 }
 
-p, ul, ol {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-}
-
 h1 {
     font-size: 2.3rem;
     margin-top: 3rem;
     margin-bottom: 1rem;
-    font-family: var(--font-header);
     font-weight: 600;
     letter-spacing: 0;
     line-height: 1.3;
@@ -141,8 +171,30 @@ h2 {
 
 h3 {
     font-size: 1.25rem;
+    font-weight: 700;
     margin-top: 2rem;
     margin-bottom: 0.4rem;
+    letter-spacing: 0.02em;
+}
+
+h4 {
+    font-size: 1.1rem;
+    font-weight: 700; 
+    color: var(--text-main);
+}
+
+h5 {
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--link-color);
+}
+
+h6 {
+    font-size: 0.85rem;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: color-mix(in srgb, var(--text-main) 60%, transparent); 
 }
 
 img, blockquote {
@@ -462,6 +514,57 @@ header, .title + p, .subtitle + p {
   display: block;
 }
 
+.preamble {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-top: 10px;
+    color: color-mix(in srgb, var(--text-main) 50%, transparent); 
+    a {
+        color: var(--text-main);
+        text-decoration: none;
+        padding: 4px 8px;
+        border-radius: 4px;
+        transition: all 0.2s ease;
+        &:hover {
+            background: color-mix(in srgb, var(--accent) 15%, transparent);
+            color: var(--link-color);
+        }
+    }
+
+    & + hr {
+        border: none;
+        height: 1px;
+        background: linear-gradient(to right, var(--accent), transparent);
+        margin-bottom: 2.5rem;
+        opacity: 0.5;
+    }
+}
+
+.todo {
+    font-family: var(--font-mono);
+    font-size: 0.75em;
+    font-weight: bold;
+    letter-spacing: 1px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    vertical-align: middle;
+    margin-right: 6px;
+}
+
+.todo.TODO {
+    color: var(--link-color);
+    background-color: color-mix(in srgb, var(--accent) 20%, transparent);
+    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
+}
+
+.todo.DONE {
+    color: #4f8a10; 
+    background-color: #dff2bf; 
+    border: 1px solid color-mix(in srgb, #4f8a10 50%, transparent);
+}
+
 #table-of-contents {
     height: 100vh;
     width: 250px;
@@ -499,7 +602,7 @@ header, .title + p, .subtitle + p {
             width: 100%;
             padding: 10px 16px 10px 32px;
             box-sizing: border-box;
-            font-size: 13px;
+            font-size: 15px;
             font-family: var(--font-mono);
             white-space: nowrap;
             overflow: hidden;
@@ -524,7 +627,7 @@ header, .title + p, .subtitle + p {
             a {
                 padding-left: 48px;
                 opacity: 0.55;
-                font-size: 12px;
+                font-size: 13px;
 
                 &:hover {
                     padding-left: 38px;