Add print styles to note's template

static/styles.css

@@ -9,6 +9,12 @@ html {
     font-size: 18px;
   }
 }
+@media print {
+  html {
+    font-size: 17px;
+    margin: 0;
+  }
+}
 
 body {
   margin: 0;
@@ -26,6 +32,12 @@ body {
 .theme--dark body {
   background: #1e1e1e;
 }
+@media print {
+  body {
+    margin: 0;
+    color: #000000 !important;
+  }
+}
 @media (max-width: 580px) {
   body.lock {
     overflow: hidden;
@@ -74,6 +86,11 @@ h1, h2 {
     bottom: -40%;
   }
 }
+@media print {
+  .background {
+    display: none;
+  }
+}
 
 .theme-toggle {
   position: fixed;
@@ -98,6 +115,11 @@ h1, h2 {
     right: 0;
   }
 }
+@media print {
+  .theme-toggle {
+    display: none;
+  }
+}
 
 .sun {
   display: none;
@@ -129,6 +151,11 @@ h1, h2 {
     font-size: 0.8rem;
   }
 }
+@media print {
+  .top {
+    display: block;
+  }
+}
 .theme--default .top span {
   color: #e32a6d;
 }
@@ -172,6 +199,12 @@ h1, h2 {
   text-align: right;
   text-decoration: none;
 }
+@media print {
+  .nostr_link {
+    display: block;
+    text-align: right;
+  }
+}
 
 .container {
   display: flex;
@@ -186,6 +219,11 @@ h1, h2 {
     width: 100%;
   }
 }
+@media print {
+  .container {
+    width: 100%;
+  }
+}
 .container .columnA {
   flex-basis: 25%;
   margin-top: 2rem;
@@ -427,6 +465,11 @@ h1, h2 {
   visibility: hidden;
   display: none;
 }
+@media print {
+  .container .column_content .field.advanced-switch-wrapper {
+    display: none;
+  }
+}
 .container .column_content .field.advanced-switch-wrapper label:first-of-type {
   cursor: pointer;
   text-indent: -9999px;
@@ -595,6 +638,11 @@ h1, h2 {
     display: none;
   }
 }
+@media print {
+  .container .column_clients {
+    display: none;
+  }
+}
 .container .column_clients .title {
   font-size: 0.8rem;
   margin-bottom: 1rem;
@@ -730,10 +778,22 @@ body.note .column_content, body.other .column_content {
     margin-right: 0;
   }
 }
+@media print {
+  body.note .column_content, body.other .column_content {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}
 body.note .column_content .profile_intro, body.other .column_content .profile_intro {
   display: flex;
   max-width: 100%;
   align-items: center;
+  margin-bottom: 1rem;
+}
+@media print {
+  body.note .column_content .profile_intro, body.other .column_content .profile_intro {
+    margin-bottom: 1rem;
+  }
 }
 body.note .column_content .profile_intro a, body.other .column_content .profile_intro a {
   display: inherit;
@@ -751,13 +811,17 @@ body.note .column_content .profile_intro a, body.other .column_content .profile_
 }
 body.note .column_content .profile_intro .info-wrapper, body.other .column_content .profile_intro .info-wrapper {
   flex-grow: 1;
-  margin-bottom: 1rem;
 }
 @media (max-width: 580px) {
   body.note .column_content .profile_intro .info-wrapper, body.other .column_content .profile_intro .info-wrapper {
     display: block;
   }
 }
+@media print {
+  body.note .column_content .profile_intro .info-wrapper, body.other .column_content .profile_intro .info-wrapper {
+    font-size: 1rem;
+  }
+}
 @media (max-width: 580px) {
   body.note .column_content .profile_intro .info-wrapper .name,
   body.note .column_content .profile_intro .info-wrapper .npub, body.other .column_content .profile_intro .info-wrapper .name,
@@ -775,6 +839,11 @@ body.note .column_content .profile_intro .pic-wrapper, body.other .column_conten
     margin-right: 0.5rem;
   }
 }
+@media print {
+  body.note .column_content .profile_intro .pic-wrapper, body.other .column_content .profile_intro .pic-wrapper {
+    flex-basis: 10%;
+  }
+}
 body.note .column_content .published_at, body.note .column_content .reply_of, body.other .column_content .published_at, body.other .column_content .reply_of {
   width: 100%;
   text-align: right;
@@ -807,4 +876,14 @@ body.note .column_content .reply_of, body.other .column_content .reply_of {
   color: #9a9a9a;
 }
 
+@media print {
+  @page {
+    margin: 2cm 3cm;
+  }
+  /* Safari specific styles */
+  body.safari {
+    margin: 1cm 3cm;
+  }
+}
+
 /*# sourceMappingURL=styles.css.map */

static/styles.scss

@@ -96,6 +96,10 @@ html {
   @media (max-width: 580px) {
     font-size: 18px;
   }
+  @media print {
+    font-size: 17px;
+    margin: 0;
+  }
 }
 body {
   @include themed() {
@@ -106,6 +110,10 @@ body {
   }
   margin: 0;
   margin-bottom: 4rem;
+  @media print {
+    margin: 0;
+    color: #000000 !important;
+  }
   &.lock {
     @media (max-width: 580px) {
       overflow: hidden;
@@ -145,6 +153,9 @@ a {
       bottom: -40%;
     }
   }
+  @media print {
+    display: none;
+  }
 }
 
 .theme-toggle {
@@ -164,6 +175,9 @@ a {
     top: 0;
     right: 0;
   }
+  @media print {
+    display: none;
+  }
 }
 
 .sun {
@@ -194,6 +208,9 @@ a {
     padding: 1rem;
     font-size: 0.8rem;
   }
+  @media print {
+    display: block;
+  }
   span {
     @include themed() {
       color: t($accent1);
@@ -231,6 +248,10 @@ a {
   flex-basis: 15%;
   text-align: right;
   text-decoration: none;
+  @media print {
+    display: block;
+    text-align: right;
+  }
 }
 
 .container {
@@ -243,6 +264,9 @@ a {
     display: block;
     width: 100%;
   }
+  @media print {
+    width: 100%;
+  }
 
   .columnA {
     flex-basis: 25%;
@@ -425,14 +449,15 @@ a {
       &.advanced-switch-wrapper {
         display: flex;
         align-items: center;
-
         input[type='checkbox'] {
           height: 0;
           width: 0;
           visibility: hidden;
           display: none;
         }
-
+        @media print {
+          display: none;
+        }
         label:first-of-type {
           cursor: pointer;
           text-indent: -9999px;
@@ -569,6 +594,9 @@ a {
         }
       }
     }
+    @media print {
+      display: none;
+    }
     .title {
       font-size: 0.8rem;
       margin-bottom: 1rem;
@@ -687,10 +715,18 @@ body.note, body.other {
       max-width: 100%;
       margin-right: 0;
     }
+    @media print {
+      flex-basis: 100%;
+      max-width: 100%;
+    }
     .profile_intro {
       display: flex;
       max-width: 100%;
       align-items: center;
+      margin-bottom: 1rem;
+      @media print {
+        margin-bottom: 1rem;
+      }
       a {
         display: inherit;
         width: 100%;
@@ -705,10 +741,12 @@ body.note, body.other {
       }
       .info-wrapper {
         flex-grow: 1;
-        margin-bottom: 1rem;
         @media (max-width: 580px) {
           display: block;
         }
+        @media print {
+          font-size: 1rem;
+        }
         .name,
         .npub {
           @media (max-width: 580px) {
@@ -723,6 +761,9 @@ body.note, body.other {
         @media (max-width: 580px) {
           margin-right: 0.5rem;
         }
+        @media print {
+          flex-basis: 10%;
+        }
       }
     }
     .published_at, .reply_of {
@@ -754,3 +795,13 @@ body.note, body.other {
     color: $color-base5;
   }
 }
+
+@media print {
+  @page {
+    margin: 2cm 3cm;
+  }
+  /* Safari specific styles */
+  body.safari {
+    margin: 1cm 3cm;
+  }
+}

templates/head.html

@@ -63,5 +63,5 @@
   {{end}}
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="stylesheet" href="/njump/static/styles.css?v=20230602b" />
+  <link rel="stylesheet" href="/njump/static/styles.css?v=20230602c" />
 </head>

templates/scripts.js

@@ -105,4 +105,9 @@ document.addEventListener('DOMContentLoaded', function() {
       contentDiv.classList.add('gradient');
     }
   }
-});
+});
+
+// Needed to apply proper print styles
+if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
+  document.body.classList.add('safari');
+}

templates/top.html

@@ -70,4 +70,15 @@
   // if (prefersDarkMode) {
   //   document.documentElement.classList.add('theme--dark');
   // }
+
+  window.addEventListener('beforeprint', function() {
+    const htmlElement = document.documentElement
+    htmlElement.classList.remove('theme--dark')
+    htmlElement.classList.add('theme--default')
+  });
+  window.addEventListener('afterprint', function() {
+    const htmlElement = document.documentElement
+    htmlElement.classList.toggle('theme--dark', isDarkMode)
+    htmlElement.classList.toggle('theme--default', !isDarkMode)
+  });
 </script>