Merge pull request #2384 from ZhenShuo2021/style/footer-icon

💄 Style(footer): improve icon-only mobile menu
This commit is contained in:
Nuno C.
2025-08-03 01:44:53 +01:00
committed by GitHub
3 changed files with 27 additions and 15 deletions

View File

@@ -1678,6 +1678,9 @@ body.zen-mode-enable {
.overflow-visible {
overflow: visible;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}

View File

@@ -2,11 +2,20 @@
{{/* Footer menu */}}
{{ if .Site.Params.footer.showMenu | default true }}
{{ if .Site.Menus.footer }}
<nav class="flex flex-row pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400">
<ul class="flex flex-col list-none sm:flex-row">
{{ $onlyIcon := true }}
{{ range .Site.Menus.footer }}
{{ if .Name }}
{{ $onlyIcon = false }}
{{ break }}
{{ end }}
{{ end }}
{{ $navClass := printf "flex flex-row pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400 %s" (cond $onlyIcon "overflow-x-auto py-2" "") }}
{{ $ulClass := printf "flex list-none %s" (cond $onlyIcon "flex-row" "flex-col sm:flex-row") }}
{{ $liClass := printf "flex mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0 %s" (cond $onlyIcon "ltr:mr-4 rtl:ml-4" "") }}
<nav class="{{ $navClass }}">
<ul class="{{ $ulClass }}">
{{ range .Site.Menus.footer }}
<li
class="flex mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
<li class=" {{ $liClass }}">
<a
class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2 flex items-center"
href="{{ .URL }}"
@@ -50,17 +59,17 @@
{{ i18n "footer.powered_by" (dict "Hugo" $hugo "Theme" $blowfish) | safeHTML }}
</p>
{{ end }}
</div>
<script>
{{ if not .Site.Params.disableImageZoom | default true }}
mediumZoom(document.querySelectorAll("img:not(.nozoom)"), {
margin: 24,
background: 'rgba(0,0,0,0.5)',
scrollOffset: 0,
})
{{ end }}
</script> {{ $jsProcess := resources.Get "js/process.js" }}
{{ if not .Site.Params.disableImageZoom | default true }}
<script>
mediumZoom(document.querySelectorAll("img:not(.nozoom)"), {
margin: 24,
background: "rgba(0,0,0,0.5)",
scrollOffset: 0,
});
</script>
{{ end }}
{{ $jsProcess := resources.Get "js/process.js" }}
{{ $jsProcess = $jsProcess | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
<script
type="text/javascript"

View File

@@ -1,4 +1,4 @@
<div id="top-scroller" class="pointer-events-none absolute top-[110vh] bottom-0 w-12 ltr:right-0 rtl:left-0">
<div id="top-scroller" class="pointer-events-none absolute top-[110vh] bottom-0 w-12 ltr:right-0 rtl:left-0 z-10">
<a
href="#the-top"
class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 mb-16 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"