mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
refactor(app): improve layout consistency and responsiveness across pages
The changes focus on standardizing layouts, spacing, and container usage throughout the site while enhancing responsive behavior. Key improvements include: - Unified container usage for consistent page widths - Standardized section padding and gaps - Removed redundant padding/margin classes - Better responsive grid layouts - Consistent text alignment and spacing - Cleaner flexbox structures
This commit is contained in:
Shintaro Jokagi
parent
1c56e00c6f
commit
c82ae06030
19 changed files with 108 additions and 98 deletions
|
|
@ -19,9 +19,9 @@ const {
|
|||
|
||||
<section
|
||||
id="Community"
|
||||
class="relative flex w-full flex-col items-center px-4 text-start md:px-0 md:text-center lg:pt-36"
|
||||
class="relative flex w-full flex-col items-center text-start md:text-center lg:py-36 gap-6 py-12"
|
||||
>
|
||||
<Description class="mb-2 px-4 text-6xl font-bold">
|
||||
<Description class="mb-2 text-6xl font-bold">
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}>
|
||||
{community.title[0]}
|
||||
</motion.span>
|
||||
|
|
@ -35,12 +35,12 @@ const {
|
|||
<motion.p
|
||||
client:load
|
||||
{...getTitleAnimation(0.6)}
|
||||
className="px-4 md:px-24 lg:w-1/2 lg:px-0"
|
||||
className="lg:w-1/2 lg:px-0"
|
||||
>
|
||||
{community.description}
|
||||
</motion.p>
|
||||
<div
|
||||
class="mt-6 flex w-full flex-wrap gap-3 px-4 sm:gap-10 sm:px-0 md:justify-center"
|
||||
class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center"
|
||||
>
|
||||
<motion.span client:load {...getTitleAnimation(0.8)}>
|
||||
<Button class:list={['px-4']} href="https://github.com/zen-browser">
|
||||
|
|
@ -66,14 +66,14 @@ const {
|
|||
</motion.div>
|
||||
</div>
|
||||
<motion.span
|
||||
className="flex max-w-full px-8 lg:max-w-none lg:flex-none lg:px-0"
|
||||
className="flex max-w-full lg:max-w-none lg:flex-none"
|
||||
client:load
|
||||
{...getTitleAnimation(1.4)}
|
||||
>
|
||||
<Image
|
||||
src={ComImage}
|
||||
alt={community.images.community.alt}
|
||||
class="my-24 rounded-3xl shadow-md lg:mx-auto lg:w-3/4 dark:opacity-80"
|
||||
class="rounded-3xl shadow-md lg:mx-auto dark:opacity-80"
|
||||
/>
|
||||
</motion.span>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const descriptions = Object.values(features.featureTabs).map(
|
|||
|
||||
<section
|
||||
id="Features"
|
||||
class="relative flex w-full flex-col px-4 text-start md:px-24 lg:mx-auto lg:w-3/4 lg:px-0 lg:py-36"
|
||||
class="relative flex w-full flex-col text-start lg:py-36 py-12"
|
||||
>
|
||||
<Description class="mb-2 text-6xl font-bold">
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}>
|
||||
|
|
@ -49,7 +49,7 @@ const descriptions = Object.values(features.featureTabs).map(
|
|||
{features.description}
|
||||
</motion.p>
|
||||
<div
|
||||
class="mb-12 mt-6 flex flex-col gap-6 lg:flex-row lg:justify-between lg:gap-2"
|
||||
class="mt-6 flex flex-col gap-6 lg:flex-row lg:justify-between lg:gap-2"
|
||||
>
|
||||
<div class="flex w-full flex-col lg:w-1/3">
|
||||
<!-- Mobile tabs -->
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ const {
|
|||
|
||||
<footer
|
||||
id="footer"
|
||||
class="relative flex w-full flex-col gap-16 overflow-hidden border-t border-dark bg-dark px-4 py-12 text-paper lg:p-24"
|
||||
class="relative flex w-full flex-col gap-16 overflow-hidden border-t border-dark bg-dark px-4 py-12 text-paper lg:p-24 items-center"
|
||||
role="contentinfo"
|
||||
aria-label="Site footer"
|
||||
>
|
||||
<div class="flex w-full flex-col items-start justify-between gap-12">
|
||||
<div class="flex w-full flex-col items-start justify-between gap-12 container">
|
||||
<section
|
||||
class="w-full text-center lg:w-1/2 lg:text-left"
|
||||
aria-labelledby="footer-title"
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ const {
|
|||
</div>
|
||||
</header>
|
||||
<motion.span
|
||||
className="flex max-w-full px-8 lg:max-w-none lg:flex-none lg:px-0"
|
||||
className="flex max-w-full lg:max-w-none lg:flex-none"
|
||||
client:load
|
||||
{...getHeroTitleAnimation()}
|
||||
>
|
||||
|
|
@ -99,6 +99,6 @@ const {
|
|||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="mb-24 rounded-3xl shadow-md lg:mx-auto lg:w-3/4 dark:opacity-80"
|
||||
class="mb-24 rounded-3xl shadow-md dark:opacity-80"
|
||||
/>
|
||||
</motion.span>
|
||||
|
|
|
|||
|
|
@ -138,8 +138,8 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div className="mx-auto flex flex-col items-start gap-4 px-8 lg:w-1/2">
|
||||
<div className="flex w-full flex-col items-center gap-6">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="flex w-full flex-col items-center justify-center gap-6">
|
||||
<input
|
||||
type="text"
|
||||
id="search"
|
||||
|
|
@ -200,13 +200,13 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto grid grid-cols-1 place-items-start gap-12 p-10 md:grid-cols-2 lg:grid-cols-3 lg:p-24 lg:px-24 2xl:grid-cols-4">
|
||||
<div className="grid grid-cols-1 w-full place-items-start gap-12 md:grid-cols-2 xl:grid-cols-3 py-6">
|
||||
{paginatedMods.length > 0 ? (
|
||||
paginatedMods.map((mod) => (
|
||||
<a
|
||||
key={mod.id}
|
||||
href={`/mods/${mod.id}`}
|
||||
className="flex flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
|
||||
className="flex flex-col w-full gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
|
||||
>
|
||||
<div className="relative mb-0 block aspect-[1.85/1] h-48 overflow-hidden rounded-md border-2 border-dark object-cover shadow-md">
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const {
|
|||
<!-- Desktop Navigation -->
|
||||
<Astronav>
|
||||
<MenuItems
|
||||
class="relative z-20 mx-auto grid w-full grid-cols-2 items-center gap-2 bg-paper px-4 py-3 lg:grid lg:min-w-fit lg:grid-cols-[auto_1fr_auto] lg:p-6 xl:w-3/4"
|
||||
class="relative z-20 grid w-full grid-cols-2 items-center gap-2 bg-paper py-3 lg:grid lg:grid-cols-[auto_1fr_auto] lg:py-6 container"
|
||||
>
|
||||
<a
|
||||
class="flex items-center gap-2 text-lg font-bold"
|
||||
|
|
|
|||
|
|
@ -18,10 +18,10 @@ const {
|
|||
} = getUI(locale)
|
||||
---
|
||||
|
||||
<section id="sponsors" class:list={['mb-32 px-4', !showSponsors && 'hidden']}>
|
||||
<div class="mx-auto flex flex-col px-6 text-center">
|
||||
<section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}>
|
||||
<div class="mx-auto flex flex-col text-center">
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}>
|
||||
<Description class="mb-2 px-4 text-6xl font-bold"
|
||||
<Description class="mb-2 text-6xl font-bold"
|
||||
>Our Sponsors</Description
|
||||
>
|
||||
</motion.span>
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@
|
|||
}
|
||||
},
|
||||
"about": {
|
||||
"title": "About - Zen Browser",
|
||||
"title": "About - Zen",
|
||||
"description": "We are simply a group of developers and designers who care about your experience on the web. We believe that the internet should be a place where you can explore, learn, and connect without worrying about your data being collected.",
|
||||
"littleHelp": "A little help?",
|
||||
"mainTeam": {
|
||||
|
|
@ -223,7 +223,8 @@
|
|||
"description": "We are a small team of developers working hard to bring you the best browsing experience. If you like what we do, please consider supporting us.",
|
||||
"patreon": {
|
||||
"title": "Patreon",
|
||||
"description": "Patreon allows you to support us with a monthly donation. You can choose the level of support that works best for you."
|
||||
"description": "Patreon allows you to support us with a monthly donation. You can choose the level of support that works best for you.",
|
||||
"button": "Go to Patreon"
|
||||
},
|
||||
"koFi": {
|
||||
"title": "Ko-fi",
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ const locale = getLocale(Astro);
|
|||
|
||||
</head>
|
||||
<body
|
||||
class="overflow-x-hidden bg-paper font-['bricolage-grotesque'] text-dark"
|
||||
class="overflow-x-hidden bg-paper font-['bricolage-grotesque'] text-dark text-pretty"
|
||||
>
|
||||
<NavBar />
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -15,17 +15,19 @@ const {
|
|||
|
||||
<Layout title={notFound.title}>
|
||||
<main
|
||||
class="flex min-h-[70vh] flex-col items-center justify-center py-24 text-center"
|
||||
class="flex min-h-[70vh] container flex-col items-center justify-center gap-6 py-24 text-center"
|
||||
>
|
||||
<Title class="mb-4 text-7xl font-bold text-coral md:text-9xl">404</Title>
|
||||
<Description class="mb-6 text-xl md:text-2xl">
|
||||
<Title class="text-7xl font-bold text-coral md:text-9xl">404</Title>
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<Description class="text-xl md:text-2xl">
|
||||
{notFound.title}
|
||||
</Description>
|
||||
<p class="mb-8 max-w-xl text-lg text-gray-500 dark:text-gray-400">
|
||||
<p class="max-w-xl text-lg text-gray-500 dark:text-gray-400">
|
||||
{notFound.description}
|
||||
</p>
|
||||
<Button href={getLocalePath('/')} isPrimary>
|
||||
<Button href={getLocalePath('/')} isPrimary class="w-fit">
|
||||
{notFound.button}
|
||||
</Button>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -18,64 +18,62 @@ const {
|
|||
description={layout.about.description}
|
||||
>
|
||||
<main
|
||||
class="relative flex min-h-screen flex-col items-center justify-center py-24"
|
||||
class="flex min-h-screen flex-col items-center justify-center py-24 container w-full gap-24"
|
||||
>
|
||||
<div class="mb-24 p-4 text-center lg:w-1/2">
|
||||
<Description class="text-6xl font-bold">{about.title}</Description>
|
||||
<Description>
|
||||
<div class="text-center w-full flex flex-col gap-4">
|
||||
<Description class="text-6xl font-bold leading-none">{about.title}</Description>
|
||||
<Description class="max-w-3xl mx-auto">
|
||||
{about.description}
|
||||
</Description>
|
||||
<Button href="/donate" class="mx-auto mt-4 w-fit" isPrimary
|
||||
<Button href="/donate" class="mx-auto w-fit" isPrimary
|
||||
>{about.littleHelp}</Button
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex w-full flex-col items-center justify-center lg:flex-row"
|
||||
class="grid lg:grid-cols-[1fr_1px_1fr] gap-6"
|
||||
>
|
||||
<div class="flex flex-col p-8 lg:w-1/3 lg:pr-24">
|
||||
<div class="text-4xl font-bold lg:text-6xl">{about.mainTeam.title}</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="text-4xl font-bold lg:text-6xl leading-none">{about.mainTeam.title}</div>
|
||||
<Description>
|
||||
{about.mainTeam.description}
|
||||
</Description>
|
||||
<div class="mt-4">
|
||||
<ul>
|
||||
<div>
|
||||
<ul class="flex flex-col gap-2">
|
||||
{Object.entries(about.mainTeam.members).map(([_key, member]) => (
|
||||
<li class="text-sm">
|
||||
{member.link ? (
|
||||
<a href={member.link === true ? '' : member.link}>
|
||||
<strong class="zen-link font-bold">{member.name}</strong>
|
||||
</a>
|
||||
<span class="opacity-60"> : {member.description}</span>
|
||||
<span class="opacity-80"> : {member.description}</span>
|
||||
) : (
|
||||
<strong class="font-bold">{member.name}</strong>
|
||||
<span class="opacity-60"> : {member.description}</span>
|
||||
<span class="opacity-80"> : {member.description}</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute hidden h-full w-[1px] bg-dark opacity-15 lg:block">
|
||||
</div>
|
||||
<div class="flex flex-col p-8 lg:w-1/3 lg:pl-24">
|
||||
<div class="text-4xl font-bold lg:text-6xl">{about.contributors.title}</div>
|
||||
<hr class="hidden h-full w-[1px] bg-dark opacity-15 lg:block" />
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="text-4xl font-bold lg:text-6xl leading-none">{about.contributors.title}</div>
|
||||
<Description>
|
||||
{about.contributors.description}
|
||||
</Description>
|
||||
<a href="https://github.com/zen-browser/desktop/graphs/contributors"
|
||||
<div class="flex flex-col gap-4"><a href="https://github.com/zen-browser/desktop/graphs/contributors"
|
||||
><img
|
||||
src="https://contributors-img.web.app/image?repo=zen-browser/desktop"
|
||||
alt="Contributors"
|
||||
class="mt-8"
|
||||
/></a
|
||||
>
|
||||
<a href="https://github.com/zen-browser/www/graphs/contributors"
|
||||
><img
|
||||
src="https://contributors-img.web.app/image?repo=zen-browser/www"
|
||||
alt="Contributors (website)"
|
||||
class="mt-8"
|
||||
/></a
|
||||
>
|
||||
></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -14,40 +14,37 @@ const {
|
|||
---
|
||||
|
||||
<Layout title={layout.donate.title} description={layout.donate.description}>
|
||||
<main class="pb-52 pt-36">
|
||||
<main class="pb-52 pt-36 container">
|
||||
<div
|
||||
class="relative flex w-full flex-col items-center justify-center gap-12"
|
||||
class="flex flex-col items-center justify-center gap-12"
|
||||
>
|
||||
<div class="px-8 lg:w-2/5 lg:text-center xl:px-0">
|
||||
<div class="lg:text-center flex flex-col gap-4">
|
||||
<Description class="text-6xl font-bold">{donate.title}</Description>
|
||||
<Description>
|
||||
<Description class="max-w-3xl">
|
||||
{donate.description}
|
||||
</Description>
|
||||
</div>
|
||||
<div class="flex w-full flex-col items-center justify-center lg:flex-row">
|
||||
<div class="flex flex-col p-8 lg:w-1/3 lg:pr-24">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[1fr_1px_1fr] gap-12 text-center max-w-5xl">
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<div class="text-6xl font-bold">{donate.patreon.title}</div>
|
||||
<Description>
|
||||
{donate.patreon.description}
|
||||
</Description>
|
||||
<div class="mt-6">
|
||||
<Button
|
||||
isPrimary
|
||||
href="https://www.patreon.com/zen_browser"
|
||||
class="w-fit"
|
||||
>
|
||||
Go to Patreon
|
||||
{donate.patreon.button}
|
||||
<ArrowRight class="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden h-72 w-[1px] bg-dark opacity-15 lg:block"></div>
|
||||
<div class="flex flex-col p-8 lg:w-1/3 lg:pl-24">
|
||||
<hr class="hidden h-72 w-[1px] bg-dark opacity-15 lg:block" />
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<div class="text-6xl font-bold">{donate.koFi.title}</div>
|
||||
<Description>
|
||||
{donate.koFi.description}
|
||||
</Description>
|
||||
<div class="mt-6">
|
||||
<Button
|
||||
href="https://ko-fi.com/zen_browser"
|
||||
isPrimary
|
||||
|
|
@ -59,6 +56,5 @@ const {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const platformDescriptions = download.platformDescriptions
|
|||
|
||||
<Layout title={layout.download.title} description={layout.download.description}>
|
||||
<main class="flex min-h-screen flex-col px-6 data-[os='windows']:bg-zen-blue">
|
||||
<div class="container relative mx-auto max-w-5xl py-12">
|
||||
<div class="container relative mx-auto py-12">
|
||||
<div class="mb-6 mt-12 flex flex-col gap-4">
|
||||
<Description id="download-title" class="text-6xl font-bold"
|
||||
>{download.title}</Description
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const { layout } = getUI(locale)
|
|||
description={layout.index.description}
|
||||
isHome
|
||||
>
|
||||
<main>
|
||||
<main class="container">
|
||||
<Hero />
|
||||
<Features />
|
||||
<Sponsors showSponsors />
|
||||
|
|
|
|||
|
|
@ -18,16 +18,12 @@ const allMods = (await getAllMods()) || []
|
|||
---
|
||||
|
||||
<Layout title={layout.mods.title}>
|
||||
<main class="mx-auto mt-32 max-w-[120rem] 2xl:mt-0">
|
||||
<header class="mb-10 mt-32 flex w-full flex-col justify-center border-dark">
|
||||
<div class="mx-auto flex flex-col gap-6 px-8 lg:w-1/2">
|
||||
<div>
|
||||
<main class="mt-32 container 2xl:mt-32 flex flex-col gap-10">
|
||||
<header class="flex w-full flex-col border-dark gap-8">
|
||||
<Description class="text-6xl font-bold">{mods.title}</Description>
|
||||
<Description>
|
||||
<Description class="max-w-3xl">
|
||||
{mods.description}
|
||||
</Description>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Importing ModList component -->
|
||||
|
|
|
|||
|
|
@ -22,11 +22,11 @@ const {
|
|||
|
||||
<Layout title={layout.releaseNotes.title}>
|
||||
<main
|
||||
class="flex h-full min-h-[1000px] flex-1 flex-col items-center justify-center py-4"
|
||||
class="flex h-full min-h-[1000px] flex-1 flex-col items-center justify-center py-4 container"
|
||||
>
|
||||
<div
|
||||
id="release-notes"
|
||||
class="py-42 flex min-h-screen flex-col justify-center px-10 lg:px-10 xl:px-10 2xl:w-3/5"
|
||||
class="py-42 flex min-h-screen flex-col justify-center w-full"
|
||||
>
|
||||
<Description class="mt-48 text-4xl font-bold">Release Notes</Description>
|
||||
<p
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const {
|
|||
|
||||
<Layout title={layout.welcome.title} description={layout.welcome.description}>
|
||||
<main
|
||||
class="relative mx-auto flex flex-col items-center gap-24 px-6 lg:gap-0 lg:px-24"
|
||||
class="container"
|
||||
>
|
||||
<Features
|
||||
title1={welcome.title[0]}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ if (
|
|||
)}
|
||||
>
|
||||
<main
|
||||
class="relative mx-auto flex flex-col items-center gap-24 px-6 pb-52 pt-36 lg:px-24 xl:flex-row"
|
||||
class="container flex xl:min-h-[calc(100vh-12rem)] xl:mt-22 flex-col gap-12 py-12 xl:grid xl:grid-cols-[2fr_3fr]"
|
||||
>
|
||||
<div class="flex flex-col gap-8">
|
||||
<div>
|
||||
|
|
@ -54,26 +54,26 @@ if (
|
|||
<div>
|
||||
<Fragment set:html={whatsNewText[0].replace(/\n/g, '<br>')} />
|
||||
</div>
|
||||
<ul class="hidden flex-col gap-2 md:flex">
|
||||
<ul class="hidden list-disc flex-col gap-2 xl:flex xl:container">
|
||||
<a
|
||||
href="https://github.com/zen-browser/desktop/issues/new/choose"
|
||||
target="_blank"
|
||||
>
|
||||
<li class="ml-3 list-disc">
|
||||
<Description class="text-base font-bold"
|
||||
>{whatsNew.reportIssue}</Description
|
||||
>
|
||||
<li>
|
||||
<Description class="text-base font-bold">
|
||||
{whatsNew.reportIssue}
|
||||
</Description>
|
||||
</li>
|
||||
</a>
|
||||
<a href="https://discord.gg/zen-browser" target="_blank">
|
||||
<li class="ml-3 list-disc">
|
||||
<Description class="text-base font-bold"
|
||||
>{whatsNew.joinDiscord}</Description
|
||||
>
|
||||
<li>
|
||||
<Description class="text-base font-bold">
|
||||
{whatsNew.joinDiscord}
|
||||
</Description>
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
<div class="flex flex-col gap-8 md:flex-row">
|
||||
<div class="flex flex-wrap gap-8 place-self-start xl:place-self-center">
|
||||
<Button
|
||||
href={`/release-notes#${latestVersion.version}`}
|
||||
isPrimary
|
||||
|
|
@ -85,6 +85,7 @@ if (
|
|||
<SocialMediaStrip gap="6" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Video
|
||||
src={whatsNewVideo}
|
||||
autoplay
|
||||
|
|
@ -92,7 +93,7 @@ if (
|
|||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="w-full rounded-3xl object-cover shadow-lg"
|
||||
class="rounded-3xl object-cover shadow-lg"
|
||||
/>
|
||||
</main>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,22 @@ export default {
|
|||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
darkMode: ['selector', '[data-theme="dark"]'],
|
||||
theme: {
|
||||
container: {
|
||||
screens: {
|
||||
sm: "100%",
|
||||
md: "100%",
|
||||
lg: "1024px",
|
||||
xl: "1280px",
|
||||
},
|
||||
padding: {
|
||||
DEFAULT: '1rem',
|
||||
sm: '1.5rem',
|
||||
md: '1.5rem',
|
||||
lg: '1.5rem',
|
||||
xl: '2rem',
|
||||
},
|
||||
center: true,
|
||||
},
|
||||
extend: {
|
||||
screens: {
|
||||
'-sm': '@media (max-width: 639px)',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue