Fixed chevron of language dropdown and its color scheme on mobile

osori-db · Oct 22, 2023 · 68a4706 · 68a4706
1 parent 674649d
commit 68a4706
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/_includes/homepage_header.html b/_includes/homepage_header.html
@@ -23,7 +23,7 @@
                     {{ site.languageNames.en }}
                     {% endif %}
                 </button>
-                <i class="change-language-btn fa-solid fa-chevron-down pl-3" onclick="showLanguageOptions()"></i>
+                <i id="chevron-icon" class="change-language-btn fa-solid fa-chevron-down pl-3" onclick="showLanguageOptions()"></i>
             </div>
             <div class="homepage-dropdown-content" id="language-dropdown">
                 {% if site.lang == site.languages[0] %}
@@ -42,8 +42,15 @@
         window.onclick = function (e) {
             if (!e.target.matches('.change-language-btn')) {
                 var languageDropdown = document.getElementById("language-dropdown");
+                var chevronIcon = document.getElementById("chevron-icon");
+
                 if (languageDropdown.classList.contains('show')) {
                     languageDropdown.classList.remove('show');
+                    chevronIcon.classList.remove('fa-chevron-down');
+                    chevronIcon.classList.add('fa-chevron-up');
+                } else {
+                    chevronIcon.classList.remove('fa-chevron-up');
+                    chevronIcon.classList.add('fa-chevron-down');
                 }
             }
         }

diff --git a/_sass/color_schemes/dark_theme.scss b/_sass/color_schemes/dark_theme.scss
@@ -147,4 +147,17 @@ a {
 
 .main-header {
     background-color: $body-background-color !important;
+}
+
+@media (max-width: 799.4px) {
+
+    .shared-language-btn,
+    .chevron-icon {
+        color: $teal;
+    }
+
+    .homepage-dropdown-content a,
+    .header-dropdown-content a {
+        color: $teal !important;
+    }
 }
diff --git a/_sass/color_schemes/light_theme.scss b/_sass/color_schemes/light_theme.scss
@@ -111,4 +111,12 @@ $hover-sidebar-links-color: #ebedf5;
 
 .main-header {
     background-color: $white !important;
+}
+
+@media (max-width: 799.4px) {
+
+    .shared-language-btn,
+    .chevron-icon {
+        color: $purple-000;
+    }
 }