Addressing some print bug

scss/_card.scss

@@ -7,6 +7,15 @@
     border: none;
   }
 
+  .card-img, .card-img-top {
+    width: unset;
+  }
+
+  .card-img-top {
+    page-break-before: avoid;
+    page-break-after: avoid;
+  }
+
   .card-img-top + .card-img-top {
     border-top: 1px solid $card-border-color;
     border-radius: 0
@@ -36,6 +45,10 @@
     &.active + .active {
       border-bottom: 1px solid lighten($list-group-active-bg, 15%);
       background-color: lighten($list-group-active-bg, 10%);
+
+      color-adjust: exact;
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
     }
   }
 
@@ -49,6 +62,8 @@
     &.right {
       float: right;
       margin-left: 10px;
+      page-break-inside: always;
+
     }
 
     &.center {
@@ -124,6 +139,10 @@
         height: 40px;
         width: 40px;
         margin: 0 10px 0 0;
+
+        color-adjust: exact;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
       }
 
       .ig-name {

scss/_markup.scss

@@ -34,6 +34,10 @@
     padding: 15px;
     color: black;
 
+    color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+
     position: relative;
     overflow: hidden;
 
@@ -104,6 +108,9 @@
 
   padding: 10px 20px;
   background-color: $cwColor;
+  color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
 
   font-size: 0.8rem;
   font-weight: 300;

scss/_page.scss

@@ -46,7 +46,7 @@ body.gdb, body.hrt {
   }
 
   article {
-    @media (min-width: 800px) {
+    @media screen and (min-width: 800px) {
       margin-right: 400px;
 
       @media (max-width: 1000px) {
@@ -77,7 +77,10 @@ body.gdb, body.hrt {
     } }
 
     .gutter {
-      @media (min-width: 800px) {
+      // page-break-inside: avoid;
+      // page-break-before: avoid;
+
+      @media screen and (min-width: 800px) {
         position: relative;
         height: 0;
         left: calc(100% + 1em);
@@ -89,7 +92,7 @@ body.gdb, body.hrt {
         }
       }
 
-      @media (min-width: 500px) and (max-width: 800px) {
+      @media print, screen and (min-width: 500px) and (max-width: 800px) {
         float: right;
         width: 300px;
         margin-left: 1em;

scss/_tweet.scss

@@ -99,6 +99,10 @@
         background-position: center center;
         background-size: contain;
         background-repeat: no-repeat;
+
+        color-adjust: exact;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
       }
 
       .tweet-protected {
@@ -145,6 +149,10 @@
     margin-bottom: 0.75em;
     background: rgba($gray-500, 0.1);
 
+    color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+
     > a {
       color: inherit;
       display: block;
@@ -245,6 +253,9 @@
   .tweet-photo {
     background-size: cover;
     background-position: center center;
+    color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
   }
 
   .tweet-video {

scss/print.scss

@@ -0,0 +1,187 @@
+
+
+
+$body-bg: white;
+$content-bg: white;
+$gutter-bg: #f0f0f0;
+$gutter-border: #e2e2e2;
+$font-primary: 'Lato', Arial, sans-serif;
+$font-secondary: 'Gothic A1', 'Helvetica Neue', Helvetica, serif;
+$font-brand: 'Sriracha', Geneva, monospace;
+$font-family-sans-serif: $font-primary;
+$font-family-base: $font-primary;
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 500px,
+  md: 800px,
+  lg: 1000px,
+  xl: 1200px
+) !default;
+
+$line-height-base: 1.6;
+
+$headings-font-family:        'Roboto', 'Helvetica Neue', Helvetica, serif;
+$headings-font-weight:        300;
+
+$font-size-base: 1rem;
+$h1-font-size:                $font-size-base * 2.2;
+$h2-font-size:                $font-size-base * 1.8;
+$h3-font-size:                $font-size-base * 1.5;
+$h4-font-size:                $font-size-base * 1.2;
+$h5-font-size:                $font-size-base * 1.15;
+$h6-font-size:                $font-size-base;
+
+h1, h2, .h1, .h2 { font-weight: 300; }
+h3, .h3 { font-weight: 400; }
+h4, h5, .h4, .h5 { font-weight: 600; }
+
+$trans-white: #fff;
+$trans-pink: #F7A8B8;
+$trans-blue: #55CDFC;
+$trans-pink-lightest: #fef6f7;
+$trans-pink-light: #fde6eb;
+$trans-blue-light: #b9eafe;
+$trans-blue-lightest: #f0f8ff;
+$trans-pink-dark: #ee4b6c;
+$trans-blue-dark: #0377a4;
+$trans-pink-darkest: #ea1c46;
+$trans-blue-darkest: #025372;
+$primary: #fc0a7e;
+
+$header-bg-1: #E81179;
+$header-bg-2: #281362;
+$header-bg-mid: mix($header-bg-1, $header-bg-2);
+$header-full-height: 100px;
+
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
+
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+// @import "bootstrap/scss/images";
+// @import "bootstrap/scss/code";
+// @import "bootstrap/scss/grid";
+// @import "bootstrap/scss/tables";
+// @import "bootstrap/scss/forms";
+// @import "bootstrap/scss/buttons";
+// @import "bootstrap/scss/transitions";
+// @import "bootstrap/scss/dropdown";
+// @import "bootstrap/scss/button-group";
+// @import "bootstrap/scss/input-group";
+// @import "bootstrap/scss/custom-forms";
+// @import "bootstrap/scss/nav";
+// @import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+// @import "bootstrap/scss/breadcrumb";
+// @import "bootstrap/scss/pagination";
+// @import "bootstrap/scss/badge";
+// @import "bootstrap/scss/jumbotron";
+// @import "bootstrap/scss/alert";
+// @import "bootstrap/scss/progress";
+// @import "bootstrap/scss/media";
+// @import "bootstrap/scss/list-group";
+// @import "bootstrap/scss/close";
+// @import "bootstrap/scss/toasts";
+// @import "bootstrap/scss/modal";
+// @import "bootstrap/scss/tooltip";
+// @import "bootstrap/scss/popover";
+// @import "bootstrap/scss/carousel";
+// @import "bootstrap/scss/spinners";
+@import "bootstrap/scss/utilities";
+// @import "bootstrap/scss/print";
+
+@import "./global";
+// @import "./header";
+@import "./footer";
+@import "./tweet";
+// @import "./index";
+@import "./page";
+@import "./card";
+@import "./grid-row";
+@import "./markup";
+// @import "./pager";
+
+header {
+  .top-nav { display: none; }
+  .top-brand {
+    display: block;
+    font-size: $h2-font-size;
+    text-align: center;
+  }
+}
+
+
+body.page, body.post {
+
+
+  header {
+    background: white;
+  }
+
+  .disclaimer { display: none; }
+
+  #body {
+    background: unset;
+    max-width: unset;
+    margin-left: auto;
+    margin-right: auto;
+
+    padding: 5px;
+  }
+
+  .tweet {
+    max-width: 660px;
+    margin: 2em auto;
+  }
+
+  article {
+    border: 0;
+  }
+
+  .card {
+    &.span34 {
+      width: 50vw;
+      margin: 1em auto;
+    }
+  }
+}
+
+.header-link { display: none; }
+
+.front-page {
+  blockquote {
+    max-width: 600px;
+    margin: 1em auto;
+
+    padding: 1em;
+    border-radius: 0.5em;
+
+    background: $gray-200;
+    border: 1px solid $gray-600;
+    color: $gray-800;
+
+    color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+
+    p {
+      margin: 0;
+    }
+
+    span {
+      font-weight: 300;
+    }
+  }
+}
+
+#body {
+  padding: 0 1em;
+}
+
+.pager { display: none; }
+footer .patreon-support { display: none; }
+footer .foot-nav { display: none; }

scss/style.scss

@@ -92,7 +92,7 @@ $header-full-height: 100px;
 // @import "bootstrap/scss/carousel";
 @import "bootstrap/scss/spinners";
 @import "bootstrap/scss/utilities";
-@import "bootstrap/scss/print";
+// @import "bootstrap/scss/print";
 
 @import "./global";
 @import "./header";