style: prepare for theming (#507)

hbstack · Dec 3, 2023 · 409fc08 · 409fc08
1 parent 84463b1
commit 409fc08
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 45 deletions.
diff --git a/assets/hb/modules/blog/scss/post/_content.scss b/assets/hb/modules/blog/scss/post/_content.scss
@@ -14,4 +14,8 @@
     h6 {
         margin-top: 0.5rem;
     }
+
+    :last-child {
+        margin-bottom: 0;
+    }
 }
diff --git a/layouts/authors/terms.html b/layouts/authors/terms.html
@@ -1,35 +1,34 @@
 {{- define "main" }}
-  <h1 class="mb-3 text-center h4">
-    {{- .Title -}}
-    <small class="ms-1 text-secondary">({{- len .Data.Pages -}})</small>
-  </h1>
-  <div class="row row-cols-1">
-    {{- range $i, $page := sort .Data.Pages ".Data.Pages" "desc" }}
-      <div class="hb-blog-term-author hb-module col d-flex border-top pt-3">
-        {{- $img := partial "hb/modules/blog/author/image" (dict
-          "Page" .
-          "Placeholder" false
-          "ClassName" "hb-blog-term-img img-fluid rounded-circle")
-        }}
-        {{- with $img }}
-        <div class="flex-shrink-0 me-3 d-flex align-items-center">{{ $img }}</div>
-        {{- end }}
-        <div class="flex-grow-1 d-flex flex-wrap">
-          <div class="flex-grow-1 d-flex justify-content-center flex-column">
-            <h2 class="h5">
-              <a class="text-decoration-none" href="{{ .RelPermalink }}">
-                {{- .Title -}}
-              </a>
-            </h2>
-            {{- with  .Description }}
-              <p class="text-body-secondary mb-0">{{ . }}</p>
-            {{- end }}
+  <div class="hb-blog-main-container">
+    <div class="hb-blog-main">
+      {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-begin" "Page" .) }}
+      <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
+        {{- range $i, $page := sort .Data.Pages ".Data.Pages" "desc" }}
+          <div class="col">
+            <div class="hb-blog-term-author d-flex pt-3 hb-module h-100 flex-column align-items-center justify-content-center">
+              {{- $img := partial "hb/modules/blog/author/image" (dict
+                "Page" .
+                "Placeholder" false
+                "ClassName" "hb-blog-term-img img-fluid rounded-circle mb-3")
+              }}
+              {{- with $img }}{{ . }}{{- end }}
+              <h2 class="h5 mb-2">
+                <a class="text-decoration-none" href="{{ .RelPermalink }}">
+                  {{- .Title -}}
+                </a>
+              </h2>
+              {{- with  .Description }}
+                <p class="text-body-secondary mb-2 text-center">{{ . }}</p>
+              {{- end }}
+              {{ partialCached "hb/modules/blog/term/metrics" . . }}
+            </div>
           </div>
-          <div class="flex-shrink-0 ms-2 d-none d-lg-block">
-            {{ partialCached "hb/modules/blog/term/metrics" . . }}
-          </div>
-        </div>
+        {{- end -}}
       </div>
-    {{- end -}}
+      {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-end" "Page" .) }}
+    </div>
+    <div class="hb-blog-sidebar pe-lg-1">
+      {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-sidebar" "Page" .) }}
+    </div>
   </div>
 {{- end -}}
diff --git a/layouts/partials/hb/modules/blog/post/comments.html b/layouts/partials/hb/modules/blog/post/comments.html
@@ -1,6 +1,6 @@
 {{- if default true .Params.comments }}
   {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-comments-begin" "Page" .) }}
-  <div id="content-comments" class="hb-blog-post-comments mb-3">
+  <div id="content-comments" class="hb-blog-post-comments hb-module mb-3">
     {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-comments" "Page" .) }}
   </div>
   {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-comments-end" "Page" .) }}

diff --git a/layouts/partials/hb/modules/blog/post/toc.html b/layouts/partials/hb/modules/blog/post/toc.html
@@ -1,4 +1,5 @@
 {{- if partial "base/functions/has-toc" . }}
+<div class="hb-module pb-1">
   <div class="h6 d-none d-md-block">{{ i18n "on_this_page" }}</div>
   <hr class="d-none d-md-block" />
   <div class="d-grid d-block d-md-none mb-2">
@@ -16,4 +17,5 @@
   <div class="px-2 px-md-0">
     <div id="collapse-toc" class="collapse hb-blog-post-toc-collapse">{{ .TableOfContents }}</div>
   </div>
+</div>
 {{- end }}
diff --git a/layouts/partials/hb/modules/blog/single.html b/layouts/partials/hb/modules/blog/single.html
@@ -1,21 +1,21 @@
 <div class="hb-blog-main-container">
   <div class="hb-blog-main">
     {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-begin" "Page" .) }}
-    <div class="hb-blog-post hb-module position-relative">
-      <div class="hb-blog-post-intro">
-        <h1 class="hb-blog-post-title mb-2">{{ .Title }}</h1>
-        <div class="hb-blog-post-meta mb-2">
+    <div class="hb-blog-post position-relative">
+      <div class="hb-blog-post-intro hb-module mb-2">
+        <h1 class="hb-blog-post-title">{{ .Title }}</h1>
+        <div class="hb-blog-post-meta">
           {{ partialCached "hb/modules/blog/post/meta/authors" . . }}
           {{ partialCached "hb/modules/blog/post/meta/date" . . }}
           {{ partialCached "hb/modules/blog/post/meta/reading-time" . . }}
           {{ partialCached "hb/modules/blog/post/meta/taxonomies" . . }}
         </div>
         {{- with .Description }}
-          <div class="hb-blog-post-desc lead mb-2">{{ . }}</div>
+          <div class="hb-blog-post-desc lead mt-1">{{ . }}</div>
         {{- end }}
       </div>
       <div
-        class="hb-blog-post-toc mt-2 text-body-secondary position-sticky overflow-y-auto">
+        class="hb-blog-post-toc text-body-secondary position-sticky overflow-y-auto">
         {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-toc-begin" "Page" .) }}
         {{- partialCached "hb/modules/blog/post/toc" . . }}
         {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-toc-end" "Page" .) }}
@@ -25,7 +25,7 @@ <h1 class="hb-blog-post-title mb-2">{{ .Title }}</h1>
         {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-content-begin" "Page" .) }}
         {{- $attributes := partial "hugopress/functions/render-attributes" (dict "Page" . "Name" "hb-blog-post-content") }}
         <div
-          class="hb-blog-post-content mb-5"
+          class="hb-blog-post-content hb-module"
           {{ with $attributes }}{{ . | safeHTMLAttr }}{{ end }}>
           {{ .Content }}
         </div>

diff --git a/layouts/partials/hb/modules/blog/term/metrics.html b/layouts/partials/hb/modules/blog/term/metrics.html
@@ -7,11 +7,11 @@
   "title" "Types"
   "count" (len (.RegularPages.GroupBy "Type")))
 }}
-<ul class="nav justify-content-center mt-3 mb-0">
+<ul class="nav justify-content-center mt-auto mb-0">
   {{ range $metrics }}
     <li
       class="nav-item d-flex flex-column justify-content-center align-items-center my-2 mx-3">
-      <span class="mb-1 fw-bold">{{ .count }}</span>
+      <span class="mb-1 fw-bold btn btn-secondary rounded">{{ .count }}</span>
       <span class="text-body-secondary">{{ .title }}</span>
     </li>
   {{ end }}

diff --git a/layouts/partials/hb/modules/blog/term/profile.html b/layouts/partials/hb/modules/blog/term/profile.html
@@ -5,11 +5,11 @@
     "Placeholder" false
     "ClassName" "hb-blog-term-img img-fluid rounded-circle mb-3")
   }}
-  <h1 class="text-center h4 mb-0 mt-2">
+  <h1 class="text-center h4 mb-3 mt-2">
     <a class="text-decoration-none" href="{{ .RelPermalink }}">{{ .Title }}</a>
   </h1>
   {{- with .Description }}
-    <p class="text-body-secondary text-center mt-3 mb-0">{{ . }}</p>
+    <p class="text-body-secondary text-center mb-1">{{ . }}</p>
   {{- end }}
   {{- with .Params.socials }}
     {{ partial "hb/modules/blog/term/socials" . }}

diff --git a/layouts/partials/hb/modules/blog/term/socials.html b/layouts/partials/hb/modules/blog/term/socials.html
@@ -8,7 +8,7 @@
     {{- $ctx := dict
       "name" $name
       "id" $id
-      "class" "d-flex justify-content-center align-items-center"
+      "class" "d-flex justify-content-center align-items-center mb-2"
       "height" "1.75em"
       "width" "1.75em"
       "color" $color

diff --git a/modules/post-nav/layouts/partials/hb/modules/blog-post-nav/index.html b/modules/post-nav/layouts/partials/hb/modules/blog-post-nav/index.html
@@ -3,7 +3,8 @@
 {{- if not .PrevInSection }}
   {{- $justify = "justify-content-end" }}
 {{- end }}
-<ul class="hb-blog-post-nav nav {{ $justify }} mb-3">
+{{- if or .PrevInSection .NextInSection }}
+<ul class="hb-blog-post-nav nav {{ $justify }} hb-module">
   {{ with .PrevInSection }}
     <li class="nav-item my-1">
       <a class="nav-link p-0 d-flex align-items-center" href="{{ .RelPermalink }}">
@@ -33,3 +34,4 @@
     </li>
   {{ end }}
 </ul>
+{{- end }}
diff --git a/modules/related-posts/layouts/partials/hb/modules/blog-related-posts/index.html b/modules/related-posts/layouts/partials/hb/modules/blog-related-posts/index.html
@@ -1,5 +1,5 @@
 {{- with .Site.RegularPages.Related . | first .Site.Params.hb.blog.related_posts.number }}
-  <div class="hb-blog-related-posts slide mb-3">
+  <div class="hb-blog-related-posts slide hb-module p-1">
     <div class="slide-inner row row-cols-1 row-cols-xl-2 gx-2">
       {{- $total := len . }}
       {{- range $i, $page := . }}