Add the language switch on the header’s top most in desktop sizes

Customer wants the language switch at the same level as the email and
phone links, because that’s what they have on the old website.

web/static/public.css

@@ -199,13 +199,27 @@ body > header {
 }
 
 body > header > address {
-    grid-column: 1 / span 2;
     margin: 0 0 1em;
-    font-size: 1.3rem;
     display: flex;
     gap: 2em;
 }
 
+body > header > address, nav:first-of-type a {
+    font-size: 1.3rem;
+}
+
+nav:first-of-type .has-submenu > a {
+    line-height: 1.2;
+}
+
+nav:first-of-type .has-submenu > a::after {
+    top: .5rem;
+}
+
+nav:first-of-type .has-submenu ul {
+    top: 2rem;
+}
+
 body > header > address a {
     display: flex;
     gap: .5em;
@@ -319,6 +333,10 @@ nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
     display: flex;
 }
 
+nav:last-of-type > ul > li:last-child {
+    display: none;
+}
+
 .boto-reserva a {
     padding-top: 3px;
 }
@@ -335,12 +353,12 @@ nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
 
 .boto-reserva:hover {
     background: var(--accent);
-transition: 0.5s ease;
+    transition: 0.5s ease;
 }
 
 @media (max-width: 80rem) {
     body > header {
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr auto;
     }
 
     label[for="menuShowHide"] {
@@ -353,7 +371,7 @@ transition: 0.5s ease;
         content: "\2630";
     }
 
-    nav {
+    nav:last-of-type {
         display: none;
         grid-column: 1 / span 2;
     }
@@ -366,18 +384,30 @@ transition: 0.5s ease;
         content: "✕";
     }
 
-    nav ul {
+    nav:last-of-type ul {
         flex-direction: column;
         align-items: start;
     }
 
-    nav .has-submenu ul {
+    nav:last-of-type .has-submenu ul {
         display: flex;
         position: static;
         padding-left: 2rem;
         margin-top: -1rem;
         background: none;
     }
+    
+    nav:last-of-type > ul > li:last-child {
+        display: unset;
+    }
+    
+    nav:first-of-type {
+        display: none;
+    }
+    
+    body > header > address {
+        grid-column: 1 / span 2;
+    }
 }
 
 #content {
@@ -1194,7 +1224,6 @@ body > footer section:nth-child(3) p {
 }
 
 
-
 .campsite_type_detail {
     padding-bottom: 2.5rem;
 }

web/templates/public/layout.gohtml

@@ -28,6 +28,21 @@
             <a href="mailto:{{ .Email }}">{{ .Email }}</a>
         </address>
     {{- end }}
+    {{ if .LocalizedAlternates -}}
+        <nav>
+            <ul>
+                <li class="has-submenu">{{ range .LocalizedAlternates -}}
+                        {{ if eq .Lang currentLocale }}{{ template "alternateAnchor" . }}{{ end }}
+                    {{- end }}
+                    <ul>
+                        {{ range .LocalizedAlternates }}{{ if ne .Lang currentLocale -}}
+                            <li>{{ template "alternateAnchor" . }}</li>
+                        {{ end }}{{ end }}
+                    </ul>
+                </li>
+            </ul>
+        </nav>
+    {{- end }}
     <h1><a href="/{{ currentLocale }}/"><span class="logo">◭</span><span
                     class="name">{{( gettext "Campsite Montagut" )}}</span></a></h1>
     <input type="checkbox" id="menuShowHide">