Print CSS Style

assets/css/style.css

@@ -2,8 +2,6 @@
 ** General
 */
 :root {
-  --bg-color: #f2f0e9;
-  --bg-color: #f6f4ef;
   --bg-color: #faf9f6;
   --acent-color: #5c3c2e;
   --text-color: #020101;
@@ -533,3 +531,36 @@ main .e-content .toot-photos img {
   src: url(/webfonts/ibm-plex-mono/700.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+@media print {
+  html, body {
+    background-color: white;
+  }
+  
+  a, a:visited {
+    color: #000;
+    text-decoration: none;
+  }
+  a::after{
+    content: " (" attr(href) ") ";
+  }
+
+  blockquote, code {
+    background: #fff;
+    margin: 0;
+    padding: 0 1.5em;
+    border: none;
+  }
+
+  .dt-published::after {
+    content: " by Brandon Rozek"
+  }
+
+  header,
+  nav,
+  footer,
+  hr,
+  .noprint {
+    display: none !important;
+  }
+}

layouts/blog/single.html

@@ -25,7 +25,7 @@
     </div>
   </article>
 
-  <div style="margin-bottom: 2rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px;">
+  <div class="noprint" style="margin-bottom: 2rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px;">
     <a href='mailto:{{ .Site.Params.email }}?subject=Re: "{{ .Title }}"' class="reply-button">Reply via Email</a>
     <a href="/support" class="reply-button" style="margin-left:2rem;"><i class="fas fa-coffee" style="margin-right: 0.5rem;"></i>Buy me a Coffee</a>
   </div>

layouts/index.html

@@ -28,7 +28,7 @@
         </ul>
       </nav>
       <!-- Social Navigation -->
-      <p>You can also find me on:</p>
+      <p class="noprint">You can also find me on:</p>
       <nav class="nav-home">
         <ul class="space-evenly">
           {{ range .Site.Menus.profile }}

layouts/partials/reading_time.html

@@ -1,7 +1,7 @@
 <!-- Reading Time -->
 {{ $readTime := mul (div (countwords .Content) 220.0) 60 }}
 {{ if gt $readTime 60 }}
-<p>
+<p class="noprint">
   <i class="fas fa-stopwatch"></i>
   {{ math.Ceil (div $readTime 60) }} minute
   reading time

layouts/partials/sharepost.html

@@ -1,4 +1,4 @@
-<div style="margin-bottom: 1rem;">Was this useful? Feel free to share:
+<div class="noprint" style="margin-bottom: 1rem;">Was this useful? Feel free to share:
 <a href="https://news.ycombinator.com/submitlink?u={{ .Permalink }}&t={{ .Title }}">Hacker News</a>
 <a href="https://www.reddit.com/%73%75%62%6d%69%74?url={{ .Permalink }}&title={{ .Title }}">Reddit</a>
 <a href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}">Twitter</a>

layouts/partials/webmentions.html

@@ -1,7 +1,7 @@
 <!-- Webmentions -->
-<div id="webmentions"></div>
+<div class="noprint" id="webmentions"></div>
 {{ $siteHost := (urls.Parse .Site.BaseURL).Host -}}
-<form method="post" action="https://webmention.io/{{ $siteHost }}/webmention">
+<form class="noprint" method="post" action="https://webmention.io/{{ $siteHost }}/webmention">
   <p style="display: inline-block;">Published a response to this? <label for="webmention-source">Let me know the URL</label>:</p>
   <input type="url" name="source" id="webmention-source">
   <input type="hidden" name="target" value="{{ .Permalink }}">