Refactor footer layout and styling for improved structure

Reorganize footer HTML with consistent spacing, refined typography, and
separated copyright/powered-by section. Add footer column layout CSS
with
constrained brand column width and padding adjustments.

layouts/_partials/footer.html

@@ -1,61 +1,106 @@
-{{- $enableFooterSwitches := .Store.Get "enableFooterSwitches" | default false -}}
-{{- $displayThemeToggle := site.Params.theme.displayToggle | default true -}}
-{{- $footerSwitchesVisible := and $enableFooterSwitches (or hugo.IsMultilingual $displayThemeToggle) -}}
-{{- $copyrightSectionVisible := or (.Site.Params.footer.displayPoweredBy | default true) .Site.Params.footer.displayCopyright -}}
-{{- $copyright := (T "copyright") | default "© 2024 Hextra." -}}
-{{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}}
-{{- $columns := .Site.Params.footer.columns -}}
-<footer class="hextra-footer hx:bg-gray-100 hx:pb-[env(safe-area-inset-bottom)] hx:dark:bg-neutral-900 hx:print:bg-transparent">
-  {{- if $footerSwitchesVisible -}}
-    <div class="hx:mx-auto hx:flex hx:gap-2 hx:py-2 hx:px-4 hextra-max-footer-width">
-      {{- partial "language-switch.html" (dict "context" .) -}}
-      {{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
+{{- $enableFooterSwitches := .Store.Get "enableFooterSwitches" | default false
+-}} {{- $displayThemeToggle := site.Params.theme.displayToggle | default true
+-}} {{- $footerSwitchesVisible := and $enableFooterSwitches (or
+hugo.IsMultilingual $displayThemeToggle) -}} {{- $copyrightSectionVisible := or
+(.Site.Params.footer.displayPoweredBy | default true)
+.Site.Params.footer.displayCopyright -}} {{- $copyright := (T "copyright") |
+default "© 2024 Hextra." -}} {{- $poweredBy := (T "poweredBy") | default
+"Powered by Hextra" -}} {{- $columns := .Site.Params.footer.columns -}}
+<footer
+    class="hextra-footer hx:bg-gray-100 hx:pb-[env(safe-area-inset-bottom)] hx:dark:bg-neutral-900 hx:print:bg-transparent"
+>
+    {{- if $footerSwitchesVisible -}}
+    <div
+        class="hx:mx-auto hx:flex hx:gap-2 hx:py-2 hx:px-4 hextra-max-footer-width"
+    >
+        {{- partial "language-switch.html" (dict "context" .) -}} {{- with
+        $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
     </div>
     {{- if or hugo.IsMultilingual $displayThemeToggle -}}
-      <hr class="hx:border-gray-200 hx:dark:border-neutral-800" />
-    {{- end -}}
-  {{- end -}}
-  {{- if $columns -}}
-    <div class="hextra-max-footer-width hx:mx-auto hx:grid hx:grid-cols-1 footer-grid hx:gap-8 hx:py-12 hx:px-6 hx:text-gray-600 hx:dark:text-gray-400">
-      {{- range $columns -}}
-        <div>
-          <div class="hx:font-semibold hx:text-gray-800 hx:dark:text-gray-200 hx:mb-3">{{ .title }}</div>
-          {{- with .desc -}}
-            <div class="hx:text-sm hx:leading-relaxed hx:whitespace-pre-line">{{ . }}</div>
-          {{- end -}}
-          {{- with .links -}}
+    <hr class="hx:border-gray-200 hx:dark:border-neutral-800" />
+    {{- end -}} {{- end -}} {{- if $columns -}}
+    <div
+        class="hextra-max-footer-width hx:mx-auto hx:grid hx:grid-cols-1 footer-grid hx:gap-8 hx:py-12 hx:px-6 hx:border-t hx:border-gray-200 hx:dark:border-neutral-800"
+    >
+        {{- range $columns -}}
+        <div class="footer-roadmap">
+            <div
+                class="hx:font-medium hx:text-gray-900 hx:dark:text-gray-100 hx:mb-3"
+            >
+                {{ .title }}
+            </div>
+            {{- with .desc -}}
+            <div
+                class="hx:text-sm hx:leading-relaxed hx:text-gray-600 hx:dark:text-gray-400 hx:whitespace-pre-line"
+            >
+                {{ . }}
+            </div>
+            {{- end -}} {{- with .links -}}
             <ul class="hx:space-y-2">
-              {{- range . -}}
-                {{- $isExternal := strings.HasPrefix .url "http" -}}
-                <li><a href="{{ .url }}" class="hx:text-sm hx:hover:text-gray-900 hx:dark:hover:text-gray-100 hx:transition-colors"{{ if $isExternal }} target="_blank" rel="noopener noreferrer"{{ end }}>{{ .name }}</a></li>
-              {{- end -}}
+                {{- range . -}} {{- $isExternal := strings.HasPrefix .url "http"
+                -}}
+                <li>
+                    <a
+                        href="{{ .url }}"
+                        class="hx:text-sm hx:text-gray-600 hx:hover:text-gray-900 hx:dark:text-gray-400 hx:dark:hover:text-gray-100 hx:transition-colors"
+                        {{
+                        if
+                        $isExternal
+                        }}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        {{
+                        end
+                        }}
+                        >{{ .name }}</a
+                    >
+                </li>
+                {{- end -}}
             </ul>
-          {{- end -}}
+            {{- end -}}
         </div>
-      {{- end -}}
+        {{- end -}}
     </div>
-  {{- end -}}
-  <div class="hextra-custom-footer hextra-max-footer-width hx:mx-auto hx:pl-[max(env(safe-area-inset-left),1.5rem)] hx:pr-[max(env(safe-area-inset-right),1.5rem)] hx:text-gray-600 hx:dark:text-gray-400">
-    {{- partial "custom/footer.html" (dict "context" . "switchesVisible" $footerSwitchesVisible "copyrightVisible" $copyrightSectionVisible) -}}
-  </div>
-  {{- if $copyrightSectionVisible -}}
-    <div class="hextra-max-footer-width hx:mx-auto hx:flex hx:justify-center hx:py-12 hx:pl-[max(env(safe-area-inset-left),1.5rem)] hx:pr-[max(env(safe-area-inset-right),1.5rem)] hx:text-gray-600 hx:dark:text-gray-400 hx:md:justify-start">
-      <div class="hx:flex hx:w-full hx:flex-col hx:items-center hx:sm:items-start">
-        {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx:font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{- end -}}
-        {{- if .Site.Params.footer.displayCopyright }}<div class="hx:mt-6 hx:text-xs">{{ $copyright | markdownify }}</div>{{- end -}}
-        {{- with .Site.Params.footer.icp }}<div class="hx:mt-2 hx:text-xs"><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" style="color:inherit;text-decoration:none">{{ . }}</a></div>{{- end -}}
-        {{- with .Site.Params.footer.gongan }}<div class="hx:mt-2 hx:text-xs"><a href="https://beian.mps.gov.cn/" target="_blank" rel="noopener noreferrer" style="color:inherit;text-decoration:none">{{ . }}</a></div>{{- end -}}
-      </div>
+    {{- end -}} {{- if $copyrightSectionVisible -}}
+    <div
+        class="hextra-max-footer-width hx:mx-auto hx:border-t hx:border-gray-200 hx:dark:border-neutral-800 hx:flex hx:flex-col hx:sm:flex-row hx:justify-between hx:items-start hx:sm:items-center hx:gap-2 hx:py-4 hx:px-6 hx:text-xs hx:text-gray-500 hx:dark:text-gray-500"
+    >
+        <div class="hx:flex hx:flex-wrap hx:gap-x-2 hx:gap-y-1 hx:items-center">
+            {{- if .Site.Params.footer.displayCopyright }}<span
+                >{{ $copyright | markdownify }}</span
+            >{{- end -}} {{- if and .Site.Params.footer.displayCopyright
+            (.Site.Params.footer.displayPoweredBy | default true) }}<span
+                class="hx:text-gray-300 hx:dark:text-neutral-700"
+                >|</span
+            >{{- end -}} {{- if (.Site.Params.footer.displayPoweredBy | default
+            true) }}<span>{{ template "theme-credit" $poweredBy }}</span>{{- end
+            -}}
+        </div>
+        <div class="hx:flex hx:flex-wrap hx:gap-x-3 hx:gap-y-1">
+            {{- with .Site.Params.footer.icp }}<a
+                href="https://beian.miit.gov.cn/"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="hx:hover:text-gray-700 hx:dark:hover:text-gray-300 hx:transition-colors"
+                >{{ . }}</a
+            >{{- end -}}/ {{- with .Site.Params.footer.gongan }}<a
+                href="https://beian.mps.gov.cn/"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="hx:hover:text-gray-700 hx:dark:hover:text-gray-300 hx:transition-colors"
+                >{{ . }}</a
+            >{{- end -}}
+        </div>
     </div>
-  {{- end -}}
+    {{- end -}}
 </footer>
 {{- define "theme-credit" -}}
-  <a class="hx:flex hx:text-sm hx:items-center hx:gap-1 hx:text-current" target="_blank" rel="noopener noreferrer" title="Hextra GitHub Homepage" href="https://github.com/imfing/hextra">
-    <span>
-      {{- . | markdownify -}}
-      {{- if strings.Contains . "Hextra" -}}
-        {{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="hx:inline-block hx:ltr:ml-1 hx:rtl:mr-1 hx:align-[-2.5px]"`) -}}
-      {{- end -}}
-    </span>
-  </a>
+<a
+    class="hx:hover:text-gray-700 hx:dark:hover:text-gray-300 hx:transition-colors"
+    target="_blank"
+    rel="noopener noreferrer"
+    title="Hextra GitHub Homepage"
+    href="https://github.com/imfing/hextra"
+    >{{ . | markdownify }}</a
+>
 {{- end -}}