_content: various enhancements on style sheet

* Add background color to top bark in light mode.
* Set ToC
* Use different foreground color for headers in dark mode.
* Disable text decoration for anchor only in Table of Content.
  Using underline on anchor give better visual experiences.
* Add padding on the top bar.
* Add padding between content and footer with top border.
* Add background color to image in dark mode.

1 files changed, 34 insertions, 15 deletions

diff --git a/_content/index.css b/_content/index.css
index 7ff8695..382c3d5 100644
--- a/_content/index.css
+++ b/_content/index.css
@@ -202,6 +202,7 @@
   --dark-border: #035064;
   --dark-fg-gray: #76888a;
   --dark-fg: #b4c5c7;
+  --dark-header-fg: cyan;
 }
 
 body {
@@ -222,7 +223,7 @@ div {
   padding: 0;
 }
 
-a {
+.toc a {
   text-decoration: none;
 }
 
@@ -298,6 +299,10 @@ img.background {
   margin: 0 0;
 }
 
+.topbar {
+  padding: 0 1em 1em 1em;
+  background-color: lightblue;
+}
 .topbar-left,
 .topbar-right {
   margin-top: 1rem;
@@ -333,7 +338,7 @@ img.background {
 }
 
 .page {
-  margin: 24px 0px;
+  margin: 24px 0 0 0;
 }
 
 .quoteblock .attribution {
@@ -346,14 +351,24 @@ img.background {
   margin: 1.25rem;
 }
 
+#footer,
 .footer {
   text-align: center;
   color: #666;
   font-size: 0.875rem;
-  margin: 1rem 0;
+}
+
+#footer {
+  border-top: 1px solid #ddd;
+  margin: 4rem 0 1em 0;
+  padding-top: 10px;
+}
+.footer {
+  margin-bottom: 1em;
 }
 
 /** Custom classes for asciidoc */
+
 #toctitle {
   display: none;
 }
@@ -371,11 +386,6 @@ img.background {
   margin: 4px;
 }
 
-#footer {
-  clear: both;
-  margin-top: 1em;
-}
-
 .admonitionblock {
   border: 1px solid #ddd;
 }
@@ -426,11 +436,6 @@ img.background {
   .page {
     padding: 0 1.5em;
   }
-
-  .footer {
-    text-align: left;
-    padding: 0 1.5em;
-  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -473,6 +478,20 @@ img.background {
   .topbar .top-heading a {
     color: var(--dark-fg);
   }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--dark-header-fg);
+  }
+
+  img {
+    background-color: darkseagreen;
+  }
+
   #output,
   .wui_editor {
     background-color: var(--dark-bg-mono) !important;
@@ -483,7 +502,7 @@ img.background {
     background-color: var(--dark-bg-editor-line) !important;
     color: var(--dark-fg-gray) !important;
   }
-  .footer {
-    color: var(--dark-fg-gray);
+  #footer {
+    border-top: 1px solid var(--dark-border);
   }
 }