Fix a bunch of css issues with printing the site

scss/_card.scss

@@ -52,54 +52,6 @@
     }
   }
 
-  @include media-breakpoint-up(md) {
-
-    &.left {
-      float: left;
-      margin-right: 10px;
-    }
-
-    &.right {
-      float: right;
-      margin-left: 10px;
-      page-break-inside: always;
-
-    }
-
-    &.center {
-      margin-left: auto;
-      margin-right: auto;
-      margin-bottom: 1em;
-    }
-
-    &.natural {
-      .card-img-top {
-        width: unset;
-        max-height: 50vh;
-        margin: 0 auto;
-      }
-    }
-
-    &.span2, &.span3, &.span4, &.span5, &.span6, &.span34 {
-
-      &.left { clear: left; }
-      &.right { clear: right; }
-
-      &:first-child {
-        margin-top: 0.5em;
-      }
-    }
-
-    &.hero  { width: 35%; }
-    &.span1 { width: 100%; }
-    &.span2 { width:  50%; }
-    &.span3 { width:  33%; }
-    &.span4 { width:  25%; }
-    &.span5 { width:  20%; }
-    &.span6 { width:  15%; }
-    &.span34 { width: 75%; }
-  }
-
   @include media-breakpoint-down(sm) {
     margin-top: 0 !important;
     margin-bottom: 5px;
@@ -185,3 +137,56 @@
     }
   }
 }
+
+@include media-breakpoint-up(md) {
+
+  .left {
+    float: left;
+    margin-right: 10px;
+  }
+
+  .right {
+    float: right;
+    margin-left: 10px;
+    page-break-inside: always;
+
+  }
+
+  .center {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 1em;
+  }
+
+  .natural {
+    .card-img-top {
+      width: unset;
+      max-height: 50vh;
+      margin: 0 auto;
+    }
+  }
+
+  .span2,
+  .span3,
+  .span4,
+  .span5,
+  .span6,
+  .span34 {
+
+    &.left { clear: left; }
+    &.right { clear: right; }
+
+    &:first-child {
+      margin-top: 0.5em;
+    }
+  }
+
+  .hero  { width: 35%; }
+  .span1 { width: 100%; }
+  .span2 { width:  50%; }
+  .span3 { width:  33%; }
+  .span4 { width:  25%; }
+  .span5 { width:  20%; }
+  .span6 { width:  15%; }
+  .span34 { width: 75%; }
+}

scss/_header.scss

@@ -149,7 +149,7 @@ header {
 }
 
 @media (min-width: 500px) {
-  body:not(.front-page) header + * {
+  body:not(.front-page):not(.longform) header + * {
     margin-top: $header-full-height;
   }
 }

scss/_longform.scss

@@ -0,0 +1,55 @@
+
+
+body.longform {
+
+  #body {
+    background: unset;
+
+    @media screen {
+      padding: 0 1em;
+    }
+  }
+
+  header {
+    display: none;
+  }
+
+  h1, h2 {
+    clear: both;
+    page-break-before: always;
+  }
+
+  .header-link { display: none; }
+
+  article hr {
+    page-break-after: always;
+    opacity: 0;
+  }
+
+
+  .gutter {
+    float: right;
+    width: 40vw;
+    margin-left: 1em;
+    zoom: 0.9;
+
+    page-break-inside: avoid;
+
+    &.print-center {
+      float: none;
+      margin: 1em auto;
+    }
+  }
+
+  &.flex, .flex {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  > a > img:not(.card-img-top), > img {
+    max-width: 100%;
+    margin-bottom: 5px;
+  }
+}
+

scss/_page.scss

@@ -105,6 +105,14 @@ body.gdb, body.hrt {
         display: flex;
         flex-direction: column;
         align-items: center;
+
+        &.flex-end {
+          justify-content: flex-end;
+        }
+
+        &.flex-center {
+          justify-content: center;
+        }
       }
 
       > a > img:not(.card-img-top), > img {

scss/print.scss

@@ -104,6 +104,7 @@ $header-full-height: 100px;
 @import "./grid-row";
 @import "./markup";
 // @import "./pager";
+@import "./longform";
 
 header {
   .top-nav { display: none; }
@@ -178,10 +179,8 @@ body.page, body.post {
   }
 }
 
-#body {
-  padding: 0 1em;
-}
-
 .pager { display: none; }
 footer .patreon-support { display: none; }
 footer .foot-nav { display: none; }
+
+article hr { page-break-after: always; }

scss/style.scss

@@ -104,5 +104,6 @@ $header-full-height: 100px;
 @import "./grid-row";
 @import "./markup";
 @import "./pager";
+@import "./longform";
 
 |node_modules/magnific-popup/dist/magnific-popup.css|