gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: make terminal hero responsive on wider screens

Browse Source 
- 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>
This commit is contained in:
gbanyan
2026-02-13 22:54:42 +08:00
parent 62d5973e1f
commit a4e88fa506
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/hero-section.tsx
View File

@@ -89,7 +89,7 @@ export function HeroSection({ title, tagline }: HeroSectionProps) {
}, [reducedMotion]); }, [reducedMotion]);
return ( 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 */} {/* Matrix rain - full area, fades out */}
{!reducedMotion && ( {!reducedMotion && (
<div <div
@@ -101,9 +101,9 @@ export function HeroSection({ title, tagline }: HeroSectionProps) {
</div> </div>
)} )}
{/* Terminal - fades in over Matrix */} {/* Terminal - fades in over Matrix, responsive width */}
<div <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 }} style={{ opacity: reducedMotion ? 1 : terminalOpacity }}
> >
<TerminalWindow <TerminalWindow

14
components/terminal-window.tsx
View File

@@ -150,19 +150,19 @@ export function TerminalWindow({
aria-label={`終端機：${title} - ${tagline}`} aria-label={`終端機：${title} - ${tagline}`}
> >
{/* macOS-style title bar */} {/* 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 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"> <div className="flex gap-1.5 sm:gap-2">
<span className="h-3 w-3 rounded-full bg-red-500/90" /> <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" /> <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" /> <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> </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 gbanyan@blog — zsh
</span> </span>
</div> </div>
{/* Terminal content */} {/* 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"> <div className="text-slate-300">
<span className="text-emerald-400">~</span> <span className="text-emerald-400">~</span>
<span className="text-slate-500"> $ </span> <span className="text-slate-500"> $ </span>