From 041000ce371adc1713c912a7bad0c3698b83222a Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Fri, 11 Aug 2023 08:07:02 -0700 Subject: [PATCH 01/52] Adjust Mastodon icon down 1 px --- assets/styles/root/050_site_header.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/assets/styles/root/050_site_header.css b/assets/styles/root/050_site_header.css index 6f9f5b0..a0a33ad 100644 --- a/assets/styles/root/050_site_header.css +++ b/assets/styles/root/050_site_header.css @@ -104,7 +104,12 @@ padding: 0 0.5rem; } - #social-menu-mastodon img { content: var(--mastodon-icon); } + #social-menu-mastodon img { + content: var(--mastodon-icon); + position: relative; + top: 1px; + } + #social-menu-github img { content: var(--github-icon); } #social-menu-instagram img { content: var(--instagram-icon); } #social-menu-feed img { content: var(--feed-icon); } From 629bbe0c5cb2e3d08d93417a26bf7b2a9060ea14 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Fri, 11 Aug 2023 08:11:08 -0700 Subject: [PATCH 02/52] Copy over the viewBox, width, and height attributes of the light social icons to dark icons --- static/icons/feed-dark.svg | 5 +++-- static/icons/github-dark.svg | 4 +--- static/icons/github.svg | 2 +- static/icons/instagram-dark.svg | 2 +- 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/static/icons/feed-dark.svg b/static/icons/feed-dark.svg index cbd310c..4fa54bc 100644 --- a/static/icons/feed-dark.svg +++ b/static/icons/feed-dark.svg @@ -3,8 +3,9 @@ Date: Fri, 11 Aug 2023 08:21:50 -0700 Subject: [PATCH 03/52] Fix all the dark icons --- static/icons/feed-dark.svg | 52 ++------------------------------- static/icons/feed.svg | 48 ++---------------------------- static/icons/instagram-dark.svg | 37 ++--------------------- static/icons/instagram.svg | 4 ++- 4 files changed, 11 insertions(+), 130 deletions(-) diff --git a/static/icons/feed-dark.svg b/static/icons/feed-dark.svg index 4fa54bc..54b2e6c 100644 --- a/static/icons/feed-dark.svg +++ b/static/icons/feed-dark.svg @@ -1,51 +1,5 @@ - - - - - - - - + + + diff --git a/static/icons/feed.svg b/static/icons/feed.svg index 4d46b35..730535e 100644 --- a/static/icons/feed.svg +++ b/static/icons/feed.svg @@ -1,48 +1,6 @@ - - - - - - + + + diff --git a/static/icons/instagram-dark.svg b/static/icons/instagram-dark.svg index c92fd1e..1a3a946 100644 --- a/static/icons/instagram-dark.svg +++ b/static/icons/instagram-dark.svg @@ -1,36 +1,3 @@ - - - - - + + diff --git a/static/icons/instagram.svg b/static/icons/instagram.svg index 0b84ead..8c14924 100644 --- a/static/icons/instagram.svg +++ b/static/icons/instagram.svg @@ -1 +1,3 @@ - + + + From 43e3cc33b3dd8673543b6742da3da3e9e7276492 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Fri, 11 Aug 2023 08:23:43 -0700 Subject: [PATCH 04/52] [post] Mastodon Icon --- content/blog/2023/mastodon-icon/index.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 content/blog/2023/mastodon-icon/index.md diff --git a/content/blog/2023/mastodon-icon/index.md b/content/blog/2023/mastodon-icon/index.md new file mode 100644 index 0000000..d9f794a --- /dev/null +++ b/content/blog/2023/mastodon-icon/index.md @@ -0,0 +1,6 @@ +--- +title: "Mastodon Icon" +date: 2023-08-11T08:23:25-07:00 +draft: true +--- + From 61047d1c26542f79b1e90860f166f4150cffc9c3 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Fri, 11 Aug 2023 08:28:19 -0700 Subject: [PATCH 05/52] [post] Mastodon Icon, remove draft --- content/blog/2023/mastodon-icon/index.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/content/blog/2023/mastodon-icon/index.md b/content/blog/2023/mastodon-icon/index.md index d9f794a..4e2750c 100644 --- a/content/blog/2023/mastodon-icon/index.md +++ b/content/blog/2023/mastodon-icon/index.md @@ -1,6 +1,15 @@ --- title: "Mastodon Icon" date: 2023-08-11T08:23:25-07:00 -draft: true +categories: ["Tech"] +tags: ["Meta", "Erynwells.me", "Web"] --- +I finally got around to replacing the Twitter icon in the site's header with a +link to my Mastodon page. It was surprisingly tricky because of how I styled and +layed out those icons. I was able to clean up the SVGs a little bit too. + +These days I have [way too many social media accounts][where-to-find-me]. I'm +mostly on Mastodon and Instagram. + +[where-to-find-me]: {{< ref "/about/where-am-i" >}} From 013d707f505e274b0edf304d5507454ba921be13 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 20 Aug 2023 09:58:26 -0700 Subject: [PATCH 06/52] Do the header gradient one letter at a time for browsers that don't support background-clip: text --- assets/styles/root/050_typography.css | 26 +++++++++++++------------- layouts/partials/header.html | 2 +- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/assets/styles/root/050_typography.css b/assets/styles/root/050_typography.css index 0a0a7a2..0f5ccfb 100644 --- a/assets/styles/root/050_typography.css +++ b/assets/styles/root/050_typography.css @@ -86,7 +86,7 @@ line-height: var(--heading-line-height); } - h1.site { + h1.gradient { --site-title-color1: rgb(103, 128, 229); --site-title-color2: rgb(130, 90, 227); --site-title-color3: rgb(135, 101, 228); @@ -102,22 +102,22 @@ font-family: var(--font-family-site-heading); } - h1.site > a { color: inherit; } + h1.gradient > a { color: inherit; } @supports not ((background-clip: text) or (-webkit-background-clip: text)) { - h1.site span:nth-child(10n + 1) { color: var(--site-title-color1); } - h1.site span:nth-child(10n + 2) { color: var(--site-title-color2); } - h1.site span:nth-child(10n + 3) { color: var(--site-title-color3); } - h1.site span:nth-child(10n + 4) { color: var(--site-title-color4); } - h1.site span:nth-child(10n + 5) { color: var(--site-title-color5); } - h1.site span:nth-child(10n + 6) { color: var(--site-title-color6); } - h1.site span:nth-child(10n + 7) { color: var(--site-title-color7); } - h1.site span:nth-child(10n + 8) { color: var(--site-title-color8); } - h1.site span:nth-child(10n + 9) { color: var(--site-title-color9); } - h1.site span:nth-child(10n) { color: var(--site-title-color10); } + h1.gradient span:nth-child(10n + 1) { color: var(--site-title-color1); } + h1.gradient span:nth-child(10n + 2) { color: var(--site-title-color2); } + h1.gradient span:nth-child(10n + 3) { color: var(--site-title-color3); } + h1.gradient span:nth-child(10n + 4) { color: var(--site-title-color4); } + h1.gradient span:nth-child(10n + 5) { color: var(--site-title-color5); } + h1.gradient span:nth-child(10n + 6) { color: var(--site-title-color6); } + h1.gradient span:nth-child(10n + 7) { color: var(--site-title-color7); } + h1.gradient span:nth-child(10n + 8) { color: var(--site-title-color8); } + h1.gradient span:nth-child(10n + 9) { color: var(--site-title-color9); } + h1.gradient span:nth-child(10n) { color: var(--site-title-color10); } } @supports (background-clip: text) or (-webkit-background-clip: text) { - h1.site { + h1.gradient { background: radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%), radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%), diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 562229e..090748c 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -2,7 +2,7 @@ {{- $url := .RelPermalink -}}
-

+

{{ partial "site_name.html" site.Params.shortTitle }}

