align rules to the elements after them

Author: WaffleLapkin

theme/reference.css

@@ -156,7 +156,10 @@ dfn {
 
 /* Rules are generated via r[foo.bar] syntax, processed by mdbook-spec. */
 .rule {
-    font-size: 0.8em;
+    --font-size-mult: 0.8;
+    --font-size: calc(1em * var(--font-size-mult));
+
+    font-size: var(--font-size);
 }
 
 /* included in the grid below as 20px */
@@ -296,6 +299,60 @@ main > .rule {
     width: 20px;
 }
 
+/* Align rules to various siblings */
+.rule:has(+ p),
+.rule:has(+ ul) {
+    margin-top: calc((1em - var(--font-size)) / var(--font-size-mult) / 2);
+}
+
+.rule:has(+ h1) {
+    align-self: center;
+}
+
+.rule:has(+ h2) {
+    /* multiplying by this turns h2's em into .rule's em*/
+    --h2-em-mult: calc(
+        (1 / var(--font-size-mult)) /* to main font size */
+          * 1.5 /* to h2 font size */
+    );
+
+    margin-top: calc(
+        /* h2 margin top */
+        2.5em * var(--h2-em-mult) - 16px
+        /* half of the font size difference */
+        + (1em * var(--h2-em-mult) - 1em) / 2
+    )
+}
+.rule:has(+ h3) {
+    /* multiplying by this turns h3's em into .rule's em*/
+    --h3-em-mult: calc(
+        (1 / var(--font-size-mult)) /* to main font size */
+          * 1.17 /* to h3 font size */
+    );
+
+    margin-top: calc(
+        /* h3 margin top */
+        2.5em * var(--h3-em-mult) - 16px
+        /* half of the font size difference */
+        + (1em * var(--h3-em-mult) - 1em) / 2
+    )
+}
+
+.rule:has(+ h4) {
+    /* multiplying by this turns h4's em into .rule's em*/
+    --h4-em-mult: calc(
+        (1 / var(--font-size-mult)) /* to main font size */
+          * 1 /* to h4 font size */
+    );
+
+    margin-top: calc(
+        /* h4 margin top */
+        2em * var(--h4-em-mult) - 16px
+        /* half of the font size difference */
+        + (1em * var(--h4-em-mult) - 1em) / 2
+    )
+}
+
 /* Sets the color for [!HISTORY] blockquote admonitions. */
 .history > blockquote {
     background: #f7c0eb;