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:
@@ -38,10 +38,10 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
|
||||
return (
|
||||
<section id={id} className="scroll-mt-8">
|
||||
{isActive ? (
|
||||
<div className="mb-12">
|
||||
<div className="mb-6 sm:mb-12">
|
||||
<ViewTransitionWrapper name="section-content">
|
||||
<div className="mb-16">
|
||||
<h1 className="font-heading font-black text-section-title leading-[1.2] mb-0">{heading}</h1>
|
||||
<div className="mb-6 sm:mb-16">
|
||||
<h1 className="font-heading font-black text-xl sm:text-section-title leading-[1.2] mb-0">{heading}</h1>
|
||||
</div>
|
||||
</ViewTransitionWrapper>
|
||||
<ViewTransitionWrapper name="section-body">
|
||||
@@ -52,9 +52,9 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
|
||||
<Link
|
||||
href={href}
|
||||
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}
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user