maybe fix viewport issue

1 files changed, 116 insertions, 74 deletions

diff --git a/style.css b/style.css
index 0791632..b6cd6b4 100644
--- a/style.css
+++ b/style.css
@@ -191,13 +191,31 @@ img {
     max-width: none;
 }
 
-mjx-container[jax="CHTML"] {
+mjx-container[jax="CHTML"][display="true"] {
     text-align: left !important;
-    background: rgba(212, 163, 115, 0.05); /* Uses a hint of your --quote-accent */
+    background: rgba(212, 163, 115, 0.05);
     padding: 1.5rem;
     border-left: 2px solid var(--quote-accent);
     margin: 2rem 0 !important;
     overflow-x: auto;
+    
+    /* Hide scrollbar for Firefox */
+    scrollbar-width: none;
+    /* Hide scrollbar for IE/Edge */
+    -ms-overflow-style: none;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+mjx-container[jax="CHTML"][display="true"]::-webkit-scrollbar {
+    display: none;
+}
+
+/* Inline MathJax (Inside paragraphs) */
+mjx-container[jax="CHTML"]:not([display="true"]) {
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: none;
 }
 
 a {
@@ -223,24 +241,33 @@ a {
     height: 100vh;
     width: 250px;
     position: fixed;
-    z-index: 10; /* Ensure it stays above content */
+    z-index: 10;
     top: 0;
     left: 0;
-    padding-top: 0; /* Removed the 20px space at the top */
+    padding-top: 0;
     background: var(--toc-bg);
     border-right: 1px solid var(--quote-accent);
-    overflow-y: auto; /* Allow scrolling if TOC is very long */
+    overflow-y: auto;
     overflow-x: hidden;
-    
-    /* Technical Header for TOC */
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar { display: none; }
+
+    h2 {
+        display: none !important;
+    }
+
+    /* 2. Insert the aligned futuristic header */
     &::before {
-        content: "INDEX // NAVIGATION";
+        content: "NAVIGATION";
         display: block;
-        padding: 20px 16px 10px 16px;
+        /* Padding math: 19px left matches the link text exactly */
+        padding: 24px 16px 12px 19px; 
         font-family: "Inconsolata";
-        font-size: 10px;
+        font-size: 11px;
+        font-weight: bold;
         letter-spacing: 2px;
-        color: var(--quote-accent);
+        color: var(--text-main);
         border-bottom: 1px solid rgba(212, 163, 115, 0.2);
         margin-bottom: 10px;
     }
@@ -251,14 +278,16 @@ a {
         margin: 0;
 
         a {
-            padding: 8px 16px;
             display: block;
-            font-size: 14px;
-            font-family: "Inconsolata"; /* Using mono for the 'futuristic' look */
-            white-space: nowrap;      /* Keep text on one line */
-            overflow: hidden;         /* Hide overflow */
-            text-overflow: ellipsis;  /* Use "..." for long titles */
-            transition: all 0.2s ease;
+            width: 218px;
+            padding: 10px 16px;
+            font-size: 13px;
+            font-family: "Inconsolata";
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            border-left: 3px solid transparent;
             
             &, &:visited {
                 color: var(--text-main);
@@ -268,49 +297,29 @@ a {
             &:hover {
                 background-color: var(--text-main);
                 color: var(--bg-main);
-                padding-left: 22px; /* Slight 'slide' effect on hover */
+                padding-left: 22px;
+                border-left: 3px solid var(--quote-accent);
             }
         }
-    }
-}
 
-/* #table-of-contents { */
-/*     height: 100%; */
-/*     width: 250px; */
-/*     position: fixed; */
-/*     z-index: 1; */
-/*     top: 0; */
-/*     left: 0; */
-/*     font-size: 0px; */
-/*     overflow-x: hidden; */
-/*     padding-top: 20px; */
-/*     border-right: 1px; */
-/*     background: var(--toc-bg); */
-/*     ul { */
-/*         list-style-type: none; */
-/*         padding-left: 0; */
-/*         a { */
-/*             padding: 6px 8px 6px 16px; */
-/*             display: block; */
-/*             font-size: 15px; */
-            
-/*             &, &:visited { */
-/*                 color: var(--text-main);  */
-/*                 background-color: transparent;  */
-/*                 text-decoration: none; */
-/*             } */
-            
-/*             &:hover, &:visited:hover { */
-/*                 color: var(--bg-main);  */
-/*                 background-color: var(--text-main);  */
-/*             } */
-/*         } */
-/*     } */
+        ul {
+            a {
+                padding-left: 32px;
+                font-size: 12px;
+                opacity: 0.8;
+                width: 202px; /* Adjusted width for nesting */
+                
+                &:hover {
+                    padding-left: 38px;
+                }
+            }
+        }
+    }
 
-/*     @media (max-width: 1250px) { */
-/*         display: none; */
-/*     } */
-/* } */
+    @media (max-width: 1250px) {
+        display: none;
+    }
+}
 
 .content {
     margin-left: 160px;
@@ -329,6 +338,14 @@ a {
     overflow-x: auto;
     font-size: 0.9rem;
     box-shadow: none;
+    
+    scrollbar-width: none; 
+    -ms-overflow-style: none; 
+}
+
+.src::-webkit-scrollbar,
+.example::-webkit-scrollbar {
+    display: none;
 }
 
 #postamble {
@@ -430,29 +447,28 @@ figcaption {
 }
 
 .author, .date {
-    display: inline; /* Keep them on the same line */
+    display: inline;
     font-family: "Lora";
     font-style: italic;
     font-size: 1.1rem;
     color: color-mix(in srgb, var(--text-main) 70%, gray);
 }
 
-/* Add the "by" prefix using a pseudo-element */
-.author::before {
-    content: "by ";
-    font-family: "Inconsolata"; /* Technical contrast */
-    font-style: normal;
-    font-weight: bold;
-    text-transform: uppercase;
-    font-size: 0.8rem;
-    letter-spacing: 1px;
-    margin-right: 4px;
-}
-
-/* Add a comma separator between author and date if both exist */
-.author:not(:last-child)::after {
-    content: ", ";
-    font-style: normal;
+.author {
+    &::before {
+        content: "by ";
+        font-family: "Inconsolata";
+        font-style: normal;
+        font-weight: bold;
+        text-transform: uppercase;
+        font-size: 0.8rem;
+        letter-spacing: 1px;
+        margin-right: 4px;
+    } 
+    &:not(:last-child)::after {
+        content: ", ";
+        font-style: normal;
+    }
 }
 
 header, .title + p, .subtitle + p {
@@ -460,3 +476,29 @@ header, .title + p, .subtitle + p {
     border-bottom: 1px double var(--quote-accent);
     padding-bottom: 1rem;
 }
+
+@media (max-width: 768px) {
+    body {
+        max-width: 100%;
+        padding: 0 15px;
+        box-sizing: border-box;
+    }
+
+    h1 { font-size: 2rem; }
+    h2 { font-size: 1.5rem; }
+
+    img, blockquote, .src, .example, mjx-container[jax="CHTML"][display="true"] {
+        max-width: 100%;
+        box-sizing: border-box;
+    }
+
+    blockquote {
+        padding: 1em 15px 1em 40px; 
+        width: 100%;
+    }
+
+    .src, .example, mjx-container[jax="CHTML"][display="true"] {
+        width: 100%;
+        overflow-x: auto;
+    }
+}