fix: mobile style improvements

This commit is contained in:
Danny White committed 2025-08-22 13:38:15 +10:00
1 parent e675da6914
commit 4904109cee
4 files changed
+9 -9

No files matched your search

@@ -40,16 +40,16 @@ export function SurveyChapter({
align={number % 2 === 0 ? 'start' : 'end'}
/>
{/* Text content */}
<div className="max-w-[60rem] mx-auto grid gap-y-8 grid-cols-1 md:grid-cols-3 text-balance pb-12">
<div className="max-w-[60rem] mx-auto grid gap-y-4 sm:gap-y-8 grid-cols-1 md:grid-cols-3 text-balance pb-12">
<div className="md:col-span-2 flex flex-col gap-4 px-8">
<p className="text-sm text-brand-link uppercase font-mono text-balance tracking-wider">
{shortTitle}
</p>
<h2 className="text-3xl md:text-4xl xl:text-6xl text-balance leading-tight tracking-tight">
<h2 className="text-4xl md:text-5xl xl:text-6xl text-balance leading-tight tracking-tight">
{title}
</h2>
</div>
<p className="md:col-span-2 md:col-start-2 text-lg xl:text-xl text-foreground text-balance px-8">
<p className="md:col-span-2 md:col-start-2 text-lg md:text-xl leading-relaxed text-foreground-light md:text-foreground text-balance px-8">
{description}
</p>
</div>
@@ -67,10 +67,10 @@ export function SurveyChapterSection({
<div id={title.toLowerCase().replace(/\s+/g, '-')} className="">
<div className="max-w-[60rem] mx-auto flex flex-col md:border-x border-muted">
<header className="grid grid-cols-1 md:grid-cols-3 text-balance">
<h3 className="py-8 px-8 md:border-r border-muted text-brand-link dark:text-brand font-mono uppercase tracking-wider text-sm">
<h3 className="pt-8 pb-4 px-8 md:border-r border-muted text-brand-link dark:text-brand font-mono uppercase tracking-wider text-sm">
{title}
</h3>
<p className="py-8 px-8 md:col-span-2 text-foreground-light text-xl leading-relaxed">
<p className="pb-8 md:pt-8 px-8 md:col-span-2 text-foreground-light text-lg md:text-xl leading-relaxed">
{description}
</p>
</header>
@@ -317,7 +317,7 @@ export function SurveyChart({
>
<header className="px-8 py-8">
<p className="text-foreground/30 text-sm font-mono uppercase tracking-widest">Q&A</p>
<h3 className="text-foreground text-xl tracking-tight">{title}</h3>
<h3 className="text-foreground text-xl tracking-tight text-balance">{title}</h3>
</header>
<div>
+3 -3
View File
@@ -82,7 +82,7 @@ function StateOfStartupsPage() {
window.addEventListener('scroll', handleScroll)
return () => window.removeEventListener('scroll', handleScroll)
}, [pageData.pageChapters])
}, [])
// Close ToC when clicking outside
useEffect(() => {
@@ -242,7 +242,7 @@ function StateOfStartupsPage() {
<SurveySectionBreak className="hidden md:block" />
<div className="grid grid-cols-1 md:grid-cols-3 max-w-[60rem] mx-auto border-x border-muted">
<div className="grid grid-cols-1 md:grid-cols-3 max-w-[60rem] mx-auto md:border-x border-muted">
{/* Intro text */}
<div className="md:col-span-2 flex flex-col gap-4 px-8 py-10 border-b md:border-b-0 md:border-r border-muted text-foreground text-xl md:text-2xl">
<p>{pageData.heroSection.subheader}</p>
@@ -348,7 +348,7 @@ const CTABanner = forwardRef<HTMLElement>((props, ref) => {
className="flex flex-col items-center gap-4 px-4 py-32 text-center border-b border-muted"
style={{
background:
'radial-gradient(circle at center 280%, hsl(var(--brand-400)), transparent 70%)',
'radial-gradient(circle at center 220%, hsl(var(--brand-400)), transparent 70%)',
}}
ref={ref}
>