17 Commits

Author SHA1 Message Date
94bfef19a1 Merge branch 'page-list-and-summary-css-cleanup' 2025-09-01 02:51:40 -05:00
9b2509c0d5 Change "Read more" to "See posts" on author summary card
I never noticed this; you can read more of an article, but it doesn't
really make any sense to "Read more" on an author.
2025-09-01 02:45:12 -05:00
c02ceb2dc4 Reorganize series page list and series summary card class names
- Use namespaced class names to prevent accidental name collisions in
  the future
- Clean up whatever the hell I was doing with the flex config on the
  outer series list. I have no clue why it's set up as a wrapping row,
  or what the border radius is for. It seems to look the same if I just
  make it a page-list that gets its gap overridden.
- Remove page.series wrapper around the summary card render which was
  accidentally left in after 8eb343132c6b57f692f87a72a5aca1bc9c563d1b.
2025-09-01 02:45:12 -05:00
8e22007bfd Rename feature-figure.html to featured-media and combine CSS with figures
- Rename feature-figure.html and its class from post-media to
  featured-media
- Move all <figure> formatting to a separate section
- Put the .featured-media CSS next to the rest of the figure formatting
  as it's sorta a special case of regular figure
2025-09-01 02:45:12 -05:00
1ee8d314c0 Rename summary card classes from .page to .summary-card 2025-09-01 02:44:57 -05:00
22fdeadf78 Move summary card CSS to a new fold section 2025-09-01 00:57:41 -05:00
6251b033d5 Move article.page wrapping to summary.html instead of at list template
I am trying to make various templates and partials act more like
self-contained components.

This is in preparation for #113.
2025-09-01 00:50:54 -05:00
37dbdc53af Use section tag for homepage latest posts section
This improves semantic HTML compliance.
2025-08-30 22:25:05 -05:00
ef91527ed6 Remove leftover additional-head partial
This was removed from use in d50a4dc6bd,
but the actual file was left in on accident.
2025-08-30 22:00:09 -05:00
4bc8184593 Add arrow in the right side of list page section buttons
This makes it more obvious that you can click this to view a different
area.
2025-08-27 11:38:29 -05:00
22e7ad4b77 Remove nested list-page-container to simplify layout CSS on section page
Originally I was using gap on a flexbox to separate the .sections
container from the rest of the page list. But it's simpler if I just use
block layout and a bottom margin, then I don't need an extra layer of
div.
2025-08-27 11:13:48 -05:00
c2b10a6c99 Use hierarchical naming on top and its elements
Any element that can't stand on its own as a self-contained component
should have its naming nested under whatever parent it's supposed to
have.

Fixes #109
2025-08-27 10:50:52 -05:00
c7c1ee0f0a Put title on series page in div.page-title like other taxonomy pages
This must've gotten out of sync somehow throughout the history. It
slightly changes the margins by disabling the default one on h1, which
is slightly larger than the breadcrumb nav margin-block's.
2025-08-25 13:44:08 -05:00
d90f64fb86 Only show hr on home if homepageLatestPosts enabled
Otherwise there's just a random line separator for no reason.
2025-08-24 04:05:10 -05:00
20f22b7926 Improve semantic HTML tag usage on content pages 2025-08-24 03:52:23 -05:00
267652a7e4 Use specific class for website footer instead of generic tag selector
Just in case I ever want to use the footer tag anywhere else on the
page. I'm not sure if I'm reading this right, but it sounds like it
would make sense to put all the buttons at the bottom of the content
pages as a footer as well. I will have to reconsider this again in the
future.
2025-08-24 03:49:54 -05:00
310961215e Rename list.html to taxonomy.html in authors and series
Matches the changes made in Hugo 0.146.0
2025-08-24 02:57:33 -05:00
20 changed files with 244 additions and 234 deletions

View File

