fix: reduce padding and spacing for mobile
Main: px-4 py-6 on mobile (was px-8 py-12). Section accordion: mb/py on inactive links tightened to 1/1 on mobile, space-y-0 between sections. Active title text-xl on mobile to prevent wrapping at ~400px, matches inactive title size.
This commit is contained in:
@@ -41,7 +41,7 @@ export default async function SectionPage({ params }: Props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="px-8 py-12 lg:py-16 lg:px-16">
|
<main className="px-4 py-6 sm:px-8 sm:py-12 lg:py-16 lg:px-16">
|
||||||
<SectionsAccordion sections={sections} activeSlug={activeSlug}>
|
<SectionsAccordion sections={sections} activeSlug={activeSlug}>
|
||||||
{sections.map((s) => (
|
{sections.map((s) => (
|
||||||
<SectionFactory key={s.slug} slug={s.slug} />
|
<SectionFactory key={s.slug} slug={s.slug} />
|
||||||
|
|||||||
@@ -38,10 +38,10 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
|
|||||||
return (
|
return (
|
||||||
<section id={id} className="scroll-mt-8">
|
<section id={id} className="scroll-mt-8">
|
||||||
{isActive ? (
|
{isActive ? (
|
||||||
<div className="mb-12">
|
<div className="mb-6 sm:mb-12">
|
||||||
<ViewTransitionWrapper name="section-content">
|
<ViewTransitionWrapper name="section-content">
|
||||||
<div className="mb-16">
|
<div className="mb-6 sm:mb-16">
|
||||||
<h1 className="font-heading font-black text-section-title leading-[1.2] mb-0">{heading}</h1>
|
<h1 className="font-heading font-black text-xl sm:text-section-title leading-[1.2] mb-0">{heading}</h1>
|
||||||
</div>
|
</div>
|
||||||
</ViewTransitionWrapper>
|
</ViewTransitionWrapper>
|
||||||
<ViewTransitionWrapper name="section-body">
|
<ViewTransitionWrapper name="section-body">
|
||||||
@@ -52,9 +52,9 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
|
|||||||
<Link
|
<Link
|
||||||
href={href}
|
href={href}
|
||||||
aria-label={heading}
|
aria-label={heading}
|
||||||
className="block w-full text-left mb-3 py-3 group border-b-0 hover:border-b-0"
|
className="block w-full text-left mb-1 py-1 sm:mb-3 sm:py-3 group border-b-0 hover:border-b-0"
|
||||||
>
|
>
|
||||||
<span className="block font-heading font-wonk font-black text-2xl sm:text-3xl opacity-30 group-hover:opacity-60 transition-opacity duration-200">
|
<span className="block font-heading font-wonk font-black text-xl sm:text-3xl opacity-30 group-hover:opacity-60 transition-opacity duration-200">
|
||||||
{heading}
|
{heading}
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ export function SectionsAccordion({ sections, activeSlug, children }: Props) {
|
|||||||
const slots = Children.toArray(children);
|
const slots = Children.toArray(children);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-2">
|
<div className="space-y-0 sm:space-y-2">
|
||||||
{sections.map((section, i) => (
|
{sections.map((section, i) => (
|
||||||
<SectionAccordion
|
<SectionAccordion
|
||||||
key={section.slug}
|
key={section.slug}
|
||||||
|
|||||||
Reference in New Issue
Block a user