style(header): enhance logo and theme switch layout for better alignment

Author: adityatelange

assets/css/common/header.css

@@ -19,26 +19,27 @@
 }
 
 .logo {
-    flex-wrap: inherit;
+    align-items: center;
+    column-gap: 0.55rem;
+    flex-wrap: wrap;
 }
 
 .logo a {
     font-size: 24px;
     font-weight: 700;
+    display: flex;
+    align-items: center;
+    column-gap: 0.55rem;
 }
 
-.logo a img, .logo a svg {
-    display: inline;
-    vertical-align: middle;
+.logo a img,
+.logo a svg {
     pointer-events: none;
-    transform: translate(0, -10%);
     border-radius: 6px;
-    margin-inline-end: 8px;
 }
 
 .theme-toggle {
-    font-size: 26px;
-    margin: auto 4px;
+    padding: 0 0.4rem;
 }
 
 [data-theme="dark"] .moon {
@@ -49,14 +50,41 @@
     display: none;
 }
 
+.logo-switches {
+    display: inline-flex;
+    gap: 0.4rem;
+    align-items: inherit;
+    min-height: stretch;
+    flex-wrap: inherit;
+}
+
+.logo-switches>* {
+    min-height: inherit;
+    align-items: center;
+    display: inline-flex;
+}
+
+.lang-menu * {
+    display: inherit;
+    min-height: inherit;
+    align-items: inherit;
+}
+
+.lang-menu a {
+    font-size: 1rem;
+    font-weight: 500;
+    padding: 0 0.4rem;
+    display: inline-flex
+}
+
 .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);
 }
 
@@ -68,25 +96,3 @@
     font-weight: 500;
     border-bottom: 2px solid currentColor;
 }
-
-.lang-switch li,
-.lang-switch ul,
-.logo-switches {
-    display: inline-flex;
-    margin: auto 4px;
-}
-
-.lang-switch {
-    display: flex;
-    flex-wrap: inherit;
-}
-
-.lang-switch a {
-    margin: auto 3px;
-    font-size: 16px;
-    font-weight: 500;
-}
-
-.logo-switches {
-    flex-wrap: inherit;
-}

layouts/partials/header.html

@@ -37,12 +37,12 @@
             <div class="logo-switches">
                 {{- if (not site.Params.disableThemeToggle) }}
                 <button id="theme-toggle" class="theme-toggle" accesskey="t" title="(Alt + T)" aria-label="Toggle theme">
-                    <svg class="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
+                    <svg class="moon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                         stroke-linejoin="round">
                         <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                     </svg>
-                    <svg class="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
+                    <svg class="sun" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                         stroke-linejoin="round">
                         <circle cx="12" cy="12" r="5"></circle>
@@ -61,9 +61,9 @@
                 {{- if (not site.Params.disableLangToggle) }}
                     {{- $lang := .Lang}}
                     {{- $separator := or $label_text (not site.Params.disableThemeToggle)}}
+                    {{- if $separator }}<span>|</span>{{ end }}
                     {{- with site.Home.Translations }}
-                    <ul class="lang-switch">
-                        {{- if $separator }}<li>|</li>{{ end }}
+                    <ul class="lang-menu">
                         {{- range . -}}
                         {{- if ne $lang .Lang }}
                         <li>