{{ partial "site_nav.html" . }} From 3bcdd7edb7a808fbca8d470f542d4885ad904c42 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 20 Aug 2023 09:59:02 -0700 Subject: [PATCH 07/52] Add .page or .list to
depending on the length of .Pages --- layouts/_default/baseof.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 9ef4747..2881c5f 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,7 +6,7 @@ {{ block "body" . -}} {{- block "before" . -}}{{- end -}} {{- block "header" . -}}{{ partial "header.html" .}}{{- end -}} -
+
{{ block "main" . }}{{ end }}
{{- block "footer" . -}} From ea9fb02aaafe604fde1e0e5a7b4ea210512000fc Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 20 Aug 2023 09:48:19 -0700 Subject: [PATCH 08/52] Move home styles to home.css --- assets/styles/home.css | 207 ++++++++++++++++++++++++++++++++++++++++ layouts/index.html | 212 +---------------------------------------- 2 files changed, 208 insertions(+), 211 deletions(-) create mode 100644 assets/styles/home.css diff --git a/assets/styles/home.css b/assets/styles/home.css new file mode 100644 index 0000000..faf3734 --- /dev/null +++ b/assets/styles/home.css @@ -0,0 +1,207 @@ +@layer page { + :root { + --animation-offset: 6px; + --font-size-max: 12px; + --line-height: 1.85; + } + + body { + display: flex; + font-size: 2rem; + justify-content: center; + margin: auto; + } + + h1 { + font-size: 5rem; + line-height: 1.3; + margin: 0; + padding: 0; + } + + @media (max-width: 599px) { + h1 { + font-size: 4.25rem; + } + } + + header.site h1 { white-space: normal; } + + @media (max-width: 599px) { + html { + --font-size-scale-factor: 1.33vmax; + } + } + + main { + display: block; + line-height: var(--landing-line-height); + margin-block-start: 10vh; + width: inherit; + } + + main header { + align-items: first baseline; + display: grid; + gap: 0 2rem; + grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr); + grid-template-rows: repeat(2, max-content); + grid-template-areas: + "title blurb" + "title nav"; + padding-inline: 1em; + width: min-content; + } + + @media (max-width: 599px) { + main header { + gap: 1rem 0; + grid-template-columns: 1fr; + grid-template-rows: repeat(3, max-content); + grid-template-areas: + "title" + "blurb" + "nav"; + justify-items: center; + text-align: center; + } + } + + main h1 { + letter-spacing: 0.025em; + text-align: end; + } + + @media (max-width: 599px) { + main h1 { + text-align: center; + } + } + + nav { + align-items: baseline; + align-self: center; + display: flex; + font-size: inherit; + list-style: none; + text-transform: lowercase; + } + + p { + margin: 0; + line-height: var(--line-height); + } + + h1 { + grid-area: title; + } + + #content { + grid-area: blurb + } + + nav { + grid-area: nav + } + + h1, + #content>p, + nav { + position: relative; + } + + h1 { + animation: left-fade-in var(--transition-duration) ease-in-out; + } + + @media (max-width: 599px) { + h1 { + animation: top-fade-in var(--transition-duration) ease-in-out; + } + } + + #content>p, + nav { + animation: right-fade-in var(--transition-duration) ease-in-out; + } + + @media (max-width: 599px) { + + #content>p, + nav { + animation: bottom-fade-in var(--transition-duration) ease-in-out; + } + } + + @keyframes left-fade-in { + from { + opacity: 0%; + left: var(--animation-offset); + } + + 33% { + opacity: 0%; + left: var(--animation-offset); + } + + to { + opacity: 100%; + left: 0; + } + } + + @keyframes right-fade-in { + from { + opacity: 0%; + left: calc(-1 * var(--animation-offset)); + } + + 33% { + opacity: 0%; + left: calc(-1 * var(--animation-offset)); + } + + to { + opacity: 100%; + left: 0; + } + } + + @keyframes top-fade-in { + from { + opacity: 0%; + bottom: calc(-1 * var(--animation-offset)); + } + + 33% { + opacity: 0%; + bottom: calc(-1 * var(--animation-offset)); + } + + to { + opacity: 100%; + bottom: 0; + } + } + + @keyframes bottom-fade-in { + from { + opacity: 0%; + bottom: var(--animation-offset); + } + + 33% { + opacity: 0%; + bottom: var(--animation-offset); + } + + to { + opacity: 100%; + bottom: 0; + } + } + + .platter { + padding: 1.5rem 3rem; + } +} diff --git a/layouts/index.html b/layouts/index.html index d39322b..0160d19 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,7 +1,7 @@ {{ define "body" }}
-

{{ partial "site_name.html" .Title }}

+

{{ partial "site_name.html" .Title }}

