diff --git a/web/static/public.css b/web/static/public.css index a73cd00..6a263cc 100644 --- a/web/static/public.css +++ b/web/static/public.css @@ -172,15 +172,18 @@ body > a[href="#content"]:focus { body > header { position: sticky; top: 0; - background-color: rgba(var(--clar-rgb), 0.7); z-index: 999; padding: 1rem 2.5rem; - backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: space-between; } +body > header, nav .has-submenu ul { + background-color: rgba(var(--clar-rgb), 0.7); + backdrop-filter: blur(10px); +} + h1 a span { display: inline-block; } @@ -213,7 +216,7 @@ nav ul { align-items: center; } -nav a { +nav a, nav button { font-size: 1.8rem; font-weight: 500; text-transform: uppercase; @@ -221,6 +224,40 @@ nav a { line-height: 6rem; } +nav button { + cursor: pointer; + background: none; + border: none; +} + +nav .has-submenu { + position: relative; +} + +nav .has-submenu > a::after, nav .has-submenu > button::after { + content: " ⌄"; + position: absolute; + top: -.5rem; + right: -0.05rem; +} + +nav .has-submenu ul { + flex-direction: column; + align-items: start; + display: none; + position: absolute; + top: 5rem; +} + +nav .has-submenu ul a { + line-height: 4rem; + white-space: nowrap; +} + +nav .has-submenu:hover ul, nav .has-submenu:focus-within ul { + display: flex; +} + #content { padding: 2.5rem; } diff --git a/web/templates/public/layout.gohtml b/web/templates/public/layout.gohtml index e44ca72..366ebe5 100644 --- a/web/templates/public/layout.gohtml +++ b/web/templates/public/layout.gohtml @@ -21,38 +21,34 @@ {{( gettext "Skip to main content" )}}

{{( gettext "Campsite Montagut" )}}

- {{/* - {{ if .LocalizedAlternates -}} - - {{- end }} - */}} - {{ with .Menu -}} -
{{- template "content" . }} @@ -60,3 +56,7 @@ + +{{ define "alternateAnchor" -}} + {{ .Endonym }} +{{- end }}