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,28 +333,32 @@ 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;
+    padding-top: 3px;
 }
 
 .boto-reserva {
-  border: 2px solid;
-  border-radius: 5px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  margin-bottom: 3px;
-  transition: 0.5s ease;
+    border: 2px solid;
+    border-radius: 5px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 3px;
+    transition: 0.5s ease;
 }
 
 .boto-reserva:hover {
-  background: var(--accent);
-transition: 0.5s ease;
+    background: var(--accent);
+    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 {
@@ -1178,23 +1208,22 @@ body > footer > div, .campsite_type_features, .campsite_type_detail {
 
 /* highlight footer season */
 body > footer section:nth-child(3) {
-	border: solid 1px;
-	border-radius: 5px;
+    border: solid 1px;
+    border-radius: 5px;
 }
 
 body > footer section:nth-child(3) h2 {
-  background: var(--accent-2);
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  padding-left: 15px;
+    background: var(--accent-2);
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    padding-left: 15px;
 }
 
 body > footer section:nth-child(3) p {
-  padding-left: 15px;
+    padding-left: 15px;
 }
 
 
-
 .campsite_type_detail {
     padding-bottom: 2.5rem;
 }
@@ -1278,8 +1307,8 @@ address {
     mix-blend-mode: multiply;
 }
 
-#zones  {
-  mix-blend-mode: multiply;
+#zones {
+    mix-blend-mode: multiply;
 }
 
 /* surrounding */

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">