✨ Style: add media style for print view (#61)

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file.
 ## v0.2.13
 
 - :tada: Feat: add Artalk comment support ([#54](https://github.com/Lruihao/FixIt/issues/54))
+- :sparkles: Style: add media style for print view ([#61](https://github.com/Lruihao/FixIt/issues/61))
 - :sparkles: Feat: update watermark 1.0.3-RC (fontFamily support)
 - :pencil2: Style: fix typo discription should be: description ([#60](https://github.com/Lruihao/FixIt/issues/60))
 - :fire: Feat: remove shortcode cardlink

assets/css/_core/_media.scss

@@ -81,3 +81,43 @@
     }
   }
 }
+
+@media only print {
+  @page {
+    size: A4 portrait;
+    margin: 1.27cm;
+    page-break-after: auto;
+  }
+
+  .page {
+    width: 100%;
+    padding-top: 0!important;
+
+    .single-title,
+    .single-subtitle,
+    .post-meta {
+      text-align: center;
+    }
+
+    h1:not(.single-title),
+    .page-break-before {
+      page-break-before: always;
+    }
+  
+    .page-break-after {
+      page-break-after: always;
+    }
+  }
+
+  header,
+  footer .footer-line:not(.powered):not(.copyright),
+  #toc-auto,
+  .post-info-share,
+  .post-info-more section:last-child,
+  .post-nav,
+  #fixed-buttons,
+  #comments {
+    display: none!important;
+  }
+}
+

layouts/partials/footer.html

@@ -3,14 +3,14 @@
     <div class="footer-container">
       {{- /* Custom Content */ -}}
       {{- with .Site.Params.footer.custom -}}
-        <div class="footer-line">
+        <div class="footer-line custom">
           {{- safeHTML . -}}
         </div>
       {{- end -}}
 
       {{- /* Hugo and FixIt */ -}}
       {{- if ne .Site.Params.footer.hugo false -}}
-        <div class="footer-line">
+        <div class="footer-line powered">
           {{- $hugo := printf `<a href="https://gohugo.io/" target="_blank" rel="external nofollow noopener noreffer" title="Hugo %v">Hugo</a>` hugo.Version -}}
           {{- $theme := .Scratch.Get "version" | printf `<a href="https://github.com/Lruihao/FixIt" target="_blank" rel="external nofollow noopener noreffer" title="FixIt %v"><i class="fa-stack fa-xs logo-icon"><i class="fas fa-ban fa-stack-2x"></i><i class="fas fa-bug fa-stack-1x"></i></i> FixIt</a>` -}}
           {{- dict "Hugo" $hugo "Theme" $theme | T "poweredBySome" | safeHTML }}
@@ -18,7 +18,7 @@
       {{- end -}}
 
       {{- if .Site.Params.footer.copyright | or .Site.Params.footer.author | or .Site.Params.footer.license -}}
-        <div class="footer-line">
+        <div class="footer-line copyright">
           {{- /* Copyright year */ -}}
           {{- if ne .Site.Params.footer.copyright false -}}
             <i class="far fa-copyright fa-fw"></i>
@@ -50,7 +50,7 @@
 
       {{- /* 不蒜子 */ -}}
       {{- if eq .Site.Params.ibruce.enable true -}}
-        <div class="footer-line">
+        <div class="footer-line ibruce">
           <span id="busuanzi_container_site_uv" title={{ T "siteUV" }}
             ><i class="far fa-user"></i>
             <span id="busuanzi_value_site_uv"