@@ -174,30 +174,6 @@ video {
max-width: 100%;
}
figure > .figure-media {
padding: 5px;
}
figure > .figure-media.border {
border: 2px solid var(--figure-border);
}
.post-media > figure > .figure-media {
border: 7px solid var(--figure-border);
}
figure {
display: block;
text-align: center;
margin: 0;
}
figcaption {
font-style: italic;
font-size: small;
text-align: center;
}
a {
color: var(--link-0);
text-decoration: inherit;
@@ -295,33 +271,20 @@ body {
margin: 0;
}
.body-module {
.main-container {
margin: var(--page-margin) auto;
/* use padding because otherwise there's no way to have margin be both auto, and a minimum value */
padding: 0 var(--page-margin);
max-width: calc(720px + 2 * var(--page-margin)); /* padding is included in the element's width */
}
.body-module--marginless {
margin: 0;
}
.body-module--full-width {
margin: 0 var(--page-margin);
/*
margin-left: var(--page-margin);
margin-right: var(--page-margin);
*/
}
.body-module--wide {
margin-left: var(--page-margin);
margin-right: var(--page-margin);
max-width: 720px;
}
footer {
margin-bottom: var(--page-margin);
.site-footer {
margin: var(--page-margin) 0;
text-align: center;
font-size: smaller;
}
footer p {
.site-footer p {
margin: 0;
}
@@ -353,7 +316,7 @@ footer p {
* or it will need its hover background to be chopped off on the left */
}
.brand {
.top-brand {
flex-grow: 1;
margin: 8px var(--page-margin);
font-size: 1.25em;
@@ -361,27 +324,27 @@ footer p {
align-items: center;
}
.brand a {
.top-brand > a {
color: inherit;
font-weight: bold;
}
.navbar {
.top-navbar {
display: flex;
flex-wrap: wrap;
}
.navbar-item {
.top-navbar-item {
padding: 12px var(--page-margin);
white-space: nowrap;
}
.navbar-item:hover {
.top-navbar-item:hover {
background-color: var(--background-2);
text-decoration: none;
}
.navbar-item.active {
.top-navbar-item--active {
font-weight: bold;
}
@@ -389,6 +352,10 @@ footer p {
/* Breadcrumb navigation {{{ */
.breadcrumb {
margin: var(--page-margin) 0;
}
.breadcrumb ul {
margin: 0;
padding: 0;
@@ -453,33 +420,26 @@ footer p {
/* }}} */
/* List layout {{{ */
/* Summary card formatting {{{ */
/* flexbox container for sections and main page list */
.list-page-container {
display: flex;
flex-direction: column;
gap: 40px;
}
.page-list {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
gap: 40px;
margin-top: 16px;
}
.page-list > .page {
.summary-card {
padding: 24px;
border-radius: 12px;
background-color: var(--background-1);
color: var(--text-1);
}
.page > .page-title {
.summary-card-title {
margin-top: 0;
margin-bottom: 10px;
}
.summary-card-title a {
color: inherit;
}
.summary-card-title h1 {
margin: 0;
}
/* hugo just can't handle this feature
@@ -490,18 +450,6 @@ footer p {
}
*/
.page-title {
margin-bottom: 10px;
}
.page-title a {
color: inherit;
}
.page-title h1 {
margin: 0;
}
.page-metadata {
margin-bottom: 24px;
}
@@ -523,20 +471,74 @@ footer p {
content: ",";
}
.post-media {
margin-top: 15px;
}
/* for formatting of the featured image/media, see the .featured-media class */
.page-description {
.summary-card-description {
margin-top: 10px;
}
.readmore {
.summary-card-readmore {
margin-top: 5px;
}
/* }}} */
/* Figures, and featured media component (used in page.html and summary-card) {{{ */
figure > .figure-media {
padding: 5px;
}
figure > .figure-media.border {
border: 2px solid var(--figure-border);
}
figure {
display: block;
text-align: center;
margin: 0;
}
figcaption {
font-style: italic;
font-size: small;
text-align: center;
}
.featured-media {
margin-top: 15px;
}
.featured-media > figure > .figure-media {
border: 7px solid var(--figure-border);
}
/* }}} */
/* List layout {{{ */
.page-list {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
gap: 40px;
margin-top: 16px;
}
.page-title {
margin-bottom: 10px;
}
.page-title a {
color: inherit;
}
.page-title h1 {
margin: 0;
}
/* }}} */
/* Taxonomy list layout {{{ */
.taxonomy-list a,
@@ -587,17 +589,11 @@ footer p {
/* Series list layout {{{ */
.page-list.series {
display: flex;
.page-list--series {
gap: 80px;
flex-flow: row wrap;
list-style: none;
color: var(--text-0);
padding: 8px;
border-radius: 16px;
}
.page-list.series-inner {
.page-list--series-inner {
gap: 10px;
flex-direction: row;
flex-flow: row wrap;
@@ -606,7 +602,7 @@ footer p {
padding: 8px;
border-radius: 16px;
}
.page-list.series-inner > .page {
.page-list--series-inner > .summary-card {
flex: 1;
min-width: 49%;
}
@@ -616,6 +612,7 @@ footer p {
/* Subsections on list pages {{{ */
.sections {
margin-bottom: 60px;
display: flex;
flex-direction: column;
gap: 10px;
@@ -626,6 +623,9 @@ footer p {
color: var(--text-1);
border-radius: 12px;
padding: 1px 25px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.section:hover {
@@ -649,6 +649,16 @@ footer p {
margin-bottom: 5px;
}
.section-arrow {
margin-block: auto;
max-height: fit-content;
float: right;
}
.section-arrow > .icon {
height: 48px;
width: 48px;
}
/* }}} */
@@ -778,16 +788,16 @@ footer p {
margin: var(--page-margin);
}
.related-posts .page {
.related-posts .summary-card {
min-width: 300px;
max-width: 300px;
}
.related-posts .page:first-child {
.related-posts .summary-card:first-child {
margin-left: var(--page-margin);
}
.related-posts .page:last-child {
.related-posts .summary-card:last-child {
margin-right: var(--page-margin);
}

View File

@@ -48,6 +48,8 @@ post_count:
# Navigation
read_more:
other: "Read more"
see_posts:
other: "See posts"
related_posts:
other: "Related Posts"

View File

@@ -1,4 +0,0 @@
{{/*
Create a file named `layouts/partials/additional-head.html` at your site root to
add extra tags into <head>. Page variables are passed.
*/}}

View File

@@ -1,4 +1,4 @@
<nav class="body-module body-module--wide breadcrumb" aria-label="{{ i18n "aria_breadcrumbnav" }}">
<nav class="breadcrumb" aria-label="{{ i18n "aria_breadcrumbnav" }}">
<ul>
{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
</ul>

View File

@@ -1,5 +1,5 @@
{{ with .Resources.Get "feature" }}
<div class="post-media">
<div class="featured-media">
<figure>
{{ partial "embed-resource.html" . }}
{{ with .Title }}

View File

@@ -1,9 +1,7 @@
<div class="page-list">
{{ with . }}
{{ range . }}
<article class="page">
{{ .Render "summary" }}
</article>
{{ .Render "summary" }}
{{ end }}
{{ else }}
<div>

View File

@@ -1,5 +1,5 @@
{{ if or .Date .Params.authors .Site.Params.readingtime .Site.Params.gitFileURL }}
<div class="page-metadata" aria-label="{{ i18n "aria_post_metadata" }}">
<section class="page-metadata" aria-label="{{ i18n "aria_post_metadata" }}">
{{ if .Date }}
<span class="page-metadata-item" aria-label="{{ i18n "aria_post_meta_date" }}">
{{ partial "icon.html" "calendar" }}
@@ -26,5 +26,5 @@
{{ partial "page-metadata/item/categories.html" . }}
{{ partial "page-metadata/item/tags.html" . }}
</div>
</section>
{{ end }}

View File

@@ -1,5 +1,5 @@
{{ if or .Date .Params.authors .Site.Params.readingtime }}
<div class="page-metadata" aria-label="{{ i18n "aria_post_metadata" }}">
<section class="page-metadata" aria-label="{{ i18n "aria_post_metadata" }}">
{{ if .Date }}
<span class="page-metadata-item" aria-label="date">
{{ partial "icon.html" "calendar" }}
@@ -14,5 +14,5 @@
{{ partial "page-metadata/item/series.html" . }}
{{ partial "page-metadata/item/categories.html" . }}
{{ partial "page-metadata/item/tags.html" . }}
</div>
</section>
{{ end }}

View File

@@ -1,4 +1,4 @@
<div class="share-buttons">
<section class="share-buttons">
{{ if .Site.Params.shareButtons.twitter }}
<a class="twitter-share"
target="_blank"
@@ -66,4 +66,4 @@
{{- partial "icon.html" "printer" -}}
</a>
{{ end }}
</div>
</section>

View File

@@ -1,13 +1,13 @@
<header class="body-module body-module--marginless top">
<div class="brand">
<header class="top">
<div class="top-brand">
<a href="{{ .Site.Home.Permalink | absLangURL }}">
{{ .Site.Title | markdownify }}
</a>
</div>
<nav class="navbar" aria-label="{{ i18n "aria_navbar" }}">
<nav class="top-navbar" aria-label="{{ i18n "aria_navbar" }}">
{{ with .Site.Home }}
<a class="navbar-item{{ if $.IsHome }} active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title | markdownify }}</a>
<a class="top-navbar-item{{ if $.IsHome }} top-navbar-item--active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title | markdownify }}</a>
{{ end }}
{{ range .Site.Menus.main }}
@@ -16,7 +16,7 @@
{{ if or ($.HasMenuCurrent .Menu .) (eq .Page $) }}
{{ $isActive = true }}
{{ end }}
<a class="navbar-item{{ if $isActive }} active{{ end }}"
<a class="top-navbar-item{{ if $isActive }} top-navbar-item--active{{ end }}"
{{ if strings.HasPrefix .URL "http" }}target="_blank" rel="noopener"{{ end }}
href="{{ .URL }}">{{ .Name }}</a>
{{ end }}

View File

@@ -1,16 +1,18 @@
<h2 class="page-title">
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>
<article class="summary-card">
<h2 class="summary-card-title">
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>
{{ partial "page-metadata/author.html" . }}
{{ partial "page-metadata/author.html" . }}
{{ with .Summary }}
<div class="page-description">
{{ . }}
{{ with .Summary }}
<div class="summary-card-description">
{{ . }}
</div>
{{ end }}
<div class="summary-card-readmore">
<a href="{{ .Permalink }}">{{ i18n "see_posts" }} &rarr;</a>
</div>
{{ end }}
<div class="readmore">
<a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
</div>
</article>

View File

@@ -11,9 +11,7 @@
<div class="page-list">
{{ with .Paginator.Pages }}
{{ range . }}
<article class="page">
{{ .Render "summary" }}
</article>
{{ .Render "summary" }}
{{ end }}
{{ else }}
<div>

View File

@@ -8,33 +8,33 @@
{{ partial "top.html" . }}
{{ if not .IsHome }}
{{ partial "breadcrumb.html" . }}
{{ end }}
{{ block "pre-body" . }}{{ end }}
<main id="main-content">
{{ block "main" . }}
THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
<div class="main-container">
{{ if not .IsHome }}
{{ partial "breadcrumb.html" . }}
{{ end }}
</main>
<main id="main-content">
{{ block "main" . }}
THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
{{ end }}
</main>
{{ if or .Site.Copyright .Site.Params.footer }}
<footer class="site-footer">
{{ with .Site.Copyright }}
{{ . | safeHTML }}
{{ end }}
{{ with .Site.Params.footer }}
{{ . | $.RenderString (dict "display" "block") }}
{{ end }}
</footer>
{{ end }}
</div>
{{ block "post-body" . }}
{{/* currently this is only used for related posts */}}
{{ end }}
{{ if or .Site.Copyright .Site.Params.footer }}
<footer class="body-module body-module--wide">
{{ with .Site.Copyright }}
{{ . | safeHTML }}
{{ end }}
{{ with .Site.Params.footer }}
{{ . | $.RenderString (dict "display" "block") }}
{{ end }}
</footer>
{{ end }}
</body>
</html>

View File

@@ -1,15 +1,13 @@
{{ define "main" }}
{{ with .Content }}
<article class="body-module body-module--wide">
<article class="homepage-content">
{{ . }}
</article>
<hr class="body-module body-module--wide">
{{ end }}
{{ end }}
{{ define "post-body" }}
{{ if .Site.Params.homepageLatestPosts }}
<div class="body-module body-module--wide">
<hr>
<section class="homepage-latest-posts">
<h1>
{{ i18n "latest_posts" }}
{{ partial "rss-link.html" . }}
@@ -18,6 +16,6 @@
{{ partial "page-list.html" (.Paginate .Site.RegularPages).Pages }}
{{ partial "pagination.html" . }}
</div>
</section>
{{ end }}
{{ end }}

View File

@@ -1,5 +1,5 @@
{{ define "main" }}
<article class="body-module body-module--wide">
<article>
<div class="page-title">
<h1>
{{ .Title | markdownify }}
@@ -11,28 +11,28 @@
{{ partial "series-box.html" . }}
{{ if .Params.Toc }}
<div class="table-of-contents" aria-label="{{ i18n "aria_table_of_contents" }}">
<section class="table-of-contents" aria-label="{{ i18n "aria_table_of_contents" }}">
<details>
<summary>{{ i18n "table_of_contents" }}</summary>
{{ .TableOfContents }}
</details>
</div>
</section>
<div class="table-of-contents print">
{{ i18n "table_of_contents" }}
{{ .TableOfContents }}
</div>
{{ end }}
{{ partial "feature-figure.html" . }}
{{ partial "featured-media.html" . }}
<article class="post-content" data-pagefind-body>
<div class="post-content" data-pagefind-body>
{{ .Content }}
</article>
</div>
{{ partial "series-box.html" . }}
{{ if or .NextInSection .PrevInSection }}
<div class="prevnext">
<nav class="prevnext">
{{ with .NextInSection }}
<a class="prev" href="{{ .Permalink }}">
<div class="prev-caption">
@@ -58,7 +58,7 @@
{{ else }}
<div class="next"></div>
{{ end }}
</div>
</nav>
{{ end }}
{{ if .Site.Params.shareButtons }}
@@ -66,9 +66,9 @@
{{ end }}
{{ if .Params.comments }}
<div class="comments">
<section class="comments">
{{ partial "comments.html" . }}
</div>
</section>
{{ end }}
</article>
{{ end }}
@@ -77,7 +77,7 @@
{{ define "post-body" }}
{{ $related := .Site.RegularPages.Related . | first 10 }}
{{ with $related }}
<div class="related-posts body-module body-module--full-width">
<div class="related-posts">
<hr>
<h1>{{ i18n "related_posts" }}</h1>
{{ partial "page-list.html" . }}

View File

@@ -9,17 +9,15 @@
{{ . }}
{{ end }}
<div class="list-page-container">
{{ with .Sections }}
<div class="sections">
{{ range . }}
{{ .Render "summary" }}
{{ end }}
</div>
{{ end }}
{{ with .Sections }}
<div class="sections">
{{ range . }}
{{ .Render "summary" }}
{{ end }}
</div>
{{ end }}
{{ partial "page-list.html" .Paginator.Pages }}
</div>
{{ partial "page-list.html" .Paginator.Pages }}
{{ partial "pagination.html" . }}
{{ end }}

View File

@@ -1,14 +1,20 @@
<a class="section-anchor" href="{{ .Permalink }}">
<div class="section">
<h2 class="section-title">
{{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
{{ .Title | markdownify }}
</h2>
<div>
<h2 class="section-title">
{{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
{{ .Title | markdownify }}
</h2>
{{ with .Summary }}
<div class="section-description">
{{ . }}
</div>
{{ end }}
{{ with .Summary }}
<div class="section-description">
{{ . }}
</div>
{{ end }}
</div>
<div class="section-arrow">
{{ partial "icon.html" "arrow-right" }}
</div>
</div>
</a>

View File

@@ -1,21 +1,21 @@
<h2 class="page-title">
{{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>
<article class="summary-card">
<h2 class="summary-card-title">
{{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>
{{ partial "page-metadata/series.html" . }}
{{ partial "page-metadata/series.html" . }}
{{ with .Summary }}
<div class="page-description">
{{ . }}
</div>
{{ end }}
<div class="page-list series-inner">
{{ range .Data.Pages.Reverse }}
<article class="page">
{{ .Render "summary" }}
</article>
{{ with .Summary }}
<div class="summary-card-description">
{{ . }}
</div>
{{ end }}
</div>
<div class="page-list page-list--series-inner">
{{ range .Data.Pages.Reverse }}
{{ .Render "summary" }}
{{ end }}
</div>
</article>

View File

@@ -1,19 +1,19 @@
{{ define "main" }}
<h1>
{{ partial "icon.html" "files" }}
{{ .Title | markdownify }}
</h1>
<div class="page-title">
<h1>
{{ partial "icon.html" "files" }}
{{ .Title | markdownify }}
</h1>
</div>
{{ with .Content }}
{{ . }}
{{ end }}
<div class="page-list series">
<div class="page-list page-list--series">
{{ with .Paginator.Pages }}
{{ range . }}
<div class="page series">
{{ .Render "summary" }}
</div>
{{ .Render "summary" }}
{{ end }}
{{ else }}
<div>

View File

@@ -1,19 +1,21 @@
<h2 class="page-title">
{{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>
<article class="summary-card">
<h2 class="summary-card-title">
{{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>
{{ partial "page-metadata/post-short.html" . }}
{{ partial "page-metadata/post-short.html" . }}
{{ partial "feature-figure.html" . }}
{{ partial "featured-media.html" . }}
{{ with .Summary }}
<div class="page-description">
{{ . }}
{{ with .Summary }}
<div class="summary-card-description">
{{ . }}
</div>
{{ end }}
<div class="summary-card-readmore">
<a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
</div>
{{ end }}
<div class="readmore">
<a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
</div>
</article>