Author: Pedro Lucas Porcellis <porcellis@eletrotupi.com>
design: move post metadata to the top, use relative URLs
assets/style.scss | 92 +++++++++++++++++++++++++--- config.toml | 4 + i18n/en.toml | 4 + i18n/pt-br.toml | 4 + layouts/_partials/available-lang.html | 2 layouts/_partials/colophon.html | 4 layouts/_partials/dispatch-entry.html | 7 + layouts/_partials/head.html | 2 layouts/_partials/masthead.html | 2 layouts/_partials/post-header.html | 41 ++++++++++++ layouts/_partials/translations.html | 2 layouts/single.html | 26 -------
diff --git a/assets/style.scss b/assets/style.scss index 1dd092ba8f26da748128c91531702191533b4333..d5310b3ba491fef5488c7efe5aa33fcfb2f3a8ed 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -141,9 +141,6 @@ color: var(--text-muted); } .theme-toggle { - position: absolute; - top: 0; - right: 0; padding: 0.25rem 0.5rem; border: 1px solid var(--border-subtle); border-radius: 0.25rem; @@ -154,6 +151,7 @@ font-size: 0.75rem; font-weight: 500; line-height: 1.4; text-transform: lowercase; + white-space: nowrap; cursor: pointer; } @@ -166,8 +164,14 @@ .theme-toggle__dot { color: var(--accent-signal); } +.site-header .theme-toggle { + position: absolute; + top: 0; + right: 0; +} + @media (max-width: 30em) { - .theme-toggle { + .site-header .theme-toggle { position: static; margin-top: 1.25rem; } @@ -240,8 +244,7 @@ padding-top: 3.5rem; border-top: 1px dashed var(--border-dashed); } -.dispatch__meta, -.post-meta { +.dispatch__meta { display: flex; align-items: baseline; justify-content: space-between; @@ -255,8 +258,7 @@ letter-spacing: 0.08em; color: var(--text-muted); } -.dispatch__no, -.post-meta__no { +.dispatch__no { color: var(--accent-signal); white-space: nowrap; } @@ -304,7 +306,7 @@ /* Post */ /* ------------------------------------------------------------------------- */ .post-header { - margin-top: 3.5rem; + margin: 0; } .post-title { @@ -317,16 +319,84 @@ letter-spacing: -0.02em; color: var(--text-primary); } +.post-nav { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; + font-family: var(--font-mono); + font-size: 0.75rem; + font-weight: 500; + line-height: 1.5; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-muted); +} + +.post-nav__group { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.post-nav__back { + color: inherit; + text-decoration: none; +} + +.post-nav__back:hover { + color: var(--accent-signal); +} + +.post-nav__sep { + color: var(--border-dashed); +} + +.post-nav__no { + color: var(--accent-signal); +} + +.post-nav__stats { + white-space: nowrap; +} + +.post-blurb { + margin: 1.5rem 0 0; + padding: 0.25rem 0 0.25rem 1.5rem; + border-left: 2px solid var(--accent-signal); + font-size: clamp(1.25rem, 1.6vw, 1.375rem); + font-style: italic; + line-height: 1.6; + color: var(--text-primary); +} + .filed-under { - margin-top: 1.25rem; + margin-top: 1.5rem; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.08em; + text-align: right; color: var(--text-muted); } +@media (max-width: 40em) { + .post-nav { + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + } + + .post-nav__stats { + white-space: normal; + } + + .filed-under { + text-align: center; + } +} + .filed-under a { color: var(--text-primary); text-decoration: underline; @@ -340,7 +410,7 @@ color: var(--accent-signal); } .post-body { - margin-top: 3.5rem; + margin-top: 0; counter-reset: section; font-size: 1.125rem; line-height: 1.8; diff --git a/config.toml b/config.toml index d0b2a1d0cb3cdd63aa388d1b7fcdba57b208ceb4..661b3c236814b1052a03f6c551a5ca599ca8ff9e 100644 --- a/config.toml +++ b/config.toml @@ -13,6 +13,10 @@ [taxonomies] tag = "tags" +[params] +shortTitle = "Porcellis" +timeZoneLabel = "BRT" + [languages] [languages.pt-br] weight = 1 diff --git a/i18n/en.toml b/i18n/en.toml index 340c6a7b03ddbf8c2ecebb3e61385e30a6d50c2f..3ec1f9724f4aaabf238fc70c5961bb12468615db 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -32,6 +32,10 @@ [footnotes] other = "Footnotes & Citations" [dispatchNav] other = "Dispatch navigation" +[postLabel] +other = "POST" +[minutes] +other = "min" [footer] other = """ Comments, questions? Send an email to \ diff --git a/i18n/pt-br.toml b/i18n/pt-br.toml index 27c8680da54d8127c534be6fe2abcc58e75551f9..916a3d0d0cacb49c0c80b347e7c1e7f9c3ef0433 100644 --- a/i18n/pt-br.toml +++ b/i18n/pt-br.toml @@ -32,6 +32,10 @@ [footnotes] other = "Notas & Referências" [dispatchNav] other = "Navegação de registros" +[postLabel] +other = "POST" +[minutes] +other = "min" [footer] other = """ Comentários, dúvidas? Envie um email para \ diff --git a/layouts/_partials/available-lang.html b/layouts/_partials/available-lang.html index 49b3fee66aaac85864a50caf6885f05fa3a52d66..f3d38a56455dcf54e3ba96b70da0dc3018b90f49 100644 --- a/layouts/_partials/available-lang.html +++ b/layouts/_partials/available-lang.html @@ -4,7 +4,7 @@ <ul> {{ range (where $.Site.Home.AllTranslations "Language.Lang" "!=" .Lang) }} <li> - <a href="{{ .Permalink }}"> + <a href="{{ .RelPermalink }}"> {{ .Language.Label }} </a> </li> diff --git a/layouts/_partials/colophon.html b/layouts/_partials/colophon.html index 89443a8766ba0f3a69cb45d1f19d48dd59b5571e..bfaa0196a17d81cde6db6b308be2fcf81b5790ea 100644 --- a/layouts/_partials/colophon.html +++ b/layouts/_partials/colophon.html @@ -1,8 +1,8 @@ <footer> <div> {{ i18n "copyright" | safeHTML }} · - <a title="PGP Key" href="{{ "eletrotupi.txt" | absURL }}">pgp</a> · - <a title="RSS for {{ .Lang }}" href="{{ "index.xml" | absLangURL }}">rss</a> · + <a title="PGP Key" href="{{ "eletrotupi.txt" | relURL }}">pgp</a> · + <a title="RSS for {{ .Lang }}" href="{{ "index.xml" | relLangURL }}">rss</a> · <a title="Gemini capsule" href="gemini://gemini.eletrotupi.com/~porcellis">gemini</a> </div> </footer> diff --git a/layouts/_partials/dispatch-entry.html b/layouts/_partials/dispatch-entry.html index de21558f1ca4a227ea63b9f3148b2a6f4ac25000..dec29fe2a42468ca4a7bde143d33f585f4a4f9bc 100644 --- a/layouts/_partials/dispatch-entry.html +++ b/layouts/_partials/dispatch-entry.html @@ -1,16 +1,17 @@ {{ $p := .page }} {{ $no := index .nums $p.TranslationKey | default 0 }} +{{ $time := $p.Date.Format "15:04" }} <article class="dispatch"> <div class="dispatch__meta"> - <span>{{ partial "time.html" $p }} // {{ $p.WordCount }} {{ i18n "words" }}</span> + <span>{{ partial "time.html" $p }}{{ if ne $time "00:00" }} // {{ $time }} {{ $p.Site.Params.timeZoneLabel }}{{ end }} // {{ $p.WordCount }} {{ i18n "words" }}</span> <span class="dispatch__no">#{{ printf "%03d" $no }}</span> </div> <h2 class="dispatch__title"> - <a href="{{ $p.Permalink }}">{{ $p.Title }}</a> + <a href="{{ $p.RelPermalink }}">{{ $p.Title }}</a> </h2> <div class="dispatch__blurb">{{ $p.Summary }}</div> - <a class="dispatch__link" href="{{ $p.Permalink }}">{{ i18n "readDispatch" }}</a> + <a class="dispatch__link" href="{{ $p.RelPermalink }}">{{ i18n "readDispatch" }}</a> </article> diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html index 7d2985e1f0cbfac3f0080e89020a8b2fe286699b..f00cda5347bb832ecb1fdda7c07c5e591f121e9b 100644 --- a/layouts/_partials/head.html +++ b/layouts/_partials/head.html @@ -12,7 +12,7 @@ document.documentElement.classList.remove('dark'); } })(); </script> - <link rel="alternate" type="application/rss+xml" title="RSS for {{ .Lang }}" href="{{ "index.xml" | absLangURL }}"> + <link rel="alternate" type="application/rss+xml" title="RSS for {{ .Lang }}" href="{{ "index.xml" | relLangURL }}"> <link rel="icon" type="image/jpeg" href="/avatar.jpg"> {{ $style := resources.Get "style.scss" | css.Sass | resources.Minify | resources.Fingerprint }} <link rel="stylesheet" href="{{ $style.RelPermalink }}" /> diff --git a/layouts/_partials/masthead.html b/layouts/_partials/masthead.html index a4ad9fac5854c7a55d72588be1e72d8650dca2c0..8b3b5a141cb37ab949dec0a3177017766fc5e789 100644 --- a/layouts/_partials/masthead.html +++ b/layouts/_partials/masthead.html @@ -1,4 +1,4 @@ -<a class="masthead__link" href="{{ .Site.BaseURL }}"> +<a class="masthead__link" href="{{ .Site.Home.RelPermalink }}"> <img class="avatar" src="/avatar.jpg" alt="{{ .Site.Title }}"> {{ if .IsHome }} <h1 class="masthead__title">{{ i18n "logTitle" }}</h1> diff --git a/layouts/_partials/post-header.html b/layouts/_partials/post-header.html new file mode 100644 index 0000000000000000000000000000000000000000..f303ace34a517d607886ba6aad3a696fb6939281 --- /dev/null +++ b/layouts/_partials/post-header.html @@ -0,0 +1,41 @@ +{{- $nums := partialCached "dispatch-numbers.html" . "dispatch-numbers" -}} +{{- $no := index $nums .TranslationKey | default 0 -}} +{{- $time := .Date.Format "15:04" -}} +<nav class="post-nav"> + <div class="post-nav__group"> + <a class="post-nav__back" href="{{ .Site.Home.RelPermalink }}"> + <span aria-hidden="true">←</span> {{ .Site.Params.shortTitle }} + </a> + <span class="post-nav__sep" aria-hidden="true">//</span> + <span class="post-nav__no">{{ i18n "postLabel" }} #{{ printf "%03d" $no }}</span> + </div> + + <div class="post-nav__group"> + <span class="post-nav__stats"> + {{- partial "time.html" . -}} + {{- if ne $time "00:00" }} · {{ $time }} {{ .Site.Params.timeZoneLabel }}{{ end -}} + · {{ .WordCount }} {{ i18n "words" }} + · {{ .ReadingTime }} {{ i18n "minutes" }} + </span> + {{ partial "theme-toggle.html" . }} + </div> +</nav> + +<div class="divisor"></div> + +<header class="post-header"> + <h1 class="post-title">{{ .Title }}</h1> + + {{ with .Params.blurb }} + <p class="post-blurb">{{ . }}</p> + {{ end }} + + {{ with .GetTerms "tags" }} + <div class="filed-under"> + {{ i18n "filedUnder" }} + {{ range $i, $term := . }}{{ if $i }}, {{ end }}<a href="{{ $term.RelPermalink }}">#{{ $term.LinkTitle }}</a>{{ end }} + </div> + {{ end }} +</header> + +<div class="divisor"></div> diff --git a/layouts/_partials/translations.html b/layouts/_partials/translations.html index f07954433b4a27fae3a02d0bb5dbd361490b8d31..efc108401e1c89dae48dcd45ee5b4847929b8943 100644 --- a/layouts/_partials/translations.html +++ b/layouts/_partials/translations.html @@ -4,7 +4,7 @@{{ i18n "translations" }}:
<ul> {{ range .Translations }} <li> - <a href="{{ .Permalink }}">{{ .Language.Label }}: {{ .Title }}</a> + <a href="{{ .RelPermalink }}">{{ .Language.Label }}: {{ .Title }}</a> </li> {{ end }} </ul> diff --git a/layouts/single.html b/layouts/single.html index 6d4eff340ac9924a91e126e6c3a287b25273b685..062f8136a143ec4420beb42ad01740f17b264652 100644 --- a/layouts/single.html +++ b/layouts/single.html @@ -1,30 +1,10 @@ {{ define "main" }} {{ $nums := partialCached "dispatch-numbers.html" . "dispatch-numbers" }} -{{ $no := index $nums .TranslationKey | default 0 }} <main> <div class="page-content"> - <header class="site-header"> - {{ partial "masthead.html" . }} - <div class="divisor"></div> - </header> + {{ partial "post-header.html" . }} <article> - <header class="post-header"> - <div class="post-meta"> - <span>{{ partial "time.html" . }} // {{ .WordCount }} {{ i18n "words" }}</span> - <span class="post-meta__no">#{{ printf "%03d" $no }}</span> - </div> - - <h1 class="post-title">{{ .Title }}</h1> - - {{ with .GetTerms "tags" }} - <div class="filed-under"> - {{ i18n "filedUnder" }}: - {{ range $i, $term := . }}{{ if $i }}, {{ end }}<a href="{{ $term.Permalink }}">#{{ $term.LinkTitle }}</a>{{ end }} - </div> - {{ end }} - </header> - {{ partial "translations.html" . }} <div class="post-body"> @@ -35,7 +15,7 @@ {{ if or .NextInSection .PrevInSection }} <nav class="dispatch-nav" aria-label="{{ i18n "dispatchNav" }}"> {{ with .PrevInSection }} - <a href="{{ .Permalink }}"> + <a href="{{ .RelPermalink }}"> <span class="dispatch-nav__no">← #{{ printf "%03d" (index $nums .TranslationKey | default 0) }}</span> <span>{{ .Title }}</span> </a> @@ -44,7 +24,7 @@ {{ end }} {{ with .NextInSection }} - <a href="{{ .Permalink }}"> + <a href="{{ .RelPermalink }}"> <span>{{ .Title }}</span> <span class="dispatch-nav__no">#{{ printf "%03d" (index $nums .TranslationKey | default 0) }} →</span> </a>