From ec315ea1b587e854c3ff52e8543303d01545d329 Mon Sep 17 00:00:00 2001 From: Nikolaos Karaolidis Date: Fri, 12 Sep 2025 13:33:41 +0100 Subject: [PATCH] Improve taxonomy handling Signed-off-by: Nikolaos Karaolidis --- assets/sass/details.scss | 55 ++++++++++++ assets/sass/footer.scss | 1 + assets/sass/hero.scss | 16 ---- assets/sass/list.scss | 87 +++---------------- assets/sass/main.scss | 2 + assets/sass/meta.scss | 20 +++++ layouts/_default/list.html | 8 +- layouts/_shortcodes/sub.html | 3 +- layouts/_shortcodes/sup.html | 3 +- layouts/gallery/list.html | 16 ++-- layouts/partials/components/hero/index.html | 6 +- layouts/partials/components/image/index.html | 5 +- .../list/{meta.html => details.html} | 4 +- layouts/partials/components/meta/index.html | 18 ++++ .../partials/components/postnav/index.html | 29 ++++--- layouts/partials/posts/list.html | 16 ++-- 16 files changed, 154 insertions(+), 135 deletions(-) create mode 100644 assets/sass/details.scss create mode 100644 assets/sass/meta.scss rename layouts/partials/components/list/{meta.html => details.html} (57%) create mode 100644 layouts/partials/components/meta/index.html diff --git a/assets/sass/details.scss b/assets/sass/details.scss new file mode 100644 index 0000000..84082c2 --- /dev/null +++ b/assets/sass/details.scss @@ -0,0 +1,55 @@ +main.with-details { + max-width: $width-wide; + margin: 0 auto; + padding: 2rem; + + > .content { + width: 100%; + padding: 0; + } + + $width-sidebar: ($width-wide - $width-content) / 2 - 2rem; + display: grid; + grid-template-columns: $width-sidebar $width-content $width-sidebar; + column-gap: 2rem; + + .title { + font-size: 1.75rem; + margin: 0; + } + + .length { + color: color-mix(in srgb, var(--text) 50%, var(--background)); + margin: 0.5rem 0 0.5rem 0; + font-size: 0.8rem; + } +} + +@media (max-width: $width-wide) { + main.with-details { + display: block; + padding: 0; + + > .details { + max-width: $width-content; + margin: 0 auto; + padding: 2rem; + } + + > .content { + padding: 2rem; + } + } +} + +@media (max-width: $width-mobile) { + main.with-details { + > .details { + padding: 1rem; + } + + > .content { + padding: 0 1rem 1rem 1rem; + } + } +} diff --git a/assets/sass/footer.scss b/assets/sass/footer.scss index d7aa6ff..f5956e3 100644 --- a/assets/sass/footer.scss +++ b/assets/sass/footer.scss @@ -36,6 +36,7 @@ list-style: none; li { + margin: 0; font-size: 0.85rem; } } diff --git a/assets/sass/hero.scss b/assets/sass/hero.scss index 103fe83..e2513d8 100644 --- a/assets/sass/hero.scss +++ b/assets/sass/hero.scss @@ -7,22 +7,6 @@ margin: 0; font-size: 2.5rem; } - - .meta { - font-size: 0.8rem; - - .date { - color: var(--text-600); - } - - .duration { - color: color-mix(in srgb, var(--text) 50%, var(--background)); - } - } - - .captioned-image { - padding-top: 1.5rem; - } } .hero + .content { diff --git a/assets/sass/list.scss b/assets/sass/list.scss index 99b71cb..556222e 100644 --- a/assets/sass/list.scss +++ b/assets/sass/list.scss @@ -1,64 +1,17 @@ -main.with-meta { - max-width: $width-wide; - margin: 0 auto; - padding: 2rem; - - > .content { - padding: 0; - } - - $width-sidebar: ($width-wide - $width-content) / 2 - 2rem; - display: grid; - grid-template-columns: $width-sidebar $width-content $width-sidebar; - column-gap: 2rem; - - h1 { - font-size: 1.75rem; - } - - .length { - color: color-mix(in srgb, var(--text) 50%, var(--background)); - margin: 0.25rem 0; - font-size: 0.8rem; - } -} - -@media (max-width: $width-wide) { - main.with-meta { - display: block; - padding: 0; - - > .meta { - max-width: $width-content; - margin: 0 auto; - padding: 2rem; - } - - > .content { - padding: 2rem; - } - } -} - -@media (max-width: $width-mobile) { - main.with-meta { - > .meta { - padding: 1rem; - } - - > .content { - padding: 0 1rem 1rem 1rem; - } - } -} - .list { .post { display: block; - color: inherit; + + >a { + color: inherit; + } + + >a:hover { + color: var(--text-800); + } &:not(:first-child) { - margin-top: 4rem; + margin: 4rem 0 4rem 0; } .title { @@ -67,38 +20,20 @@ main.with-meta { } .summary { - margin-top: 0.5rem; - } - - .meta { - margin-top: 1rem; - font-size: 0.8rem; - - .date { - color: var(--text-600); - } - - .duration { - color: color-mix(in srgb, var(--text) 50%, var(--background)); - } + margin: 0.5rem 0 0.5rem 0; } .heading-anchor { display: none; } } - - .post:hover .title, - .post:hover .summary { - color: var(--text-800); - } } @media (max-width: $width-mobile) { .list { .post { &:not(:first-child) { - margin-top: 2rem; + margin: 2rem 0 2rem 0; } .title { diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 6a2d509..e351515 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -11,7 +11,9 @@ $width-wide: 75rem; @import "blockquote"; @import "code"; @import "table"; +@import "meta"; +@import "details"; @import "list"; @import "gallery"; diff --git a/assets/sass/meta.scss b/assets/sass/meta.scss new file mode 100644 index 0000000..1173ea7 --- /dev/null +++ b/assets/sass/meta.scss @@ -0,0 +1,20 @@ +.meta { + margin: 1rem 0 1rem 0; + font-size: 0.8rem; + + .tag { + color: var(--secondary-600); + } + + .tag:hover { + color: var(--secondary-800); + } + + .date { + color: var(--text-600); + } + + .duration { + color: color-mix(in srgb, var(--text) 50%, var(--background)); + } +} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 6da67d1..621516a 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,8 +1,8 @@ {{ define "main" }} - {{ $withMeta := default true .Params.withMeta }} -
- {{ if $withMeta }} - {{ partial "components/list/meta.html" . }} + {{ $details := default true .Params.details }} +
+ {{ if $details }} + {{ partial "components/list/details.html" . }} {{ end }}
{{ partial "posts/list.html" . }} diff --git a/layouts/_shortcodes/sub.html b/layouts/_shortcodes/sub.html index fca3963..aa12da3 100644 --- a/layouts/_shortcodes/sub.html +++ b/layouts/_shortcodes/sub.html @@ -1,2 +1 @@ -{{ .Get 0 | markdownify }} -{{- /* chomp trailing newline */ -}} +{{ .Get 0 | markdownify }} {{- /* chomp trailing newline */ -}} diff --git a/layouts/_shortcodes/sup.html b/layouts/_shortcodes/sup.html index de06743..9b53134 100644 --- a/layouts/_shortcodes/sup.html +++ b/layouts/_shortcodes/sup.html @@ -1,2 +1 @@ -{{ .Get 0 | markdownify }} -{{- /* chomp trailing newline */ -}} +{{ .Get 0 | markdownify }} {{- /* chomp trailing newline */ -}} diff --git a/layouts/gallery/list.html b/layouts/gallery/list.html index 1822e97..9a61aac 100644 --- a/layouts/gallery/list.html +++ b/layouts/gallery/list.html @@ -1,10 +1,16 @@ {{ define "main" }} - {{ $withMeta := default true .Params.withMeta }} -
- {{ if $withMeta }} - {{ partial "components/list/meta.html" . }} + {{ $details := default true .Params.details }} +
+ {{ if $details }} + {{ partial "components/list/details.html" . }} {{ end }} -
+
{{ partial "gallery/list.html" . }}
diff --git a/layouts/partials/components/hero/index.html b/layouts/partials/components/hero/index.html index e319460..8d642cd 100644 --- a/layouts/partials/components/hero/index.html +++ b/layouts/partials/components/hero/index.html @@ -1,9 +1,5 @@

{{ .Title }}

-
- {{ .Date | time.Format ":date_medium" }} - · - {{ printf "%d MIN READ" .ReadingTime }} -
+ {{ partial "components/meta/index.html" . }} {{ partial "components/image/index.html" (dict "page" .Page "image" .Params.hero) }}
diff --git a/layouts/partials/components/image/index.html b/layouts/partials/components/image/index.html index 9054baf..9897c4b 100644 --- a/layouts/partials/components/image/index.html +++ b/layouts/partials/components/image/index.html @@ -9,8 +9,8 @@ {{- if reflect.IsMap $image -}} {{- $src = $image.src | default "" -}} {{- $caption = $image.caption | default "" -}} - {{- $title = $image.title | default $caption | default "" -}} - {{- $alt = $image.alt | default $title | default "" -}} + {{- $title = $image.title | default $caption | default "" | plainify -}} + {{- $alt = $image.alt | default $title | default "" | plainify -}} {{- end -}} {{- if $src -}} @@ -36,6 +36,7 @@ {{- $thumb = $original | images.Filter (images.Process "webp q75") -}} {{- end -}} +