From 7eb1b753cc81fc1a751f0dbf22715c1b758e9422 Mon Sep 17 00:00:00 2001
From: shubham <oulkarshubhu@gmail.com>
Date: Wed, 12 Mar 2025 10:14:15 +0530
Subject: [PATCH 1/8] fix a11y theme btn

---
 _includes/header.html | 4 ++--
 css/style.css         | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 64e92a3dec..e6a5371a14 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -242,10 +242,10 @@
     </ul>
   </div>
   <div class="header-right">
-    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <button id="theme-icon-container" class="theme-toggle" title="toggle theme">
       <i class="fa fa-moon-o fa-2x hidden-dark"></i>
       <span class="sun-icon hidden-light"></span>
-    </div>
+    </button>
     {% include language-picker.html %}
     {% include language-picker-mobile.html %}
   </div>
diff --git a/css/style.css b/css/style.css
index e20c89a363..23a7d7590b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -616,11 +616,15 @@ footer {
   font-size: 20px;
 }
 
-/* navigation */
-#theme-icon-container {
+/* theme btn */
+button#theme-icon-container {
   cursor: pointer;
+  appearance: none;
+  background-color: inherit;
+  border: 0;
 }
 
+/* navigation */
 #navbar {
   line-height: 30px;
   display: flex;

From 7abf668421de266ec42cf842e1e926f424f63dee Mon Sep 17 00:00:00 2001
From: shubham <oulkarshubhu@gmail.com>
Date: Thu, 13 Mar 2025 14:34:05 +0530
Subject: [PATCH 2/8] fix a11y for language picker button

---
 _includes/header.html          |  2 +-
 _includes/language-picker.html | 47 +++++++++------------
 css/style.css                  | 76 +++++++++++++++++++++++++++++++++-
 3 files changed, 95 insertions(+), 30 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index e6a5371a14..89d858ade4 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -242,7 +242,7 @@
     </ul>
   </div>
   <div class="header-right">
-    <button id="theme-icon-container" class="theme-toggle" title="toggle theme">
+    <button id="theme-icon-container" type="button" class="theme-toggle" title="change theme">
       <i class="fa fa-moon-o fa-2x hidden-dark"></i>
       <span class="sun-icon hidden-light"></span>
     </button>
