Fixed text alignment in light/dark switcher

boostorg · Sep 5, 2023 · e891df5 · e891df5
1 parent 89ec945
commit e891df5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 26 deletions.
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -1361,6 +1361,14 @@ select.dropdown {
   margin-left: 1rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.ml-0\.5 {
+  margin-left: 0.125rem;
+}
+
 .block {
   display: block;
 }
@@ -1453,22 +1461,10 @@ select.dropdown {
   height: 1rem;
 }
 
-.h-96 {
-  height: 24rem;
-}
-
 .max-h-96 {
   max-height: 24rem;
 }
 
-.max-h-3 {
-  max-height: 0.75rem;
-}
-
-.max-h-36 {
-  max-height: 9rem;
-}
-
 .w-full {
   width: 100%;
 }
@@ -2003,6 +1999,11 @@ select.dropdown {
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
 
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
 .border-orange {
   --tw-border-opacity: 1;
   border-color: rgb(255 159 0 / var(--tw-border-opacity));
@@ -2046,16 +2047,6 @@ select.dropdown {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.border-gray-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity));
-}
-
-.border-gray-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
-}
-
 .bg-red-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));

diff --git a/templates/includes/_header.html b/templates/includes/_header.html
@@ -107,7 +107,7 @@
                   :class="{'font-bold': mode === 'light', 'font-medium': mode !== 'light' }"
                   class="block py-2 text-xs cursor-pointer dark:text-white text-charcoal dark:hover:text-orange hover:text-orange"
                   >
-                  <i class="inline-block mr-1 font-semibold fas fa-sun text-gold"></i>
+                  <i class="inline-block mr-1 ml-0.5 font-semibold fas fa-sun text-gold"></i>
                   Light Mode
                 </a>
 
@@ -116,7 +116,7 @@
                   :class="{'font-bold': mode === 'dark', 'font-medium': mode !== 'dark' }"
                   class="block py-2 text-xs cursor-pointer dark:text-white text-charcoal dark:hover:text-orange hover:text-orange"
                   >
-                  <i class="inline-block mr-1 fas fa-moon text-sky-600"></i>
+                  <i class="inline-block mr-1 ml-1 fas fa-moon text-sky-600"></i>
                   Dark Mode
                 </a>
               </div>
@@ -238,7 +238,7 @@
                 :class="{'font-bold': mode === 'light', 'font-medium': mode !== 'light' }"
                 class="block py-2 text-xs cursor-pointer dark:text-white text-charcoal dark:hover:text-orange hover:text-orange"
                 >
-                <i class="inline-block mr-1 font-semibold fas fa-sun text-gold"></i>
+                <i class="inline-block ml-0.5 mr-1 font-semibold fas fa-sun text-gold"></i>
                 Light Mode
               </a>
 
@@ -247,7 +247,7 @@
                 :class="{'font-bold': mode === 'dark', 'font-medium': mode !== 'dark' }"
                 class="block py-2 text-xs cursor-pointer dark:text-white text-charcoal dark:hover:text-orange hover:text-orange"
                 >
-                <i class="inline-block mr-1 fas fa-moon text-sky-600"></i>
+                <i class="inline-block ml-1 mr-1 fas fa-moon text-sky-600"></i>
                 Dark Mode
               </a>
             </div>