💄 Hide navigation during printing

layouts/_default/single.html

@@ -7,14 +7,14 @@
       <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
         {{ .Title | emojify }}
       </h1>
-      <div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400">
+      <div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
         {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
       </div>
     </header>
     <section class="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
       {{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in .TableOfContents "<ul") }}
         <div class="order-first px-0 lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8 lg:order-last">
-          <div class="ltr:pl-5 rtl:pr-5 toc lg:sticky lg:top-10">
+          <div class="ltr:pl-5 rtl:pr-5 toc lg:sticky lg:top-10 print:hidden">
             {{ partial "toc.html" . }}
           </div>
         </div>
@@ -23,7 +23,7 @@
         {{ .Content | emojify }}
       </div>
     </section>
-    <footer class="pt-8 max-w-prose">
+    <footer class="pt-8 max-w-prose print:hidden">
       {{ partial "author.html" . }}
       {{ partial "sharing-links.html" . }}
       {{ partial "article-pagination.html" . }}

layouts/partials/breadcrumbs.html

@@ -1,4 +1,4 @@
-<ol class="text-sm text-neutral-500 dark:text-neutral-400">
+<ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden">
   {{ template "crumb" (dict "p1" . "p2" .) }}
 </ol>
 {{ define "crumb" }}

layouts/partials/footer.html

@@ -1,4 +1,4 @@
-<footer class="py-10">
+<footer class="py-10 print:hidden">
   {{/* Footer menu */}}
   {{ if .Site.Menus.footer }}
     <nav class="pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400">

layouts/partials/header.html

@@ -1,5 +1,5 @@
 <header
-  class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral"
+  class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral print:hidden"
 >
   {{/* Site logo/title */}}
   <div>