From a4e88fa506d5bbad239595b22eb6110e2fc5ac6c Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Fri, 13 Feb 2026 22:54:42 +0800
Subject: [PATCH] style: make terminal hero responsive on wider screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hero: responsive max-width (2xl→3xl→4xl→5xl) and min-height
- Terminal: responsive font size (sm→base→lg), padding, title bar

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/hero-section.tsx    |  6 +++---
 components/terminal-window.tsx | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/hero-section.tsx b/components/hero-section.tsx
index 736fca6..923d37f 100644
--- a/components/hero-section.tsx
+++ b/components/hero-section.tsx
@@ -89,7 +89,7 @@ export function HeroSection({ title, tagline }: HeroSectionProps) {
   }, [reducedMotion]);
 
   return (
-    <div className="relative min-h-[280px] w-full overflow-hidden rounded-2xl">
+    <div className="relative min-h-[280px] w-full overflow-hidden rounded-2xl sm:min-h-[320px] lg:min-h-[360px] xl:min-h-[400px]">
       {/* Matrix rain - full area, fades out */}
       {!reducedMotion && (
         <div
@@ -101,9 +101,9 @@ export function HeroSection({ title, tagline }: HeroSectionProps) {
         </div>
       )}
 
-      {/* Terminal - fades in over Matrix */}
+      {/* Terminal - fades in over Matrix, responsive width */}
       <div
-        className="relative z-10 mx-auto max-w-2xl px-4 py-6 transition-opacity duration-[600ms] ease-out"
+        className="relative z-10 mx-auto w-full max-w-2xl px-4 py-6 transition-opacity duration-[600ms] ease-out sm:max-w-3xl lg:max-w-4xl xl:max-w-5xl"
         style={{ opacity: reducedMotion ? 1 : terminalOpacity }}
       >
         <TerminalWindow
diff --git a/components/terminal-window.tsx b/components/terminal-window.tsx
index 83ab00b..dfb18ce 100644
--- a/components/terminal-window.tsx
+++ b/components/terminal-window.tsx
@@ -150,19 +150,19 @@ export function TerminalWindow({
       aria-label={`終端機：${title} - ${tagline}`}
     >
       {/* macOS-style title bar */}
-      <div className="flex items-center gap-2 border-b border-slate-700/50 px-4 py-2.5">
-        <div className="flex gap-1.5">
-          <span className="h-3 w-3 rounded-full bg-red-500/90" />
-          <span className="h-3 w-3 rounded-full bg-amber-500/90" />
-          <span className="h-3 w-3 rounded-full bg-emerald-500/90" />
+      <div className="flex items-center gap-2 border-b border-slate-700/50 px-4 py-2.5 sm:px-5 sm:py-3 lg:px-6 lg:py-3.5">
+        <div className="flex gap-1.5 sm:gap-2">
+          <span className="h-3 w-3 rounded-full bg-red-500/90 sm:h-3.5 sm:w-3.5 lg:h-4 lg:w-4" />
+          <span className="h-3 w-3 rounded-full bg-amber-500/90 sm:h-3.5 sm:w-3.5 lg:h-4 lg:w-4" />
+          <span className="h-3 w-3 rounded-full bg-emerald-500/90 sm:h-3.5 sm:w-3.5 lg:h-4 lg:w-4" />
         </div>
-        <span className="ml-4 font-mono text-xs text-slate-400">
+        <span className="ml-4 font-mono text-xs text-slate-400 sm:text-sm lg:text-base">
           gbanyan@blog — zsh
         </span>
       </div>
 
       {/* Terminal content */}
-      <div className="px-4 py-4 font-mono text-sm">
+      <div className="px-4 py-4 font-mono text-sm sm:px-5 sm:py-5 sm:text-base lg:px-6 lg:py-6 lg:text-lg">
         <div className="text-slate-300">
           <span className="text-emerald-400">~</span>
           <span className="text-slate-500"> $ </span>