{{ .Content }}
@@ -9,213 +9,3 @@
{{ end }} - -{{ define "styles" }} - -{{ end }} From 8aed72a94d0b746181a7d8d4a398b04d89276780 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 20 Aug 2023 09:52:05 -0700 Subject: [PATCH 09/52] Wrap tags list in a .taxonomies
Put two elements inside so there's not an
  • with a triangle in it. --- assets/styles/root/050_tags_list.css | 29 ++++++++++-------- layouts/partials/footer_tags.html | 44 +++++++++++++++------------- 2 files changed, 40 insertions(+), 33 deletions(-) diff --git a/assets/styles/root/050_tags_list.css b/assets/styles/root/050_tags_list.css index 7490f3e..a9c60a8 100644 --- a/assets/styles/root/050_tags_list.css +++ b/assets/styles/root/050_tags_list.css @@ -1,5 +1,15 @@ +.taxonomies { + align-items: first baseline; + display: flex; + grid-column: content-start / content-end; + height: min-content; + position: relative; +} + ul.tags { display: flex; + flex-wrap: wrap; + gap: 1rem 1rem; height: min-content; margin-inline-start: 0; padding-inline-start: 0; @@ -12,10 +22,7 @@ ul.tags > li { display: inline-block; font-size: 75%; letter-spacing: 1px; -} - -ul.tags > li:first-child { - margin-inline-start: 0; + margin: 0; } ul.tags > li:hover { @@ -28,6 +35,7 @@ ul.tags > li > a { height: 100%; width: 100%; padding: 0.6rem 1rem; + text-decoration: none; } ul.tags > li > a:hover { @@ -35,10 +43,9 @@ ul.tags > li > a:hover { text-decoration: none; } -ul.tags > li + li { margin-inline-start: 1rem; } -ul.tags > li.chevron + li { margin-inline-start: 0 } +ul.tags > li + li { margin-inline-start: 0; } -ul.tags > .chevron { +.taxonomies > .chevron { align-items: center; border: 0; border-radius: 0; @@ -47,11 +54,7 @@ ul.tags > .chevron { display: flex; justify-content: center; margin-inline-start: 0; - padding-inline-start: 1px; + position: relative; + top: 2px; width: 2rem; } - -ul.tags > .chevron:hover { - color: var(--tag-spacer-foreground-color); - background-color: inherit; -} diff --git a/layouts/partials/footer_tags.html b/layouts/partials/footer_tags.html index 6e88463..d9f65de 100644 --- a/layouts/partials/footer_tags.html +++ b/layouts/partials/footer_tags.html @@ -1,24 +1,28 @@ -{{- 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 -}} +
      + {{- 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 -}} - {{- with index (.GetTerms "categories") 0 -}} -
    • {{ .LinkTitle }}
      • +
        + {{- if .Params.tags -}} + {{- range .GetTerms "tags" -}} +
      • {{ .LinkTitle }}
        • + {{- end -}} {{- end -}} +
      {{- end -}} - - {{- if and .Params.categories .Params.tags -}} -
    • ⏵
      • - {{- end -}} - - {{- if .Params.tags -}} - {{- range .GetTerms "tags" -}} -
    • {{ .LinkTitle }}
      • - {{- end -}} - {{- end -}} -
    -{{- end -}} +
    • From 1dc243c95f59d0775e2858fbb343fef4bcca9541 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 20 Aug 2023 10:05:37 -0700 Subject: [PATCH 10/52] Remove leading empty space from
    if it's empty --- assets/styles/root/050_figures.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/styles/root/050_figures.css b/assets/styles/root/050_figures.css index 7b75591..fab3c3a 100644 --- a/assets/styles/root/050_figures.css +++ b/assets/styles/root/050_figures.css @@ -4,6 +4,10 @@ text-align: center; } + figcaption:not(:empty) { + margin-block-start: 0.2em; + } + figure { border-radius: 6px; margin: 0; From f950cdbbd9134c93b1b48ad09e1e0487c2329849 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 20 Aug 2023 10:06:58 -0700 Subject: [PATCH 11/52] Remove border-radius from figures --- assets/styles/root/050_figures.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/assets/styles/root/050_figures.css b/assets/styles/root/050_figures.css index fab3c3a..0ac56a1 100644 --- a/assets/styles/root/050_figures.css +++ b/assets/styles/root/050_figures.css @@ -9,7 +9,6 @@ } figure { - border-radius: 6px; margin: 0; margin-inline: 0; overflow: hidden; @@ -35,7 +34,6 @@ figure img { display: block; - border-radius: 6px; height: auto; max-width: var(--content-width); } @@ -46,7 +44,6 @@ } figure .youtube { - border-radius: 6px; overflow: hidden; max-width: var(--content-width); width: 100%; From 851c74b2c94aff98248230857c184ec090b0f6d0 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 20 Aug 2023 10:07:26 -0700 Subject: [PATCH 12/52] Define variables for sizes --- assets/styles/root/050_typography.css | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/assets/styles/root/050_typography.css b/assets/styles/root/050_typography.css index 0f5ccfb..3af2b67 100644 --- a/assets/styles/root/050_typography.css +++ b/assets/styles/root/050_typography.css @@ -19,6 +19,13 @@ --font-size-scale-factor: 1vmax; --site-header-font-size: 200%; + --h1-size: 305%; + --h2-size: 244%; + --h3-size: 195%; + --h4-size: 156%; + --h5-size: 125%; + --h6-size: 100%; + --line-height: 2; --heading-line-height: 1; /* A little extra line height so the descenders don't get clipped */ @@ -59,12 +66,12 @@ line-height: 1; } - h1 { font-size: 305%; } - h2 { font-size: 244%; } - h3 { font-size: 195%; } - h4 { font-size: 156%; } - h5 { font-size: 125%; } - h6 { font-size: 100%; } + h1 { font-size: var(--h1-size); } + h2 { font-size: var(--h2-size); } + h3 { font-size: var(--h3-size); } + h4 { font-size: var(--h4-size); } + h5 { font-size: var(--h5-size); } + h6 { font-size: var(--h6-size); } h5, h6 { font-family: var(--font-family-body); } header.site nav > .active { font-weight: bold; } From c94c4a6c9511a677147d6492e9ec36ff64622925 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 20 Aug 2023 12:14:08 -0700 Subject: [PATCH 13/52] Teach resources/page_css how to load CSS stylesheets with .Kind --- layouts/partials/resources/page_css.html | 26 +++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/layouts/partials/resources/page_css.html b/layouts/partials/resources/page_css.html index 6bd5f43..6bbd568 100644 --- a/layouts/partials/resources/page_css.html +++ b/layouts/partials/resources/page_css.html @@ -1,12 +1,24 @@ {{ $stylesheets := slice }} {{ with .Resources.Match "*.css" }} {{ range . }} - {{ $stylesheets = $stylesheets | append (. | resources.ExecuteAsTemplate .Name .) }} - {{ end }} - {{ if hugo.IsProduction }} - {{ $stylesheets = slice ($stylesheets - | resources.Concat (printf "%s/page.css" $.File.Dir) - | fingerprint "md5") }} + {{ $stylesheets = $stylesheets | append . }} {{ end }} {{ end }} -{{ return $stylesheets }} + +{{ if eq .Kind "home" }} + {{ with resources.Get "styles/home.css" }} + {{ $stylesheets = $stylesheets | append . }} + {{ end }} +{{ end }} + +{{ $processedStylesheets := slice }} +{{ range $stylesheets }} + {{ $processedStylesheets = $processedStylesheets | append (. | resources.ExecuteAsTemplate .Name .) }} +{{ end }} +{{ if hugo.IsProduction }} + {{ $processedStylesheets = slice ($processedStylesheets + | resources.Concat (printf "%s/page.css" $.File.Dir) + | fingerprint "md5") }} +{{ end }} + +{{ return $processedStylesheets }} From 4576de0c8dfc19ac8ac3b8c4aea4fafd1421cf20 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 20 Aug 2023 12:14:43 -0700 Subject: [PATCH 14/52] Wrap about's style in `@layer page { }` --- content/about/style.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/content/about/style.css b/content/about/style.css index b39c308..b61a43d 100644 --- a/content/about/style.css +++ b/content/about/style.css @@ -1,4 +1,7 @@ - -img#me { +@layer page { + img#me { + margin: 0; + shape-outside: circle(55%); width: min(200px, 25%); + } } From f4ed16c706942286d3ff26b9819b16698c485546 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 20 Aug 2023 12:15:37 -0700 Subject: [PATCH 15/52] Clean up content_header --- layouts/partials/content_header.html | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/layouts/partials/content_header.html b/layouts/partials/content_header.html index fd54329..868d0be 100644 --- a/layouts/partials/content_header.html +++ b/layouts/partials/content_header.html @@ -1,11 +1,9 @@
    {{ partial "development/draft_tag.html" . }} -
    -

    {{ .Title }}

    - {{ if and (not (eq .Section "about")) .Date }} -
    - {{ end }} -
    +

    {{ .Title }}

    + {{ if and (not (eq .Section "about")) .Date }} + + {{ end }} {{- if .Params.series -}} {{- $series := .GetTerms "series" -}} {{- if gt (len $series) 1 -}} From 01d27411d7fd4928dc0a8a2cd2d81e1bf8ebe167 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 20 Aug 2023 12:23:08 -0700 Subject: [PATCH 16/52] Establish a grid system There are 5 content columns, two gutter tracks, two wide content columns, and two margin columns --- assets/styles/root/002_columns.css | 72 ++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 assets/styles/root/002_columns.css diff --git a/assets/styles/root/002_columns.css b/assets/styles/root/002_columns.css new file mode 100644 index 0000000..65250e8 --- /dev/null +++ b/assets/styles/root/002_columns.css @@ -0,0 +1,72 @@ +@layer root { + :root { + --margin-min-width: var(--body-item-spacing); + --margin-max-width: 1fr; + } + + main { + --content-columns: 5; + --gutter-width: 3rem; + + display: grid; + grid-template-columns: + [margin-left] + minmax(var(--margin-min-width), var(--margin-max-width)) + [wide-content-start wide-content-left-start] + 1fr + [wide-content-left-end gutter-start gutter-left-start] + var(--gutter-width) + [gutter-left-end content-start] + repeat(var(--content-columns), min(calc((100% - 2 * var(--gutter-width)) / var(--content-columns)), calc(var(--content-width) / var(--content-columns)))) + [content-end gutter-right-start] + var(--gutter-width) + [gutter-right-end gutter-end wide-content-right-start] + 1fr + [wide-content-right-end wide-content-end] + minmax(var(--margin-min-width), var(--margin-max-width)) + [margin-right]; + } + + @media (max-width: 960px) { + main { + --margin-min-width: 0; + --margin-max-width: 0; + } + } + + @media (max-width: 519px) { + /* Collapse the margin and wide content tracks */ + main { + --content-columns: 3; + + grid-template-columns: + [margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start] + var(--gutter-width) + [gutter-left-end content-start] + repeat(var(--content-columns), min(calc((100% - 2 * var(--gutter-width)) / var(--content-columns)), calc(var(--content-width) / var(--content-columns)))) + [content-end gutter-right-start] + var(--gutter-width) + [gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right]; + } + } + + @media (max-width: 415px) { + main { + --content-columns: 1; + + display: grid; + grid-template-columns: + [margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start] + var(--gutter-width) + [gutter-left-end content-start] + calc(100% - 2 * var(--gutter-width)) + [content-end gutter-right-start] + var(--gutter-width) + [gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right]; + } + } + + main > :is(header, article, footer) { + grid-column: gutter-start / gutter-end; + } +} From 2331e37e6259a1d0f4af2029f6d70d3091e5780f Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 24 Sep 2023 08:43:10 -0700 Subject: [PATCH 17/52] Move blog.css styles to styles/blog/ files --- assets/styles/blog.css | 79 ------------------------ assets/styles/blog/050_content.css | 19 ++++++ assets/styles/blog/050_list.css | 97 ++++++++++++++++++++++++++++++ 3 files changed, 116 insertions(+), 79 deletions(-) delete mode 100644 assets/styles/blog.css create mode 100644 assets/styles/blog/050_content.css create mode 100644 assets/styles/blog/050_list.css diff --git a/assets/styles/blog.css b/assets/styles/blog.css deleted file mode 100644 index ab40f5a..0000000 --- a/assets/styles/blog.css +++ /dev/null @@ -1,79 +0,0 @@ -:root { - --post-item-highlight-color: #efefef; - - --blog-list-grid-template-columns: minmax(min-content, 10vh) minmax(min-content, 3vh) auto max-content max-content; -} -@media (prefers-color-scheme: dark) { - :root { - --post-item-highlight-color: #121212; - } -} - -.blog > .highlight { margin-block-end: var(--body-item-spacing); } - -.post-nav { - align-items: baseline; - display: flex; - margin-top: 3.5rem; -} - -.post-nav .next { - margin-left: auto; -} - -.post-single footer { - margin-block-start: var(--body-item-spacing); -} - -.blog.list > ul { - list-style: none; -} -.blog.list > ul > li { - align-items: baseline; - border-radius: 6px; - display: grid; - gap: 1rem; - grid-template-columns: var(--blog-list-grid-template-columns); - margin-block-end: 0.25rem; - transition: background-color 0.25s; -} -.blog.list > ul > li:hover { - background-color: var(--post-item-highlight-color); -} -.blog.list > ul > li > a { color: inherit; } -.blog.list > ul > li > a:hover { text-decoration: none; } -.blog.list > ul > li > time:nth-child(2) { text-align: end; } -.blog.list > ul > li > .draft { align-self: center; } - -@supports (grid-template-columns: subgrid) { - .blog.list { - display: grid; - gap: 1rem; - grid-template-columns: var(--blog-list-grid-template-columns); - } - .blog.list > ul { - display: grid; - row-gap: 0.25rem; - grid-column: 1 / -1; - grid-template-columns: subgrid; - list-style: none; - } - .blog.list > ul > li { - display: grid; - grid-column: 1 / -1; - grid-template-columns: subgrid; - margin-block-end: 0; - } - - .blog.list > h5 { - grid-column: 1 / -1; - margin-block: 1rem 0; - } - .blog.list > h5:first-child { - margin-block-start: 0; - } -} - -.blog.list > ul > li > :first-child { - text-align: end; -} diff --git a/assets/styles/blog/050_content.css b/assets/styles/blog/050_content.css new file mode 100644 index 0000000..1e7f818 --- /dev/null +++ b/assets/styles/blog/050_content.css @@ -0,0 +1,19 @@ +/* Eryn Wells */ + +a:has(> img) { + grid-column: content-start / content-end; +} + +@media (max-width: 639px) { + a:has(> img) { + grid-column: gutter-start / gutter-end; + } +} + +main { + gap: var(--body-item-spacing) 0; +} + +main > article > :not(:last-child) { + margin-block-end: var(--body-item-spacing); +} diff --git a/assets/styles/blog/050_list.css b/assets/styles/blog/050_list.css new file mode 100644 index 0000000..f732a04 --- /dev/null +++ b/assets/styles/blog/050_list.css @@ -0,0 +1,97 @@ +@layer section { + :root { + --body-item-spacing: 1rem; + } + + .blog.list { + gap: 8rem 0; + } + + .blog.list > h1.date { + grid-column: content-start / content-end; + } + + .blog.list > ul, + .blog.list > ul > li { + grid-column: wide-content-start / wide-content-end; + } + + @supports (grid-template-columns: subgrid) { + .blog.list > ul, + .blog.list > ul > li, + .blog.list > ul > li > article { + display: grid; + grid-template-columns: subgrid; + gap: var(--body-item-spacing) 0; + } + } + + /* + @media (max-width: 415px) { + .blog.list > ul, + .blog.list > ul > li { + display: block; + } + } + */ + + .blog.list > ul { + gap: 8rem 0; + } + + .blog.list > ul > li { + gap: 1rem 0; + margin: 0; + } + + li > time { + font-variant-numeric: tabular-nums; + grid-column: wide-content-start; + justify-self: end; + } + + @media (max-width: 960px) { + li > time { + grid-column: content-start / content-end; + justify-self: start; + line-height: var(--line-height); + } + } + + li > .title { + grid-column: content-start / content-end; + } + + li > article { + grid-column: gutter-start / gutter-end; + } + + li > p, + li > .tags { + grid-column: content-start / content-end; + } + + li > article > p:last-child { + margin-block-end: 0; + } + + @media (max-width: 414px) { + li > article > figure, + li > article > figure img { + border-radius: 0; + } + } + + .blog.list > ul, + .blog.list > ul > li { + margin-inline-start: 0; + } + + .title { + font-size: var(--h5-size); + } + + .title, .title a { + color: var(--color); + } +} From 162e17339ce161139ec167c5cb83a72f665b75ac Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 24 Sep 2023 08:43:29 -0700 Subject: [PATCH 18/52] Move photos styles to styles/photos/ files --- .../{photos.css => photos/001_photos.css} | 74 ------------------- assets/styles/photos/050_page.css | 34 +++++++++ assets/styles/photos/050_params.css | 68 +++++++++++++++++ 3 files changed, 102 insertions(+), 74 deletions(-) rename assets/styles/{photos.css => photos/001_photos.css} (56%) create mode 100644 assets/styles/photos/050_page.css create mode 100644 assets/styles/photos/050_params.css diff --git a/assets/styles/photos.css b/assets/styles/photos/001_photos.css similarity index 56% rename from assets/styles/photos.css rename to assets/styles/photos/001_photos.css index 923bc63..95ca054 100644 --- a/assets/styles/photos.css +++ b/assets/styles/photos/001_photos.css @@ -34,10 +34,6 @@ margin-block-end: 0; } -.photos.page > nav { - margin-block-end: var(--body-item-spacing); -} - .photos.list > a { display: block; line-height: 0; @@ -89,73 +85,3 @@ content: ""; } } - -.photo-params { - padding-inline: calc(var(--body-item-spacing) / 2); -} - -.photo-params > .container { - display: block; - background-color: var(--photo-params-container-background-color); - border-radius: 10px; - margin: var(--body-item-spacing) auto; - padding: calc(var(--body-item-spacing) / 2); - max-width: calc(0.66 * var(--content-width)); -} - -.photo-params > .container > table { - background-color: var(--photo-params-background-color); - color: var(--photo-params-color); - border-collapse: collapse; - border-radius: 6px; - table-layout: fixed; - text-align: center; - width: 100%; -} - -.photo-params thead td { - border-bottom: 1px solid var(--photo-params-border-color); - font-size: 80%; - font-weight: bold; -} - -.photo-params tbody tr > td { - border: none; - border-bottom: 1px solid var(--photo-params-border-color); -} - -.photo-params tr.exposure-attributes > td { - border: none; - border-top: 1px solid var(--photo-params-border-color); - border-left: 1px solid var(--photo-params-border-color); -} - -.photo-params tr.exposure-attributes > td:first-child { - border-left: none; -} - -.photo-params td { - font-size: 75%; - padding: 1rem; -} - -.photo-params td:last-child { - text-align: end; -} - -.photo-params td:first-child { - text-align: start; -} - -.photo-params .make-model { - font-weight: bold; -} - -.photo-params .size { - border-left: 0; -} - -.photo-params .location { - border-right: 0; -} - diff --git a/assets/styles/photos/050_page.css b/assets/styles/photos/050_page.css new file mode 100644 index 0000000..7af5542 --- /dev/null +++ b/assets/styles/photos/050_page.css @@ -0,0 +1,34 @@ +@layer section { + .photos.page { + gap: var(--body-item-spacing) 0; + } + + .photos.page > article > :not(:last-child) { + margin-block-end: var(--body-item-spacing); + } + + .photos.page > article > h1 { + font-size: var(--h3-size); + } + + .photos.page > nav { + margin-block-end: var(--body-item-spacing); + } + + .photos.page > :not(figure) { + grid-column: content-start / content-end; + } + + .photos.page > figure { + grid-column: wide-content-start / wide-content-end; + } + @media (max-width: 960px) { + figure, img { + border-radius: 0; + } + } + + .photos.page :is(figure, figure > img) { + max-width: none; + } +} diff --git a/assets/styles/photos/050_params.css b/assets/styles/photos/050_params.css new file mode 100644 index 0000000..2dcc7b4 --- /dev/null +++ b/assets/styles/photos/050_params.css @@ -0,0 +1,68 @@ +.photo-params { + padding-inline: calc(var(--body-item-spacing) / 2); +} + +.photo-params > .container { + display: block; + background-color: var(--photo-params-container-background-color); + border-radius: 10px; + margin: auto; + padding: calc(var(--body-item-spacing) / 2); + max-width: calc(0.66 * var(--content-width)); +} + +.photo-params > .container > table { + background-color: var(--photo-params-background-color); + color: var(--photo-params-color); + border-collapse: collapse; + border-radius: 6px; + table-layout: fixed; + text-align: center; + width: 100%; +} + +.photo-params thead td { + border-bottom: 1px solid var(--photo-params-border-color); + font-size: 80%; + font-weight: bold; +} + +.photo-params tbody tr > td { + border: none; + border-bottom: 1px solid var(--photo-params-border-color); +} + +.photo-params tr.exposure-attributes > td { + border: none; + border-top: 1px solid var(--photo-params-border-color); + border-left: 1px solid var(--photo-params-border-color); +} + +.photo-params tr.exposure-attributes > td:first-child { + border-left: none; +} + +.photo-params td { + font-size: 75%; + padding: 1rem; +} + +.photo-params td:last-child { + text-align: end; +} + +.photo-params td:first-child { + text-align: start; +} + +.photo-params .make-model { + font-weight: bold; +} + +.photo-params .size { + border-left: 0; +} + +.photo-params .location { + border-right: 0; +} From d6e5c2a9788312492dbc01e42dfd2d92a11e7548 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 24 Sep 2023 08:45:47 -0700 Subject: [PATCH 19/52] Only add a figcaption to the figures/image shortcode if the Title is non-empty --- layouts/shortcodes/figures/image.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/layouts/shortcodes/figures/image.html b/layouts/shortcodes/figures/image.html index 3fa21b3..14fe93c 100644 --- a/layouts/shortcodes/figures/image.html +++ b/layouts/shortcodes/figures/image.html @@ -30,7 +30,9 @@
    {{ if and $shouldShowTitle -}} {{- range $imgs -}} -
    {{ .Title }}
    + {{- if gt (len .Title) 0 -}} +
    {{ .Title }}
    + {{- end -}} {{- end -}} {{- end }} From 42dc062147caf801714e51417948d9c4ce009efa Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 24 Sep 2023 08:46:30 -0700 Subject: [PATCH 20/52] Updates to the blog list so far (I've lost track) --- layouts/blog/li_grid_with_date.html | 21 ++++++++++++--------- layouts/blog/list.html | 14 +++++++------- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/layouts/blog/li_grid_with_date.html b/layouts/blog/li_grid_with_date.html index 245f559..ed687de 100644 --- a/layouts/blog/li_grid_with_date.html +++ b/layouts/blog/li_grid_with_date.html @@ -1,11 +1,14 @@ -
  • - - - {{ .Title }} -
    - {{ with index (.GetTerms "categories") 0 }} - {{ .LinkTitle }} - {{ end }} -
    +
  • + +

    {{ .Title }}

    + {{ if .Description }} +

    {{ .Description }}

    + {{ else if lt .WordCount 110 }} +
    {{ .Content }}
    + {{ else }} + {{ warnf "Post \"%s\" doesn't have a description or content suitable for the blog list" .Title }} +

    {{ .WordCount }} words

    + {{ end }} + {{ partial "footer_tags.html" . }} {{ partial "development/draft_tag.html" . }}
    • diff --git a/layouts/blog/list.html b/layouts/blog/list.html index 070b633..a7af6da 100644 --- a/layouts/blog/list.html +++ b/layouts/blog/list.html @@ -4,14 +4,14 @@ {{ define "main" }} {{- range .Pages.ByDate.GroupByDate "2006" -}} -
    {{ .Key | title }}
    -
      - {{- range .Pages -}} - {{- if or (not .Draft) (not hugo.IsProduction) -}} - {{- .Render "li_grid_with_date" -}} +

      {{ .Key | title }}

      +
        + {{- range .Pages -}} + {{- if or (not .Draft) (not hugo.IsProduction) -}} + {{- .Render "li_grid_with_date" -}} + {{- end -}} {{- end -}} - {{- end -}} -
      +
    {{- end -}} {{ end }} From 0262f7950904f906c809f37cf06ac46ca6f7a6ca Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 24 Sep 2023 08:58:51 -0700 Subject: [PATCH 21/52] Add empty section.atom templates to about/ nethack/ and nihongo/ --- layouts/about/section.atom.atom | 0 layouts/nethack/section.atom.atom | 0 layouts/nihongo/section.atom.atom | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 layouts/about/section.atom.atom create mode 100644 layouts/nethack/section.atom.atom create mode 100644 layouts/nihongo/section.atom.atom diff --git a/layouts/about/section.atom.atom b/layouts/about/section.atom.atom new file mode 100644 index 0000000..e69de29 diff --git a/layouts/nethack/section.atom.atom b/layouts/nethack/section.atom.atom new file mode 100644 index 0000000..e69de29 diff --git a/layouts/nihongo/section.atom.atom b/layouts/nihongo/section.atom.atom new file mode 100644 index 0000000..e69de29 From 1ce9e2b417511327560b2e5ae5691f5b44143006 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 24 Sep 2023 08:59:19 -0700 Subject: [PATCH 22/52] Add empty section.html templates to nethack and nihongo --- layouts/nethack/section.html | 0 layouts/nihongo/section.html | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 layouts/nethack/section.html create mode 100644 layouts/nihongo/section.html diff --git a/layouts/nethack/section.html b/layouts/nethack/section.html new file mode 100644 index 0000000..e69de29 diff --git a/layouts/nihongo/section.html b/layouts/nihongo/section.html new file mode 100644 index 0000000..e69de29 From d18edef261f04f9a71ec5bd2807cbb29ca92f58c Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 24 Sep 2023 08:59:40 -0700 Subject: [PATCH 23/52] Add section.atom templates to blog and photos that are identical to the home feed --- layouts/blog/section.atom.atom | 29 +++++++++++++++++++++++++++++ layouts/photos/section.atom.atom | 29 +++++++++++++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 layouts/blog/section.atom.atom create mode 100644 layouts/photos/section.atom.atom diff --git a/layouts/blog/section.atom.atom b/layouts/blog/section.atom.atom new file mode 100644 index 0000000..191a04c --- /dev/null +++ b/layouts/blog/section.atom.atom @@ -0,0 +1,29 @@ +{{- $pctx := . -}} +{{- if .IsHome -}} {{ $pctx = .Site }} {{- end -}} +{{- $pages := slice -}} +{{- if or $.IsHome $.IsSection -}} + {{- $pages = $pctx.RegularPages -}} +{{- else -}} + {{- $pages = $pctx.Pages -}} +{{- end -}} +{{- $limit := .Site.Config.Services.RSS.Limit -}} +{{- if ge $limit 1 -}} {{- $pages = $pages | first $limit -}} {{- end -}} +{{ printf "" | safeHTML }} + + {{ .Site.Title }} + + + + {{ if not .Date.IsZero }}{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}{{ end }} + {{ .Permalink }} + {{ with .Site.Author.name }} + + {{ . }} + {{ with $.Site.Author.email }}{{ . }}{{ end }} + {{ $.Site.Home.Permalink }} + + {{ end }} + Hugo {{ hugo.Version }} + © 2020-{{ now.Year }} Eryn Wells + {{ range $pages }}{{ .Render "atom_entry" }}{{ end }} + diff --git a/layouts/photos/section.atom.atom b/layouts/photos/section.atom.atom new file mode 100644 index 0000000..191a04c --- /dev/null +++ b/layouts/photos/section.atom.atom @@ -0,0 +1,29 @@ +{{- $pctx := . -}} +{{- if .IsHome -}} {{ $pctx = .Site }} {{- end -}} +{{- $pages := slice -}} +{{- if or $.IsHome $.IsSection -}} + {{- $pages = $pctx.RegularPages -}} +{{- else -}} + {{- $pages = $pctx.Pages -}} +{{- end -}} +{{- $limit := .Site.Config.Services.RSS.Limit -}} +{{- if ge $limit 1 -}} {{- $pages = $pages | first $limit -}} {{- end -}} +{{ printf "" | safeHTML }} + + {{ .Site.Title }} + + + + {{ if not .Date.IsZero }}{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}{{ end }} + {{ .Permalink }} + {{ with .Site.Author.name }} + + {{ . }} + {{ with $.Site.Author.email }}{{ . }}{{ end }} + {{ $.Site.Home.Permalink }} + + {{ end }} + Hugo {{ hugo.Version }} + © 2020-{{ now.Year }} Eryn Wells + {{ range $pages }}{{ .Render "atom_entry" }}{{ end }} + From 1fac613c37db0c8fc704c92faa7b437bd6aebd00 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 24 Sep 2023 09:21:49 -0700 Subject: [PATCH 24/52] All the root styles so far --- assets/styles/root.css | 376 +++++++++--------- assets/styles/root/050_figures.css | 19 +- assets/styles/root/050_generic_page.css | 47 +++ .../styles/root/050_main_element_margins.css | 8 - assets/styles/root/050_table_of_contents.css | 5 + assets/styles/root/050_typography.css | 1 + assets/styles/root/099_utility.css | 5 +- 7 files changed, 251 insertions(+), 210 deletions(-) create mode 100644 assets/styles/root/050_generic_page.css delete mode 100644 assets/styles/root/050_main_element_margins.css create mode 100644 assets/styles/root/050_table_of_contents.css diff --git a/assets/styles/root.css b/assets/styles/root.css index 1fddf29..0a3832d 100644 --- a/assets/styles/root.css +++ b/assets/styles/root.css @@ -1,247 +1,227 @@ -@layer reset, typography, root, layout, template, page, utility; +@layer reset, typography, root, layout, section, page, utility; :root { - --black: 0, 0, 0; - --sub-dk-gray: 16, 16, 16; - --dk-gray: 32, 32, 32; - --super-dk-gray: 80, 80, 80; - --mid-gray: 128, 128, 128; - --sub-lt-gray: 175, 175, 175; - --lt-gray: 223, 223, 223; - --super-lt-gray: 240, 240, 240; - --white: 255, 255, 255; + --black: 0, 0, 0; + --sub-dk-gray: 16, 16, 16; + --dk-gray: 32, 32, 32; + --super-dk-gray: 80, 80, 80; + --mid-gray: 128, 128, 128; + --sub-lt-gray: 175, 175, 175; + --lt-gray: 223, 223, 223; + --super-lt-gray: 240, 240, 240; + --white: 255, 255, 255; - --lt-blue: 69, 212, 243; - --mid-blue: 26, 169, 239; - --dk-blue: 63, 46, 231; - --purple: 161, 49, 232; - --lilac: 187, 121, 245; + --lt-blue: 69, 212, 243; + --mid-blue: 26, 169, 239; + --dk-blue: 63, 46, 231; + --purple: 161, 49, 232; + --lilac: 187, 121, 245; - --background: var(--white); + --background: var(--white); - --separator-color: rgb(var(--lt-gray)); - --header-border-color: var(--separator-color); - --footer-border-color: var(--separator-color); + --separator-color: rgb(var(--lt-gray)); + --header-border-color: var(--separator-color); + --footer-border-color: var(--separator-color); - --box-shadow-color: rgba(var(--lt-gray), 0.8); - --header-box-shadow-color: var(--box-shadow-color); + --box-shadow-color: rgba(var(--lt-gray), 0.8); + --header-box-shadow-color: var(--box-shadow-color); - --body-item-spacing: 4rem; - --body-code-background-color: rgb(var(--super-lt-gray)); + --body-item-spacing: 4rem; + --body-code-background-color: rgb(var(--super-lt-gray)); - --header-series-arrow-foreground-color: rgb(var(--sub-dk-gray)); + --header-series-arrow-foreground-color: rgb(var(--sub-dk-gray)); - --html-background-color: rgb(var(--background)); + --html-background-color: rgb(var(--background)); - --nav-bulleted-spacing: 0.75rem; + --nav-bulleted-spacing: 0.75rem; - --platter-background-color: rgba(var(--white), var(--platter-background-opacity)); - --platter-background-opacity: 0.6; - --platter-backdrop-filter: blur(10px); + --platter-background-color: rgba(var(--white), var(--platter-background-opacity)); + --platter-background-opacity: 0.6; + --platter-backdrop-filter: blur(10px); - --content-width: 80rem; + --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)); + --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; + --transition-duration: 0.7s; - --menu-icon-size: 20px; + --menu-icon-size: 20px; } @media (prefers-color-scheme: dark) { - :root { - --background: var(--black); + :root { + --background: var(--black); - --separator-color: rgb(var(--dk-gray)); - --box-shadow-color: rgba(var(--dk-gray), 0.8); - --body-code-background-color: rgb(var(--dk-gray)); + --separator-color: rgb(var(--dk-gray)); + --box-shadow-color: rgba(var(--dk-gray), 0.8); + --body-code-background-color: rgb(var(--dk-gray)); - --header-series-arrow-foreground-color: rgb(var(--super-dk-gray)); + --header-series-arrow-foreground-color: rgb(var(--super-dk-gray)); - --html-background-color: rgb(var(--background)); + --html-background-color: rgb(var(--background)); - --platter-background-color: rgba(var(--black), var(--platter-background-opacity)); - --platter-backdrop-filter: brightness(0.66) blur(10px); + --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)); + --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); + --feed-icon: url(/icons/rss-dark.svg); + } } @layer root { - a { text-decoration: none; } - a:hover { - text-decoration: underline; - text-underline-offset: 0.12em; - } - a.hover-only { - color: var(--color); - transition: color 0.2s; - } - a.hover-only:hover { - text-decoration: underline; - transition: color 0.2s; - } + a { + text-decoration: none; + } - blockquote { - border-inline-start: 4px solid var(--separator-color); - padding-inline-start: 2rem; - margin-inline-start: 2rem; - } + a:hover { + text-decoration: underline; + text-decoration-style: solid; + } - code { - background-color: var(--body-code-background-color); - border-radius: 0.25rem; - display: inline-block; - padding-inline: 0.6rem; - } - code.nobg { - background: none; - border-radius: 0; - display: inline-block; - margin: 0; - padding: 0; - } + a.hover-only { + color: var(--color); + transition: color 0.2s; + } - details { width: 100%; } + a.hover-only:hover { + text-decoration: underline; + transition: color 0.2s; + } - details:has(#TableOfContents) { - box-sizing: border-box; - border: 1px solid var(--separator-color); - padding: var(--body-item-spacing); - } + blockquote { + --line-width: 4px; - fieldset { - box-sizing: border-box; - border: 1px solid var(--separator-color); - padding: var(--body-item-spacing); - padding-top: calc(var(--body-item-spacing) / 10); - } + border-inline-start: var(--line-width) solid var(--separator-color); + padding-inline-start: calc(3rem - var(--line-width)); + margin-block: 0; + margin-inline: 0; + } - html { background-color: var(--html-background-color); } + code { + background-color: var(--body-code-background-color); + border-radius: 0.25rem; + display: inline-block; + padding-inline: 0.6rem; + } - img { - height: auto; - max-width: 100%; - } + code.nobg { + background: none; + border-radius: 0; + display: inline-block; + margin: 0; + padding: 0; + } - img.circular { - shape-outside: circle(50%); - -webkit-clip-path: circle(50%); - clip-path: circle(50%); - } + details { + width: 100%; + } - main { - box-sizing: border-box; - max-width: calc(var(--content-width) + 2 * var(--body-item-spacing)); - margin: var(--body-item-spacing) auto; - padding-inline: var(--body-item-spacing); - width: 100%; - } + details:has(#TableOfContents) { + box-sizing: border-box; + border: 1px solid var(--separator-color); + padding: var(--body-item-spacing); + } - nav.bulleted > li:first-child::before { - content: ""; - margin-inline: 0; - } + fieldset { + box-sizing: border-box; + border: 1px solid var(--separator-color); + padding: var(--body-item-spacing); + padding-top: calc(var(--body-item-spacing) / 10); + } - nav.bulleted > li::before { - color: var(--heading-color); - content: "•"; - font-size: 60%; - font-weight: normal; - opacity: 80%; - margin-inline: var(--nav-bulleted-spacing); - } + html { + background-color: var(--html-background-color); + } - ul, - ol, - dl, - ul > li, - ol > li, - dl > dt, - ul > li > ul, - ul > li > ol, - ol > li > ul, - ol > li > ol { - margin-inline-start: calc(var(--body-item-spacing) + 2px); - } + img { + height: auto; + max-width: 100%; + width: 100%; + } - header > span.series { - font-size: 1.75rem; - letter-spacing: 1px; - margin-inline-start: 0.5em; - } + img.circular { + shape-outside: circle(50%); + -webkit-clip-path: circle(50%); + clip-path: circle(50%); + } - header > span.series::before { - color: var(--header-series-arrow-foreground-color); - content: "↳"; - margin-inline-end: 0.25em; - } + main { + box-sizing: border-box; + margin-block-start: var(--body-item-spacing); + width: 100%; + } - .post-list { - list-style: none; - margin: 0; - padding: 0; - } - @supports (display: subgrid) { - .post-list { - align-items: baseline; - display: grid; - gap: 1em; - grid-template-columns: - minmax(150px, max-content) minmax(20px, max-content) 3px auto; - grid-template-areas: "month day line title"; - } - } + nav.bulleted>li:first-child::before { + content: ""; + margin-inline: 0; + } - .post-list li { - align-items: baseline; - border-radius: 6px; - display: grid; - gap: 1em; - padding: 0.1em; - } + nav.bulleted>li::before { + color: var(--heading-color); + content: "•"; + font-size: 60%; + font-weight: normal; + opacity: 80%; + margin-inline: var(--nav-bulleted-spacing); + } - .post-title { - align-items: baseline; - display: flex; - flex-wrap: wrap; - gap: 0 4rem; - } + ul, + ol, + dl, + ul>li, + ol>li, + dl>dt { + margin-inline-start: calc(var(--body-item-spacing) + 2px); + } - .post-title h1 { - flex-grow: 1; - font-size: 1.8em; - margin-block: 0; - padding-bottom: 0; - } + ul>li>ul, + ul>li>ol, + ol>li>ul, + ol>li>ol { + margin-inline-start: 0; + } - .post-title > .post-date { - color: var(--light-dim); - display: inline-block; - font-size: 1.75rem; - inline-size: min-content; - letter-spacing: 1px; - margin-block-start: 0.5rem; - white-space: nowrap; - } + :is(ul, ol) > li { + margin-block-start: 1rem; + } - table { - border: 1px solid var(--separator-color); - border-collapse: collapse; - margin-inline: auto; - width: 50%; - } + header>span.series { + font-size: 1.75rem; + letter-spacing: 1px; + margin-inline-start: 0.5em; + } - td, th { - border: 1px solid var(--separator-color); - padding-inline: 1rem; - } + header>span.series::before { + color: var(--header-series-arrow-foreground-color); + content: "↳"; + margin-inline-end: 0.25em; + } + + table { + border: 1px solid var(--separator-color); + border-collapse: collapse; + margin-inline: auto; + width: 50%; + } + + td, + th { + border: 1px solid var(--separator-color); + padding-inline: 1rem; + } + + p, ul { + grid-column: content-start / content-end; + } } diff --git a/assets/styles/root/050_figures.css b/assets/styles/root/050_figures.css index 0ac56a1..f382d02 100644 --- a/assets/styles/root/050_figures.css +++ b/assets/styles/root/050_figures.css @@ -1,6 +1,5 @@ @layer root { figcaption { - margin-block-start: 0.2em; text-align: center; } @@ -9,17 +8,25 @@ } figure { + grid-column: content-start / content-end; margin: 0; margin-inline: 0; + min-width: fit-content; overflow: hidden; - max-width: var(--content-width); + } + + @media (max-width: 415px) { + figure { + grid-column: wide-content-start / wide-content-end; + } } figure > .container { align-items: center; display: flex; - justify-content: center; gap: var(--body-item-spacing); + justify-content: center; + min-width: fit-content; } figure.bordered { @@ -38,6 +45,12 @@ max-width: var(--content-width); } + @media (max-width: 414px) { + figure img { + max-width: 100%; + } + } + figure svg { width: 100%; height: auto; diff --git a/assets/styles/root/050_generic_page.css b/assets/styles/root/050_generic_page.css new file mode 100644 index 0000000..20a7c8d --- /dev/null +++ b/assets/styles/root/050_generic_page.css @@ -0,0 +1,47 @@ +@layer root { + .page { + gap: var(--body-item-spacing) 0; + } + + .page > header { + align-items: first baseline; + column-gap: 4rem; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + @media (max-width: 539px) { + .page > header { + grid-template-columns: auto; + } + } + + .page > header > time { + } + + .page > header, + .page > footer { + grid-column: content-start / content-end; + } + + .page > header > :is(h1, h2, h3, h4, h5, h6) { + grid-column: 1; + } + + .page > header > time { + grid-column: 2; + } + + .page > article > * { + grid-column: gutter-start / gutter-end; + } + + .page > article > :not(blockquote, figure.code) { + margin-inline: var(--gutter-width); + } + + .page > article > :not(:last-child) { + margin-block-end: var(--body-item-spacing); + } +} diff --git a/assets/styles/root/050_main_element_margins.css b/assets/styles/root/050_main_element_margins.css deleted file mode 100644 index 79c3ac6..0000000 --- a/assets/styles/root/050_main_element_margins.css +++ /dev/null @@ -1,8 +0,0 @@ -@layer root { - main > :first-child, - main > article > :first-child { margin-block-start: 0; } - main > :not(:last-child), - main > article > :not(:last-child) { margin-block-end: var(--body-item-spacing); } - main > :last-child, - main > article > :last-child { margin-block-end: 0; } -} diff --git a/assets/styles/root/050_table_of_contents.css b/assets/styles/root/050_table_of_contents.css new file mode 100644 index 0000000..4c58e9b --- /dev/null +++ b/assets/styles/root/050_table_of_contents.css @@ -0,0 +1,5 @@ +aside#table-of-contents { + grid-column: wide-content-right / margin-right; + grid-row: 1 / -1; + +} diff --git a/assets/styles/root/050_typography.css b/assets/styles/root/050_typography.css index 308bf96..c6ab284 100644 --- a/assets/styles/root/050_typography.css +++ b/assets/styles/root/050_typography.css @@ -33,6 +33,7 @@ --color: rgba(var(--black), 0.8); --a-color: rgb(var(--mid-blue)); + --a-underline-color: rgb(var(--sub-lt-gray)); --a-ruby-color: var(--color); --heading-color: rgb(var(--black)); --site-nav-link-color: var(--a-color); diff --git a/assets/styles/root/099_utility.css b/assets/styles/root/099_utility.css index eef66bb..f796446 100644 --- a/assets/styles/root/099_utility.css +++ b/assets/styles/root/099_utility.css @@ -1,6 +1,9 @@ @layer utility { .centered { text-align: center; } - .float-right { float: right; } + .float-right { + float: right; + justify-self: end; + } .nobreak { white-space: nowrap; } .noselect { From 6f132cc04eb0a9ff41e6175317eaaa4ad6b6f375 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 24 Sep 2023 09:22:00 -0700 Subject: [PATCH 25/52] Development styles so far --- assets/styles/development.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/assets/styles/development.css b/assets/styles/development.css index 00cd343..fb1a795 100644 --- a/assets/styles/development.css +++ b/assets/styles/development.css @@ -1,8 +1,6 @@ /* Eryn Wells */ details:has(.photo-params.debug) { - margin-inline: var(--body-item-spacing); - max-width: var(--content-width); width: 100%; } @@ -77,8 +75,13 @@ details:has(.photo-params.debug) { background-color: var(--separator-color); } -.photos-params.debug { - width: calc(100% - var(--body-item-spacing)); +table.photo-params.debug { + --inline-start-padding: 2rem; + + box-sizing: border-box; + width: calc(100% - var(--inline-start-padding)); + margin-block-start: 1rem; + margin-inline-start: var(--inline-start-padding); } .photo-params.debug > thead { From b7070ccfd5c8d9c9547c88d9afe22a8a6a81e982 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Tue, 26 Sep 2023 08:35:21 -0700 Subject: [PATCH 26/52] Remove the
      and
    • from the blog list --- assets/styles/blog/050_list.css | 63 +++++++++-------------------- layouts/blog/li_grid_with_date.html | 15 ++++--- layouts/blog/list.html | 12 +++--- 3 files changed, 33 insertions(+), 57 deletions(-) diff --git a/assets/styles/blog/050_list.css b/assets/styles/blog/050_list.css index f732a04..5a50f1e 100644 --- a/assets/styles/blog/050_list.css +++ b/assets/styles/blog/050_list.css @@ -1,8 +1,4 @@ @layer section { - :root { - --body-item-spacing: 1rem; - } - .blog.list { gap: 8rem 0; } @@ -11,63 +7,52 @@ grid-column: content-start / content-end; } - .blog.list > ul, - .blog.list > ul > li { + .blog.list > .post { grid-column: wide-content-start / wide-content-end; } @supports (grid-template-columns: subgrid) { - .blog.list > ul, - .blog.list > ul > li, - .blog.list > ul > li > article { + .blog.list > .post { + --body-item-spacing: 2rem; + display: grid; grid-template-columns: subgrid; gap: var(--body-item-spacing) 0; } } - /* - @media (max-width: 415px) { - .blog.list > ul, - .blog.list > ul > li { - display: block; + .post header { + grid-column: wide-content-start / content-end; + } + + @supports (grid-template-columns: subgrid) { + .post header { + display: grid; + grid-template-columns: subgrid; } } - */ - .blog.list > ul { - gap: 8rem 0; - } - - .blog.list > ul > li { - gap: 1rem 0; - margin: 0; - } - - li > time { + .post time { font-variant-numeric: tabular-nums; grid-column: wide-content-start; justify-self: end; } @media (max-width: 960px) { - li > time { + .post time { grid-column: content-start / content-end; justify-self: start; line-height: var(--line-height); } } - li > .title { - grid-column: content-start / content-end; - } - - li > article { + article.post { grid-column: gutter-start / gutter-end; } - li > p, - li > .tags { + .post p, + .post .tags, + .post .title { grid-column: content-start / content-end; } @@ -75,18 +60,6 @@ margin-block-end: 0; } - @media (max-width: 414px) { - li > article > figure, - li > article > figure img { - border-radius: 0; - } - } - - .blog.list > ul, - .blog.list > ul > li { - margin-inline-start: 0; - } - .title { font-size: var(--h5-size); } diff --git a/layouts/blog/li_grid_with_date.html b/layouts/blog/li_grid_with_date.html index ed687de..57cbda7 100644 --- a/layouts/blog/li_grid_with_date.html +++ b/layouts/blog/li_grid_with_date.html @@ -1,14 +1,19 @@ -
    • - -

      {{ .Title }}

      +
      +
      + +

      {{ .Title }}

      +
      + {{ if .Description }}

      {{ .Description }}

      {{ else if lt .WordCount 110 }} -
      {{ .Content }}
      + {{ .Content }} {{ else }} {{ warnf "Post \"%s\" doesn't have a description or content suitable for the blog list" .Title }}

      {{ .WordCount }} words

      {{ end }} + {{ partial "footer_tags.html" . }} + {{ partial "development/draft_tag.html" . }} -
      • + diff --git a/layouts/blog/list.html b/layouts/blog/list.html index a7af6da..ebe4ef7 100644 --- a/layouts/blog/list.html +++ b/layouts/blog/list.html @@ -4,14 +4,12 @@ {{ define "main" }} {{- range .Pages.ByDate.GroupByDate "2006" -}} -

      {{ .Key | title }}

      -
        - {{- range .Pages -}} - {{- if or (not .Draft) (not hugo.IsProduction) -}} - {{- .Render "li_grid_with_date" -}} - {{- end -}} +

        {{ .Key | title }}

        + {{- range .Pages -}} + {{- if or (not .Draft) (not hugo.IsProduction) -}} + {{- .Render "li_grid_with_date" -}} {{- end -}} -
      + {{- end -}} {{- end -}} {{ end }} From a9cfddec807e896e9a67f850d33259acc9f664fc Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Tue, 26 Sep 2023 09:37:04 -0700 Subject: [PATCH 27/52] Fix styling of blog, photos, term, ruby So many fixes! --- assets/styles/blog/050_content.css | 9 +-- assets/styles/photos/001_photos.css | 3 +- assets/styles/root.css | 22 ------- assets/styles/root/002_columns.css | 26 +++++--- assets/styles/root/010_links.css | 34 +++++++++++ assets/styles/root/050_figures.css | 3 +- assets/styles/root/050_generic_page.css | 7 +-- .../050_list.css => root/050_post_list.css} | 25 ++++---- assets/styles/root/050_ruby.css | 1 + assets/styles/root/050_ruby_controls.css | 22 ++++--- assets/styles/root/050_site_header.css | 6 +- .../styles/root/050_syntax_highlighting.css | 27 ++++++--- assets/styles/root/050_table_of_contents.css | 4 +- assets/styles/root/050_typography.css | 6 -- layouts/_default/term.html | 35 +++++------ layouts/_default/terms.html | 42 +++++++++---- layouts/blog/list.html | 1 + layouts/partials/ruby_controls.html | 14 ++--- layouts/partials/single_main.html | 13 +++- layouts/photos/single.html | 59 ++++++++++--------- layouts/shortcodes/photo.html | 2 +- 21 files changed, 212 insertions(+), 149 deletions(-) create mode 100644 assets/styles/root/010_links.css rename assets/styles/{blog/050_list.css => root/050_post_list.css} (78%) create mode 100644 assets/styles/root/050_ruby.css diff --git a/assets/styles/blog/050_content.css b/assets/styles/blog/050_content.css index 1e7f818..1339721 100644 --- a/assets/styles/blog/050_content.css +++ b/assets/styles/blog/050_content.css @@ -1,11 +1,12 @@ /* Eryn Wells */ -a:has(> img) { +:has(> img) { grid-column: content-start / content-end; + line-height: 0; } @media (max-width: 639px) { - a:has(> img) { + :has(> img) { grid-column: gutter-start / gutter-end; } } @@ -14,6 +15,6 @@ main { gap: var(--body-item-spacing) 0; } -main > article > :not(:last-child) { - margin-block-end: var(--body-item-spacing); +article > :is(h1, h2, h3, h4, h5, h6) { + grid-column: content-start / content-end; } diff --git a/assets/styles/photos/001_photos.css b/assets/styles/photos/001_photos.css index 95ca054..a803adf 100644 --- a/assets/styles/photos/001_photos.css +++ b/assets/styles/photos/001_photos.css @@ -32,6 +32,7 @@ .photos.list > * { margin-block-end: 0; + grid-column: auto; } .photos.list > a { @@ -40,13 +41,11 @@ } .photos.list > a > img { - border-radius: 3px; image-orientation: from-image; } .photos.list > div { background-color: var(--date-item-background-color); - border-radius: 3px; width: 100%; height: 100%; display: flex; diff --git a/assets/styles/root.css b/assets/styles/root.css index 0a3832d..8cacf10 100644 --- a/assets/styles/root.css +++ b/assets/styles/root.css @@ -80,25 +80,6 @@ } @layer root { - a { - text-decoration: none; - } - - a:hover { - text-decoration: underline; - text-decoration-style: solid; - } - - a.hover-only { - color: var(--color); - transition: color 0.2s; - } - - a.hover-only:hover { - text-decoration: underline; - transition: color 0.2s; - } - blockquote { --line-width: 4px; @@ -110,9 +91,6 @@ code { background-color: var(--body-code-background-color); - border-radius: 0.25rem; - display: inline-block; - padding-inline: 0.6rem; } code.nobg { diff --git a/assets/styles/root/002_columns.css b/assets/styles/root/002_columns.css index 65250e8..2a084b4 100644 --- a/assets/styles/root/002_columns.css +++ b/assets/styles/root/002_columns.css @@ -1,9 +1,9 @@ -@layer root { - :root { - --margin-min-width: var(--body-item-spacing); - --margin-max-width: 1fr; - } +:root { + --margin-min-width: var(--body-item-spacing); + --margin-max-width: 1fr; +} +@layer root { main { --content-columns: 5; --gutter-width: 3rem; @@ -17,7 +17,12 @@ [wide-content-left-end gutter-start gutter-left-start] var(--gutter-width) [gutter-left-end content-start] - repeat(var(--content-columns), min(calc((100% - 2 * var(--gutter-width)) / var(--content-columns)), calc(var(--content-width) / var(--content-columns)))) + repeat(var(--content-columns), + min( + calc((100% - 2 * var(--gutter-width)) / var(--content-columns)), + calc(var(--content-width) / var(--content-columns)) + ) + ) [content-end gutter-right-start] var(--gutter-width) [gutter-right-end gutter-end wide-content-right-start] @@ -66,7 +71,12 @@ } } - main > :is(header, article, footer) { - grid-column: gutter-start / gutter-end; + main > * { + grid-column: content-start / content-end; + } + + main > figure, + main > a.to-photo-post { + grid-column: wide-content-start / wide-content-end; } } diff --git a/assets/styles/root/010_links.css b/assets/styles/root/010_links.css new file mode 100644 index 0000000..a2da1af --- /dev/null +++ b/assets/styles/root/010_links.css @@ -0,0 +1,34 @@ +@layer root { + a { + text-decoration: none; + } + + a[href] { + color: var(--a-color); + } + + a[href]:visited { + color: var(--a-color); + } + + a[href]:hover { + text-decoration: underline; + text-decoration-style: solid; + } + + a.hover-only { + color: var(--color); + transition: color 0.2s; + } + + a.hover-only:hover { + text-decoration: underline; + transition: color 0.2s; + } + + a.hover-only { color: var(--color); } + + a.hover-only:hover { color: var(--a-color); } + + a rt, a:hover rt { color: var(--a-ruby-color); } +} diff --git a/assets/styles/root/050_figures.css b/assets/styles/root/050_figures.css index f382d02..75d36e3 100644 --- a/assets/styles/root/050_figures.css +++ b/assets/styles/root/050_figures.css @@ -8,7 +8,7 @@ } figure { - grid-column: content-start / content-end; + grid-column: gutter-start / gutter-end; margin: 0; margin-inline: 0; min-width: fit-content; @@ -42,7 +42,6 @@ figure img { display: block; height: auto; - max-width: var(--content-width); } @media (max-width: 414px) { diff --git a/assets/styles/root/050_generic_page.css b/assets/styles/root/050_generic_page.css index 20a7c8d..58cb066 100644 --- a/assets/styles/root/050_generic_page.css +++ b/assets/styles/root/050_generic_page.css @@ -17,9 +17,6 @@ } } - .page > header > time { - } - .page > header, .page > footer { grid-column: content-start / content-end; @@ -37,8 +34,8 @@ grid-column: gutter-start / gutter-end; } - .page > article > :not(blockquote, figure.code) { - margin-inline: var(--gutter-width); + .page > :not(blockquote, figure.code, :has(> img)) { + grid-column: content-start / content-end; } .page > article > :not(:last-child) { diff --git a/assets/styles/blog/050_list.css b/assets/styles/root/050_post_list.css similarity index 78% rename from assets/styles/blog/050_list.css rename to assets/styles/root/050_post_list.css index 5a50f1e..78cc345 100644 --- a/assets/styles/blog/050_list.css +++ b/assets/styles/root/050_post_list.css @@ -1,18 +1,23 @@ +:root { + --list-item-block-gap: var(--body-item-spacing); +} + @layer section { - .blog.list { - gap: 8rem 0; + .list { + gap: var(--list-item-block-gap) 0; } - .blog.list > h1.date { + .list > h1, + .list > header { grid-column: content-start / content-end; } - .blog.list > .post { + .list > .post { grid-column: wide-content-start / wide-content-end; } @supports (grid-template-columns: subgrid) { - .blog.list > .post { + .list > .post { --body-item-spacing: 2rem; display: grid; @@ -21,32 +26,32 @@ } } - .post header { + .list .post header { grid-column: wide-content-start / content-end; } @supports (grid-template-columns: subgrid) { - .post header { + .list .post header { display: grid; grid-template-columns: subgrid; } } - .post time { + .list .post time { font-variant-numeric: tabular-nums; grid-column: wide-content-start; justify-self: end; } @media (max-width: 960px) { - .post time { + .list .post time { grid-column: content-start / content-end; justify-self: start; line-height: var(--line-height); } } - article.post { + .post { grid-column: gutter-start / gutter-end; } diff --git a/assets/styles/root/050_ruby.css b/assets/styles/root/050_ruby.css new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/assets/styles/root/050_ruby.css @@ -0,0 +1 @@ + diff --git a/assets/styles/root/050_ruby_controls.css b/assets/styles/root/050_ruby_controls.css index 60965f9..87024d6 100644 --- a/assets/styles/root/050_ruby_controls.css +++ b/assets/styles/root/050_ruby_controls.css @@ -1,27 +1,33 @@ @layer root { - body:has(fieldset#ruby-controls > input[value=NONE]:checked) rt { display: none; } + #ruby-controls { + align-items: baseline; + display: flex; + padding: calc(var(--body-item-spacing) / 2); + } + + body:has(#ruby-controls > input[value=NONE]:checked) rt { display: none; } /* When ruby-controls is set to hidden, hide the ruby base and only show the */ - body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) ruby > span { display: none; } + body:has(#ruby-controls > input[value=HIDDEN]:checked) ruby > span { display: none; } - body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) rt { + body:has(#ruby-controls > input[value=HIDDEN]:checked) rt { color: inherit; display: inline; font-size: inherit; white-space: inherit; } - body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) :is(h1, h2, h3, h4, h5, h6) rt { + body:has(#ruby-controls > input[value=HIDDEN]:checked) :is(h1, h2, h3, h4, h5, h6) rt { font-family: var(--font-family-heading); font-weight: bold; } - fieldset#ruby-controls input[type=radio] { - margin-inline-end: calc(var(--body-item-spacing) / 6); + fieldset#ruby-controls input[type=radio]:not(:last-child) { + margin-inline-end: 0.5rem; } - fieldset#ruby-controls label { - margin-inline-end: calc(var(--body-item-spacing)); + fieldset#ruby-controls label:not(:last-child) { + margin-inline-end: 2rem; } rt { transition: color 0.3s; } diff --git a/assets/styles/root/050_site_header.css b/assets/styles/root/050_site_header.css index a0a33ad..7d95f3a 100644 --- a/assets/styles/root/050_site_header.css +++ b/assets/styles/root/050_site_header.css @@ -18,7 +18,11 @@ } - header.site h1 > a:hover { text-decoration: none; } + header.site a[href], + header.site a[href]:hover { + color: inherit; + text-decoration: none; + } header.site { display: flex; diff --git a/assets/styles/root/050_syntax_highlighting.css b/assets/styles/root/050_syntax_highlighting.css index b4dc1f6..f912efa 100644 --- a/assets/styles/root/050_syntax_highlighting.css +++ b/assets/styles/root/050_syntax_highlighting.css @@ -1,11 +1,24 @@ -.highlight code { - background-color: inherit; - margin-block: 0.5em; +@supports (grid-template-columns: subgrid) { + figure.code, + figure.code > .highlight, + figure.code > .highlight > .chroma, + figure.code > .highlight > .chroma > code, + figure.code > .highlight > .chroma > code > .line { + display: grid; + grid-template-columns: subgrid; + } + + .line > .ln { + grid-column: gutter-start; + } + + .line > .cl { + grid-column: content-start / content-end; + } } -.highlight .line { - display: grid; - grid-template-columns: max-content auto; +.highlight code { + background-color: inherit; } .highlight .ln a { @@ -17,4 +30,4 @@ .highlight .cl { white-space: pre-wrap; -} + diff --git a/assets/styles/root/050_table_of_contents.css b/assets/styles/root/050_table_of_contents.css index 4c58e9b..991b46a 100644 --- a/assets/styles/root/050_table_of_contents.css +++ b/assets/styles/root/050_table_of_contents.css @@ -1,5 +1,3 @@ aside#table-of-contents { - grid-column: wide-content-right / margin-right; - grid-row: 1 / -1; - + grid-column: content-start / content-end; } diff --git a/assets/styles/root/050_typography.css b/assets/styles/root/050_typography.css index c6ab284..60efeb0 100644 --- a/assets/styles/root/050_typography.css +++ b/assets/styles/root/050_typography.css @@ -45,12 +45,6 @@ } } - a { color: var(--a-color); } - a:visited { color: var(--a-color); } - a.hover-only { color: var(--color); } - a.hover-only:hover { color: var(--a-color); } - a rt, a:hover rt { color: var(--a-ruby-color); } - body { font-size: var(--font-size); } diff --git a/layouts/_default/term.html b/layouts/_default/term.html index 58fd86b..2ccb152 100644 --- a/layouts/_default/term.html +++ b/layouts/_default/term.html @@ -3,29 +3,26 @@ {{ end }} {{ define "main" }} -
      -

      {{ .Title }}

      -
      +
      +

      {{ .Title }}

      +
      -{{ partial "table_of_contents.html" . }} -{{ partial "ruby_controls.html" . }} + {{ partial "ruby_controls.html" . }} -{{- $hasContent := false -}} -{{ with .Content }} - {{- $hasContent = true -}} - {{ . }} -{{ end }} - -{{ if .Params.posts | default true }} - {{ if and $hasContent }} -

      Posts

      + {{- $hasContent := false -}} + {{ with .Content }} + {{- $hasContent = true -}} + {{ . }} {{ end }} - + {{ if .Params.posts | default true }} + {{ if $hasContent }} +

      Posts

      + {{ end }} + + {{- range .Pages -}} + {{ .Render "li_grid_with_date" }} + {{- end -}} {{ end }} {{ end }} diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html index 4464b52..01bb815 100644 --- a/layouts/_default/terms.html +++ b/layouts/_default/terms.html @@ -3,20 +3,38 @@ {{ end }} {{ define "main" }} -
      -

      {{ .Title }}

      -
      +
      +

      {{ .Title }}

      +
      +
      + {{ .Content }} -{{ .Content }} + {{- range .Data.Terms.Alphabetical -}} +

      {{ .Name | title }}

      -{{- range .Data.Terms.Alphabetical -}} -

      {{ .Name | title }}

      -
        - {{- range .WeightedPages -}} -
      • {{ .Title }}
        • - {{- end -}} -
      -{{- end -}} + {{- range .WeightedPages -}} +
      +
      + +

      {{ .Title }}

      +
      + + {{ if .Description }} +

      {{ .Description }}

      + {{ else if lt .WordCount 110 }} + {{ .Content }} + {{ else }} + {{ warnf "Post \"%s\" doesn't have a description or content suitable for the blog list" .Title }} +

      {{ .WordCount }} words

      + {{ end }} + + {{ partial "footer_tags.html" . }} + + {{ partial "development/draft_tag.html" . }} +
      + {{- end -}} + {{- end -}} +
      {{ end }} {{ define "footer" }} diff --git a/layouts/blog/list.html b/layouts/blog/list.html index ebe4ef7..07874e0 100644 --- a/layouts/blog/list.html +++ b/layouts/blog/list.html @@ -5,6 +5,7 @@ {{ define "main" }} {{- range .Pages.ByDate.GroupByDate "2006" -}}

      {{ .Key | title }}

      + {{- range .Pages -}} {{- if or (not .Draft) (not hugo.IsProduction) -}} {{- .Render "li_grid_with_date" -}} diff --git a/layouts/partials/ruby_controls.html b/layouts/partials/ruby_controls.html index bdb75f6..ea43ea2 100644 --- a/layouts/partials/ruby_controls.html +++ b/layouts/partials/ruby_controls.html @@ -1,13 +1,13 @@ {{ if .HasShortcode "ruby" -}} {{- end }} diff --git a/layouts/partials/single_main.html b/layouts/partials/single_main.html index 38a1a91..970e27b 100644 --- a/layouts/partials/single_main.html +++ b/layouts/partials/single_main.html @@ -1,9 +1,16 @@ {{ partial "content_header.html" . }} +{{ partial "table_of_contents.html" . }} + {{- $layout := .Params.layout -}} - -{{ .Content }} - +{{- $content := .Content -}} +{{ with $layout := .Params.layout }} +
      + {{ $content }} +
      +{{ else }} + {{ $content }} +{{ end}}