[web] misc: make 2 columns for tablet

This commit is contained in:
Yangshun 2024-11-15 09:06:58 +08:00
parent fb2d505e2a
commit 1e1f456811
12 changed files with 14 additions and 14 deletions

View File

@ -124,7 +124,7 @@ export default async function Page({ searchParams }: Props) {
</Text>
</div>
<Section>
<div className="grid gap-6 lg:grid-cols-2">
<div className="grid gap-6 md:grid-cols-2">
{filteredJobPostings.map((jobPosting) => (
<JobPostingItem
key={jobPosting.slug}

View File

@ -102,7 +102,7 @@ export default function ResumeReviewProcess() {
</p>
</div>
<div>
<div className="lg:gap-y-18 mt-12 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-1 lg:mt-16 lg:grid-cols-2 lg:gap-x-16">
<div className="lg:gap-y-18 mt-12 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-1 md:grid-cols-2 lg:mt-16 lg:gap-x-16">
{features.map((feature) => (
<div key={feature.name}>
<div>

View File

@ -187,7 +187,7 @@ export default function ResumeReviewTestimonials() {
<h2 className="mt-1 text-3xl font-bold text-white sm:text-4xl sm:leading-none sm:tracking-tight">
Hear from our users
</h2>
<div className="mt-16 space-y-16 lg:grid lg:grid-cols-2 lg:gap-x-12 lg:gap-y-16 lg:space-y-0">
<div className="mt-16 space-y-16 md:grid-cols-2 lg:grid lg:gap-x-12 lg:gap-y-16 lg:space-y-0">
{testimonials.map((testimonial) => (
<blockquote key={testimonial.id} className="sm:flex lg:block">
<svg

View File

@ -22,7 +22,7 @@ export default function BlogRelatedArticlesSection({ relatedPosts }: Props) {
/>
</Heading>
<Section>
<div className={clsx('grid gap-6 lg:grid-cols-2')}>
<div className={clsx('grid gap-6 md:grid-cols-2')}>
{relatedPosts.map(({ slug }, index) => {
const post = readBlogPostsAll().find(
(postItem) => postItem.slug === slug.trim(),

View File

@ -41,8 +41,8 @@ export default function BlogWhatsNewSection() {
<Section>
<div
className={clsx(
'grid gap-6 lg:grid-cols-2',
posts.length === ROW_SIZE && 'xl:grid-cols-3',
'grid gap-6 md:grid-cols-2',
posts.length === ROW_SIZE && 'lg:grid-cols-3',
)}>
{posts.map((metadata, index) => (
<div

View File

@ -47,7 +47,7 @@ export default function ProjectsChallengeBriefPage({
}
showOverlay={showPaywall}>
<div className="flex flex-col items-stretch gap-20 pb-40">
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
<div className="flex flex-col gap-6">
<div className="lg:hidden">
<ProjectsChallengeBriefImageCarousel

View File

@ -77,7 +77,7 @@ export default function ProjectsChallengeHowItWorksDialog({
})}
width="screen-xl"
onClose={() => onClose()}>
<div className="grid h-full grid-cols-1 gap-x-6 gap-y-8 pb-8 pt-4 lg:grid-cols-2 xl:grid-cols-4">
<div className="grid h-full grid-cols-1 gap-x-6 gap-y-8 pb-8 pt-4 md:grid-cols-2 xl:grid-cols-4">
{steps.map(({ id, description, card }, index) => (
<div key={id} className="flex flex-col gap-4 lg:gap-6">
<div className="flex items-center gap-x-3">

View File

@ -124,7 +124,7 @@ export default function ProjectsDashboardLayout({ children, viewer }: Props) {
{viewer && startedBefore ? (
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-2',
'grid grid-cols-1 md:grid-cols-2',
'gap-x-3 gap-y-10 md:gap-x-4 lg:gap-x-6',
)}>
<div

View File

@ -136,7 +136,7 @@ export default function ProjectsChallengeSubmissionForm({
<FormProvider {...formMethods}>
<form className="flex flex-col gap-12" onSubmit={handleSubmit(onSubmit)}>
<div className="flex flex-col gap-10">
<div className="grid gap-6 lg:grid-cols-2">
<div className="grid gap-6 md:grid-cols-2">
<ProjectsChallengeSubmissionTitleField control={control} />
<ProjectsChallengeSubmissionRepositoryUrlField control={control} />
<ProjectsChallengeSubmissionRoadmapSkillsField
@ -155,7 +155,7 @@ export default function ProjectsChallengeSubmissionForm({
control={control}
/>
<Divider />
<div className="grid gap-6 lg:grid-cols-2">
<div className="grid gap-6 md:grid-cols-2">
<ProjectsChallengeSubmissionSummaryField control={control} />
<ProjectsChallengeSubmissionImplementationField control={control} />
</div>

View File

@ -66,7 +66,7 @@ export default function ProjectsChallengeSubmissionDeploymentUrlsField({
</div>
</div>
{field.value.length > 0 && (
<div className="grid gap-6 lg:grid-cols-2">
<div className="grid gap-6 md:grid-cols-2">
{field.value.map((item, index) => (
<div
key={item.label}

View File

@ -26,7 +26,7 @@ export default function TextExamples() {
return (
<UIExamplesGroup title="Text">
{sizes.map((size) => (
<div key={size} className="grid grid-cols-3 gap-2">
<div key={size} className="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
{weights.map((weight) => (
<Fragment key={weight}>
<Text

View File

@ -62,7 +62,7 @@ export default function UIExamplesGroup({
<div className="relative flex">
<div className="absolute inset-y-0 right-0 -z-10 hidden w-1/2 bg-neutral-900 lg:block"></div>
<Container className="w-full">
<div className="grid w-full lg:grid-cols-2">
<div className="grid w-full md:grid-cols-2">
<div
className={clsx(
'grid grow py-12 lg:pr-12',