fix: mobile icon alignments

HEIGE-PCloud · Mar 29, 2024 · ea7dc16 · ea7dc16
1 parent 520090b
commit ea7dc16
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -602,6 +602,10 @@ ul {
   display: inline-block;
 }
 
+.tw-h-10 {
+  height: 2.5rem;
+}
+
 .tw-max-h-4 {
   max-height: 1rem;
 }
@@ -610,6 +614,10 @@ ul {
   max-height: 2rem;
 }
 
+.tw-w-full {
+  width: 100%;
+}
+
 .tw-translate-y-\[-2px\] {
   --tw-translate-y: -2px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -142,7 +142,7 @@
                     <input type="text"
                         placeholder="{{ .Site.Params.search.placeholder | default (T `searchPlaceholder`) }}"
                         id="search-input-mobile">
-                    <button class="search-button search-toggle" id="search-toggle-mobile" title="{{ T `search` }}">
+                    <button class="search-button search-toggle tw-h-10" id="search-toggle-mobile" title="{{ T `search` }}">
                         {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "search") }}
                     </button>
                     <button class="search-button search-clear" id="search-clear-mobile" title="{{ T `clear` }}">
@@ -169,7 +169,7 @@
             </a>
             {{- end -}}
             {{- if eq .Site.Params.header.themeChangeMode "select" -}}
-            <button class="menu-item theme-select" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
+            <button class="menu-item theme-select tw-w-full" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
                 {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "adjust") }}
                 <select class="color-theme-select" id="theme-select-mobile" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
                     <option value="light">{{ T "Light" }}</option>
@@ -179,12 +179,12 @@
                 </select>
             </button>
             {{- else -}}
-            <button class="menu-item theme-switch" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
+            <button class="menu-item theme-switch tw-w-full" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
                 {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "adjust") }}
             </button>
             {{- end -}}
             {{- if .Site.IsMultiLingual -}}
-            <button class="menu-item" title="{{ T " selectLanguage" }}">
+            <button class="menu-item tw-w-full" title="{{ T " selectLanguage" }}">
                 {{- .Language.LanguageName -}}
                 {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "chevron-right") }}
                 <select class="language-select" title="{{ T " selectLanguage" }}" onchange="location = this.value;">