[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

3 files changed, 14 insertions, 6 deletions

diff --git a/awk-edits/Heading-anchors.awk b/awk-edits/Heading-anchors.awk
index e3846f9..ee69043 100644
--- a/awk-edits/Heading-anchors.awk
+++ b/awk-edits/Heading-anchors.awk
@@ -7,6 +7,8 @@
 # hyperlink is required (except for h1).
 
 /[ \t]*<h[23456]/ {
-	match($0, /id="[^"]*"/);
-	$0 = $0 ORS "<a class=\"h-anchor\" href=\"#" substr($0, RSTART + 4, RLENGTH - 5) "\" aria-hidden=\"true\">&#x00A7;</a>";
+	match($0, /<h./)
+	headerLevel = (substr($0, RSTART + 2, 1) == 2) ? "" : "-small"
+	match($0, /id="[^"]*"/)
+	$0 = "<div class=\"gap" headerLevel "\"></div>" ORS $0 ORS "<a class=\"h-anchor\" href=\"#" substr($0, RSTART + 4, RLENGTH - 5) "\" aria-hidden=\"true\">&#x00A7;</a>"
 }
diff --git a/src/presentation.css b/src/presentation.css
index 411f16b..7de2346 100644
--- a/src/presentation.css
+++ b/src/presentation.css
@@ -61,7 +61,7 @@ article { overflow: hidden; }
       margin-block-start: 0;
       margin-block-end: 0.5em;
     }
-  .slide .h-anchor { display: none; }
+  .slide .h-anchor, .slide .gap, .slide .gap-small { display: none; }
 
   .clide { display: flex; flex-direction: column; }
     .clide > * { flex: 1; }
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);