Add print styles (#624)

Author: DeclanChidlow

web/src/layouts/BaseLayout.astro

@@ -8,6 +8,7 @@ import { siteInfo } from "#constants/site-info";
 import "../styles/base.css";
 import "../styles/reset.css";
 import "../styles/theme.css";
+import "../styles/print.css";
 
 export interface Props {
   title: string;
@@ -86,5 +87,13 @@ const pageTitle = Astro.url.pathname === "/" ? title : `${title} · Namesake`;
       <slot />
     </main>
     <Footer />
+    <script>
+      // Print media lazy-loading bypass
+      window.addEventListener('beforeprint', () => {
+        document.querySelectorAll('img[loading]').forEach(img => {
+          img.removeAttribute('loading');
+        });
+      });
+    </script>
   </body>
 </html>

web/src/styles/print.css

@@ -0,0 +1,36 @@
+/* These styles are only used when printing the page. */
+/* biome-ignore-all lint/complexity/noImportantStyles: print styles should always override site styles */
+
+@media print {
+  html,
+  body {
+    background-color: none;
+  }
+
+  body > *:not(main) {
+    display: none !important;
+  }
+
+  body::before,
+  body::after {
+    display: none;
+  }
+
+  .rough-annotation {
+    display: none; /* Would display in odd location due to loading delay. */
+  }
+
+  details::details-content {
+    height: auto !important;
+    content-visibility: visible !important;
+    opacity: 1 !important;
+  }
+
+  a[href]:not([href^="#"])::after {
+    content: " (" attr(href) ")";
+  }
+
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+}