Fix print layout

jotonedev · Mar 6, 2024 · f908f16 · f908f16
1 parent d62f458
commit f908f16
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -16,7 +16,7 @@ <h2><a href="{{ '/feed' | relative_url }}" class="hidden-link">Latest Posts</a><
         {% endfor %}
     </div>
 
-    <div style="height: fit-content; align-items: center; text-align: center; margin: 3rem auto 0rem;">
+    <div class="no_print" style="height: fit-content; align-items: center; text-align: center; margin: 3rem auto 0rem;">
         <a href="{{ '/feed' | relative_url }}" class="hidden-link hover-underline center">
             <span>Read all posts →</span>
         </a>

diff --git a/assets/css/print.css b/assets/css/print.css
@@ -1,11 +1,39 @@
 @media print {
+    @page {
+        size: A4;
+    }
+
+    html, body, .page-main {
+        margin: 0 !important; 
+        padding: 0 !important;
+    }
+
     header {
         display: none !important;
     }
 
     footer {
         display: none !important;
     }
+
+    blockquote, pre {
+        display: block;
+
+        page-break-before: avoid;
+        page-break-inside: avoid;
+    }
+
+    .post-card-container {
+        gap: 1.5rem;
+    }
+
+    .post-card {
+        max-width: max-content;
+    }
+
+    .post-card img {
+        max-width: 80% !important;
+    }
 }