Merge branch 'website-scss'

1 files changed, 78 insertions, 13 deletions

diff --git a/style.scss b/style.scss
index 9fa1aea..a2c358c 100644
--- a/style.scss
+++ b/style.scss
@@ -9,6 +9,23 @@ $fonts: (
     ('CormorantGaramond', 'CormorantGaramond-MediumItalic', 700, italic),
 );
 
+@font-face {
+    font-family: 'Lora-Fallback';
+    src: local('serif');
+    size-adjust: 98%;
+    ascent-override: 105%;
+    descent-override: 35%;
+}
+
+@font-face {
+    font-family: 'Lora-Fallback';
+    src: local('Times New Roman'), local('Times'), local('serif');
+    size-adjust: 95%; 
+    ascent-override: 90%;
+    descent-override: 25%;
+    line-gap-override: 30%; 
+}
+
 $breakpoints: (
     'mobile': 768px,
     'toc': 1250px
@@ -104,7 +121,7 @@ $isa: (
     --code-text: #cdd6f4;
     --code-radius: 6px;
 
-    --font-serif: "Lora", serif;
+    --font-serif: "Lora", "Lora-Fallback", serif;
     --font-mono: "Inconsolata", monospace;
     --font-header: "CormorantGaramond", serif;
     --font-math: "STIX Two Math",'Latin Modern Math', serif;
@@ -175,7 +192,7 @@ main, header, footer {
 }
 
 h1, h2, h3 { line-height: 1.2; font-family: var(--font-header), serif; }
-h4, h5, h6 { font-family: var(--font-mono), monospace; line-height: 1.3; margin-top: 1.5rem; margin-bottom: 0.5rem; }
+h4, h5, h6 { font-family: var(--font-serif), serif; line-height: 1.3; margin-top: 1.5rem; margin-bottom: 0.5rem; }
 
 h1, h2 {
     padding-bottom: 8px;
@@ -202,9 +219,42 @@ 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); }
+
+h4 { 
+    font-size: 0.95rem;
+    font-weight: 700; 
+    text-transform: uppercase; 
+    letter-spacing: 0.08em;
+    color: var(--text-main);
+    -webkit-font-smoothing: auto;
+}
+
+h5 { 
+    font-size: 1rem; 
+    font-weight: 500; 
+    font-style: italic;
+    color: var(--text-main); 
+}
+
+h6 { 
+    font-size: 0.82rem; 
+    font-weight: 600; 
+    text-transform: uppercase; 
+    letter-spacing: 0.08em; 
+    color: color-mix(in srgb, var(--text-main) 50%, transparent);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    [class^="section-number-"] {
+        font-family: var(--font-mono), monospace;
+        color: color-mix(in srgb, var(--text-main) 35%, transparent); 
+        font-weight: 400;
+        font-size: 0.65em;
+        letter-spacing: 0.05em;
+        margin-right: 0.75em;
+        vertical-align: middle;
+    }
+}
 
 p, ul, ol { margin-top: 1rem; margin-bottom: 1rem; }
 li { margin-top: 0.3rem; }
@@ -362,6 +412,17 @@ math {
     }
 }
 
+#text-1 > p:first-of-type::first-letter {
+    float: left;
+    font-size: 3.5rem;
+    line-height: 0.8;
+    margin-right: 0.15em;
+    margin-top: 0.1em;
+    font-family: var(--font-header), serif;
+    font-weight: 700;
+    color: var(--accent);
+}
+
 h1.title {
     padding-top: 1.5rem; 
     margin-top: 0.5rem;
@@ -502,10 +563,10 @@ h1.title {
     }
 }
 
-.theorem::before { content: "Theorem."; }
-.lemma::before { content: "Lemma."; }
-.corollary::before { content: "Corollary."; }
-.definition::before { content: "Definition."; }
+.theorem::before { content: "Theorem:"; }
+.lemma::before { content: "Lemma:"; }
+.corollary::before { content: "Corollary:"; }
+.definition::before { content: "Definition:"; }
 
 .proof {
     position: relative;
@@ -529,7 +590,11 @@ h1.title {
     @include bp('mobile') { columns: 1; }
 }
 
-.org-svg { width: 100%; max-width: none; }
+img.org-svg, .org-svg {
+    max-width: 80%;
+    margin: 2rem auto;
+    display: block;
+}
 
 .verse {
     width: fit-content;
@@ -743,12 +808,12 @@ h1.title {
     top: 0;
     left: 0;
     padding-top: 0;
-    background: var(--toc-bg);
-    border-right: 1px solid var(--accent);
+    // background: color-mix(in srgb, var(--toc-bg) 15%, transparent);
+    // border-right: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
     overflow-y: auto;
     overflow-x: hidden;
     
-    @include hide-scrollbar;
+    @include custom-scrollbar;
 
     ul {
         list-style-type: none;