styling tweaks for language selector

reveal · Jun 4, 2024 · f3ba1f3 · f3ba1f3
1 parent 367e27d
commit f3ba1f3
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 13 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+}
diff --git a/css/header.scss b/css/header.scss
@@ -79,23 +79,16 @@
   @apply fill-current;
 }
 
-.header-lang {
-  cursor: pointer;
-}
 .header-lang-select {
   display: none;
-  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
+  background-color: #fff;
   cursor: pointer;
   transform-origin: top;
   white-space: nowrap;
+  z-index: 0;
+  transform: translateX(-50%);
+  left: 50%;
 }
 .header-lang:hover .header-lang-select {
   display: block;
 }
-.header-lang-select .r-anchor-background {
-  background-color: #fff;
-  z-index: 1;
-}
-.header-lang-select .r-anchor-label {
-  z-index: 2;
-}
diff --git a/src/_includes/header.njk b/src/_includes/header.njk
@@ -22,9 +22,9 @@
           <a class="inline-block py-3 px-5 text-gray-800 hover:text-gray-900 rounded align-middle">
             {% include "images/icons/translate.svg" %}
           </a>
-          <div class="header-lang-select absolute px-2 py-2 text-gray-800 hover:text-gray-900 rounded align-middle focus:outline-none">
+          <div class="header-lang-select absolute shadow-2xl px-2 py-2 text-gray-800 rounded-lg align-middle focus:outline-none">
           {% for localed in locales -%}
-        <a href="/{{ localed.code }}/{{ page.url | replace(locale, '') | replace('/', '') }}" hreflang="{{ localed.code }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-200">{{ localed.label }}</a>
+        <a href="/{{ localed.code }}/{{ page.url | replace(locale, '') | replace('/', '') }}" hreflang="{{ localed.code }}" class="block px-4 py-2 text-sm text-gray-700 hover:text-gray-900">{{ localed.label }}</a>
   {% endfor -%}
           </div>
         </li>