From 7c95eb9e5fdc4ae02e0517352057c186d5460342 Mon Sep 17 00:00:00 2001
From: Mandel Olaiya <mandeleolaiya15@icloud.com>
Date: Sun, 26 Apr 2026 12:34:03 +0200
Subject: [PATCH] Polish language switcher dropdown

---
 .gitignore                         |  3 +-
 mandelstudio/templates/layout.html | 47 ++++++++++++++++++++++++++++--
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 416ecf8..cd0f1c2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,4 +25,5 @@ pyvenv.cfg
 .coverage
 coverage.xml
 htmlcov/
-venv/
\ No newline at end of file
+venv/
+.venv/
diff --git a/mandelstudio/templates/layout.html b/mandelstudio/templates/layout.html
index a1135ff..66f5789 100644
--- a/mandelstudio/templates/layout.html
+++ b/mandelstudio/templates/layout.html
@@ -31,18 +31,61 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 0.3rem;
+    flex-direction: column;
+    gap: 1px;
+    color: #fff;
+    line-height: 1;
+    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
+  }
+  header .language-dropdown .dropdown-toggle:hover,
+  header .language-dropdown .dropdown-toggle:focus-visible {
+    transform: translateY(-1px);
+    box-shadow: 0 10px 22px rgba(15, 23, 42, .18);
   }
   header .language-dropdown .dropdown-toggle .language-icon,
   header .language-dropdown .dropdown-toggle .language-chevron {
     display: block;
   }
+  header .language-dropdown .dropdown-toggle .language-icon {
+    width: 18px;
+    height: 18px;
+  }
   header .language-dropdown .dropdown-toggle .language-chevron {
+    width: 10px;
+    height: 10px;
     opacity: .9;
+    transition: transform 120ms ease, opacity 120ms ease;
+  }
+  header .language-dropdown .dropdown-toggle.show .language-chevron {
+    transform: rotate(180deg);
+    opacity: 1;
+  }
+
+  header .language-dropdown .dropdown-menu {
+    min-width: 15rem;
+    padding: .5rem;
+    border-radius: 0.9rem;
+    border: 1px solid rgba(15, 23, 42, .08);
+    box-shadow: 0 16px 44px rgba(15, 23, 42, .18);
+  }
+  header .language-dropdown .dropdown-menu .dropdown-item {
+    border-radius: .65rem;
+    padding: .55rem .7rem;
+    font-weight: 600;
+    color: #0f172a;
+    transition: background-color 120ms ease, color 120ms ease;
+  }
+  header .language-dropdown .dropdown-menu .dropdown-item:hover,
+  header .language-dropdown .dropdown-menu .dropdown-item:focus-visible {
+    background: rgba(2, 132, 199, .10);
+    color: #0b5aa3;
   }
   header .language-dropdown .dropdown-menu svg {
-    width: 1.5rem;
+    width: 1.35rem;
     height: auto;
+    border-radius: .2rem;
+    box-shadow: 0 1px 0 rgba(15, 23, 42, .06);
+    flex: 0 0 auto;
   }
 </style>
 {% if cookie_jar.needs_approval %}