Followup print styles (#643)

Author: kydecker

web/src/components/Breadcrumbs.astro

@@ -16,7 +16,9 @@ const { items } = Astro.props;
     {
       items.map((item) => (
         <li>
-          <a href={item.href}>{item.label}</a>
+          <a href={item.href} data-no-print-url>
+            {item.label}
+          </a>
         </li>
       ))
     }

web/src/components/Footer.astro

@@ -48,7 +48,7 @@ const linkGroups: LinkGroup[] = [
 ];
 ---
 
-<footer>
+<footer data-no-print>
   <div class="footer-illustration">
     <img
       src="/site/footer/snail.png"

web/src/components/GuideFooter.astro

@@ -27,7 +27,7 @@ const displayDate = new Date(lastModified).toLocaleDateString("en-US", {
 <footer>
   {
     editUrl && (
-      <a href={editUrl} class="edit-link">
+      <a href={editUrl} class="edit-link" data-no-print>
         <RiPencilLine size={20} />
         Edit this page
       </a>

web/src/components/Header.astro

@@ -11,7 +11,7 @@ const navLinks = [
 ];
 ---
 
-<header>
+<header data-no-print>
   <a href="/" aria-label="Home" id="logo"><Logo /></a>
   <nav aria-label="Site">
     <ul>

web/src/layouts/ProseLayout.astro

@@ -59,7 +59,7 @@ const headerDescription =
       breadcrumbs={breadcrumbs}
     />
     <slot name="after-header" />
-    <section class="toc">
+    <section class="toc" data-no-print>
       <slot name="toc" />
     </section>
     <section itemprop="articleBody" class="prose">

web/src/styles/print.css

@@ -1,14 +1,10 @@
-/* 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;
+    --background-color: white !important;
+    background-color: transparent !important;
   }
 
   body::before,
@@ -17,7 +13,7 @@
   }
 
   .rough-annotation {
-    display: none; /* Would display in odd location due to loading delay. */
+    display: none;
   }
 
   details::details-content {
@@ -26,11 +22,15 @@
     opacity: 1 !important;
   }
 
-  a[href]:not([href^="#"])::after {
+  a[href]:not([href^="#"]):not([data-no-print-url])::after {
     content: " (" attr(href) ")";
   }
 
   abbr[title]::after {
     content: " (" attr(title) ")";
   }
+
+  [data-no-print] {
+    display: none !important;
+  }
 }