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" )}}
- {{/*
- {{ if .LocalizedAlternates -}}
-
- {{- end }}
- */}}
- {{ with .Menu -}}
-
{{- template "content" . }}
@@ -60,3 +56,7 @@