dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 15:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: menu vertical overflow

Browse Source
This commit is contained in:
ZhenShuo Leo
2025-12-27 15:05:12 +08:00
parent 94fdf4fded
commit 522bdbe29e
4 changed files with 84 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/compiled/main.css
+15 -32
View File
@@ -390,9 +390,6 @@
.mx-auto { .mx-auto {
margin-inline: auto; margin-inline: auto;
} }
.-my-2 {
margin-block: calc(var(--spacing) * -2);
}
.my-0 { .my-0 {
margin-block: calc(var(--spacing) * 0); margin-block: calc(var(--spacing) * 0);
} }
@@ -1144,8 +1141,8 @@
.max-h-3 { .max-h-3 {
max-height: calc(var(--spacing) * 3); max-height: calc(var(--spacing) * 3);
} }
.max-h-\[5rem\] { .max-h-20 {
max-height: 5rem; max-height: calc(var(--spacing) * 20);
} }
.min-h-0 { .min-h-0 {
min-height: calc(var(--spacing) * 0); min-height: calc(var(--spacing) * 0);
@@ -1213,8 +1210,8 @@
.max-w-7xl { .max-w-7xl {
max-width: var(--container-7xl); max-width: var(--container-7xl);
} }
.max-w-\[5rem\] { .max-w-20 {
max-width: 5rem; max-width: calc(var(--spacing) * 20);
} }
.max-w-\[200px\] { .max-w-\[200px\] {
max-width: 200px; max-width: 200px;
@@ -1267,6 +1264,9 @@
.flex-none { .flex-none {
flex: none; flex: none;
} }
.shrink {
flex-shrink: 1;
}
.shrink-0 { .shrink-0 {
flex-shrink: 0; flex-shrink: 0;
} }
@@ -1417,9 +1417,6 @@
margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse))); margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
} }
} }
.gap-x-3 {
column-gap: calc(var(--spacing) * 3);
}
.gap-x-5 { .gap-x-5 {
column-gap: calc(var(--spacing) * 5); column-gap: calc(var(--spacing) * 5);
} }
@@ -1450,6 +1447,11 @@
.self-center { .self-center {
align-self: center; align-self: center;
} }
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.\!overflow-hidden { .\!overflow-hidden {
overflow: hidden !important; overflow: hidden !important;
} }
@@ -1764,6 +1766,9 @@
.p-0 { .p-0 {
padding: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0);
} }
.p-1 {
padding: calc(var(--spacing) * 1);
}
.p-1\.5 { .p-1\.5 {
padding: calc(var(--spacing) * 1.5); padding: calc(var(--spacing) * 1.5);
} }
@@ -1866,15 +1871,9 @@
.pt-16 { .pt-16 {
padding-top: calc(var(--spacing) * 16); padding-top: calc(var(--spacing) * 16);
} }
.pt-\[2px\] {
padding-top: 2px;
}
.pt-\[5px\] { .pt-\[5px\] {
padding-top: 5px; padding-top: 5px;
} }
.pr-2 {
padding-right: calc(var(--spacing) * 2);
}
.pr-8 { .pr-8 {
padding-right: calc(var(--spacing) * 8); padding-right: calc(var(--spacing) * 8);
} }
@@ -1893,12 +1892,6 @@
.pb-32 { .pb-32 {
padding-bottom: calc(var(--spacing) * 32); padding-bottom: calc(var(--spacing) * 32);
} }
.pb-\[3px\] {
padding-bottom: 3px;
}
.pl-0 {
padding-left: calc(var(--spacing) * 0);
}
.text-center { .text-center {
text-align: center; text-align: center;
} }
@@ -2762,11 +2755,6 @@
margin-right: calc(var(--spacing) * 7); margin-right: calc(var(--spacing) * 7);
} }
} }
.md\:ml-12 {
@media (width >= 853px) {
margin-left: calc(var(--spacing) * 12);
}
}
.md\:flex { .md\:flex {
@media (width >= 853px) { @media (width >= 853px) {
display: flex; display: flex;
@@ -2822,11 +2810,6 @@
padding-inline: calc(var(--spacing) * 24); padding-inline: calc(var(--spacing) * 24);
} }
} }
.md\:pr-4 {
@media (width >= 853px) {
padding-right: calc(var(--spacing) * 4);
}
}
.lg\:absolute { .lg\:absolute {
@media (width >= 1024px) { @media (width >= 1024px) {
position: absolute; position: absolute;
layouts/partials/header/basic.html
+67 -72
View File
@@ -15,7 +15,7 @@
src="{{ $logo.RelPermalink }}" src="{{ $logo.RelPermalink }}"
width="{{ div $logo.Width 2 }}" width="{{ div $logo.Width 2 }}"
height="{{ div $logo.Height 2 }}" height="{{ div $logo.Height 2 }}"
class="logo max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom" class="logo max-h-20 max-w-20 object-scale-down object-left nozoom"
alt=""> alt="">
{{ end }} {{ end }}
</a> </a>
@@ -26,7 +26,7 @@
{{/* Desktop navigation */}} {{/* Desktop navigation */}}
{{ define "HeaderDesktopNavigation" }} {{ define "HeaderDesktopNavigation" }}
<nav class="hidden md:flex items-center gap-x-5 md:ml-12 h-12"> <nav class="hidden md:flex items-center gap-x-5 h-12">
{{ if .Site.Menus.main }} {{ if .Site.Menus.main }}
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
{{ partial "header/header-option.html" . }} {{ partial "header/header-option.html" . }}
@@ -49,7 +49,7 @@
{{ end }} {{ end }}
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }} {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
<div class="{{ if .Site.Params.footer.showScrollToTop | default true -}}{{- end }} flex items-center"> <div class="flex items-center">
<button <button
id="appearance-switcher" id="appearance-switcher"
aria-label="Dark mode switcher" aria-label="Dark mode switcher"
@@ -67,11 +67,9 @@
</nav> </nav>
{{ end }} {{ end }}
{{/* Mobile navigation */}} {{/* Mobile navigation - now includes toolbar functions */}}
{{ define "HeaderMobileToolbar" }} {{ define "HeaderMobileNavigation" }}
<div class="flex md:hidden items-center gap-x-5 md:ml-12 h-12"> <div class="flex md:hidden items-center gap-x-5 h-12">
<span></span>
{{ partial "translations.html" . }} {{ partial "translations.html" . }}
{{ if .Site.Params.enableA11y | default false }} {{ if .Site.Params.enableA11y | default false }}
{{ template "HeaderA11y" (dict "prefix" "mobile-" "Site" .Site) }} {{ template "HeaderA11y" (dict "prefix" "mobile-" "Site" .Site) }}
@@ -92,7 +90,7 @@
id="appearance-switcher-mobile" id="appearance-switcher-mobile"
aria-label="Dark mode switcher" aria-label="Dark mode switcher"
type="button" type="button"
class="text-base hover:text-primary-600 dark:hover:text-primary-400 me-1"> class="text-base hover:text-primary-600 dark:hover:text-primary-400">
<div class="flex items-center justify-center dark:hidden"> <div class="flex items-center justify-center dark:hidden">
{{ partial "icon.html" "moon" }} {{ partial "icon.html" "moon" }}
</div> </div>
@@ -101,62 +99,61 @@
</div> </div>
</button> </button>
{{ end }} {{ end }}
{{/* Hamburger menu button */}}
{{ if .Site.Menus.main }}
<div id="menu-button" class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
{{ partial "icon.html" "bars" }}
</div>
{{ end }}
</div> </div>
{{ end }}
{{ define "HeaderMobileNavigation" }} {{/* Mobile menu overlay */}}
<div class="-my-2 md:hidden"> {{ if .Site.Menus.main }}
<div id="menu-button" class="block"> <div
{{ if .Site.Menus.main }} id="menu-wrapper"
<div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"> class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50 pt-[5px]">
{{ partial "icon.html" "bars" }} <ul
</div> class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
<div <li id="menu-close-button">
id="menu-wrapper" <span
class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50 pt-[5px]"> class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">
<ul {{ partial "icon.html" "xmark" }}
class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl"> </span>
<li id="menu-close-button"> </li>
<span
class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400"> {{ range .Site.Menus.main }}
{{ partial "icon.html" "xmark" }} {{ partial "header/header-mobile-option.html" . }}
</span> {{ end }}
</ul>
{{ if .Site.Menus.subnavigation }}
<hr>
<ul
class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
{{ range .Site.Menus.subnavigation }}
<li class="mb-1">
<a
href="{{ .URL }}"
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:") }}
target="_blank"
{{ end }}
class="flex items-center">
{{ if .Pre }}
<span {{ if and .Pre .Name }}class="mr-3"{{ end }}>
{{ partial "icon.html" .Pre }}
</span>
{{ end }}
<p class="text-sm font-sm" title="{{ .Title }}">
{{ .Name | markdownify }}
</p>
</a>
</li> </li>
{{ range .Site.Menus.main }}
{{ partial "header/header-mobile-option.html" . }}
{{ end }}
</ul>
{{ if .Site.Menus.subnavigation }}
<hr>
<ul
class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
{{ range .Site.Menus.subnavigation }}
<li class="mb-1">
<a
href="{{ .URL }}"
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:") }}
target="_blank"
{{ end }}
class="flex items-center">
{{ if .Pre }}
<span {{ if and .Pre .Name }}class="mr-3"{{ end }}>
{{ partial "icon.html" .Pre }}
</span>
{{ end }}
<p class="text-sm font-sm" title="{{ .Title }}">
{{ .Name | markdownify }}
</p>
</a>
</li>
{{ end }}
</ul>
{{ end }} {{ end }}
</div> </ul>
{{ end }} {{ end }}
</div> </div>
</div> {{ end }}
{{ end }} {{ end }}
{{ define "HeaderA11y" }} {{ define "HeaderA11y" }}
@@ -200,7 +197,7 @@
<div class="space-y-5"> <div class="space-y-5">
{{ $toggles := slice }} {{ $toggles := slice }}
{{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }} {{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
{{ $shouldDisableBackgroundImage := or {{ $shouldDisableBackgroundImage := or
(eq site.Params.homepage.layout "background") (eq site.Params.homepage.layout "background")
(eq site.Params.article.heroStyle "background") (eq site.Params.article.heroStyle "background")
(eq site.Params.list.heroStyle "background") (eq site.Params.list.heroStyle "background")
@@ -251,21 +248,19 @@
{{ end }} {{ end }}
{{/* ========== Render HTML ========== */}} {{/* ========== Render HTML ========== */}}
<div <div class="main-menu flex items-center w-full gap-2 p-1">
class="main-menu flex items-center justify-between py-6 md:justify-start gap-x-3 pt-[2px] pr-2 md:pr-4 pb-[3px] pl-0">
{{ template "HeaderLogo" . }} {{ template "HeaderLogo" . }}
<div class="flex flex-1 items-center justify-between"> {{ if not .Site.Params.disableTextInHeader | default true }}
<nav class="flex space-x-3"> <a
{{ if not .Site.Params.disableTextInHeader | default true }} href="{{ "" | relLangURL }}"
<a href="{{ "" | relLangURL }}" class="text-base font-medium"> class="text-base font-medium truncate min-w-0 shrink">
{{ .Site.Title | markdownify }} {{ .Site.Title | markdownify }}
</a> </a>
{{ end }} {{ end }}
</nav> <div class="flex items-center ms-auto">
{{ template "HeaderDesktopNavigation" . }} {{ template "HeaderDesktopNavigation" . }}
{{ template "HeaderMobileToolbar" . }} {{ template "HeaderMobileNavigation" . }}
</div> </div>
{{ template "HeaderMobileNavigation" . }}
</div> </div>
{{ if .Site.Menus.subnavigation }} {{ if .Site.Menus.subnavigation }}
layouts/partials/header/header-option-nested.html
+1 -1
View File
@@ -15,7 +15,7 @@
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }} {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
class="text-base font-medium hover:text-primary-600 dark:hover:text-primary-400" class="text-base font-medium hover:text-primary-600 dark:hover:text-primary-400"
title="{{ .Title }}"> title="{{ .Title }}">
<p> <p class="break-normal">
{{ .Name | markdownify }} {{ .Name | markdownify }}
</p> </p>
</a> </a>
layouts/partials/header/header-option-simple.html
+1 -1
View File
@@ -10,7 +10,7 @@
</span> </span>
{{ end }} {{ end }}
{{ if .Name }} {{ if .Name }}
<p class="text-base font-medium"> <p class="text-base font-medium break-normal">
{{ .Name | markdownify }} {{ .Name | markdownify }}
</p> </p>
{{ end }} {{ end }}