Skip to content

Commit 288cbd4

Browse files
zh1pengzh1peng
committed
Improve mobile header, carousel, and footer
1 parent 30de766 commit 288cbd4

File tree

3 files changed

+33
-37
lines changed

3 files changed

+33
-37
lines changed

‎src/components/featured-task-carousel.tsx‎

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export function FeaturedTaskCarousel({
5050

5151
return (
5252
<>
53-
<div className="mx-auto w-full max-w-[620px] lg:w-[620px]">
53+
<div id="featured-task-carousel" className="mx-auto w-full max-w-[620px] lg:w-[620px]">
5454
<div className="tb-frame overflow-hidden bg-[#fffdf9] p-4 sm:p-6">
5555
<div className="flex flex-col gap-5">
5656
<div className="flex items-start justify-between gap-4">
@@ -99,7 +99,7 @@ export function FeaturedTaskCarousel({
9999
))}
100100
</div>
101101

102-
<div className="tb-frame-soft flex h-[360px] w-full flex-col bg-[#f8fcff] p-5 sm:h-[392px] sm:p-6">
102+
<div className="tb-frame-soft flex min-h-[320px] w-full flex-col bg-[#f8fcff] p-4 sm:h-[392px] sm:p-6">
103103
<div className="min-h-[3rem] w-full content-start flex flex-wrap items-center gap-2 text-xs text-slate-600">
104104
<code className="rounded-full border-2 border-[#25314d] bg-white px-2.5 py-1 font-mono text-[11px] font-semibold text-[#25314d]">
105105
{taskHandle(activeTask)}
@@ -116,40 +116,28 @@ export function FeaturedTaskCarousel({
116116
</div>
117117

118118
<div
119-
className="mt-4 min-h-[4.2rem] w-full font-heading text-[2rem] font-bold leading-[1.02] text-[#25314d] sm:min-h-[5.1rem] sm:text-[2.45rem]"
120-
style={{
121-
display: "-webkit-box",
122-
WebkitLineClamp: 2,
123-
WebkitBoxOrient: "vertical",
124-
overflow: "hidden"
125-
}}
119+
className="mt-4 min-h-[4.2rem] w-full font-heading text-[1.75rem] font-bold leading-[1.02] text-[#25314d] sm:min-h-[5.1rem] sm:text-[2.45rem] sm:[display:-webkit-box] sm:[-webkit-box-orient:vertical] sm:[-webkit-line-clamp:2] sm:overflow-hidden"
126120
>
127121
{taskTitle(activeTask)}
128122
</div>
129123

130124
<p
131-
className="mt-3 min-h-[5.25rem] w-full text-sm leading-7 text-slate-700 sm:min-h-[5.75rem] sm:text-base"
132-
style={{
133-
display: "-webkit-box",
134-
WebkitLineClamp: 3,
135-
WebkitBoxOrient: "vertical",
136-
overflow: "hidden"
137-
}}
125+
className="mt-3 min-h-[5.25rem] w-full text-sm leading-6 text-slate-700 sm:min-h-[5.75rem] sm:text-base sm:leading-7 sm:[display:-webkit-box] sm:[-webkit-box-orient:vertical] sm:[-webkit-line-clamp:3] sm:overflow-hidden"
138126
>
139127
{activeTask.short_description}
140128
</p>
141129

142-
<div className="mt-auto flex w-full flex-col gap-3 sm:flex-row sm:flex-nowrap">
130+
<div className="mt-auto grid w-full grid-cols-2 gap-2 sm:flex sm:flex-row sm:flex-nowrap sm:gap-3">
143131
<button
144132
type="button"
145-
className="tb-focus-ring tb-button-primary w-full justify-center sm:w-[11.5rem]"
133+
className="tb-focus-ring tb-button-primary w-full justify-center px-3 py-3 text-[0.85rem] sm:w-[11.5rem] sm:px-5 sm:py-3 sm:text-sm"
146134
onClick={() => setDrawerRepo(activeTask.repo)}
147135
>
148136
Expand details
149137
</button>
150138
{preview ? (
151139
<a
152-
className="tb-focus-ring tb-button-secondary w-full justify-center bg-[#d7ebf6] sm:w-[11.5rem]"
140+
className="tb-focus-ring tb-button-secondary w-full justify-center bg-[#d7ebf6] px-3 py-3 text-[0.85rem] sm:w-[11.5rem] sm:px-5 sm:py-3 sm:text-sm"
153141
href={preview.run_url}
154142
target="_blank"
155143
rel="noreferrer"

‎src/components/site-footer.tsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,22 @@ export function SiteFooter() {
1111
const previewCount = tasks.filter((task) => taskHasPreview(task)).length;
1212

1313
return (
14-
<footer className="mt-16 bg-[#efe7de]">
15-
<div className="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
16-
<div className="tb-frame bg-[#fff8f0] px-6 py-8">
14+
<footer id="site-footer" className="mt-16 bg-[#efe7de]">
15+
<div className="mx-auto w-full max-w-7xl px-3 py-10 sm:px-6 lg:px-8">
16+
<div className="tb-frame bg-[#fff8f0] px-4 py-6 sm:px-6 sm:py-8">
1717
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_280px] lg:items-center">
1818
<div>
19-
<TaskBeaconLogo markClassName="size-11" textClassName="text-3xl" />
20-
<div className="mt-4 max-w-2xl text-sm leading-7 text-slate-700">
19+
<TaskBeaconLogo
20+
className="gap-2 sm:gap-3"
21+
markClassName="size-8 sm:size-11"
22+
textClassName="text-[1.45rem] sm:text-3xl"
23+
/>
24+
<div className="mt-4 max-w-2xl text-sm leading-6 text-slate-700 sm:leading-7">
2125
Canonical tasks, aligned previews, framework references, and reusable guidance for
2226
auditable cognitive task development.
2327
</div>
2428

25-
<div className="mt-6 flex flex-wrap gap-6 text-sm text-slate-700">
29+
<div className="mt-6 grid gap-2 text-sm text-slate-700 sm:flex sm:flex-wrap sm:gap-6">
2630
<div>{tasks.length} canonical tasks</div>
2731
<div>{previewCount} web previews</div>
2832
<div>Index updated {new Date(index.generated_at).toLocaleDateString("en-US")}</div>
@@ -34,14 +38,14 @@ export function SiteFooter() {
3438
</div>
3539

3640
<div className="lg:justify-self-end">
37-
<div className="tb-frame-soft flex items-center justify-center bg-[#eef8ff] px-6 py-8">
38-
<div className="flex items-center gap-4">
39-
<TaskBeaconMark className="size-20" />
41+
<div className="tb-frame-soft flex w-full items-start justify-center bg-[#eef8ff] px-4 py-5 sm:px-6 sm:py-8">
42+
<div className="flex w-full flex-col items-start gap-3 sm:flex-row sm:items-center sm:gap-4">
43+
<TaskBeaconMark className="size-16 sm:size-20" />
4044
<div>
41-
<div className="font-heading text-[2.2rem] leading-none text-[#25314d]">
45+
<div className="font-heading text-[1.7rem] leading-none text-[#25314d] sm:text-[2.2rem]">
4246
TaskBeacon
4347
</div>
44-
<div className="mt-2 text-sm font-bold uppercase tracking-[0.16em] text-slate-500">
48+
<div className="mt-1 text-[0.7rem] font-bold uppercase tracking-[0.16em] text-slate-500 sm:mt-2 sm:text-sm">
4549
Canonical Task Hub
4650
</div>
4751
</div>

‎src/components/site-header.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,15 @@ export function SiteHeader() {
4646

4747
return (
4848
<header className="fixed left-0 right-0 top-0 z-50">
49-
<div className="mx-auto w-full max-w-7xl px-4 pt-4 sm:px-6 lg:px-8">
50-
<div className="tb-frame bg-[#fffdf9] px-4 py-3">
51-
<div className="flex items-center justify-between gap-4">
52-
<Link className="tb-focus-ring rounded-xl" href="/" onClick={() => setOpen(false)}>
53-
<TaskBeaconLogo markClassName="size-10 sm:size-11" textClassName="text-[1.85rem]" />
49+
<div className="mx-auto w-full max-w-7xl px-3 pt-3 sm:px-6 sm:pt-4 lg:px-8">
50+
<div className="tb-frame bg-[#fffdf9] px-3 py-2.5 sm:px-4 sm:py-3">
51+
<div className="flex items-center justify-between gap-3 sm:gap-4">
52+
<Link className="tb-focus-ring min-w-0 rounded-xl" href="/" onClick={() => setOpen(false)}>
53+
<TaskBeaconLogo
54+
className="gap-2 sm:gap-3"
55+
markClassName="size-8 sm:size-11"
56+
textClassName="text-[1.2rem] sm:text-[1.85rem]"
57+
/>
5458
</Link>
5559

5660
<nav className="hidden items-center gap-1 lg:flex">
@@ -77,7 +81,7 @@ export function SiteHeader() {
7781

7882
<button
7983
type="button"
80-
className="tb-focus-ring tb-frame-soft p-2 lg:hidden"
84+
className="tb-focus-ring tb-frame-soft p-1.5 sm:p-2 lg:hidden"
8185
onClick={() => setOpen((current) => !current)}
8286
aria-expanded={open}
8387
aria-label={open ? "Close navigation menu" : "Open navigation menu"}
@@ -87,7 +91,7 @@ export function SiteHeader() {
8791
</div>
8892

8993
{open ? (
90-
<div className="mt-4 rounded-[24px] border-2 border-[#25314d] bg-[#fffdf9] p-3 shadow-[0_5px_0_#25314d] lg:hidden">
94+
<div className="mt-3 rounded-[24px] border-2 border-[#25314d] bg-[#fffdf9] p-3 shadow-[0_5px_0_#25314d] lg:hidden">
9195
<div className="grid gap-2">
9296
{PRIMARY_LINKS.map((link) => (
9397
<NavLink key={link.href} {...link} mobile onNavigate={() => setOpen(false)} />

0 commit comments

Comments
 (0)