mirror of
https://github.com/supabase/supabase.git
synced 2026-10-14 05:39:11 +03:00
fix: mobile style improvements
This commit is contained in:
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>
|
||||
|
||||
@@ -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}
|
||||
>
|
||||
|
||||
Reference in new issue
Block a user