Improve header

- fix header height
       61px->60px
    - check for elements before displaying
    - align theme-toggle
    - rm unnecessary elements
    - rm theme-toggle class
    - rm menu class

assets/css/header.css

@@ -13,7 +13,7 @@
 }
 
 .logo,
-.menu {
+#menu {
     display: flex;
     margin: auto var(--gap);
 }
@@ -25,7 +25,6 @@
 .logo a {
     font-size: 24px;
     font-weight: 700;
-    margin-inline-end: 10px
 }
 
 .logo a img {
@@ -37,9 +36,14 @@
     margin-inline-end: 8px
 }
 
-.theme-toggle svg {
+#theme-toggle svg {
     height: 18px;
+}
+
+a#theme-toggle  {
+    font-size: 24px;
     user-select: none;
+    margin: auto 4px;
     cursor: pointer
 }
 
@@ -52,22 +56,22 @@ body:not(.dark) #sun {
     display: none
 }
 
-.menu {
+#menu {
     list-style: none;
     word-break: keep-all;
     overflow-x: auto;
     white-space: nowrap
 }
 
-.menu li+li {
+#menu li+li {
     margin-inline-start: var(--gap)
 }
 
-.menu a {
+#menu a {
     font-size: 16px
 }
 
-.menu .active {
+#menu .active {
     font-weight: 500;
     border-bottom: 2px solid currentColor
 }
@@ -75,13 +79,18 @@ body:not(.dark) #sun {
 .lang-switch li,
 .lang-switch ul,
 .logo-switches {
-    display: inline-flex
+    display: inline-flex;
+    margin: auto 4px;
+}
+
+.lang-switch {
+    display: flex;
+    flex-wrap: inherit
 }
 
 .lang-switch a {
     font-size: 16px;
     font-weight: 500;
-    margin: 0 8px
 }
 
 .logo-switches {

layouts/partials/header.html

@@ -50,6 +50,7 @@
 <header class="header">
     <nav class="nav">
         <div class="logo">
+            {{- if .Title }}
             <a href="{{ "" | absLangURL }}" accesskey="h" title="{{ .Site.Params.label.text | default .Site.Title }} (Alt + H)">
                 {{- if .Site.Params.label.icon }}
                 <img src="{{- .Site.Params.label.icon -}}" alt="logo" aria-label="logo"
@@ -57,10 +58,10 @@
                 {{- end -}}
                 {{- .Site.Params.label.text | default .Site.Title -}}
             </a>
+            {{- end }}
             <span class="logo-switches">
                 {{- if (not .Site.Params.disableThemeToggle) }}
-                <span class="theme-toggle" title="(Alt + T)">
+                <a id="theme-toggle" accesskey="t" title="(Alt + T)">
-                    <a id="theme-toggle" accesskey="t">
                     <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                         stroke-linejoin="round">
@@ -80,13 +81,13 @@
                         <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                     </svg>
                 </a>
-                </span>
                 {{- end}}
                 {{ $lang := .Lang}}
+                {{ $separator := or .Title (not .Site.Params.disableThemeToggle)}}
                 {{- with $.Site.Home.AllTranslations }}
-                <span class="lang-switch">
+
-                    <span>|</span>
+                <ul class="lang-switch">
-                    <ul>
+                    {{- if $separator }}<li>|</li>{{ end }}
                     {{- range . -}}
                     {{- if ne $lang .Lang }}
                     <li>
@@ -102,12 +103,11 @@
                     {{- end -}}
                     {{- end}}
                 </ul>
-                </span>
                 {{- end }}
             </span>
         </div>
         {{- $currentPage := . }}
-        <ul class="menu" id="menu" onscroll="menu_on_scroll()">
+        <ul id="menu" onscroll="menu_on_scroll()">
             {{- range .Site.Menus.main }}
             {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
             {{- $page_url:= $currentPage.Permalink  | absLangURL }}