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.
Remove nested list-page-container to simplify layout CSS on section page
2025-08-31 00:57:33 -05:00 · 2025-08-27 11:38:29 -05:00 · 2025-08-27 11:13:48 -05:00 · 2025-08-27 10:50:52 -05:00 · 2025-08-25 13:44:08 -05:00 · 2025-08-24 04:05:10 -05:00
12 changed files with 129 additions and 114 deletions
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -302,13 +302,13 @@ body {
  max-width: calc(720px + 2 * var(--page-margin)); /* padding is included in the element's width */
 }

-footer {
+.site-footer {
  margin: var(--page-margin) 0;
  text-align: center;
  font-size: smaller;
 }

-footer p {
+.site-footer p {
  margin: 0;
 }

@@ -340,7 +340,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;
@@ -348,27 +348,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;
 }

@@ -446,13 +446,6 @@ footer p {

 /* List layout {{{ */

-/* 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;
@@ -607,6 +600,7 @@ footer p {
 /* Subsections on list pages {{{ */

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

 .section:hover {
@@ -640,6 +637,16 @@ footer p {
  margin-bottom: 5px;
 }

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


--- a/layouts/_partials/page-metadata/post-full.html
+++ b/layouts/_partials/page-metadata/post-full.html
@@ -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 }}
--- a/layouts/_partials/page-metadata/post-short.html
+++ b/layouts/_partials/page-metadata/post-short.html
@@ -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 }}
--- a/layouts/_partials/share.html
+++ b/layouts/_partials/share.html
@@ -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>
--- 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/taxonomy.html
+++ b/layouts/authors/taxonomy.html
--- a/layouts/baseof.html
+++ b/layouts/baseof.html
@@ -20,7 +20,7 @@
            </main>

            {{ if or .Site.Copyright .Site.Params.footer }}
-                <footer>
+                <footer class="site-footer">
                    {{ with .Site.Copyright }}
                        {{ . | safeHTML }}
                    {{ end }}
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -3,10 +3,10 @@
        <article class="homepage-content">
            {{ . }}
        </article>
-        <hr>
    {{ end }}

    {{ if .Site.Params.homepageLatestPosts }}
+        <hr>
        <div class="homepage-latest-posts">
            <h1>
                {{ i18n "latest_posts" }}
--- a/layouts/page.html
+++ b/layouts/page.html
@@ -1,74 +1,76 @@
 {{ define "main" }}
-    <div class="page-title">
-        <h1>
-            {{ .Title | markdownify }}
-            {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
-        </h1>
-    </div>
+    <article>
+        <div class="page-title">
+            <h1>
+                {{ .Title | markdownify }}
+                {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
+            </h1>
+        </div>

-    {{ partial "page-metadata/post-full.html" . }}
-    {{ partial "series-box.html" . }}
+        {{ partial "page-metadata/post-full.html" . }}
+        {{ partial "series-box.html" . }}

-    {{ if .Params.Toc }}
-        <div class="table-of-contents" aria-label="{{ i18n "aria_table_of_contents" }}">
-            <details>
-                <summary>{{ i18n "table_of_contents" }}</summary>
+        {{ if .Params.Toc }}
+            <section class="table-of-contents" aria-label="{{ i18n "aria_table_of_contents" }}">
+                <details>
+                    <summary>{{ i18n "table_of_contents" }}</summary>
+                    {{ .TableOfContents }}
+                </details>
+            </section>
+            <div class="table-of-contents print">
+                {{ i18n "table_of_contents" }}
                {{ .TableOfContents }}
-            </details>
-        </div>
-        <div class="table-of-contents print">
-            {{ i18n "table_of_contents" }}
-            {{ .TableOfContents }}
-        </div>
-    {{ end }}
+            </div>
+        {{ end }}

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

-    <article class="post-content" data-pagefind-body>
-        {{ .Content }}
+        <div class="post-content" data-pagefind-body>
+            {{ .Content }}
+        </div>
+
+        {{ partial "series-box.html" . }}
+
+        {{ if or .NextInSection .PrevInSection }}
+            <nav class="prevnext">
+                {{ with .NextInSection }}
+                    <a class="prev" href="{{ .Permalink }}">
+                        <div class="prev-caption">
+                            &larr; {{ i18n "newer_post" }}
+                        </div>
+                        <div class="prev-post">
+                            {{ .Title | markdownify }}
+                        </div>
+                    </a>
+                {{ else }}
+                    <div class="prev"></div>
+                {{ end }}
+
+                {{ with .PrevInSection }}
+                    <a class="next" href="{{ .Permalink }}">
+                        <div class="next-caption">
+                            {{ i18n "older_post" }} &rarr;
+                        </div>
+                        <div class="next-post">
+                            {{ .Title | markdownify }}
+                        </div>
+                    </a>
+                {{ else }}
+                    <div class="next"></div>
+                {{ end }}
+            </nav>
+        {{ end }}
+
+        {{ if .Site.Params.shareButtons }}
+            {{ partial "share.html" . }}
+        {{ end }}
+
+        {{ if .Params.comments }}
+            <section class="comments">
+                {{ partial "comments.html" . }}
+            </section>
+        {{ end }}
    </article>
-
-    {{ partial "series-box.html" . }}
-
-    {{ if or .NextInSection .PrevInSection }}
-        <div class="prevnext">
-            {{ with .NextInSection }}
-                <a class="prev" href="{{ .Permalink }}">
-                    <div class="prev-caption">
-                        &larr; {{ i18n "newer_post" }}
-                    </div>
-                    <div class="prev-post">
-                        {{ .Title | markdownify }}
-                    </div>
-                </a>
-            {{ else }}
-                <div class="prev"></div>
-            {{ end }}
-
-            {{ with .PrevInSection }}
-                <a class="next" href="{{ .Permalink }}">
-                    <div class="next-caption">
-                        {{ i18n "older_post" }} &rarr;
-                    </div>
-                    <div class="next-post">
-                        {{ .Title | markdownify }}
-                    </div>
-                </a>
-            {{ else }}
-                <div class="next"></div>
-            {{ end }}
-        </div>
-    {{ end }}
-
-    {{ if .Site.Params.shareButtons }}
-        {{ partial "share.html" . }}
-    {{ end }}
-
-    {{ if .Params.comments }}
-        <div class="comments">
-            {{ partial "comments.html" . }}
-        </div>
-    {{ end }}
 {{ end }}


--- 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/taxonomy.html
+++ b/layouts/series/taxonomy.html
@@ -1,8 +1,10 @@
 {{ 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 }}
        {{ . }}
Author	SHA1	Message	Date
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
BBaoVanC	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
BBaoVanC	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
BBaoVanC	20f22b7926	Improve semantic HTML tag usage on content pages	2025-08-24 03:52:23 -05:00
BBaoVanC	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
BBaoVanC	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