From 162e7ada227e1171e5d6efa74f2d7ade514d1216 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Thu, 6 Feb 2025 15:24:34 +0000
Subject: [PATCH] chore: optimize title and icon positions

---
 src/components/LanguageSwitcher.astro | 35 ++++++++++++++-------------
 src/components/MainHeader.astro       |  3 +--
 src/components/MobileHeader.astro     | 17 +++++++------
 src/components/ThemeToggle.astro      |  3 ++-
 src/layouts/Layout.astro              | 12 +++------
 src/styles/photoswipe.css             |  4 +--
 6 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/src/components/LanguageSwitcher.astro b/src/components/LanguageSwitcher.astro
index e849e4e..fb0b57f 100644
--- a/src/components/LanguageSwitcher.astro
+++ b/src/components/LanguageSwitcher.astro
@@ -16,14 +16,15 @@ function getLanguageDisplayName(code: string) {
 <button
   type="button"
   id="language-switcher"
-  class="absolute right-25.6 top-20 z-9 aspect-square w-6.6 c-secondary active:scale-90"
+  class="absolute right-[calc(9.94vw+2.8rem)] top-[calc(7.3vw+2.68rem)] z-9 aspect-square w-6.6 c-secondary active:scale-90"
+  lg="hidden"
   aria-label={`Current Language: ${getLanguageDisplayName(currentLocale)}. Click to switch to next language.`}
 >
-  <svg 
-  xmlns="http://www.w3.org/2000/svg" 
-  viewBox="0 0 24 24" 
-  class="h-full w-full"
-  aria-hidden="true"
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    class="h-full w-full"
+    aria-hidden="true"
   >
     <path d="M19 21 12.3 2h-1L4.7 21l-2.5.2v.8h6.3v-.8L5.7 21l2-5.9h7.5l2 5.9-3.3.2v.8h7.9v-.8zM8 14.3l3.4-10.1 3.5 10.1z" fill="currentColor" />
   </svg>
@@ -37,15 +38,15 @@ document.addEventListener('astro:page-load', () => {
     const { pathname, search, hash } = window.location
     const segments = pathname.split('/').filter(Boolean)
     const firstSegment = segments[0] || ''
-    
+
     // Get current language or empty string if invalid
-    const currentLang = langs.includes(firstSegment) 
-      ? firstSegment 
+    const currentLang = langs.includes(firstSegment)
+      ? firstSegment
       : ''
-    
+
     const currentIndex = langs.indexOf(currentLang)
     const nextLang = langs[(currentIndex + 1) % langs.length]
-    
+
     const newPath = buildNewPath(currentLang, nextLang, segments, pathname) || '/'
     window.location.href = `${newPath}${search}${hash}`
   })
@@ -54,14 +55,14 @@ document.addEventListener('astro:page-load', () => {
 function buildNewPath(currentLang, nextLang, segments, pathname) {
   if (currentLang) {
     segments[0] = nextLang || segments[0]
-    
-    return nextLang 
-      ? `/${segments.join('/')}` 
+
+    return nextLang
+      ? `/${segments.join('/')}`
       : `/${segments.slice(1).join('/')}`
   }
-  
-  return nextLang 
-    ? `/${nextLang}${pathname}` 
+
+  return nextLang
+    ? `/${nextLang}${pathname}`
     : pathname
 }
 </script>
diff --git a/src/components/MainHeader.astro b/src/components/MainHeader.astro
index 4900d62..556cfb6 100644
--- a/src/components/MainHeader.astro
+++ b/src/components/MainHeader.astro
@@ -15,9 +15,8 @@ const marginBottom = {
 ---
 
 <header>
-  <h1>
+  <h1 class={`${marginBottom} text-12.8 c-primary font-bold font-title`}>
     <a
-      class={`${marginBottom} mt--5 text-12.8 c-primary font-bold font-title`}
       href={getLocalizedPath('/')}
       transition:name="site-title"
       data-disable-transition-on-theme
diff --git a/src/components/MobileHeader.astro b/src/components/MobileHeader.astro
index 4c8cd67..99c2b88 100644
--- a/src/components/MobileHeader.astro
+++ b/src/components/MobileHeader.astro
@@ -7,11 +7,12 @@ const currentPath = Astro.url.pathname
 const { getLocalizedPath } = getPagePath(currentPath)
 ---
 
-<a
-  class="mt--1.4 text-8.32 c-secondary font-bold font-title"
-  href={getLocalizedPath('/')}
-  transition:name="site-title"
-  data-disable-transition-on-theme
->
-  {title}
-</a>
+<header class="mt-4.7 text-8.6 c-secondary font-bold font-title lg:hidden">
+  <a
+    href={getLocalizedPath('/')}
+    transition:name="site-title"
+    data-disable-transition-on-theme
+  >
+    {title}
+  </a>
+</header>
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 667d7a0..35e11e4 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -60,7 +60,8 @@ window.addEventListener('pageshow', (event) => {
 <button
   aria-pressed="false"
   aria-label="Theme Toggle Button"
-  class="absolute right-9.6 top-19.8 z-9 aspect-square w-7 c-secondary active:scale-92"
+  class="absolute right-[calc(9.94vw-1.18rem)] top-[calc(7.3vw+2.6rem)] z-9 aspect-square w-7 c-secondary active:scale-90"
+  lg="hidden"
 >
   <svg
     viewBox="0 0 24 24"
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b138fc8..911bf78 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -34,8 +34,8 @@ const { isHome, isPost } = getPagePath(Astro.url.pathname);
   <body data-overlayscrollbars-initialize>
     <div
       class="mx-a max-w-492 h-dvh"
-      p="x-[calc(9.94vw-1.1784rem)] y-[calc(5.42vw+2.4488rem)] lg:(x-36 y-10.4167dvh)"
-      lg="grid cols-[1fr_22rem] rows-1 gap-[min(calc(16.8269vw-6.2727rem),18rem)]"
+      p="x-[calc(9.942vw-1.18rem)] y-[calc(7.3vw+0.52rem)] lg:(x-36 y-[max(10.4vh,7.8rem)])"
+      lg="grid cols-[1fr_22rem] rows-1 gap-[min(calc(16.83vw-6.27rem),18rem)]"
     >
       <div class={!isHome && isPost ? 'hidden lg:block' : ''}>
         <MainHeader />
@@ -43,13 +43,7 @@ const { isHome, isPost } = getPagePath(Astro.url.pathname);
         <Footer />
       </div>
 
-      {
-        !isHome && isPost && (
-          <div class="lg:hidden">
-            <MobileHeader />
-          </div>
-        )
-      }
+      {!isHome && isPost && <MobileHeader /> }
 
       <main class="col-start-1 row-start-1">
         <slot />
diff --git a/src/styles/photoswipe.css b/src/styles/photoswipe.css
index 1e93c20..3579196 100644
--- a/src/styles/photoswipe.css
+++ b/src/styles/photoswipe.css
@@ -4,7 +4,7 @@
 
 .pswp__button--zoom,
 .pswp__button--close {
-  --at-apply: 'mt-2 lg:mt-4 active:scale-92';
+  --at-apply: 'mt-2 lg:mt-4 active:scale-90';
 }
 
 .pswp__button--zoom svg:hover,
@@ -18,4 +18,4 @@
 
 .pswp__button--zoom {
   --at-apply: 'mr--6 lg:mr-0';
-}
\ No newline at end of file
+}