github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-24 05:50:40 +00:00
Code Issues Projects Releases Wiki Activity

feat: improve css print media type (#411)

Browse Source
This commit is contained in:
Robert Kaussow 2023-07-05 21:48:39 +02:00 committed by GitHub
parent cef2ae89a6
commit 9be026819d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
exampleSite/content/about/index.md
View File

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

14
layouts/partials/metadata.html
View File

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

37
src/sass/_print.scss
View File

@ -1,18 +1,19 @@
@media print { @media print {
.gblog-nav, .gblog-nav,
.gblog-footer .container div:not(:last-child), .gblog-header,
.gblog-footer,
.gblog-paging, .gblog-paging,
.gblog-post__readmore, .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; 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 { .gblog-markdown pre {
@ -21,7 +22,6 @@
} }
.chroma code { .chroma code {
border: $border-1 solid $gray-300;
padding: $padding-8 !important; padding: $padding-8 !important;
font-weight: normal !important; font-weight: normal !important;
} }
@ -31,8 +31,23 @@
} }
a, a,
a:visited,
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;
} }
} }