style: simplify homepage hero and improve theme switch

website/src/components/Hero.astro

@@ -4,12 +4,6 @@ const { t, local } = useTranslations(Astro.url.pathname);
 ---
 
 <section class="hero container" aria-labelledby="hero-title">
-  <a class="announcement" href="#start"
-    ><span class="status-dot"></span>{t("为你的车机，打开一种新可能")}<span
-      aria-hidden="true"
-      >↗</span
-    ></a
-  >
   <h1 id="hero-title">{t("让 CarPlay，")}<br /><span>{t("在浏览器里就位。")}</span></h1>
   <p class="hero-description">{t("一部 Android，一块车机屏幕。")}<br />{t("把 iPhone 的熟悉体验，带到你的每一次出发。")}</p>
   <div class="hero-actions">

website/src/components/SiteHeader.astro

@@ -15,17 +15,33 @@ import LanguageSwitch from "./LanguageSwitch.astro";
     <div class="header-actions">
       <LanguageSwitch />
       <button
-        class="icon-button theme-toggle"
+        class="theme-toggle"
         type="button"
         aria-label={t("切换到深色主题")}
+        title={t("切换到深色主题")}
         aria-pressed="false"
         hidden
       >
         <svg
+          class="theme-sun"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
-          stroke-width="1.6"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          aria-hidden="true"
+        >
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" />
+        </svg>
+        <svg
+          class="theme-moon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
           aria-hidden="true"
         >
           <path d="M20.5 13a8.5 8.5 0 0 1-9.5-9.5A8.5 8.5 0 1 0 20.5 13Z" />

website/src/i18n/en.ts

@@ -4,7 +4,6 @@ export const en = {
   "第三方声明 ↗": "Third-party notices ↗",
   "开源于 GPL-3.0 · Built for the road ahead.": "Open source under GPL-3.0 · Built for the road ahead.",
   "CarPlay 是 Apple Inc. 的商标。WheelPlay 是独立开源项目，与 Apple 或车厂无隶属关系。": "CarPlay is a trademark of Apple Inc. WheelPlay is an independent open-source project, unaffiliated with Apple or vehicle manufacturers.",
-  "为你的车机，打开一种新可能": "A new possibility for your car display",
   "让 CarPlay，": "Your CarPlay,",
   "在浏览器里就位。": "in your browser.",
   "一部 Android，一块车机屏幕。": "One Android device. One car display.",

website/src/scripts/theme.ts

@@ -18,12 +18,11 @@ function applyTheme(theme: Theme) {
   document.documentElement.dataset.theme = theme;
   const dark = theme === "dark";
   themeButton?.setAttribute("aria-pressed", String(dark));
-  themeButton?.setAttribute(
-    "aria-label",
-    english
-      ? dark ? "Switch to light theme" : "Switch to dark theme"
-      : dark ? "切换到浅色主题" : "切换到深色主题",
-  );
+  const label = english
+    ? dark ? "Switch to light theme" : "Switch to dark theme"
+    : dark ? "切换到浅色主题" : "切换到深色主题";
+  themeButton?.setAttribute("aria-label", label);
+  themeButton?.setAttribute("title", label);
   if (themeColor) themeColor.content = dark ? "#101720" : "#f8fafc";
 }
 

website/src/styles/global.css

@@ -194,6 +194,7 @@ h3 {
 }
 .site-header nav {
   display: flex;
+  white-space: nowrap;
   gap: 32px;
   color: var(--muted);
   font-size: 13px;
@@ -208,23 +209,60 @@ h3 {
   align-items: center;
   gap: 22px;
 }
-.icon-button {
-  width: 36px;
-  height: 36px;
+.theme-toggle {
+  --theme-cell: 28px;
+  --theme-gap: 4px;
+  position: relative;
+  isolation: isolate;
+  flex-shrink: 0;
+  height: 44px;
+  padding: 6px;
   display: grid;
+  grid-template-columns: repeat(2, var(--theme-cell));
+  gap: var(--theme-gap);
   place-items: center;
-  border: 1px solid transparent;
-  border-radius: 7px;
-  background: none;
-  color: var(--muted);
-}
-.icon-button:hover {
+  border: 1px solid var(--line);
+  border-radius: 999px;
   background: var(--soft);
-  border-color: var(--line);
+  color: var(--faint);
+  transition: border-color 0.18s, background-color 0.18s;
 }
-.icon-button svg {
-  width: 19px;
-  height: 19px;
+.theme-toggle::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 6px;
+  width: var(--theme-cell);
+  height: var(--theme-cell);
+  border: 1px solid var(--line);
+  border-radius: 50%;
+  background: var(--surface);
+  box-shadow: 0 1px 3px #17263d14;
+  transform: translateY(-50%);
+  transition: transform 0.2s ease, background-color 0.2s;
+}
+.theme-toggle[aria-pressed="true"]::before {
+  transform: translate(calc(var(--theme-cell) + var(--theme-gap)), -50%);
+  background: var(--blue-soft);
+  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
+}
+.theme-toggle:hover {
+  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
+}
+.theme-toggle svg {
+  width: 16px;
+  height: 16px;
+  transition: color 0.18s;
+}
+.theme-toggle[aria-pressed="false"] .theme-sun,
+.theme-toggle[aria-pressed="true"] .theme-moon {
+  color: var(--blue);
+}
+@media (max-width: 359px) {
+  .site-header nav a:last-child {
+    display: none;
+  }
 }
 .github-link {
   display: flex;
@@ -245,22 +283,6 @@ h3 {
   padding-top: 65px;
   padding-bottom: 42px;
 }
-.announcement {
-  display: inline-flex;
-  gap: 9px;
-  align-items: center;
-  font-size: 11px;
-  font-weight: 500;
-  background: var(--blue-soft);
-  border: 1px solid color-mix(in srgb, var(--blue) 15%, transparent);
-  color: var(--blue);
-  padding: 5px 12px;
-  border-radius: 20px;
-  margin-bottom: 23px;
-}
-.announcement > span:last-child {
-  margin-left: 4px;
-}
 .status-dot {
   display: inline-block;
   width: 6px;
@@ -269,9 +291,6 @@ h3 {
   background: var(--green);
   flex-shrink: 0;
 }
-.announcement .status-dot {
-  background: var(--blue);
-}
 h1 {
   font-size: clamp(40px, 4.4vw, 62px);
   font-weight: 700;
@@ -1572,18 +1591,21 @@ h1 > span {
   .github-link {
     display: none;
   }
-  .icon-button {
-    width: 32px;
-    height: 36px;
+  .theme-toggle {
+    --theme-cell: 22px;
+    --theme-gap: 2px;
+    padding-inline: 4px;
+  }
+  .theme-toggle::before {
+    left: 4px;
+  }
+  .theme-toggle svg {
+    width: 14px;
+    height: 14px;
   }
   .hero {
     padding-top: 39px;
   }
-  .announcement {
-    font-size: 10px;
-    margin-bottom: 23px;
-    padding: 4px 10px;
-  }
   h1 {
     font-size: 41px;
     line-height: 1.35;