Skip to content

Commit 117d671

Browse files
roerohanroerohan
committed
fix: added responsiveness
1 parent 1f7f5ca commit 117d671

File tree

2 files changed

+25
-25
lines changed

2 files changed

+25
-25
lines changed

‎packages/web/src/components/Header.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,28 @@ export default function Header() {
99

1010
return (
1111
<>
12-
<header className="p-4 flex items-center justify-between bg-gray-800 text-white shadow-lg">
13-
<div className="flex items-center">
12+
<header className="p-3 md:p-4 flex items-center justify-between bg-gray-800 text-white shadow-lg">
13+
<div className="flex items-center min-w-0 flex-1">
1414
<button
1515
onClick={() => setIsOpen(true)}
16-
className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
16+
className="p-2 hover:bg-gray-700 rounded-lg transition-colors flex-shrink-0"
1717
aria-label="Open menu"
1818
>
19-
<Menu size={24} />
19+
<Menu size={20} className="md:w-6 md:h-6" />
2020
</button>
21-
<h1 className="ml-4 text-xl font-semibold">
21+
<h1 className="ml-2 md:ml-4 text-xl font-semibold min-w-0">
2222
<Link to="/">
23-
<img src="/tanstack-word-logo-white.svg" alt="TanStack Logo" className="h-10" />
23+
<img src="/tanstack-word-logo-white.svg" alt="TanStack Logo" className="h-7 md:h-10" />
2424
</Link>
2525
</h1>
2626
</div>
2727
<a
2828
href="https://github.com/roerohan/fullstack-monorepo-template"
2929
target="_blank"
3030
rel="noopener noreferrer"
31-
className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white font-medium rounded-lg transition-colors flex items-center gap-2"
31+
className="px-2 py-1.5 md:px-4 md:py-2 bg-slate-700 hover:bg-slate-600 text-white text-sm md:text-base font-medium rounded-lg transition-colors flex items-center gap-1 md:gap-2 flex-shrink-0"
3232
>
33-
<Star className="w-4 h-4" />
33+
<Star className="w-3.5 h-3.5 md:w-4 md:h-4" />
3434
<span className="hidden sm:inline">Star on GitHub</span>
3535
<span className="sm:hidden">Star</span>
3636
</a>

‎packages/web/src/routes/index.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -59,34 +59,34 @@ function App() {
5959

6060
return (
6161
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
62-
<section className="relative py-20 px-6 text-center overflow-hidden">
62+
<section className="relative py-12 md:py-20 px-4 md:px-6 text-center overflow-hidden">
6363
<div className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"></div>
6464
<div className="relative max-w-5xl mx-auto">
65-
<div className="flex items-center justify-center gap-6 mb-6">
66-
<img src="/tanstack-circle-logo.png" alt="TanStack Logo" className="w-24 h-24 md:w-32 md:h-32" />
67-
<div className="flex flex-col">
68-
<h1 className="text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]">
65+
<div className="flex flex-col items-center justify-center gap-3 md:gap-4 mb-4 md:mb-6">
66+
<img src="/tanstack-circle-logo.png" alt="TanStack Logo" className="w-16 h-16 md:w-24 md:h-24 lg:w-32 lg:h-32" />
67+
<div className="flex flex-col items-center">
68+
<h1 className="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-black text-white [letter-spacing:-0.08em]">
6969
<span className="text-gray-300">TANSTACK</span>{' '}
7070
<span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">START</span>
7171
</h1>
7272
<a
7373
href="https://github.com/roerohan/fullstack-monorepo-template"
7474
target="_blank"
7575
rel="noopener noreferrer"
76-
className="text-xl md:text-2xl text-gray-400 hover:text-cyan-400 transition-colors mt-1"
76+
className="text-sm sm:text-base md:text-lg lg:text-xl text-gray-400 hover:text-cyan-400 transition-colors mt-1 md:mt-2 break-all px-2"
7777
>
7878
roerohan/fullstack-monorepo-template
7979
</a>
8080
</div>
8181
</div>
82-
<p className="text-lg text-gray-400 max-w-3xl mx-auto mb-8">
82+
<p className="text-sm sm:text-base md:text-lg text-gray-400 max-w-3xl mx-auto mb-6 md:mb-8 px-2">
8383
TanStack Start + Cloudflare Workers monorepo. Build modern fullstack applications with type-safe RPC,
8484
server functions, and edge deployment.
8585
</p>
8686

87-
<div className="mb-8 p-4 bg-slate-800/70 border border-cyan-500/30 rounded-lg max-w-2xl mx-auto">
88-
<p className="text-sm text-gray-400 mb-2">Live RPC Demo:</p>
89-
<p className="text-lg text-cyan-400 font-mono">{JSON.stringify(data)}</p>
87+
<div className="mb-6 md:mb-8 p-3 md:p-4 bg-slate-800/70 border border-cyan-500/30 rounded-lg max-w-2xl mx-auto">
88+
<p className="text-xs md:text-sm text-gray-400 mb-2">Live RPC Demo:</p>
89+
<p className="text-sm md:text-base text-cyan-400 font-mono break-all">{JSON.stringify(data)}</p>
9090
<p className="text-xs text-gray-500 mt-2">
9191
Called <code className="text-cyan-400">WORKER_RPC.sayHello()</code> from server loader •{' '}
9292
<Link to="/rpc" className="text-cyan-400 hover:text-cyan-300 underline">
@@ -95,29 +95,29 @@ function App() {
9595
</p>
9696
</div>
9797

98-
<div className="flex flex-col items-center gap-4">
99-
<div className="flex gap-3 flex-wrap justify-center">
98+
<div className="flex flex-col items-center gap-3 md:gap-4">
99+
<div className="flex flex-col sm:flex-row gap-2 sm:gap-3 w-full sm:w-auto px-4 sm:px-0">
100100
<a
101101
href="https://tanstack.com/start"
102102
target="_blank"
103103
rel="noopener noreferrer"
104-
className="px-6 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50"
104+
className="px-4 md:px-6 py-2 md:py-3 bg-cyan-500 hover:bg-cyan-600 text-white text-sm md:text-base font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50 text-center"
105105
>
106106
TanStack Docs
107107
</a>
108108
<a
109109
href="https://developers.cloudflare.com/workers"
110110
target="_blank"
111111
rel="noopener noreferrer"
112-
className="px-6 py-3 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-orange-500/50"
112+
className="px-4 md:px-6 py-2 md:py-3 bg-orange-500 hover:bg-orange-600 text-white text-sm md:text-base font-semibold rounded-lg transition-colors shadow-lg shadow-orange-500/50 text-center"
113113
>
114114
Cloudflare Workers
115115
</a>
116116
</div>
117-
<p className="text-gray-400 text-sm mt-2">
118-
Edit <code className="px-2 py-1 bg-slate-700 rounded text-cyan-400">/src/routes/index.tsx</code> or add
117+
<p className="text-gray-400 text-xs sm:text-sm mt-2 px-4 text-center">
118+
Edit <code className="px-2 py-1 bg-slate-700 rounded text-cyan-400 text-xs">/src/routes/index.tsx</code> or add
119119
RPC methods in{' '}
120-
<code className="px-2 py-1 bg-slate-700 rounded text-orange-400">/packages/worker/src/rpc.ts</code>
120+
<code className="px-2 py-1 bg-slate-700 rounded text-orange-400 text-xs break-all">/packages/worker/src/rpc.ts</code>
121121
</p>
122122
</div>
123123
</div>

0 commit comments

Comments
 (0)