long tocs are now scrollabe

docs/style.css

 /*
     override css elements of daux.io blue theme
-    version 2022-11-30
+    version 2024-10-10
 */
 :root {
     /* Axels Overrides */
-    --color-text: #222;
-    --link-color: #822;
-    --brand-color: var(--color-secondary);
+    --color-text: #234;
+    --link-color: #228;
+    --brand-color: var(--color-text);
     --brand-background: var(--body-background);
+    --code-tag-border-color: #d8d8d8;
     --hr-color: none;
     --search-field-background: none;
     --search-field-border-color: none;
@@ -24,29 +25,32 @@
     --axel_brand-pre-background-hover: rgb(255, 0, 51);
     ;
     --axel_h1_header: none;
-    --axel_h1: #345;
+    --axel_h1: #111;
     --axel_h1-bg: none;
     --axel_h1-bottom: 3px solid none;
-    --axel_h2: #156;
-    --axel_h2-bg: #f8fafb;
-    --axel_h2-bottom: 2px solid #467;
+    --axel_h2: #222;
+    --axel_h2-bg: none;
+    --axel_h2-bottom: 0px solid #467;
     --axel_h2-hero-bottom: 2px solid #912;
-    --axel_h3: #278;
-    --axel_h3-bottom: 1px solid #ddd;
+    --axel_h3: #333;
+    --axel_h3-bottom: 0px solid #ddd;
+    --axel_h4: #444;
     --axel_hero_bg: #f8f8f8;
+    --axel_img-border: 2px dashed #ccc;
     --axel_nav-bg: #fcfcfc;
     --axel_nav-buttomborder: #ddd;
     --axel_pre-background: #f8f8f8;
-    --axel-th-background: #d0e0e8;
+    --axel-th-background: #e0e4e8;
     --axel-article-nav-border-top: 0px dotted #ddd;
 }
 
 .dark {
     /* Axels Overrides */
     --color-text: #c0c0c0;
-    --link-color: #b44;
+    --link-color: #88e;
     --brand-color: var(--color-text);
     --brand-background: var(--body-background);
+    --body-background: #101418;
     --hr-color: none;
     --code-tag-background-color_: #bcc;
     --search-field-background: none;
@@ -63,16 +67,17 @@
     --axel_brand-pre-background-hover: rgb(255, 0, 51);
     ;
     --axel_h1_header: none;
-    --axel_h1: #777;
+    --axel_h1: #578;
     --axel_h1-bg: none;
     --axel_h1-bottom: none;
     --axel_h2: #467;
-    --axel_h2-bg: #202020;
-    --axel_h2-bottom: 2px solid #256;
+    --axel_h2-bg: none;
+    --axel_h2-bottom: 0px solid #256;
     --axel_h2-hero-bottom: 2px solid #712;
     --axel_h3: #589;
-    --axel_h3-bottom: 1px solid #333;
+    --axel_h3-bottom: 0px solid #333;
     --axel_hero_bg: #242424;
+    --axel_img-border: 2px dashed #555;
     --axel_nav-bg: #242424;
     --axel_nav-buttomborder: #555;
     --axel_pre-background: #bcc;
@@ -120,6 +125,17 @@ a.Brand {
     padding-top: 1em;
 }
 
+.s-content h1::before{
+    background: #fee;
+    border: 3px double #f00;
+    color: #f00;
+    content: 'FEHLER: Keine Überschrift 1 in einer Markdown-Datei für Daux verwenden! Mit H2 beginnen!';
+    display: block;
+    font-size: 50%;
+    padding: 0.3em;
+    margin-bottom: 2em;
+}
+
 .s-content h1 {
     background: var(--axel_h1-bg);
     color: var(--axel_h1);
@@ -133,7 +149,7 @@ a.Brand {
 .s-content h2 {
     background: var(--axel_h2-bg);
     color: var(--axel_h2);
-    font-size: 180%;
+    font-size: 190%;
     font-weight: bold;
     margin-top: 4em;
     border-bottom: var(--axel_h2-bottom);
@@ -147,6 +163,12 @@ h2:first-of-type {
     margin-top: 0em;
 }
 
+img{
+    border: var(--axel_img-border);
+    border-radius: 1.5em;
+    padding: 0.7em;
+}
+
 .s-content h3 {
     background: var(--axel_h3-bg);
     color: var(--axel_h3);
@@ -156,14 +178,26 @@ h2:first-of-type {
     border-bottom: var(--axel_h3-bottom);
 }
 
-.s-content h4 {
-    margin: 0;
-    font-size: 100%;
+
+.s-content > h4 {
+    color: var(--axel_h4);
+    font-size: 135%;
+    font-weight: bold;
+    margin: 2em 0;
+}
+
+.s-content .TableOfContentsContainer h4 {
+    margin: 1em 0;
+    font-size: 110%;
     text-align: center;
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: rgba(0, 0, 0, 0.1);
     padding: 0.3em;
+    font-weight: bold;
+    font-family: Arial;
+}
+ul.TableOfContents a{
+    color: var(--color-text);
 }
-
 .s-content pre {
     background: var(--axel_pre-background);
 }
@@ -222,6 +256,7 @@ div.hero h2 {
         position: fixed;
         right: 2em;
         top: 1em;
+        height: 96%;
     }
 }
 
@@ -239,8 +274,10 @@ div.hero h2 {
 }
 
 .TableOfContentsContainer__content {
-    border-width: 1px;
+    border-width: 0px;
     font-size: 0.5em;
+    height: inherit; 
+    overflow: auto;
 }
 
 ul.TableOfContents ul {
@@ -248,6 +285,10 @@ ul.TableOfContents ul {
     padding-left: 1em;
 }
 
+.TableOfContents a:hover{
+    text-decoration: underline;
+}
+
 /* ----- Icons on links --- */
 
 .EditOn a::before{
@@ -264,4 +305,4 @@ ul.TableOfContents ul {
 
 .Links a[href^="https://os-docs.iml.unibe.ch"]::before {
     content: '📗 ';
-}
\ No newline at end of file
+}