From b72014384c9ae03b4daa28c9ffcb1d998f6476c6 Mon Sep 17 00:00:00 2001 From: Amolith Date: Wed, 31 May 2023 13:27:20 -0400 Subject: [PATCH] improve tags display everywhere --- themes/secluded/assets/scss/_list.scss | 10 +- themes/secluded/assets/scss/_main.scss | 18 +- themes/secluded/assets/scss/_single.scss | 267 ++++++++++--------- themes/secluded/layouts/_default/list.html | 4 +- themes/secluded/layouts/_default/single.html | 8 + 5 files changed, 163 insertions(+), 144 deletions(-) diff --git a/themes/secluded/assets/scss/_list.scss b/themes/secluded/assets/scss/_list.scss index 1b22191..fac45df 100644 --- a/themes/secluded/assets/scss/_list.scss +++ b/themes/secluded/assets/scss/_list.scss @@ -48,14 +48,6 @@ } &-meta { - margin: 5px 0px 13px 0px; - } - - &-tags { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 5px; - margin: 5px 0px 13px 0px; + margin: 5px 0px 10px 0px; } } diff --git a/themes/secluded/assets/scss/_main.scss b/themes/secluded/assets/scss/_main.scss index a45a1fa..2f8bedb 100644 --- a/themes/secluded/assets/scss/_main.scss +++ b/themes/secluded/assets/scss/_main.scss @@ -75,8 +75,7 @@ pre { border: 2px solid unset; border-radius: 7px; } -code, -pre { +code, pre { font-size: 16px; font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; color: $dark; @@ -113,11 +112,8 @@ input[type="text"]:focus { } .content { - h2, - p, - li, - td { - a { + h2, p, li, td { + a:not(.button) { color: $dark; text-decoration: none; background-image: linear-gradient( @@ -233,3 +229,11 @@ footer { font-style: italic; } } + +.tags { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 5px; + margin: 10px 0px 13px 0px !important; +} diff --git a/themes/secluded/assets/scss/_single.scss b/themes/secluded/assets/scss/_single.scss index acdcd40..40d654d 100644 --- a/themes/secluded/assets/scss/_single.scss +++ b/themes/secluded/assets/scss/_single.scss @@ -1,144 +1,157 @@ .toc { - padding-bottom: 5px; - border-bottom: 2px solid $dark; - a { - color: $dark; - text-decoration: underline; - } + padding-bottom: 5px; + border-bottom: 2px solid $dark; + a { + color: $dark; + text-decoration: underline; + } } .frontmatter { - padding: 15px 0; - border-bottom: 2px solid $dark; + padding: 15px 0px 7px 0px; + border-bottom: 2px solid $dark; + a:not(.button) { + color: $dark; + text-decoration: none; + background-image: linear-gradient( + 120deg, + $gradient-left 0%, + $gradient-right 100% + ); + background-repeat: no-repeat; + background-size: 0 0; + background-position: 100% 21%; + transition: 0.15s ease-out; + border-radius: 5px; + padding-left: 4px; + margin-left: -3px; + &:hover { + background-size: 100% 100%; + color: $light; + &:after { + color: $gradient-right; + } + } + &::after { + position: relative; + content: "\FEFF°"; + margin-left: 0.1em; + font-size: 90%; + top: -0.1em; + color: $light-highlight; + font-feature-settings: "caps"; + font-variant-numeric: normal; + } + } + + .post-title { + margin: 10px 0; a { - color: $dark; - text-decoration: none; - background-image: linear-gradient(120deg,$gradient-left 0%,$gradient-right 100%); - background-repeat: no-repeat; + text-decoration: none; + background-image: none; + &::after { + content: ""; + } + &:hover { background-size: 0 0; - background-position: 100% 21%; - transition: .15s ease-out; - border-radius: 5px; - padding-left: 4px; - margin-left: -3px; - &:hover { - background-size: 100% 100%; - color: $light; - &:after { - color: $gradient-right; - } - } - &::after { - position: relative; - content: "\FEFF°"; - margin-left: 0.10em; - font-size: 90%; - top: -0.10em; - color: $light-highlight; - font-feature-settings: "caps"; - font-variant-numeric: normal; - } - } - - .post-title { - margin: 10px 0; - a { - text-decoration: none; - background-image: none; - &::after { - content: ""; - } - &:hover { - background-size: 0 0; - color: $dark; - } - } - } - p { - margin: 0 0; + color: $dark; + } } + } + p { + margin: 0 0; + } } .content { - h2, h3 { - margin-top: 20px; - margin-bottom: -10px; - } - h2, h3, p, li, td { - a { - color: $dark; - text-decoration: none; - background-image: linear-gradient(120deg,$gradient-left 0%,$gradient-right 100%); - background-repeat: no-repeat; - background-size: 0 0; - background-position: 100% 21%; - transition: .15s ease-out; - border-radius: 5px; - padding-left: 4px; - margin-left: -3px; - &:hover { - background-size: 100% 100%; - color: $light; - &:after { - color: $gradient-right; - } - } - &::after { - position: relative; - content: "\FEFF°"; - margin-left: 0.10em; - font-size: 90%; - top: -0.10em; - color: $light-highlight; - font-feature-settings: "caps"; - font-variant-numeric: normal; - } + h2, + h3 { + margin-top: 20px; + margin-bottom: -10px; + } + h2, + h3, + p, + li, + td { + a { + color: $dark; + text-decoration: none; + background-image: linear-gradient( + 120deg, + $gradient-left 0%, + $gradient-right 100% + ); + background-repeat: no-repeat; + background-size: 0 0; + background-position: 100% 21%; + transition: 0.15s ease-out; + border-radius: 5px; + padding-left: 4px; + margin-left: -3px; + &:hover { + background-size: 100% 100%; + color: $light; + &:after { + color: $gradient-right; } - } - .footnote-ref { - background-size: 100% 1.5px; - background-position: 0 90%; - &::after { - content: ""; - } - &:hover { - background-size: 100% 100%; - color: $light; - } - } - .footnote-backref { - background-size: 100% 1.5px; - background-position: 0 90%; - &::after { - content: ""; - } - &:hover { - background-size: 100% 100%; - color: $light; - } - } - .highlight { - a { - background-image: none; - &::after { - content: ""; - } - } - } - .anchor-tag { - font-size: 70%; + } + &::after { position: relative; - bottom: 2.6px; - background-size: 100% 0; - background-position: 0 150%; - &::after { - content: ""; - } + content: "\FEFF°"; + margin-left: 0.1em; + font-size: 90%; + top: -0.1em; + color: $light-highlight; + font-feature-settings: "caps"; + font-variant-numeric: normal; + } } + } + .footnote-ref { + background-size: 100% 1.5px; + background-position: 0 90%; + &::after { + content: ""; + } + &:hover { + background-size: 100% 100%; + color: $light; + } + } + .footnote-backref { + background-size: 100% 1.5px; + background-position: 0 90%; + &::after { + content: ""; + } + &:hover { + background-size: 100% 100%; + color: $light; + } + } + .highlight { + a { + background-image: none; + &::after { + content: ""; + } + } + } + .anchor-tag { + font-size: 70%; + position: relative; + bottom: 2.6px; + background-size: 100% 0; + background-position: 0 150%; + &::after { + content: ""; + } + } } .commento-root-font * { - font-family: Heliotrope !important; + font-family: Heliotrope !important; } .commento-footer { - display: none; -} \ No newline at end of file + display: none; +} diff --git a/themes/secluded/layouts/_default/list.html b/themes/secluded/layouts/_default/list.html index 5763f81..40e6532 100644 --- a/themes/secluded/layouts/_default/list.html +++ b/themes/secluded/layouts/_default/list.html @@ -28,12 +28,14 @@

{{.Title}}

{{ .Summary | truncate 140 }}

Reading Time: {{ .ReadingTime }} minutes | Published: {{ dateFormat "2006-01-02" .Date }}

-

+ {{- if .Params.tags }} +

{{ $title := .Title }} {{- range (.GetTerms "tags") }} {{.Title}} {{- end }}

+ {{- end }} {{- end }} {{- end }} diff --git a/themes/secluded/layouts/_default/single.html b/themes/secluded/layouts/_default/single.html index ffa080f..9169a1d 100644 --- a/themes/secluded/layouts/_default/single.html +++ b/themes/secluded/layouts/_default/single.html @@ -5,6 +5,14 @@

{{ .Title | markdownify }}

Reading Time: {{ .ReadingTime }} minutes | Published: {{ dateFormat "2006-01-02" .Date }} | Last Edited: {{ dateFormat "2006-01-02" .Lastmod }}

Download this post as: PDF, EPUB, or plaintext

+ {{- if .Params.tags }} +

+ {{ $title := .Title }} + {{- range (.GetTerms "tags") }} + {{.Title}} + {{- end }} +

+ {{- end }} {{- if .Params.rss_only }}