assets/css/compiled/main.css

@@ -1155,9 +1155,6 @@ video {
 .hx-pb-px {
   padding-bottom: 1px;
 }
-.hx-pl-\[max\(env\(safe-area-inset-left\)\,0rem\)\] {
-  padding-left: max(env(safe-area-inset-left),0rem);
-}
 .hx-pl-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\] {
   padding-left: max(env(safe-area-inset-left),1.5rem);
 }
@@ -1173,9 +1170,6 @@ video {
 .hx-pr-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\] {
   padding-right: max(env(safe-area-inset-left),1.5rem);
 }
-.hx-pr-\[max\(env\(safe-area-inset-right\)\,0rem\)\] {
-  padding-right: max(env(safe-area-inset-right),0rem);
-}
 .hx-pr-\[max\(env\(safe-area-inset-right\)\,1\.5rem\)\] {
   padding-right: max(env(safe-area-inset-right),1.5rem);
 }

exampleSite/content/docs/advanced/customization.md

@@ -64,18 +64,24 @@ layouts/partials/custom/head-end.html
 
 ## Custom Footer Section
 
-You can add a custom section the footer between the language/theme buttons and the Copyright/Powered By section by creating a file `layouts/partials/custom/footer.html` in your site.
+You can add a custom section the footer between the language/theme buttons and the Copyright/Powered By section by creating a file `layouts/partials/custom/footer.html` in your site __and__ setting `customSection: true` in the `footer` section of your `hugo.yaml`:
 
-```html {filename="layouts/partials/custom/footer.html"}
+```yaml {filename="hugo.yaml"}
-<!-- Your footer element here -->
+ footer:
+    enable: true
+    customSection: true
+    # These settings are still respected
+    displayCopyright: false
+    displayPoweredBy: true
+    # This setting applies to the custom section
+    with: "wide"
 ```
 
-Available variables in the footer section are:
+Variables available in the footer are:
 
-- `.aboveVisible`: `true` if the Language or Theme button(s) are visible above the footer along with a horizontal separator.
+- `{{ .footerButtonColor }}` - The color/background color of a footer button
-- `.belowVisible`: `true` if the Copyright or PoweredBy text are visible below the footer.
 
-_Note: The custom footer inherits the default footer background color text color and the `width` setting in `hugo.yaml#footer` section._
+_Note: The custom footer inherits the default footer background color and text color._
 
 ## Custom Layouts
 

exampleSite/hugo_stats.json

@@ -431,14 +431,12 @@
       "hx-pb-8",
       "hx-pb-[env(safe-area-inset-bottom)]",
       "hx-pb-px",
-      "hx-pl-[max(env(safe-area-inset-left),0rem)]",
       "hx-pl-[max(env(safe-area-inset-left),1.5rem)]",
       "hx-pointer-events-none",
       "hx-pr-2",
       "hx-pr-4",
       "hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]",
       "hx-pr-[max(env(safe-area-inset-left),1.5rem)]",
-      "hx-pr-[max(env(safe-area-inset-right),0rem)]",
       "hx-pr-[max(env(safe-area-inset-right),1.5rem)]",
       "hx-pt-4",
       "hx-pt-6",

layouts/partials/footer.html

@@ -1,7 +1,5 @@
 {{- $enableFooterSwitches := .Scratch.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" -}}
@@ -17,7 +15,7 @@
 
 
 <footer class="hextra-footer hx-bg-gray-100 hx-pb-[env(safe-area-inset-bottom)] dark:hx-bg-neutral-900 print:hx-bg-transparent">
-  {{- if $footerSwitchesVisible -}}
+  {{- if and $enableFooterSwitches (or hugo.IsMultilingual $displayThemeToggle) -}}
     <div class="hx-mx-auto hx-flex hx-gap-2 hx-py-2 hx-px-4 {{ $footerWidth }}">
       {{- partial "language-switch.html" (dict "context" .) -}}
       {{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
@@ -26,21 +24,23 @@
       <hr class="dark:hx-border-neutral-800" />
     {{- end -}}
   {{- end -}}
+
+  {{- if .Site.Params.footer.customSection -}}
     <div
       class="{{ $footerWidth }} hx-pl-[max(env(safe-area-inset-left),0rem)] hx-pr-[max(env(safe-area-inset-right),0rem)] hx-text-gray-600 dark:hx-text-gray-400"
     >
-      {{ partial "custom/footer.html" (dict "context" . "aboveVisible" $footerSwitchesVisible "belowVisible" $copyrightSectionVisible ) }}
+      {{ partial "custom/footer.html" (dict "context" . "footerButtonColor" "hx-rounded-md hx-transition-colors hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50" ) }}
     </div>
-    {{- if $copyrightSectionVisible -}}
+    <hr class="dark:hx-border-neutral-800" />
-      <div
+  {{- end -}}
-        class="{{ $footerWidth }} 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 dark:hx-text-gray-400 md:hx-justify-start"
+    <div
-      >
+      class="{{ $footerWidth }} 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 dark:hx-text-gray-400 md:hx-justify-start"
-        <div class="hx-flex hx-w-full hx-flex-col hx-items-center sm:hx-items-start hx-gap-6">
+    >
-            {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
+      <div class="hx-flex hx-w-full hx-flex-col hx-items-center sm:hx-items-start hx-gap-6">
-            {{- if .Site.Params.footer.displayCopyright }}<div class="hx-text-xs">{{ $copyright | markdownify }}</div>{{ end }}
+          {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
-        </div>
+          {{- if .Site.Params.footer.displayCopyright }}<div class="hx-text-xs">{{ $copyright | markdownify }}</div>{{ end }}
       </div>
-    {{- end -}}
+    </div>
 </footer>
 
 {{- define "theme-credit" -}}