Init print button

layouts/_default/single.html

@@ -8,6 +8,9 @@
     <div class="container">
         {{ partial "sidebar.html" . }}
         <main class="content">
+            <div class="content-actions">
+                <a href="#" class="print-link" onclick="window.print(); return false;" aria-label="Print this page">Print</a>
+            </div>
             {{ .Content }}
         </main>
         {{ partial "overview.html" . }}

layouts/partials/head.html

@@ -9,4 +9,5 @@
 <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href={{ "css/type.css" | absURL }}>
-<link rel="stylesheet" href={{ "css/style.css" | absURL }}>
+<link rel="stylesheet" href={{ "css/style.css" | absURL }}>
+<link rel="stylesheet" href={{ "css/print.css" | absURL }} media="print">

layouts/shortcodes/printbreak.html

@@ -0,0 +1 @@
+<printbreak></printbreak>

static/css/print.css

@@ -0,0 +1,60 @@
+/* Print stylesheet: hide navigation and force black-on-white for readable prints */
+
+/* Ensure page prints using full width for content */
+@page {
+    margin: 20mm;
+}
+
+/* Hide site chrome */
+header.site-header,
+.sidebar,
+.content-overview {
+    display: none !important;
+}
+
+/* Allow content to use full page width */
+.content {
+    display: block !important;
+    width: auto !important;
+    padding: 0 !important;
+    margin: 20mm !important;
+    overflow: visible !important;
+    position: static !important;
+    color: #000 !important;
+    background: #fff !important;
+}
+
+/* Neutralize colors and backgrounds inside content */
+.content * {
+    color: #000 !important;
+    background: transparent !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+}
+
+/* Make images scale nicely */
+.content img {
+    max-width: 100% !important;
+    height: auto !important;
+}
+
+/* Remove any shadows, borders that might not print well */
+* {
+    box-shadow: none !important;
+    text-shadow: none !important;
+    border: none !important;
+}
+
+/* Hide the print button itself when printing */
+.print-link,
+.content-actions {
+    display: none !important;
+}
+
+printbreak {
+    display: block;
+    width: 100%;
+    height: 1px;
+    page-break-after: always;
+    break-before: always;
+}

static/css/style.css

@@ -221,6 +221,7 @@ th {
     padding: 2rem;
     overflow-y: auto;
     scroll-behavior: smooth;
+    position: relative;
     a {
         color: var(--brand-color);
     }
@@ -237,6 +238,26 @@ th {
     }
 }
 
+.content-actions {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    pointer-events: auto;
+}
+
+.print-link {
+    border: 1px solid var(--brand-color);
+    padding: 0.35rem 0.6rem;
+    border-radius: 4px;
+    text-decoration: none !important;
+    font-weight: 600;
+    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
+}
+
+.print-link:hover {
+    opacity: 0.95;
+}
+
 .content-overview {
     min-width: 250px;
     background-color: var(--content-overview-background-color);

static/css/type.css

@@ -74,7 +74,7 @@ li {
 code, pre {
     font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
     color: var(--text-color);
-    background-color: var(--sidebar-background-color);
+    background-color: var(--form-input-background-color);
     padding: 0.2em 0.4em;
     border-radius: 3px;
 }