feat: :lipstick: adds css print media rules

for /everything page of the tour to be printed as a multi page pdf doc

#71

1 files changed, 31 insertions, 4 deletions

diff --git a/static/css/pages/everything.css b/static/css/pages/everything.css
index 8637aaa..6eafaa5 100644
--- a/static/css/pages/everything.css
+++ b/static/css/pages/everything.css
@@ -255,6 +255,7 @@ h3 {
 }
 
 @container lessons-list (min-width: 900px) {
+
   #everything-lessons .lesson,
   #everything-lessons .chapter-title {
     padding-right: var(--gap-quad);
@@ -288,15 +289,13 @@ h3 {
 }
 
 @keyframes highlight-block {
-  0% {
-  }
+  0% {}
 
   50% {
     background: var(--color-accent-muted);
   }
 
-  100% {
-  }
+  100% {}
 }
 
 @keyframes reveal {
@@ -312,3 +311,31 @@ h3 {
     overflow-y: auto;
   }
 }
+
+@media print {
+  #everything-contents {
+    display: none !important;
+  }
+
+  .navbar {
+    position: unset;
+  }
+
+  main#everything {
+    max-height: unset;
+    overflow: visible;
+  }
+
+  #everything-lessons {
+    max-height: unset !important;
+
+    h3.chapter-title:not(:first-child) {
+      page-break-before: always;
+    }
+
+    article.lesson:not(hr.chapter-separator + article.lesson) {
+      page-break-inside: avoid;
+    }
+
+  }
+}
\ No newline at end of file