perf: replace image with text in language switch

Former-commit-id: cc3ce6bb87616b49b94e5c8a15e24930254e4354

1 files changed, 17 insertions, 5 deletions

diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index 1081cf5c..35d997e8 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -1,6 +1,7 @@
 <header class="pagefind-exclude">
   <!-- Header Title -->
   <div class="flex flex-col items-center gap-2">
+    <!-- Logo -->
     <div class="group relative w-full flex flex-col items-center">
       <div class="group-hover:opacity-30 transition-opacity duration-500">
           {{ partial "components/logo" (dict "imageClass" "w-[10rem]") }}
@@ -16,6 +17,7 @@
           </p>
       </div>
     </div>
+    <!-- Site Name -->
     <a class="text-8 font-900 text-center tracking-widest
         xerox hover:no-underline"
         href="{{ .Site.LanguagePrefix }}/"
@@ -23,7 +25,9 @@
     >
   </div>
   <!-- Navigation -->
-  <div class="flex justify-center items-center gap-3 pl-4 text-size-sm md:text-size-base">
+  {{ $navOffset := "pl-6" }}
+  {{ $langButtonSize := "w-4 h-4" }}
+  <div class="flex justify-center items-center gap-3 text-size-sm md:text-size-base {{ $navOffset }}">
       <nav class="my-4 flex justify-center items-center w-fit rounded-4 overflow-hidden">
         {{ range .Site.Params.nav }}
         <a class="inline-block py-1 px-[0.35rem] md:px-2 first:pl-3 last:pr-3
@@ -38,11 +42,19 @@
       </nav>
 
       {{- $lang := .Site.Language.Lang -}}
-      {{- $switch := dict "en" (dict "url" "/zh/" "label" "切换至中文") "zh" (dict "url" "/en/" "label" "Switch to English") -}}
+      {{- $switch := dict
+        "en" (dict "url" "/zh/" "label" "ZH" "title" "查看中文博客")
+        "zh" (dict "url" "/en/" "label" "EN" "title" "View English Blog") -}}
       {{- $entry := index $switch $lang -}}
-      <a href="{{ $entry.url }}" data-umami-event="🌍 Switch Language"
-          class="no-swup" title="{{ $entry.label }}">
-        <img src="/img/globe.svg" class="dark:invert block w-[1.2em] h-[1.2em]" alt="A globe.">
+      <a
+          href="{{ $entry.url }}"
+          data-umami-event="🌍 Switch Language"
+          class="block rounded-full text-center hover:no-underline {{ $langButtonSize }}
+            bg-neutral/10 border-1 border-[var(--text-color)] border-solid
+            bg-[var(--block-background-color)] leading-[0.6rem]"
+            title="{{ $entry.title }}"
+      >
+        <span class="text-size-[0.5rem] font-extrabold">{{ $entry.label }}</span>
       </a>
   </div>
 </header>