💄 (print) ui for pdfs

src/components/FluxNote.vue

@@ -193,26 +193,26 @@ $header-height: 40px;
     }
   }
 
-  // @media screen and (min-width: 769px) {
-  //   .repo-title-breadcrumb {
-  //     padding: 0.5rem 1rem 0;
-  //     transform-origin: 0 0;
-  //     transform: rotate(90deg);
-  //     font-size: 0.8em;
+  @media screen and (min-width: 769px) {
+    .repo-title-breadcrumb {
+      padding: 0.5rem 1rem 0;
+      transform-origin: 0 0;
+      transform: rotate(90deg);
+      font-size: 0.8em;
 
-  //     a {
-  //       color: var(--font-color);
-  //       display: block;
-  //       text-align: center;
-  //     }
-  //   }
+      a {
+        color: var(--font-color);
+        display: block;
+        text-align: center;
+      }
+    }
 
-  //   .note {
-  //     min-width: var(--note-width);
-  //     max-width: var(--note-width);
-  //     height: auto;
-  //   }
-  // }
+    .note {
+      min-width: var(--note-width);
+      max-width: var(--note-width);
+      height: auto;
+    }
+  }
 
   .loading {
     display: flex;
@@ -226,7 +226,7 @@ $header-height: 40px;
   }
 }
 
-@media print, screen {
+@media print {
   .readme {
     position: static;
   }

src/components/StackedNote.vue

@@ -102,6 +102,7 @@ $border-color: rgba(18, 19, 58, 0.2);
 .title-stacked-note {
   background-color: var(--background-color);
   position: sticky;
+
   top: 0;
   font-size: 0.8em;
 
@@ -113,6 +114,8 @@ $border-color: rgba(18, 19, 58, 0.2);
 
 .share {
   float: right;
+  margin: 0.2rem;
+
   img {
     vertical-align: bottom;
   }
@@ -155,4 +158,14 @@ $border-color: rgba(18, 19, 58, 0.2);
     white-space: nowrap;
   }
 }
+
+@media print {
+  .stacked-note {
+    break-after: always;
+
+    &.overlay {
+      box-shadow: none;
+    }
+  }
+}
 </style>

src/styles/app.scss

@@ -35,18 +35,10 @@ body {
   font-size: 1.2em;
 }
 
-// @media screen and (min-width: 769px) {
-//   html,
-//   body {
-//     overflow-y: hidden;
-//   }
-// }
-
-@media print, screen {
+@media screen and (min-width: 769px) {
   html,
   body {
-    overflow-y: auto;
-    height: auto;
+    overflow-y: hidden;
   }
 }
 
@@ -84,3 +76,15 @@ a {
 .notif-success {
   background-color: $link;
 }
+
+@media print {
+  html,
+  body {
+    overflow-y: auto;
+    height: auto;
+  }
+
+  #app {
+    height: auto;
+  }
+}