fix: adjust letter-spacing and layout in CSS components for improved readability

Author: peixl

src/app/globals.css

@@ -32,7 +32,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
-  letter-spacing: -0.01em;
+  letter-spacing: 0;
 }
 
 body {
@@ -59,7 +59,7 @@ html {
 
 @layer base {
   h1, h2, h3, h4 {
-    letter-spacing: -0.022em;
+    letter-spacing: 0;
     font-feature-settings: 'ss01';
   }
   h1 { font-weight: 700; }
@@ -131,15 +131,15 @@ html {
   }
   .section-heading {
     @apply text-3xl font-semibold tracking-tight text-[color:var(--fg-primary)] md:text-4xl;
-    letter-spacing: -0.028em;
+    letter-spacing: 0;
   }
   .section-subheading {
     @apply mt-3 max-w-2xl text-[15px] leading-relaxed text-[color:var(--fg-secondary)] md:text-base;
   }
   .display-title {
-    @apply text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl;
-    letter-spacing: -0.035em;
-    line-height: 1.04;
+    @apply text-[34px] font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl;
+    letter-spacing: 0;
+    line-height: 1.08;
   }
   .focus-ring {
     @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--surface)];

src/components/NavBar.tsx

@@ -19,6 +19,7 @@ export function NavBar({ locale, dict }: Props) {
   const pathname = usePathname() ?? '/';
   const [scrolled, setScrolled] = useState(false);
   const [open, setOpen] = useState(false);
+  const brandLabel = locale === 'zh' ? dict.meta.siteName : 'Codex Tutorial';
 
   useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > 8);
@@ -52,26 +53,27 @@ export function NavBar({ locale, dict }: Props) {
     <header
       className={cn(
         'sticky top-0 z-50 transition-all duration-500',
-        scrolled ? 'pt-2' : 'pt-4'
+        scrolled ? 'pt-2' : 'pt-3 sm:pt-4'
       )}
     >
-      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+      <div className="mx-auto max-w-6xl px-3 sm:px-6 lg:px-8">
         <nav
           className={cn(
-            'flex items-center justify-between gap-4 rounded-full border border-[color:var(--line)] backdrop-blur-2xl transition-all duration-500',
+            'flex items-center justify-between gap-2 rounded-[28px] border border-[color:var(--line)] backdrop-blur-2xl transition-all duration-500 sm:rounded-full sm:gap-4',
             scrolled
               ? 'bg-white/80 shadow-soft px-3 py-2'
-              : 'bg-white/60 px-4 py-2.5'
+              : 'bg-white/60 px-3 py-2.5 sm:px-4'
           )}
           aria-label={locale === 'zh' ? '主导航' : 'Primary navigation'}
         >
           <Link
             href={localePath(locale)}
-            className="focus-ring flex items-center gap-2 rounded-full pl-1 pr-3 py-1"
+            aria-label={dict.meta.siteName}
+            className="focus-ring flex min-w-0 flex-1 items-center gap-2 rounded-full py-1 pl-1 pr-2 sm:flex-none sm:pr-3"
           >
-            <CodexLogo size={28} />
-            <span className="hidden text-[13px] font-semibold tracking-tight text-ink sm:inline">
-              {dict.meta.siteName}
+            <CodexLogo size={28} className="shrink-0" />
+            <span className="min-w-0 truncate text-[12px] font-semibold text-ink sm:text-[13px]">
+              {brandLabel}
             </span>
           </Link>
 
@@ -93,8 +95,8 @@ export function NavBar({ locale, dict }: Props) {
             ))}
           </ul>
 
-          <div className="flex items-center gap-2">
-            <LanguageSwitcher currentLocale={locale} compact />
+          <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
+            <LanguageSwitcher currentLocale={locale} compact className="px-2.5 sm:px-3" />
             <Link
               href={localePath(locale, 'generator')}
               className="focus-ring hidden rounded-full bg-ink px-3.5 py-1.5 text-[13px] font-semibold text-white shadow-soft transition hover:-translate-y-0.5 sm:inline-flex"

src/components/home/HomeSections.tsx

@@ -24,18 +24,18 @@ type Props = { locale: Locale; dict: Dictionary };
 
 export function HomeHero({ locale, dict }: Props) {
   return (
-    <section className="relative overflow-hidden px-4 pb-20 pt-12 sm:px-6 md:pb-28 md:pt-16 lg:px-8">
+    <section className="relative overflow-hidden px-4 pb-16 pt-10 sm:px-6 sm:pb-20 sm:pt-12 md:pb-28 md:pt-16 lg:px-8">
       <div className="mx-auto max-w-5xl">
-        <div className="mb-6 flex items-center justify-center">
+        <div className="mb-5 flex items-center justify-center sm:mb-6">
           <span className="chip-accent">
             <SparkleIcon size={12} />
             {dict.home.heroEyebrow}
           </span>
         </div>
 
-        <h1 className="display-title text-balance text-center text-ink">
+        <h1 className="display-title mx-auto max-w-[13em] text-balance text-center text-ink sm:max-w-none">
           {dict.home.heroTitleLine1}
-          <span className="mx-2 inline-block align-baseline text-ink/90">
+          <span className="mx-1 inline-block align-baseline text-ink/90 sm:mx-2">
             {dict.home.heroTitleHighlight}
           </span>
           <br />
@@ -44,16 +44,16 @@ export function HomeHero({ locale, dict }: Props) {
           </span>
         </h1>
 
-        <p className="mx-auto mt-6 max-w-2xl text-balance text-center text-[16px] leading-relaxed text-ink-soft md:text-[17px]">
+        <p className="mx-auto mt-5 max-w-2xl text-balance text-center text-[15px] leading-relaxed text-ink-soft sm:mt-6 md:text-[17px]">
           {dict.home.heroSubtitle}
         </p>
 
-        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
-          <LinkButton href={localePath(locale, 'generator')} variant="primary" size="lg">
+        <div className="mt-7 flex flex-col items-center justify-center gap-3 min-[430px]:flex-row sm:mt-8">
+          <LinkButton href={localePath(locale, 'generator')} variant="primary" size="lg" className="w-full max-w-[280px] min-[430px]:w-auto">
             {dict.home.heroCtaPrimary}
             <ArrowRightIcon size={16} />
           </LinkButton>
-          <LinkButton href={localePath(locale, 'guide')} variant="glass" size="lg">
+          <LinkButton href={localePath(locale, 'guide')} variant="glass" size="lg" className="w-full max-w-[280px] min-[430px]:w-auto">
             {dict.home.heroCtaSecondary}
           </LinkButton>
         </div>
@@ -69,11 +69,11 @@ export function HomeHero({ locale, dict }: Props) {
           </span>
         </div>
 
-        <div className="relative mt-16 md:mt-20">
+        <div className="relative mt-10 sm:mt-16 md:mt-20">
           <HeroVisual locale={locale} />
         </div>
 
-        <div className="mt-12 grid grid-cols-1 gap-3 sm:grid-cols-3">
+        <div className="mt-10 grid grid-cols-1 gap-3 sm:mt-12 sm:grid-cols-3">
           <StatCard value={dict.home.heroStatsValue1} label={dict.home.heroStatsLabel1} />
           <StatCard value={dict.home.heroStatsValue2} label={dict.home.heroStatsLabel2} />
           <StatCard value={dict.home.heroStatsValue3} label={dict.home.heroStatsLabel3} />
@@ -86,7 +86,7 @@ export function HomeHero({ locale, dict }: Props) {
 function StatCard({ value, label }: { value: string; label: string }) {
   return (
     <div className="rounded-[22px] border border-[color:var(--line)] bg-white/70 px-6 py-5 text-center backdrop-blur-xl">
-      <div className="text-[28px] font-semibold tracking-tight text-ink md:text-[32px]" style={{ letterSpacing: '-0.02em' }}>
+      <div className="text-[28px] font-semibold text-ink md:text-[32px]">
         {value}
       </div>
       <div className="mt-1 text-[12px] uppercase tracking-wider text-ink-mute">{label}</div>