From c74741f5c54325f2c19d02d5f4eb00d67dbe053b Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Mon, 31 Oct 2022 08:40:17 -0700 Subject: [PATCH] Move footer tags list to a partial so photos and blogs can use the same template Simplify the blog post layout by removing the
tag --- content/blog/blog.css | 65 +------------------------------ layouts/partials/footer_tags.html | 24 ++++++++++++ layouts/partials/single_main.html | 38 ++++-------------- layouts/photos/single.html | 4 ++ static/styles/root.css | 63 ++++++++++++++++++++++++++++++ 5 files changed, 100 insertions(+), 94 deletions(-) create mode 100644 layouts/partials/footer_tags.html diff --git a/content/blog/blog.css b/content/blog/blog.css index 6f48fa1..1512c63 100644 --- a/content/blog/blog.css +++ b/content/blog/blog.css @@ -1,24 +1,13 @@ :root { --post-item-highlight-color: #efefef; - - --tag-foreground-color: rgb(var(--super-dk-gray)); - --tag-background-color: rgb(var(--super-lt-gray)); - --tag-spacer-foreground-color: rgb(var(--super-dk-gray)); - --tag-hover-background-color: rgb(var(--sub-lt-gray)); } @media (prefers-color-scheme: dark) { :root { --post-item-highlight-color: #121212; - - --tag-foreground-color: rgb(var(--sub-lt-gray)); - --tag-background-color: rgb(var(--dk-gray)); - --tag-spacer-foreground-color: rgb(var(--super-dk-gray)); - --tag-hover-background-color: rgb(var(--super-dk-gray)); - --tag-hover-foreground-color: rgb(var(--mid-gray)); } } -.post-content > .highlight { margin-block-end: var(--body-item-spacing); } +.blog > .highlight { margin-block-end: var(--body-item-spacing); } .post-nav { align-items: baseline; @@ -91,55 +80,3 @@ .blog.list > ul > li > :first-child { text-align: end; } - -.blog .tags { - display: flex; - padding-inline-start: 0; -} - -.blog .tags li { - background-color: var(--tag-background-color); - color: var(--tag-foreground-color); - border-radius: 4px; - display: inline-block; - font-size: 75%; - letter-spacing: 1px; -} - -.blog .tags li:hover { - background-color: var(--tag-hover-background-color); -} - -.blog .tags li a { - color: inherit; - display: block; - height: 100%; - width: 100%; - padding: 0.6rem 1rem; -} - -.blog .tags li a:hover { - color: var(--tag-hover-foreground-color); - text-decoration: none; -} - -.blog .tags li + li { margin-inline-start: 1rem; } -.blog .tags li.chevron + li { margin-inline-start: 0 } - -.blog .tags .chevron { - align-items: center; - border: 0; - border-radius: 0; - color: var(--tag-spacer-foreground-color); - background-color: inherit; - display: flex; - justify-content: center; - margin-inline-start: 0; - padding-inline-start: 1px; - width: 2rem; -} - -.blog .tags .chevron:hover { - color: var(--tag-background-color); - background-color: inherit; -} diff --git a/layouts/partials/footer_tags.html b/layouts/partials/footer_tags.html new file mode 100644 index 0000000..6e88463 --- /dev/null +++ b/layouts/partials/footer_tags.html @@ -0,0 +1,24 @@ +{{- if or .Params.categories .Params.tags -}} + +{{- end -}} diff --git a/layouts/partials/single_main.html b/layouts/partials/single_main.html index a6d2299..f837c50 100644 --- a/layouts/partials/single_main.html +++ b/layouts/partials/single_main.html @@ -1,4 +1,3 @@ -
{{ partial "development/draft_tag.html" . }}
@@ -13,39 +12,18 @@ {{ .Content }} -
- {{- if or .Params.categories .Params.tags -}} -
    - {{- if .Params.categories -}} - {{- $categories := .GetTerms "categories" -}} - {{- if gt (len $categories) 1 -}} - {{- errorf "More than one category for %q" .Path -}} - {{- end -}} - {{- with index (.GetTerms "categories") 0 -}} -
  • {{ .LinkTitle }}
    • - {{- end -}} - {{- end -}} - {{- if and .Params.categories .Params.tags -}} -
  • ⏵
    • - {{- end -}} - {{- if .Params.tags -}} - {{- range .GetTerms "tags" -}} -
  • {{ .LinkTitle }}
    • - {{- end -}} - {{- end -}} -
- {{- end -}} +
+ {{ partial "footer_tags.html" . }} - {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }} - {{ if and (gt (len $pages) 1) (in $pages . ) }} + {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }} + {{- if and (gt (len $pages) 1) (in $pages . ) -}} - {{ end }} -
-
+ {{- end -}} + diff --git a/layouts/photos/single.html b/layouts/photos/single.html index aecb644..a69d681 100644 --- a/layouts/photos/single.html +++ b/layouts/photos/single.html @@ -40,6 +40,10 @@ {{ end }} + + {{ end }} {{ define "footer" }} diff --git a/static/styles/root.css b/static/styles/root.css index 5b1434f..4e8ca1f 100644 --- a/static/styles/root.css +++ b/static/styles/root.css @@ -50,6 +50,11 @@ --content-width: 80rem; + --tag-foreground-color: rgb(var(--super-dk-gray)); + --tag-background-color: rgb(var(--super-lt-gray)); + --tag-spacer-foreground-color: rgb(var(--super-dk-gray)); + --tag-hover-background-color: rgb(var(--sub-lt-gray)); + --transition-duration: 0.7s; --social-menu-padding: 1rem; @@ -73,6 +78,12 @@ --platter-background-color: rgba(var(--black), var(--platter-background-opacity)); --platter-backdrop-filter: brightness(0.66) blur(10px); + --tag-foreground-color: rgb(var(--sub-lt-gray)); + --tag-background-color: rgb(var(--dk-gray)); + --tag-spacer-foreground-color: rgb(var(--super-dk-gray)); + --tag-hover-background-color: rgb(var(--super-dk-gray)); + --tag-hover-foreground-color: rgb(var(--mid-gray)); + --twitter-icon: url(/icons/twitter-dark.svg); --github-icon: url(/icons/github-dark.svg); --instagram-icon: url(/icons/instagram-dark.svg); @@ -463,6 +474,58 @@ ol ol { padding: 0 0.5rem; } +footer > .tags { + display: flex; + padding-inline-start: 0; +} + +footer > .tags > li { + background-color: var(--tag-background-color); + color: var(--tag-foreground-color); + border-radius: 4px; + display: inline-block; + font-size: 75%; + letter-spacing: 1px; +} + +footer > .tags > li:hover { + background-color: var(--tag-hover-background-color); +} + +footer > .tags > li > a { + color: inherit; + display: block; + height: 100%; + width: 100%; + padding: 0.6rem 1rem; +} + +footer > .tags > li > a:hover { + color: var(--tag-hover-foreground-color); + text-decoration: none; +} + +footer > .tags > li + li { margin-inline-start: 1rem; } +footer > .tags > li.chevron + li { margin-inline-start: 0 } + +footer > .tags > .chevron { + align-items: center; + border: 0; + border-radius: 0; + color: var(--tag-spacer-foreground-color); + background-color: inherit; + display: flex; + justify-content: center; + margin-inline-start: 0; + padding-inline-start: 1px; + width: 2rem; +} + +footer > .tags > .chevron:hover { + color: var(--tag-spacer-foreground-color); + background-color: inherit; +} + .youtube iframe { aspect-ratio: 16 / 9; margin-bottom: -3px;