perf: replace image with text in language switch

2 files changed, 17 insertions, 7 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>
diff --git a/static/img/globe.svg b/static/img/globe.svg
deleted file mode 100644
index 95c185c4..00000000
--- a/static/img/globe.svg
+++ /dev/null
@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M 16 4 C 9.382813 4 4 9.382813 4 16 C 4 22.617188 9.382813 28 16 28 C 22.617188 28 28 22.617188 28 16 C 28 9.382813 22.617188 4 16 4 Z M 16 6 C 17.96875 6 19.796875 6.585938 21.34375 7.5625 L 20.53125 7.65625 L 20.71875 9.65625 L 19.65625 9.1875 L 18.78125 9.9375 L 18.9375 12 L 21.09375 11.3125 L 23.78125 12.1875 L 23.09375 13.4375 L 21.46875 12.4375 L 19.71875 12.6875 L 18 13.96875 L 17.03125 16.96875 L 18.96875 18.5625 C 18.96875 18.5625 20.957031 18.21875 21.0625 18.21875 C 21.167969 18.21875 21.90625 20.03125 21.90625 20.03125 L 20.3125 25.03125 C 19.011719 25.652344 17.542969 26 16 26 C 15.683594 26 15.371094 25.964844 15.0625 25.9375 L 13.96875 24.03125 L 15.03125 20.03125 L 11 17 L 7.28125 17 L 6.3125 15.03125 L 9 12.90625 L 13 11 L 12.40625 8.34375 L 14.125 7.96875 L 14.9375 9.09375 L 17.9375 8.53125 L 17.40625 6.21875 L 15.1875 6.0625 C 15.453125 6.042969 15.726563 6 16 6 Z M 14.875 6.0625 L 13.3125 6.71875 L 12.5625 6.59375 C 13.300781 6.324219 14.066406 6.152344 14.875 6.0625 Z M 6.0625 16.78125 L 7.03125 17.90625 L 7.03125 19.96875 L 8.90625 22.03125 L 10.0625 22.03125 L 12.90625 25.53125 C 9.132813 24.308594 6.378906 20.890625 6.0625 16.78125 Z"/></svg>
\ No newline at end of file