[styles.css,Heading-anchors] Added a small and big gap before headings in articles

This separated headings with the contents that follow into different "card" or sections

1 files changed, 9 insertions, 3 deletions

diff --git a/src/styles.css b/src/styles.css
index 9dc726b..747ff8f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -217,8 +217,6 @@ h1, h2, h3, h4, h5, h6 {
     border-bottom: 2px solid var(--border-color);
   }
   h1 { display: block; font-size: 1.7em; margin-block-end: 0.5em; }
-  h2 { margin-top: 2.5em; }
-  h3 { margin-top: 2em; }
   h1 + *, h1 ~ h1, h2 + a + *, h3 + a + *, h4 + a + *, h5 + a + *, h6 + a + * {
       margin-top: 0;
     }
@@ -265,7 +263,7 @@ code, pre {
 table {
     border-spacing: 0;
     border-collapse: collapse;
-    margin: 0.6em 0;
+    margin: 1em 0;
     overflow: auto;
   }
   table td, table th { word-break: normal !important; }
@@ -412,6 +410,14 @@ dt, dd {
         }
         #pagenav > * { white-space: nowrap; }
         #pagenav + h2, #pagenav + h3, #pagenav + h4 { margin-top: 0; }
+
+      .gap, .gap-small {
+        background-color: var(--body-bg);
+        margin: 0 -1em;
+      }
+      .gap       { height: 1.5em; }
+      .gap-small { height: 0.5em; }
+
       /* back-to-top.js */
       #scrollBtn {
         background-color: var(--bg-color);