[styles,darkmode] Made headings and definition lists look cool

Added sidebars (side borders), added a dark background color, reduced = on ::before
and ::after on headings to only one

1 files changed, 29 insertions, 14 deletions

diff --git a/src/styles.css b/src/styles.css
index dcaf7fb..2c90df2 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -68,10 +68,12 @@
   --em-color:                black;
   --fg-selection-color:      white;
   --header-color:            #006b8f;
+  --header-bg-color:         #e3e3e3;
   --pre-bg-color:            var(--hi-bg);
   --strong-color:            black;
   --table-border-color:      black;
   --tr-bg-color:             white;
+  --dl-color:                #eeeeee;
 
   /* https://github.com/morhetz/gruvbox/blob/master/autoload/gruvbox.vim */
   --hi-fg:      var(--fg-color);
@@ -175,16 +177,19 @@ i, em { color: var(--em-color); }
 
 ul, ol { padding-inline-start: 30px; }
 
-h1, h2, h3, h4, h5, h6, b {
-    border-color: var(--border-color);
+h1, h2, h3, h4, h5, h6 {
+    background-color: var(--header-bg-color);
+    border: 2px solid var(--accent-line-color);
+    border-bottom: none;
+    border-top: none;
     color: var(--header-color);
+    display: inline-block;
     line-height: 1.25em;
+    padding: 0 0.5em;
   }
-  h1 { font-size: 1.7em; margin-block-end: 0.5em; }
+  h1 { display: block; font-size: 1.7em; margin-block-end: 0.5em; }
   h2 { margin-top: 2.5em; }
   h3 { margin-top: 2em; }
-  h4 { border-bottom: 2px solid var(--border-color); }
-  h2, h3, h4, h5, h6 { display: inline-block; } /* For link to appear next to heading */
 
   .h-anchor {
       border: none !important;
@@ -209,12 +214,10 @@ h1, h2, h3, h4, h5, h6, b {
       color: var(--border-color);
       content: "\2550  ";
     }
-    h1::after, h2::after, h3::after, h4::after, h5::after {
-        color: var(--border-color);
-      }
-    h1::after { content: " \2550 \2550 \2550 \2550 \2550"; }
-    h2::after { content: " \2550 \2550 \2550"; }
-    h3::after { content: " \2550"; }
+  h1::after, h2::after, h3::after, h4::after, h5::after {
+      color: var(--border-color);
+      content: "  \2550";
+    }
 
 /* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
 code, pre {
@@ -288,10 +291,22 @@ blockquote {
   blockquote > :first-child { margin-top: 0; }
   blockquote > :last-child  { margin-bottom: 0; }
 
-dt { font-size: 1.2em; }
+dt, dd {
+    background-color: var(--dl-color);
+    border: 2px solid var(--border-color);
+    border-bottom: none;
+    border-top: none;
+    padding: 0 0.5em;
+  }
+  dt { font-size: 1.2em; padding-top: 0.2em; }
   dt * { vertical-align: middle; }
-  dd   { line-height: 1.5em; margin-bottom: 1em; }
-
+  dd {
+      line-height: 1.5em; 
+      margin-bottom: 1em;
+      margin-left: 0;
+      padding-bottom: 0.4em;
+      padding-left: 49px;
+    }
 
 /* lowdown classes and related settings */