Merge pull request #1233 from MaikelChan/header-adjustments

Improve consistency in header's layout and size

layouts/partials/header/basic.html

@@ -35,7 +35,7 @@
             {{ partial "translations.html" . }}
 
             {{ if .Site.Params.enableSearch | default false }}
-            <button id="search-button" aria-label="Search" class="text-base hover:text-primary-600 dark:hover:text-primary-400 h-12"
+            <button id="search-button" aria-label="Search" class="text-base hover:text-primary-600 dark:hover:text-primary-400"
                 title="{{ i18n " search.open_button_title" }}">
                 {{ partial "icon.html" "search" }}
             </button>
@@ -45,12 +45,12 @@
             {{/* Appearance switch */}}
             {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
             <div
-                class="{{ if .Site.Params.footer.showScrollToTop | default true -}} ltr:mr-14 rtl:ml-14 {{- end }} cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400">
+                class="{{ if .Site.Params.footer.showScrollToTop | default true -}} ltr:mr-14 rtl:ml-14 {{- end }} flex items-center">
-                <button id="appearance-switcher" aria-label="Dark mode switcher" type="button">
+                <button id="appearance-switcher" aria-label="Dark mode switcher" type="button" class="text-base hover:text-primary-600 dark:hover:text-primary-400">
-                    <div class="flex items-center justify-center h-12 dark:hidden">
+                    <div class="flex items-center justify-center dark:hidden">
                         {{ partial "icon.html" "moon" }}
                     </div>
-                    <div class="items-center justify-center hidden h-12 dark:flex">
+                    <div class="items-center justify-center hidden dark:flex">
                         {{ partial "icon.html" "sun" }}
                     </div>
                 </button>
@@ -58,7 +58,7 @@
             {{ end }}
 
         </nav>
-        <div class="flex md:hidden items-center space-x-5 md:ml-12">
+        <div class="flex md:hidden items-center space-x-5 md:ml-12 h-12">
 
             <span></span>
 
@@ -73,11 +73,11 @@
 
             {{/* Appearance switch */}}
             {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
-            <button id="appearance-switcher-mobile" aria-label="Dark mode switcher" type="button" style="margin-right:5px">
+            <button id="appearance-switcher-mobile" aria-label="Dark mode switcher" type="button" class="text-base hover:text-primary-600 dark:hover:text-primary-400" style="margin-right:5px">
-                <div class="flex items-center justify-center h-12 dark:hidden">
+                <div class="flex items-center justify-center dark:hidden">
                     {{ partial "icon.html" "moon" }}
                 </div>
-                <div class="items-center justify-center hidden h-12 dark:flex">
+                <div class="items-center justify-center hidden dark:flex">
                     {{ partial "icon.html" "sun" }}
                 </div>
             </button>

layouts/partials/header/header-mobile-option-nested.html

@@ -1,11 +1,11 @@
 <li class="mt-1">
-    <a class="flex items-center">
+    <a class="flex items-center text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
         {{ if .Pre }}
         <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
             {{ partial "icon.html" .Pre }}
         </span>
         {{ end }}
-        <p class="text-bg font-bg text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+        <p class="text-bg font-bg" title="{{ .Title }}">
             {{ .Name | markdownify | emojify }}
         </p>
         <span>
@@ -16,13 +16,13 @@
 {{ range .Children }}
 <li class="mt-1">
     <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
-        ) }} target="_blank" {{ end }} class="flex items-center">
+        ) }} target="_blank" {{ end }} class="flex items-center text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
         {{ if .Pre }}
         <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
             {{ partial "icon.html" .Pre }}
         </span>
         {{ end }}
-        <p class="text-sm font-small text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+        <p class="text-sm font-small" title="{{ .Title }}">
             {{ .Name | markdownify | emojify }}
         </p>
     </a>

layouts/partials/header/header-mobile-option-simple.html

@@ -1,12 +1,12 @@
 <li class="mt-1">
     <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
-        ) }} target="_blank" {{ end }} class="flex items-center">
+        ) }} target="_blank" {{ end }} class="flex items-center text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
         {{ if .Pre }}
         <div {{ if and .Pre .Name}} class="mr-2" {{ end }}>
             {{ partial "icon.html" .Pre }}
         </div>
         {{ end }}
-        <p class="text-bg font-bg text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+        <p class="text-bg font-bg" title="{{ .Title }}">
             {{ .Name | markdownify | emojify }}
         </p>
     </a>

layouts/partials/header/header-option-nested.html

@@ -6,7 +6,7 @@
     </span>
     {{ end }}
     <a {{ if .URL }} href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
-      target="_blank" {{ end }} {{ end }} class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+      target="_blank" {{ end }} {{ end }} class="text-base font-medium text-gray-500 hover:text-primary-600 dark:hover:text-primary-400" title="{{ .Title }}">
       {{ .Name | markdownify | emojify }}
     </a>
     <span>
@@ -18,13 +18,13 @@
       <div class="flex flex-col space-y-3">
         {{ range .Children }}
         <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
-          target="_blank" {{ end }} class="flex items-center">
+          target="_blank" {{ end }} class="flex items-center text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
           {{ if .Pre }}
           <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
             {{ partial "icon.html" .Pre }}
           </span>
           {{ end }}
-          <p class="text-sm font-sm text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+          <p class="text-sm font-sm" title="{{ .Title }}">
             {{ .Name | markdownify | emojify }}
           </p>
         </a>

layouts/partials/header/header-option-simple.html

@@ -1,11 +1,11 @@
 <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }} target="_blank" {{
-    end }} class="flex items-center">
+    end }} class="flex items-center text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
     {{ if .Pre }}
     <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
         {{ partial "icon.html" .Pre }}
     </span>
     {{ end }}
-    <p class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+    <p class="text-base font-medium" title="{{ .Title }}">
         {{ .Name | markdownify | emojify }}
     </p>
 </a>

layouts/partials/translations.html

@@ -1,7 +1,7 @@
 {{ if .IsTranslated }}
 <div>
   <div class="cursor-pointer flex items-center nested-menu">
-    <a href="#" class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+    <a href="#" class="text-base font-medium text-gray-500 hover:text-primary-600 dark:hover:text-primary-400" title="{{ .Title }}">
       {{- i18n "global.language" | markdownify | emojify -}}
     </a>
   </div>
@@ -10,7 +10,7 @@
       <div class="flex flex-col space-y-3">
         {{ range .AllTranslations }}
         <a href="{{ .RelPermalink }}" class="flex items-center">
-          <p class="text-sm font-sm text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+          <p class="text-sm font-sm text-gray-500 hover:text-primary-600 dark:hover:text-primary-400" title="{{ .Title }}">
             {{ .Language.Params.displayName | emojify }}
           </p>
         </a>