fixup margins

Author: WaffleLapkin

theme/reference.css

@@ -159,6 +159,16 @@ dfn {
     font-size: 0.8em;
 }
 
+/* included in the grid below as 20px */
+.page, .content {
+    padding-left: 0;
+    padding-right: 0;
+}
+/* required to accomodate above, somehow... */
+#menu-bar {
+    margin-left: 0;
+}
+
 main {
     /* To nicely display rules (`[a.b.c]`) on a side of the main text body we
        use grid layout. */
@@ -170,6 +180,10 @@ main {
         [text] auto
         /* Right margin */
         [margin] minmax(20px, 1fr);
+
+    /* We do these by hand via the grid */
+    margin: 0;
+    padding: 0 !important;
     max-width: none !important;
 }
 
@@ -190,13 +204,65 @@ main > .rule {
     grid-column: rules;
 }
 
+/* This is quite dumb, ugh.
+   CSS doesn't allow margin colapsing between grid items and anything else
+   (src: <https://stackoverflow.com/a/37837971>), which means that the margins
+   of li's children are not collapsed with ul's margins, adding too much margins.
+
+   Ideally we'd add `<div>`s for each grid cell, so that margin collapsing happens
+   as-usual inside of them. But, we don't have that kind of control over mdbook. */
+main > ul > li > *:first-child,
+main > ul > li > pre:first-child > pre.playground {
+    margin-top: 0;
+}
+main > ul > li > *:last-child,
+main > ul > li > pre:last-child > pre.playground {
+    margin-bottom: 0;
+}
+
+/* Similarly to the above, margin collapse doesn't happen between grid items,
+   so we have to replace it with grid gap. (p, pre, and ul had 16px vertical margins) */
+main {
+    row-gap: 16px;
+}
+main > p,
+main > pre,
+main > pre > pre.playground,
+main > ul {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+/* Values for h2/h3/h4 margin-top and blockquote margin are taken from mdbook's general.css,
+   values for h2/h3/h4 margin-bottom are taken from <https://www.w3schools.com/cssref/css_default_values.php> */
+main > h2 {
+    margin-top: calc(2.5em - 16px);
+    margin-bottom: calc(0.83em - 16px);
+}
+main > h3 {
+    margin-top: calc(2.5em - 16px);
+    margin-bottom: calc(1em - 16px);
+}
+main > h4 {
+    margin-top: calc(2em - 16px);
+    margin-bottom: calc(1.33em - 16px);
+}
+main > blockquote {
+    margin-top: calc(20px - 16px);
+    margin-bottom: calc(20px - 16px);
+}
+
 main > .rule {
     max-width: unset;
     justify-self: right;
     width: 100%;
 }
 
 .rule-link {
+    float: right;
+    text-align: right;
+    padding-right: 10px;
+    /* Remove the blue coloring of links on rules that mdbook normally sets. */
     color: #999 !important;
 }