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-09-02 17:37:35 -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
14 changed files with 131 additions and 136 deletions
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -295,40 +295,20 @@ body {
  margin: 0;
 }

-/* body-module types:
- *
- * full-width: no max-width, no margin from the sides of the page
- * full-padded: no max-width, but has margin from the left/right page edges
- * center: max-width 720px, centered when too large, padded when screen is narrow
- */
-
-.body-module--full-width,
-.body-module--full-padded,
-.body-module--center-wide {
-  margin-block: var(--page-margin);
+.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--full-width {
-  margin-inline: 0;
-}
-.body-module-full-padded {
-  margin-inline: var(--page-margin);
-}
-.body-module--center {
-  margin-inline: auto;
-  /* add the minimum margin here because we are using auto for its centering */
-  padding-inline: var(--page-margin);
-  /* account for the padding being included in the element's calculated width */
-  max-width: calc(720px + 2 * var(--page-margin));
-}
-
-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;
 }

@@ -360,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;
@@ -368,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;
 }

@@ -396,6 +376,10 @@ footer p {

 /* Breadcrumb navigation {{{ */

+.breadcrumb {
+  margin: var(--page-margin) 0;
+}
+
 .breadcrumb ul {
  margin: 0;
  padding: 0;
@@ -462,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;
@@ -623,6 +600,7 @@ footer p {
 /* Subsections on list pages {{{ */

 .sections {
+  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 10px;
@@ -633,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 {
@@ -656,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/breadcrumb.html
+++ b/layouts/_partials/breadcrumb.html
@@ -1,4 +1,4 @@
-<nav class="body-module--center breadcrumb" aria-label="{{ i18n "aria_breadcrumbnav" }}">
+<nav class="breadcrumb" aria-label="{{ i18n "aria_breadcrumbnav" }}">
    <ul>
        {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
    </ul>
--- 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/list.html
+++ b/layouts/authors/list.html
@@ -1,26 +0,0 @@
-{{ define "main" }}
-    <section class="body-module--center">
-        <h1>
-            {{ partial "icon.html" "user-circle" }}
-            {{ .Title | markdownify }}
-        </h1>
-
-        {{ with .Content }}
-            {{ . }}
-        {{ end }}
-
-        <div class="page-list">
-            {{ with .Paginator.Pages }}
-                {{ range . }}
-                    <article class="page">
-                        {{ .Render "summary" }}
-                    </article>
-                {{ end }}
-            {{ else }}
-                <div>
-                    {{ i18n "no_posts" }}
-                </div>
-            {{ end }}
-        </div>
-    </section>
-{{ end }}
--- a/layouts/authors/taxonomy.html
+++ b/layouts/authors/taxonomy.html
@@ -0,0 +1,24 @@
+{{ define "main" }}
+    <h1>
+        {{ partial "icon.html" "user-circle" }}
+        {{ .Title | markdownify }}
+    </h1>
+
+    {{ with .Content }}
+        {{ . }}
+    {{ end }}
+
+    <div class="page-list">
+        {{ with .Paginator.Pages }}
+            {{ range . }}
+                <article class="page">
+                    {{ .Render "summary" }}
+                </article>
+            {{ end }}
+        {{ else }}
+            <div>
+                {{ i18n "no_posts" }}
+            </div>
+        {{ end }}
+    </div>
+{{ end }}
--- a/layouts/baseof.html
+++ b/layouts/baseof.html
@@ -8,30 +8,32 @@

        {{ 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>

-        {{ block "post-body" . }}{{ end }}
-
-        {{ if or .Site.Copyright .Site.Params.footer }}
-            <footer class="body-module--center">
-                {{ with .Site.Copyright }}
-                    {{ . | safeHTML }}
+            <main id="main-content">
+                {{ block "main" . }}
+                    THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
                {{ end }}
+            </main>

-                {{ with .Site.Params.footer }}
-                    {{ . | $.RenderString (dict "display" "block") }}
-                {{ end }}
-            </footer>
+            {{ 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 }}
    </body>

--- a/layouts/home.html
+++ b/layouts/home.html
@@ -1,15 +1,13 @@
 {{ define "main" }}
    {{ with .Content }}
-        <article class="body-module--center">
+        <article class="homepage-content">
            {{ . }}
        </article>
-        <hr class="body-module--center">
    {{ end }}
-{{ end }}

-{{ define "post-body" }}
    {{ if .Site.Params.homepageLatestPosts }}
-        <div class="body-module--center">
+        <hr>
+        <div class="homepage-latest-posts">
            <h1>
                {{ i18n "latest_posts" }}
                {{ partial "rss-link.html" . }}
--- a/layouts/page.html
+++ b/layouts/page.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-    <article class="body-module--center">
+    <article>
        <div class="page-title">
            <h1>
                {{ .Title | markdownify }}
@@ -11,12 +11,12 @@
        {{ 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 }}
@@ -25,14 +25,14 @@

        {{ partial "feature-figure.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="body-module--full-width related-posts">
+        <div class="related-posts">
            <hr>
            <h1>{{ i18n "related_posts" }}</h1>
            {{ partial "page-list.html" . }}
--- 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