Add named styles to each part

google · Feb 2, 2024 · 4a5cdc1 · 4a5cdc1
1 parent f3961b1
commit 4a5cdc1
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -42,10 +42,14 @@ For the full list of changes, see the [0.9.0] release notes.
   [render-heading.html](https://gohugo.io/templates/render-hooks/) hook. This is
   _potentially_ a breaking change for projects that override the hook.
 
+- The footer layout has been factored into parts: left, right, and center, with
+  copyright a subpart of center. Each part has its own style tag, for example:
+  `td-footer__left`. Note that the style `td-footer__copyright-etc` has been
+  renamed to `td-footer__center`. For details concerning all foot changes, see
+  [#1818].
+
 **Other changes**:
 
-- The footer parts can be individually customized: left, right, center, and
-  copyright. ([#1818]).
 - The latest release of [Mermaid] resources are fetched at build time ([#1410]).
 - Docsy follows recommended accessibility practice: page-body links are
   underlined. For details, see [#1814] and [#1815].

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -49,9 +49,17 @@
     min-height: 200px;
   }
 
-  &__copyright-etc {
+  /* &__left { } */
+
+  &__center {
     @extend .small;
+    text-align: center;
+  }
+
+  &__right {
+    text-align: right;
   }
+
   &__about {
     font-size: initial;
   }

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,13 +1,15 @@
 <footer class="td-footer row d-print-none">
   <div class="container-fluid">
     <div class="row mx-md-2">
-      <div class="col-6 col-sm-4 text-xs-center order-sm-1">
+      <div class="td-footer__left col-6 col-sm-4 order-sm-1">
         {{ partial "footer/left.html"  . }}
       </div>
-      <div class="col-6 col-sm-4 text-end text-xs-center order-sm-3">
+      {{- /* Trim WS */ -}}
+      <div class="td-footer__right col-6 col-sm-4 order-sm-3">
         {{ partial "footer/right.html"  . }}
       </div>
-      <div class="td-footer__copyright-etc col-12 col-sm-4 text-center py-2 order-sm-2">
+      {{- /* Trim WS */ -}}
+      <div class="td-footer__center col-12 col-sm-4 py-2 order-sm-2">
         {{ partial "footer/center.html"  . }}
       </div>
     </div>

diff --git a/layouts/partials/footer/copyright.html b/layouts/partials/footer/copyright.html
@@ -1,3 +1,3 @@
 {{ with .Site.Params.copyright -}}
-  <span>&copy; {{ now.Year }} {{ . }} {{ T "footer_all_rights_reserved" }}</span>
+  <span class="td_footer__copyright">&copy; {{ now.Year }} {{ . }} {{ T "footer_all_rights_reserved" }}</span>
 {{- end -}}