diff --git a/_includes/language-picker.html b/_includes/language-picker.html
index dece43cddd..17b79b66ba 100644
--- a/_includes/language-picker.html
+++ b/_includes/language-picker.html
@@ -1,28 +1,21 @@
-<div id="navbar">
-  <ul id="navmenu">
-    {% assign url_parts = page.url | split: '/' %}
-
-    {% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
-
-    <li class="submenu">
-      <div id="current-lang" class="current-lang"></div>
-      <div id="languageData"
-      data-languages='{{ site.data.languages | jsonify }}'
-      style="display:none;">
-      </div>
-      <ul class="submenu-content">
-        {% for lang in site.data.languages %}
-        <li>
-          <a href="/{{ lang.code }}/{{ url_remainder }}">
-            {% if lang.code | to_s == current_lang | to_s %}
-              <strong>{{ lang.name }}</strong>
-            {% else %}
-              {{ lang.name }}
-            {% endif %}
-          </a>
-        </li>
-        {% endfor %}
-      </ul>
-    </li>
-  </ul>
+<div class="desktop-lang-switcher">
+{% assign url_parts = page.url | split: '/' %}
+{% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
+<button class="lang-btn" type="button" aria-haspopup="menu" aria-label="Change language">
+  <span id="current-lang">English</span>
+</button>
+<ul class="lang-list submenu-content" aria-labelledby="current-lang" >
+  {% for lang in site.data.languages %}
+  <li>
+    <a href="/{{ lang.code }}/{{ url_remainder }}">
+      {% if lang.code | to_s == current_lang | to_s %}
+        <strong>{{ lang.name }}</strong>
+      {% else %}
+        {{ lang.name }}
+      {% endif %}
+    </a>
+  </li>
+  {% endfor %}
+</ul>
+<div id="languageData" data-languages='{{ site.data.languages | jsonify }}' style="display:none;"></div>
 </div>
diff --git a/css/style.css b/css/style.css
index 23a7d7590b..b6bcfbc7ef 100644
--- a/css/style.css
+++ b/css/style.css
@@ -616,14 +616,82 @@ footer {
   font-size: 20px;
 }
 
-/* theme btn */
-button#theme-icon-container {
+/* theme and lang btn */
+button#theme-icon-container,
+button.lang-btn {
   cursor: pointer;
   appearance: none;
   background-color: inherit;
   border: 0;
 }
 
+button.lang-btn {
+  color: var(--card-fg);
+  padding: 0.2rem;
+  font-size: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+
+  &::after {
+    content: "";
+    display: block;
+    width: 0.8em;
+    height: 0.5em;
+    background-color: var(--card-fg);
+    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+    cursor: pointer;
+    pointer-events: none;
+    transition: transform 0.2s ease-in-out;
+  }
+}
+
+div.desktop-lang-switcher {
+  position: relative;
+  > button.lang-btn {
+    &:is(:focus, :hover) {
+      & + ul {
+        display: block;
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+  }
+  /* enable lang list tabbing on keyboard focus */
+  &:focus-within .lang-list {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+  }
+
+  > ul.lang-list {
+    display: none;
+    opacity: 0;
+    position: absolute;
+    list-style: none;
+    visibility: hidden;
+    &:is(:hover, :focus) {
+      display: block;
+      opacity: 1;
+      visibility: visible;
+    }
+    li  a {
+      display: block;
+      padding: 5px 20px 5px 20px;
+      text-decoration: none;
+      &:is(:hover, :focus) {
+        background: var(--hover-bg);
+      }
+    }
+  }
+
+  /* rotate arrow */
+  &:is(:hover,:focus-within) button.lang-btn::after {
+    transform: rotate(180deg);
+  }
+}
+
 /* navigation */
 #navbar {
   line-height: 30px;
@@ -1399,6 +1467,10 @@ blockquote {
     padding-inline: 32px;
   }
 
+  .desktop-lang-switcher {
+    display: none;
+  }
+
   #mobile-menu {
     display: block;
   }

From f58105e8948a23019df9cdf77441ad9e4d4e65bb Mon Sep 17 00:00:00 2001
From: shubham <oulkarshubhu@gmail.com>
Date: Thu, 13 Mar 2025 14:56:21 +0530
Subject: [PATCH 3/8] remove unnecessary css selectors

---
 _includes/header.html          | 2 +-
 _includes/language-picker.html | 2 +-
 css/style.css                  | 7 +------
 js/theme.js                    | 4 ++--
 4 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 89d858ade4..9af4f71f45 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -242,7 +242,7 @@
     </ul>
   </div>
   <div class="header-right">
-    <button id="theme-icon-container" type="button" class="theme-toggle" title="change theme">
+    <button type="button" class="theme-btn" title="change theme">
       <i class="fa fa-moon-o fa-2x hidden-dark"></i>
       <span class="sun-icon hidden-light"></span>
     </button>
diff --git a/_includes/language-picker.html b/_includes/language-picker.html
index 17b79b66ba..c6de5562ef 100644
--- a/_includes/language-picker.html
+++ b/_includes/language-picker.html
@@ -2,7 +2,7 @@
 {% assign url_parts = page.url | split: '/' %}
 {% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
 <button class="lang-btn" type="button" aria-haspopup="menu" aria-label="Change language">
-  <span id="current-lang">English</span>
+  <span id="current-lang"></span>
 </button>
 <ul class="lang-list submenu-content" aria-labelledby="current-lang" >
   {% for lang in site.data.languages %}
diff --git a/css/style.css b/css/style.css
index b6bcfbc7ef..c1c4b22ff3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -617,7 +617,7 @@ footer {
 }
 
 /* theme and lang btn */
-button#theme-icon-container,
+button.theme-btn,
 button.lang-btn {
   cursor: pointer;
   appearance: none;
@@ -1591,9 +1591,4 @@ blockquote {
   .submenu-content li {
     border-bottom: 1px solid var(--border);
   }
-
-  #theme-icon-container{
-    z-index: 10000;
-  }
-
 }
diff --git a/js/theme.js b/js/theme.js
index 4573fdae7c..5f7d5ed8fc 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -2,7 +2,7 @@ const themeWatcher = watchColorSchemeChange((colorScheme) => {
   if (!hasLocalStorage()) {
     document?.addEventListener('DOMContentLoaded', () => {
       // remove icon - toggle not supported
-      document.querySelector('#theme-icon-container').remove()
+      document.querySelector('.theme-btn').remove()
       toggleSystemTheme(colorScheme)
     })
   } else {
@@ -35,7 +35,7 @@ const themeWatcher = watchColorSchemeChange((colorScheme) => {
     document.addEventListener('DOMContentLoaded', () => {
 
       document
-        .querySelector('.theme-toggle')
+        .querySelector('.theme-btn')
         .addEventListener('click', toggleLocalStorageTheme)
     })
   }

From af2bd89b08c7ed80988856e7d795ee6e0b58162b Mon Sep 17 00:00:00 2001
From: shubham <oulkarshubhu@gmail.com>
Date: Mon, 17 Mar 2025 09:38:00 +0530
Subject: [PATCH 4/8] Rename toggleSystemTheme to setTheme

---
 js/theme.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/theme.js b/js/theme.js
index 5f7d5ed8fc..f4d17b8cc5 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -3,7 +3,7 @@ const themeWatcher = watchColorSchemeChange((colorScheme) => {
     document?.addEventListener('DOMContentLoaded', () => {
       // remove icon - toggle not supported
       document.querySelector('.theme-btn').remove()
-      toggleSystemTheme(colorScheme)
+      setTheme(colorScheme);
     })
   } else {
     // user's PS system theme settings

From 3bc366678fa4483dc237e7d98f76c8c5063b6437 Mon Sep 17 00:00:00 2001
From: shubham <oulkarshubhu@gmail.com>
Date: Tue, 18 Mar 2025 18:25:20 +0530
Subject: [PATCH 5/8] correct font url for thai and korean translations

---
 css/langs/ko.css | 2 +-
 css/langs/th.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/langs/ko.css b/css/langs/ko.css
index d8a829a13c..aabe8144c2 100644
--- a/css/langs/ko.css
+++ b/css/langs/ko.css
@@ -1,6 +1,6 @@
 /* For image callouts in writing-middleware.md */
 
-@import url('../fonts/ko/Pretendard.css');
+@import url('../../fonts/ko/Pretendard.css');
 
 html, body {font-family: Pretendard, Arial, sans-serif;}
 
diff --git a/css/langs/th.css b/css/langs/th.css
index 98db49b0af..c69fbb6228 100644
--- a/css/langs/th.css
+++ b/css/langs/th.css
@@ -1,6 +1,6 @@
 @font-face {
   font-family: 'TH SarabunNew';
-  src: url("../fonts/th/THSarabunNew.woff")
+  src: url("../../fonts/th/THSarabunNew.woff")
 }
 
 #description .description {

From 177a849ac20261616bf5a3bff56ecf91df6ba5b3 Mon Sep 17 00:00:00 2001
From: shubham <oulkarshubhu@gmail.com>
Date: Tue, 18 Mar 2025 20:08:38 +0530
Subject: [PATCH 6/8] fix bug: highlighting current language

---
 _includes/language-picker.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/_includes/language-picker.html b/_includes/language-picker.html
index c6de5562ef..d27b366b20 100644
--- a/_includes/language-picker.html
+++ b/_includes/language-picker.html
@@ -1,6 +1,7 @@
 <div class="desktop-lang-switcher">
 {% assign url_parts = page.url | split: '/' %}
 {% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
+{% assign current_lang = page.lang %}
 <button class="lang-btn" type="button" aria-haspopup="menu" aria-label="Change language">
   <span id="current-lang"></span>
 </button>
@@ -8,7 +9,7 @@
   {% for lang in site.data.languages %}
   <li>
     <a href="/{{ lang.code }}/{{ url_remainder }}">
-      {% if lang.code | to_s == current_lang | to_s %}
+      {% if lang.code == current_lang %}
         <strong>{{ lang.name }}</strong>
       {% else %}
         {{ lang.name }}

From 43d6f63d17d5c544d0bb96e7aeaa1eb8667cbbda Mon Sep 17 00:00:00 2001
From: shubham <oulkarshubhu@gmail.com>
Date: Tue, 18 Mar 2025 20:29:08 +0530
Subject: [PATCH 7/8] add correct color on inactive  links

---
 css/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/css/style.css b/css/style.css
index a4ad167837..efafea64e7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -699,6 +699,7 @@ div.desktop-lang-switcher {
       display: block;
       padding: 5px 20px 5px 20px;
       text-decoration: none;
+      color: var(--card-fg);
       &:is(:hover, :focus) {
         background: var(--hover-bg);
       }

From 3a016dfd04b1e108e9e2b5c398e13719831fb756 Mon Sep 17 00:00:00 2001
From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com>
Date: Sun, 23 Mar 2025 03:16:33 +0000
Subject: [PATCH 8/8] add id on theme btn

---
 _includes/header.html | 2 +-
 js/theme.js           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 9af4f71f45..699a78d04b 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -242,7 +242,7 @@
     </ul>
   </div>
   <div class="header-right">
-    <button type="button" class="theme-btn" title="change theme">
+    <button id="theme-toggle" type="button" class="theme-btn" title="change theme">
       <i class="fa fa-moon-o fa-2x hidden-dark"></i>
       <span class="sun-icon hidden-light"></span>
     </button>
diff --git a/js/theme.js b/js/theme.js
index f4d17b8cc5..5e18e0481f 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -2,7 +2,7 @@ const themeWatcher = watchColorSchemeChange((colorScheme) => {
   if (!hasLocalStorage()) {
     document?.addEventListener('DOMContentLoaded', () => {
       // remove icon - toggle not supported
-      document.querySelector('.theme-btn').remove()
+      document.querySelector('#theme-toggle').remove()
       setTheme(colorScheme);
     })
   } else {
@@ -35,7 +35,7 @@ const themeWatcher = watchColorSchemeChange((colorScheme) => {
     document.addEventListener('DOMContentLoaded', () => {
 
       document
-        .querySelector('.theme-btn')
+        .querySelector('#theme-toggle')
         .addEventListener('click', toggleLocalStorageTheme)
     })
   }