feat: improve css print media type (#411)

exampleSite/content/about/index.md

@@ -7,6 +7,8 @@ resources:
       credits: "[Angelina Litvin](https://unsplash.com/@linalitvina) on [Unsplash](https://unsplash.com/s/photos/writing)"
 ---
 
+<!-- markdownlint-disable MD033 -->
+
 {{< columns size=small >}}
 
 {{< img name=profile lazy=false size=profile >}}
@@ -50,6 +52,8 @@ Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclima
 
 ---
 
+<div class="no-break-inside">
+
 ## Skills
 
 <!-- prettier-ignore-start -->
@@ -61,8 +65,12 @@ Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclima
 <!-- spellchecker-enable -->
 <!-- prettier-ignore-end -->
 
+</div>
+
 ---
 
+<div class="no-break-inside">
+
 ## Contact
 
 <!-- prettier-ignore-start -->
@@ -77,3 +85,5 @@ Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclima
 <!-- markdownlint-restore -->
 <!-- spellchecker-enable -->
 <!-- prettier-ignore-end -->
+
+</div>

layouts/partials/metadata.html

@@ -1,4 +1,4 @@
-<span class="flex align-center no-wrap">
+<span class="flex align-center no-wrap gblog-post__meta--update">
   <svg class="gblog-icon gblog_date"><use xlink:href="#gblog_date"></use></svg>
   <span class="gblog-post__tag">
     <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
@@ -10,13 +10,13 @@
   </span>
 </span>
 
-<span class="flex align-center no-wrap">
+<span class="flex align-center no-wrap gblog-post__meta--readtime">
   <svg class="gblog-icon gblog_timer"><use xlink:href="#gblog_timer"></use></svg>
   <span class="gblog-post__tag">{{ .ReadingTime }} min read</span>
 </span>
 
 {{ if eq .Params.weight 1 }}
-  <span class="flex align-center no-wrap">
+  <span class="flex align-center no-wrap gblog-post__meta--pinned">
     <svg class="gblog-icon gblog_pin"><use xlink:href="#gblog_pin"></use></svg>
     <span class="gblog-post__tag">Pinned</span>
   </span>
@@ -28,12 +28,12 @@
     {{ $author := index $.Site.Data.authors . }}
     {{ with $.Site.GetPage (printf "/authors/%s" . | urlize) }}
       {{ if eq $ac 0 }}
-        <span class="flex align-center no-wrap">
+        <span class="flex align-center no-wrap gblog-post__meta--author">
           <svg class="gblog-icon gblog_person"><use xlink:href="#gblog_person"></use></svg>
           {{ template "post-author" dict "name" $author.name "page" . }}
         </span>
       {{ else }}
-        <span class="flex align-center">
+        <span class="flex align-center gblog-post__meta--author">
           {{ template "post-author" dict "name" $author.name "page" . }}
         </span>
       {{ end }}
@@ -48,12 +48,12 @@
     {{ $name := . }}
     {{ with $.Site.GetPage (printf "/tags/%s" $name | urlize) }}
       {{ if eq $tc 0 }}
-        <span class="flex align-center no-wrap">
+        <span class="flex align-center no-wrap gblog-post__meta--tag">
           <svg class="gblog-icon gblog_bookmark"><use xlink:href="#gblog_bookmark"></use></svg>
           {{ template "post-tag" dict "name" $name "page" . }}
         </span>
       {{ else }}
-        <span class="flex align-center">
+        <span class="flex align-center gblog-post__meta--tag">
           {{ template "post-tag" dict "name" $name "page" . }}
         </span>
       {{ end }}

src/sass/_print.scss

@@ -1,18 +1,19 @@
 @media print {
   .gblog-nav,
-  .gblog-footer .container div:not(:last-child),
+  .gblog-header,
+  .gblog-footer,
   .gblog-paging,
   .gblog-post__readmore,
-  .gblog-post__anchor {
+  .gblog-post__anchor,
+  .gblog-post__codecopy,
+  .gblog-post__meta--author,
+  .gblog-post__meta--tag,
+  .gblog-post__meta--pinned {
     display: none;
   }
 
-  .gblog-header {
+  .gblog-post {
-    border-bottom: $border-1 solid $gray-300;
+    padding: 0.5em 0;
-  }
-
-  .gblog-footer {
-    border-top: $border-1 solid $gray-300;
   }
 
   .gblog-markdown pre {
@@ -21,7 +22,6 @@
   }
 
   .chroma code {
-    border: $border-1 solid $gray-300;
     padding: $padding-8 !important;
     font-weight: normal !important;
   }
@@ -31,8 +31,23 @@
   }
 
   a,
+  a:visited,
   a:visited {
-    color: inherit !important;
+    color: var(--link-color) !important;
-    text-decoration: none !important;
+    background: none !important;
+    text-decoration: underline !important;
+  }
+
+  h2,
+  h3,
+  h4,
+  .no-break-after {
+    break-after: avoid;
+  }
+
+  pre,
+  blockquote,
+  .no-break-inside {
+    break-inside: avoid;
   }
 }