update docs

docs/30_Usage.md

@@ -13,11 +13,18 @@ Click an email to view details of it including header and body.
 
 ![Screenshot: Show details of selected Email](images/screenshot_show_email.png)
 
-If an html email was selected then you get an additional button to preview as html.
+If an html email was detected then 
+
+* you can switch between html view and source code
+* you get an additional button to preview as html in full screen
 
 ![Screenshot: Show details of an html message](images/screenshot_show_html_email.png)
 
-If an html email was detected then you get an additional button to preview as html.
+You can turn on and of the header messages and swtitch between html or source view. Any switching will be stored in the localstorage of your webbrowser to get the same mode for the next request.
+
+When using full screen mode you get a back button:
+
+![Screenshot: Show html message in fullscreen](images/screenshot_show_html_email_fullscreen.png)
 
 ### Delete emails
 

docs/style.css

 /*
     override css elements of daux.io blue theme
-    version 2024-10-24
+    version 2024-10-31
 */
 :root {
     /* Axels Overrides */
@@ -19,8 +19,9 @@
     --sidebar-background: var(--body-background);
     --sidebar-border-color: none;
     --sidebar-link-active-background: #f0f4f6;
+    --toc--inner-border-color: none;
     /* Axels custom values */
-    --axel_bg-toc: var(--body-background);
+    --axel_bg-toc: #f8fafa;
     --axel_bg-toc-head: #f8f8f8;
     --axel_brand-background: none;
     --axel_brand-pre-background: rgb(255, 0, 51);
@@ -35,8 +36,8 @@
     --axel_h2-hero-bottom: 2px solid #912;
     --axel_h3: #333;
     --axel_h3-bottom: 0px solid #ddd;
-    --axel_h4: #478;
-    --axel_h5: #699;
+    --axel_h4: #666;
+    --axel_h5: #888;
     --axel_hero_bg: #faf8f6;
     --axel_img-border: 2px dashed #ccc;
     --axel_nav-bg: #fcfcfc;
@@ -60,6 +61,7 @@
     --sidebar-background: var(--body-background);
     --sidebar-border-color: none;
     --sidebar-link-active-background: #333;
+    --sidebar-link-color: var(--link-color);
     /* Axels custom values */
     --axel_bg-toc: var(--body-background);
     --axel_bg-toc-head: #333;
@@ -126,18 +128,25 @@ a.Brand {
 
 /* ---------- page content ---------- */
 .s-content {
-    padding-top: 1em;
+    padding-top: 6em;
 }
 
+/**
+h1::before{color: #aaa;content: 'h1: ';}
+h2::before{color: #aaa;content: 'h2: ';}
+h3::before{color: #aaa;content: 'h3: ';}
+h4::before{color: #aaa;content: 'h4: ';}
+h5::before{color: #aaa;content: 'h5: ';}
+h6::before{color: #aaa;content: 'h6: ';}
+*/
+h2::before{color: #888;content: ': : ';}
+h3::before{color: #ccc;content: '> ';}
+h4::before{color: #ccc;content: '_ ';}
+
 .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;
+    content: '!! h1 !! ';
 }
 
 .s-content h1 {
@@ -159,8 +168,14 @@ a.Brand {
     border-bottom: var(--axel_h2-bottom);
 }
 
-h1:first-of-type {
+.Page__header > h1:first-of-type {
     margin-top: 0em;
+    margin-left: -1em;
+    padding-left: 1em;
+    position: fixed;
+    min-width: 100%;
+    background: var(--body-background);
+    box-shadow: 0 2em 1em var(--body-background);
 }
 
 h2:first-of-type {
@@ -211,6 +226,8 @@ ul.TableOfContents a{
 }
 .s-content pre {
     background: var(--axel_pre-background);
+    border-radius: 0.5em;
+    padding: 1rem;
 }
 
 /* FIX smaller fnt size in tables */
@@ -262,14 +279,6 @@ div.hero h2 {
 }
 
 /* ---------- TOC ---------- */
-@media(min-width:1700px) {
-    .TableOfContentsContainer {
-        position: fixed;
-        right: 2em;
-        top: 1em;
-        height: 96%;
-    }
-}
 
 .TableOfContentsContainer {
     background-color: var(--axel_bg-toc);
@@ -279,9 +288,11 @@ div.hero h2 {
 .s-content .TableOfContentsContainer h4 {
     background-color: var(--axel_bg-toc-head);
     border-top-left-radius: 1em;
+    border-bottom: 2px solid var(--axel_bg-toc-bottom-border);
     font-size: 1.1em;
     margin: 0;
     padding: 0.3em;
+    display: none;
 }
 
 .TableOfContentsContainer__content {
@@ -300,6 +311,16 @@ ul.TableOfContents ul {
     text-decoration: underline;
 }
 
+@media(min-width:1700px) {
+    .TableOfContentsContainer {
+        background: none;
+        position: fixed;
+        right: 2em;
+        top: 4em;
+        height: 90%;
+    }
+}
+
 /* ----- Icons on links --- */
 
 .EditOn a::before{