From 6ce4c52aa1e088182b580620ce217e15d2ade2d8 Mon Sep 17 00:00:00 2001
From: Evan Pratten <ewpratten@gmail.com>
Date: Fri, 16 Apr 2021 10:03:31 -0400
Subject: [PATCH] print formatting

---
 _includes/footer.html     |  2 +-
 _layouts/page.html        | 12 ++++++------
 _sass/site/codeblock.scss |  1 +
 _sass/site/print.scss     | 22 ++++++++++++++++++++++
 assets/css/site.scss      |  1 +
 5 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 _sass/site/print.scss

diff --git a/_includes/footer.html b/_includes/footer.html
index e579ed6..5f23406 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,6 +1,6 @@
 <br><br>
 
-<div class="foot-info center">
+<div class="foot-info center print-hidden">
     Made with ♥ by Evan Pratten | <a href="/feed.xml">RSS</a> | <a href="https://status.retrylife.ca">API Status</a>
 </div>
 
diff --git a/_layouts/page.html b/_layouts/page.html
index 93a1f26..ceb905f 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -13,7 +13,7 @@
 
         <div class="reactive-bg">
 
-            <div class="color-space" id="color-space">
+            <div class="color-space print-hidden" id="color-space">
                 <div class="container" style="height:100%; text-align:right">
                     {% if page.backing_img %}
                     <img src="{{page.backing_img}}" style="{{page.backing_scalar}};padding-right:5%"></img>
@@ -36,11 +36,11 @@
                         <small class="text-muted" {% if page.written %} data-toggle="tooltip" data-placement="top"
                             title="Written {{page.written}}" {% endif %} style="color:gray;">{{page_date.first}}</small>
                         {% for category in page.tags %}
-                        <a href="/categories?c={{category}}"><span class="badge"
+                        <a href="/categories?c={{category}}"><span class="badge print-hidden"
                                 style="background-color: var(--light-gray);color:#333;">{{category}}</span></a>
                         {% endfor %}
                         {% if page.path contains "_drafts" %}
-                        <a href="#"><span class="badge"
+                        <a href="#"><span class="badge print-hidden"
                             style="background-color: var(--light-gray);color:rgb(255, 0, 0);">draft</span></a>
                         {% endif %}
                     </h6>
@@ -53,9 +53,9 @@
                     {{content}}
 
                     {% if page.categories %}
-                    <br>
-                    <hr>
-                    <div class="retention">
+                    <br class="print-hidden">
+                    <hr class="print-hidden">
+                    <div class="retention print-hidden">
 
                         <!-- Thank you text -->
                         <p>Thank you for reading this post. If you enjoyed the content, and want to let me know, or
diff --git a/_sass/site/codeblock.scss b/_sass/site/codeblock.scss
index ab37b58..409d888 100644
--- a/_sass/site/codeblock.scss
+++ b/_sass/site/codeblock.scss
@@ -12,6 +12,7 @@ pre {
 
 div.highlighter-rouge {
     position: relative;
+    break-inside: avoid;
 }
 
 div.highlighter-rouge::after {
diff --git a/_sass/site/print.scss b/_sass/site/print.scss
new file mode 100644
index 0000000..1250a85
--- /dev/null
+++ b/_sass/site/print.scss
@@ -0,0 +1,22 @@
+@media print {
+    @page {
+      margin: 0.5in;
+    }
+  
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+      page-break-before: auto;
+      page-break-after: avoid;
+    }
+  
+    p {
+      page-break-inside: avoid;
+    }
+  
+    .print-hidden {
+        display: none !important;
+    }
+  }
\ No newline at end of file
diff --git a/assets/css/site.scss b/assets/css/site.scss
index 1eba2c6..04f03f0 100644
--- a/assets/css/site.scss
+++ b/assets/css/site.scss
@@ -11,6 +11,7 @@
 @import "site/page.scss";
 @import "site/kbd.scss";
 @import "site/codeblock.scss";
+@import "site/print.scss";
 
 @import "site/dev/landing.scss";
 @import "site/dev/software-landing.scss";