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.
Reorganize series page list and series summary card class names
2025-09-03 01:47:34 -05:00 · 2025-09-01 02:45:12 -05:00 · 2025-09-01 02:45:12 -05:00 · 2025-09-01 02:45:12 -05:00 · 2025-09-01 02:44:57 -05:00 · 2025-09-01 00:57:41 -05:00
15 changed files with 184 additions and 165 deletions
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -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;
@@ -340,7 +316,7 @@ body {
   * 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;
@@ -348,27 +324,27 @@ body {
  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;
 }

@@ -444,33 +420,26 @@ body {

 /* }}} */

-/* 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
@@ -481,18 +450,6 @@ body {
 }
 */

-.page-title {
-  margin-bottom: 10px;
-}
-
-.page-title a {
-  color: inherit;
-}
-
-.page-title h1 {
-  margin: 0;
-}
-
 .page-metadata {
  margin-bottom: 24px;
 }
@@ -514,20 +471,74 @@ body {
  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,
@@ -578,17 +589,11 @@ body {

 /* 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;
@@ -597,7 +602,7 @@ body {
  padding: 8px;
  border-radius: 16px;
 }
-.page-list.series-inner > .page {
+.page-list--series-inner > .summary-card {
  flex: 1;
  min-width: 49%;
 }
@@ -607,6 +612,7 @@ body {
 /* Subsections on list pages {{{ */

 .sections {
+  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 10px;
@@ -617,6 +623,9 @@ body {
  color: var(--text-1);
  border-radius: 12px;
  padding: 1px 25px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }

 .section:hover {
@@ -640,6 +649,16 @@ body {
  margin-bottom: 5px;
 }

+.section-arrow {
+  margin-block: auto;
+  max-height: fit-content;
+  float: right;
+}
+.section-arrow > .icon {
+  height: 48px;
+  width: 48px;
+}
+
 /* }}} */


@@ -769,16 +788,16 @@ body {
  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);
 }

--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -48,6 +48,8 @@ post_count:
 # Navigation
 read_more:
  other: "Read more"
+see_posts:
+  other: "See posts"

 related_posts:
  other: "Related Posts"
--- a/layouts/_partials/additional-head.html
+++ b/layouts/_partials/additional-head.html
@@ -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.
-*/}}
--- a/layouts/_partials/featured-media.html
+++ b/layouts/_partials/featured-media.html
@@ -1,5 +1,5 @@
 {{ with .Resources.Get "feature" }}
-    <div class="post-media">
+    <div class="featured-media">
        <figure>
            {{ partial "embed-resource.html" . }}
            {{ with .Title }}
--- a/layouts/_partials/page-list.html
+++ b/layouts/_partials/page-list.html
@@ -1,9 +1,7 @@
 <div class="page-list">
    {{ with . }}
        {{ range . }}
-            <article class="page">
-                {{ .Render "summary" }}
-            </article>
+            {{ .Render "summary" }}
        {{ end }}
    {{ else }}
        <div>
--- a/layouts/_partials/top.html
+++ b/layouts/_partials/top.html
@@ -1,13 +1,13 @@
 <header class="top">
-    <div class="brand">
+    <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 }}
--- a/layouts/authors/summary.html
+++ b/layouts/authors/summary.html
@@ -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>
--- a/layouts/authors/taxonomy.html
+++ b/layouts/authors/taxonomy.html
@@ -11,9 +11,7 @@
    <div class="page-list">
        {{ with .Paginator.Pages }}
            {{ range . }}
-                <article class="page">
-                    {{ .Render "summary" }}
-                </article>
+                {{ .Render "summary" }}
            {{ end }}
        {{ else }}
            <div>
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -7,7 +7,7 @@

    {{ if .Site.Params.homepageLatestPosts }}
        <hr>
-        <div class="homepage-latest-posts">
+        <section class="homepage-latest-posts">
            <h1>
                {{ i18n "latest_posts" }}
                {{ partial "rss-link.html" . }}
@@ -16,6 +16,6 @@
            {{ partial "page-list.html" (.Paginate .Site.RegularPages).Pages }}

            {{ partial "pagination.html" . }}
-        </div>
+        </section>
    {{ end }}
 {{ end }}
--- a/layouts/page.html
+++ b/layouts/page.html
@@ -23,7 +23,7 @@
            </div>
        {{ end }}

-        {{ partial "feature-figure.html" . }}
+        {{ partial "featured-media.html" . }}

        <div class="post-content" data-pagefind-body>
            {{ .Content }}
--- a/layouts/section.html
+++ b/layouts/section.html
@@ -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 }}
--- a/layouts/section.summary.html
+++ b/layouts/section.summary.html
@@ -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>
--- a/layouts/series/summary.html
+++ b/layouts/series/summary.html
@@ -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>
--- a/layouts/series/taxonomy.html
+++ b/layouts/series/taxonomy.html
@@ -10,12 +10,10 @@
        {{ . }}
    {{ 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>
--- a/layouts/summary.html
+++ b/layouts/summary.html
@@ -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>
Author	SHA1	Message	Date
BBaoVanC	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
BBaoVanC	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
BBaoVanC	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
BBaoVanC	1ee8d314c0	Rename summary card classes from .page to .summary-card	2025-09-01 02:44:57 -05:00
BBaoVanC	22fdeadf78	Move summary card CSS to a new fold section	2025-09-01 00:57:41 -05:00
BBaoVanC	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
BBaoVanC	37dbdc53af	Use section tag for homepage latest posts section This improves semantic HTML compliance.	2025-08-30 22:25:05 -05:00
BBaoVanC	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
BBaoVanC	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
BBaoVanC	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
BBaoVanC	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