diff options
| -rw-r--r-- | assets/css/main.min.css | 44 | ||||
| -rw-r--r-- | layouts/partials/hamburger-menu.html | 12 | ||||
| -rw-r--r-- | layouts/partials/header.html | 81 |
3 files changed, 68 insertions, 69 deletions
diff --git a/assets/css/main.min.css b/assets/css/main.min.css index 0278dc9..44735f9 100644 --- a/assets/css/main.min.css +++ b/assets/css/main.min.css @@ -2343,10 +2343,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay { left: 0px; } -.left-1\/2 { - left: 50%; -} - .left-3 { left: 0.75rem; } @@ -2379,10 +2375,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay { top: 1rem; } -.top-full { - top: 100%; -} - .z-10 { z-index: 10; } @@ -2666,11 +2658,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay { min-width: 0px; } -.min-w-max { - min-width: -moz-max-content; - min-width: max-content; -} - .max-w-2xl { max-width: 42rem; } @@ -2715,11 +2702,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay { flex-shrink: 0; } -.-translate-x-1\/2 { - --tw-translate-x: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .translate-x-0 { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -3129,10 +3111,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay { padding-top: 0.5rem; } -.pt-3 { - padding-top: 0.75rem; -} - .pt-6 { padding-top: 1.5rem; } @@ -3319,12 +3297,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay { opacity: 0.75; } -.shadow-lg { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .shadow-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); @@ -5258,14 +5230,6 @@ html.theme-light .hero-name { opacity: 0.5; } -.group:focus-within .group-focus-within\:flex { - display: flex; -} - -.group:hover .group-hover\:flex { - display: flex; -} - .group:hover .group-hover\:scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; @@ -5362,6 +5326,14 @@ html.theme-light .hero-name { font-size: 6rem; line-height: 1; } + + .group\/header:focus-within .md\:group-focus-within\/header\:flex { + display: flex; + } + + .group\/header:hover .md\:group-hover\/header\:flex { + display: flex; + } } @media (prefers-color-scheme: dark) { diff --git a/layouts/partials/hamburger-menu.html b/layouts/partials/hamburger-menu.html index 248b172..0280ecb 100644 --- a/layouts/partials/hamburger-menu.html +++ b/layouts/partials/hamburger-menu.html @@ -46,13 +46,23 @@ <div class="pl-4 border-l-2 border-accent/40 ml-2"> {{ range .Children }} {{ $childExternal := .Params.external }} + {{ $label := "" }} + {{ if $childExternal }} + {{ $label = .Name }} + {{ else if and .Name (i18n .Name) }} + {{ $label = i18n .Name }} + {{ else if .Page }} + {{ $label = .Page.LinkTitle }} + {{ else }} + {{ $label = .Name }} + {{ end }} <a href="{{ .URL }}" @click="menuOpen = false" class="block py-3 text-base text-text-dim hover:text-accent transition-colors rounded focus:outline-none focus:ring-2 focus:ring-accent" {{ if $childExternal }}target="_blank" rel="noopener noreferrer"{{ end }} > - {{ if $childExternal }}{{ .Name }}{{ else }}{{ i18n .Name }}{{ end }} + {{ $label }} </a> {{ end }} </div> diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 8ee657c..4ef817e 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,4 +1,4 @@ -<header class="fixed top-0 left-0 right-0 z-50 frosted-bar border-b"> +<header class="fixed top-0 left-0 right-0 z-50 frosted-bar border-b group/header"> <nav class="container mx-auto px-4 py-4 flex items-center justify-between"> <!-- Logo and Site Name --> {{ $homeLink := "/" }} @@ -18,37 +18,18 @@ {{ $isActive := eq $menuPath $currentPath }} {{ $isExternal := .Params.external }} {{ if .HasChildren }} - {{/* CSS-only hover/focus popup. No ARIA menu roles: we do not - implement arrow-key menu semantics, so claiming role="menu" - would lie to AT. focus-within gives keyboard reveal; the - parent stays a plain navigable link. */}} - <div class="relative group"> - <a - href="{{ .URL }}" - class="text-sm transition-colors inline-flex items-center gap-1 rounded focus:outline-none focus:ring-2 focus:ring-accent {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}" - {{ if $isActive }}aria-current="page"{{ end }} - > - {{ i18n .Name }} - <i data-feather="chevron-down" class="w-3 h-3" aria-hidden="true"></i> - </a> - <!-- Submenu: padding-top bridges the hover gap --> - <div class="absolute left-1/2 -translate-x-1/2 top-full pt-3 hidden group-hover:flex group-focus-within:flex"> - <ul class="frosted-bar border border-border rounded-lg px-4 py-3 flex flex-col gap-2 min-w-max shadow-lg"> - {{ range .Children }} - {{ $childExternal := .Params.external }} - <li> - <a - href="{{ .URL }}" - class="block text-sm whitespace-nowrap hover:text-accent transition-colors rounded focus:outline-none focus:ring-2 focus:ring-accent" - {{ if $childExternal }}target="_blank" rel="noopener noreferrer"{{ end }} - > - {{ if $childExternal }}{{ .Name }}{{ else }}{{ i18n .Name }}{{ end }} - </a> - </li> - {{ end }} - </ul> - </div> - </div> + {{/* Parent link only here; its children render as a full-width + second row below the bar (see the submenu band after </nav>). + No ARIA menu roles: CSS-only hover/focus, not an arrow-key menu; + group-focus-within on the header gives keyboard reveal. */}} + <a + href="{{ .URL }}" + class="text-sm transition-colors inline-flex items-center gap-1 rounded focus:outline-none focus:ring-2 focus:ring-accent {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}" + {{ if $isActive }}aria-current="page"{{ end }} + > + {{ i18n .Name }} + <i data-feather="chevron-down" class="w-3 h-3" aria-hidden="true"></i> + </a> {{ else }} <a href="{{ .URL }}" @@ -125,6 +106,42 @@ </div> </nav> + <!-- Desktop submenu: second row inside the same frosted glass, revealed on + hover/focus of the bar (no separate background — header expands) --> + {{ range .Site.Menus.main }} + {{ if .HasChildren }} + <div class="hidden md:group-hover/header:flex md:group-focus-within/header:flex"> + <ul class="container mx-auto px-4 py-3 flex items-center justify-center gap-8"> + {{ range .Children }} + {{ $childExternal := .Params.external }} + {{/* Curated entries (Packages) carry an i18n key as .Name; project + pages added via front-matter have no name, so fall back to the + page title. */}} + {{ $label := "" }} + {{ if $childExternal }} + {{ $label = .Name }} + {{ else if and .Name (i18n .Name) }} + {{ $label = i18n .Name }} + {{ else if .Page }} + {{ $label = .Page.LinkTitle }} + {{ else }} + {{ $label = .Name }} + {{ end }} + <li> + <a + href="{{ .URL }}" + class="text-sm whitespace-nowrap text-text-dim hover:text-accent transition-colors rounded focus:outline-none focus:ring-2 focus:ring-accent" + {{ if $childExternal }}target="_blank" rel="noopener noreferrer"{{ end }} + > + {{ $label }} + </a> + </li> + {{ end }} + </ul> + </div> + {{ end }} + {{ end }} + <!-- Mobile hamburger overlay menu --> {{ partial "hamburger-menu.html" . }} </header> |