From cceb61934180f8b4d85fdef35c2209deda051d15 Mon Sep 17 00:00:00 2001 From: PCloud Date: Tue, 26 Mar 2024 13:37:44 +0000 Subject: [PATCH] Feature: improve printing experience (#1220) * feat(print): improve print style * feat: expand on print * feat: handle special page * feat: hide comment section on print --- assets/css/main.css | 183 +++--------------- assets/js/theme.js | 13 ++ themes/DoIt/layouts/_default/baseof.html | 2 +- themes/DoIt/layouts/_default/single.html | 2 +- themes/DoIt/layouts/partials/comment.html | 2 +- themes/DoIt/layouts/partials/header.html | 4 +- .../DoIt/layouts/partials/single/footer.html | 6 +- .../DoIt/layouts/partials/single/sponsor.html | 2 +- themes/DoIt/layouts/posts/single.html | 6 +- 9 files changed, 55 insertions(+), 165 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 4f810b9f1..79c352f15 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -575,74 +575,24 @@ ul { --tw-backdrop-sepia: ; } -.tw-m-1 { - margin: 0.25rem; -} - .tw-my-4 { margin-top: 1rem; margin-bottom: 1rem; } -.tw-mx-1 { - margin-left: 0.25rem; - margin-right: 0.25rem; -} - .tw-mr-1 { margin-right: 0.25rem; } -.tw-translate-y-1 { - --tw-translate-y: 0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.tw-translate-y-\[-1\] { - --tw-translate-y: -1; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.tw-translate-y-\[-1px\] { - --tw-translate-y: -1px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .tw-border-t-2 { border-top-width: 2px; } -.tw-border-t { - border-top-width: 1px; -} - -.tw-border-\[\] { - border-color: ; -} - -.tw-border-\[\$\] { - border-color: $; -} - -.tw-border-\[\#\#363636\] { - border-color: ##363636; -} - -.tw-border-\[\#363636\] { - --tw-border-opacity: 1; - border-color: rgb(54 54 54 / var(--tw-border-opacity)); -} - .tw-border-\[\#f0f0f0\] { --tw-border-opacity: 1; border-color: rgb(240 240 240 / var(--tw-border-opacity)); } -.tw-bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - .tw-bg-transparent { background-color: transparent; } @@ -661,25 +611,11 @@ ul { padding-bottom: 0.5rem; } -.tw-shadow { - --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .tw-shadow-black { --tw-shadow-color: #000; --tw-shadow: var(--tw-shadow-colored); } -.tw-outline { - outline-style: solid; -} - -.tw-outline-offset-1 { - outline-offset: 1px; -} - .tw-transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -696,66 +632,17 @@ ul { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } -.\[text-shadow\:_0_1px_0_rgb\(0_0_0_\/_40\%\)\] { - text-shadow: 0 1px 0 rgb(0 0 0 / 40%); -} - .hover\:tw-bg-gray-200:hover { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } -.hover\:tw-bg-\[\]:hover { - background-color: ; -} - -.hover\:tw-bg-\[\#f0f0f0\]:hover { - --tw-bg-opacity: 1; - background-color: rgb(240 240 240 / var(--tw-bg-opacity)); -} - -.hover\:tw-font-semibold:hover { - font-weight: 600; -} - -.hover\:tw-font-medium:hover { - font-weight: 500; -} - -.hover\:tw-shadow-sm:hover { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.hover\:tw-shadow:hover { - --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.hover\:tw-shadow-inner:hover { - --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.hover\:tw-shadow-xl:hover { - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .hover\:tw-shadow-md:hover { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.hover\:\[text-shadow\:_0_1px_0_rgb\(0_0_0_\/_40\%\)\]:hover { - text-shadow: 0 1px 0 rgb(0 0 0 / 40%); -} - .aria-selected\:tw-border-b-4[aria-selected="true"] { border-bottom-width: 4px; } @@ -774,57 +661,47 @@ ul { color: rgb(45 150 189 / var(--tw-text-opacity)); } -:is(.tw-dark .dark\:tw-border-doit-grey-700) { - --tw-border-opacity: 1; - border-color: rgb(67 80 91 / var(--tw-border-opacity)); -} - -:is(.tw-dark .dark\:tw-border-doit-grey-600) { - --tw-border-opacity: 1; - border-color: rgb(77 95 109 / var(--tw-border-opacity)); -} - -:is(.tw-dark .dark\:tw-border-doit-grey-950) { - --tw-border-opacity: 1; - border-color: rgb(32 37 43 / var(--tw-border-opacity)); -} - -:is(.tw-dark .dark\:tw-border-doit-grey-800) { - --tw-border-opacity: 1; - border-color: rgb(60 69 78 / var(--tw-border-opacity)); -} - :is(.tw-dark .dark\:tw-border-\[\#363636\]) { --tw-border-opacity: 1; border-color: rgb(54 54 54 / var(--tw-border-opacity)); } -:is(.tw-dark .dark\:tw-bg-doit-grey-800) { - --tw-bg-opacity: 1; - background-color: rgb(60 69 78 / var(--tw-bg-opacity)); -} - -:is(.tw-dark .dark\:tw-shadow-white) { - --tw-shadow-color: #fff; - --tw-shadow: var(--tw-shadow-colored); -} - -:is(.tw-dark .dark\:hover\:tw-bg-gray-800:hover) { - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); -} - :is(.tw-dark .dark\:hover\:tw-bg-doit-grey-950:hover) { --tw-bg-opacity: 1; background-color: rgb(32 37 43 / var(--tw-bg-opacity)); } -:is(.tw-dark .dark\:aria-selected\:tw-bg-doit-grey-950[aria-selected="true"]) { - --tw-bg-opacity: 1; - background-color: rgb(32 37 43 / var(--tw-bg-opacity)); -} - :is(.tw-dark .dark\:aria-selected\:tw-text-doit-blue-400[aria-selected="true"]) { --tw-text-opacity: 1; color: rgb(85 189 226 / var(--tw-text-opacity)); } + +@media print { + .print\:\!tw-m-0 { + margin: 0px !important; + } + + .print\:\!tw-block { + display: block !important; + } + + .print\:\!tw-hidden { + display: none !important; + } + + .print\:tw-hidden { + display: none; + } + + .print\:\!tw-w-full { + width: 100% !important; + } + + .print\:\!tw-max-w-none { + max-width: none !important; + } + + .print\:\!tw-p-0 { + padding: 0px !important; + } +} diff --git a/assets/js/theme.js b/assets/js/theme.js index bc0cc7bfd..b3256c167 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -423,6 +423,13 @@ function initDetails () { } $details.classList.toggle('open') }, false) + addEventListener("beforeprint", (event) => { + if ($details.classList.contains('open')) { + return; + } + $summary.click(); + }); + }) } @@ -465,6 +472,12 @@ function initHighlight () { } $chroma.classList.toggle('open') }, false) + addEventListener("beforeprint", (event) => { + if ($chroma.classList.contains('open')) { + return; + } + $title.click(); + }); $header.appendChild($title) const $ellipses = document.createElement('span') $ellipses.insertAdjacentHTML('afterbegin', '') diff --git a/themes/DoIt/layouts/_default/baseof.html b/themes/DoIt/layouts/_default/baseof.html index a188efbf1..fe4c7c9ba 100644 --- a/themes/DoIt/layouts/_default/baseof.html +++ b/themes/DoIt/layouts/_default/baseof.html @@ -67,7 +67,7 @@ {{- partial "footer.html" . -}} -
+
{{- /* top button */ -}} diff --git a/themes/DoIt/layouts/_default/single.html b/themes/DoIt/layouts/_default/single.html index f8f72d72d..39529e520 100644 --- a/themes/DoIt/layouts/_default/single.html +++ b/themes/DoIt/layouts/_default/single.html @@ -2,7 +2,7 @@ {{- define "content" -}} {{- $params := .Scratch.Get "params" -}} -
+
{{- /* Title */ -}}

{{- .Title -}} diff --git a/themes/DoIt/layouts/partials/comment.html b/themes/DoIt/layouts/partials/comment.html index 909e764c0..35ddd69fd 100644 --- a/themes/DoIt/layouts/partials/comment.html +++ b/themes/DoIt/layouts/partials/comment.html @@ -4,7 +4,7 @@ {{- $commentConfig := dict -}} {{- if $comment.enable -}} -
+
{{- /* Disqus Comment System */ -}} {{- $disqus := $comment.disqus | default dict -}} {{- if $disqus.enable -}} diff --git a/themes/DoIt/layouts/partials/header.html b/themes/DoIt/layouts/partials/header.html index 8f9381fe1..2b742d211 100644 --- a/themes/DoIt/layouts/partials/header.html +++ b/themes/DoIt/layouts/partials/header.html @@ -1,5 +1,5 @@ {{- /* Desktop header */ -}} -
+
@@ -97,7 +97,7 @@
{{- /* Mobile header */ -}} -
+
diff --git a/themes/DoIt/layouts/partials/single/footer.html b/themes/DoIt/layouts/partials/single/footer.html index 9c2619432..769564d4f 100644 --- a/themes/DoIt/layouts/partials/single/footer.html +++ b/themes/DoIt/layouts/partials/single/footer.html @@ -25,7 +25,7 @@ {{- end -}}
-
+
{{- if .IsPage -}} {{- $post_info := slice -}} @@ -81,12 +81,12 @@ {{- end -}} {{- end -}} -
+
{{ T "back" }} | {{ T "home" }}
-
+
{{- if .PrevInSection -}} {{- end -}} diff --git a/themes/DoIt/layouts/partials/single/sponsor.html b/themes/DoIt/layouts/partials/single/sponsor.html index 7a89b02a1..62a9523e0 100644 --- a/themes/DoIt/layouts/partials/single/sponsor.html +++ b/themes/DoIt/layouts/partials/single/sponsor.html @@ -9,7 +9,7 @@ {{- $authors := .Params.authors -}} {{- if $enable -}} -