Skip to content

Commit 1581829

Browse files
DogPawHatschiller-manuel
DogPawHat
authored and
schiller-manuel
committed
fix: broken mobile styles for config
1 parent 14beaeb commit 1581829

File tree

1 file changed

+134
-130
lines changed

1 file changed

+134
-130
lines changed

‎app/routes/_libraries/config.$version.index.tsx

Lines changed: 134 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -36,153 +36,157 @@ export default function FormVersionIndex() {
3636
const gradientText = `pr-1 inline-block leading-snug text-transparent bg-clip-text bg-gradient-to-r ${configProject.colorFrom} ${configProject.colorTo}`
3737

3838
return (
39-
<>
40-
<div className="flex flex-col gap-20 md:gap-32 pt-32">
41-
<div className="flex flex-col items-center gap-8 text-center px-4">
42-
<h1 className="font-black flex gap-3 items-center text-4xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em]">
43-
<span>TanStack</span>
44-
<span className={twMerge(gradientText)}>Config</span>
45-
</h1>
46-
<h2
47-
className="font-bold text-2xl max-w-[600px]
48-
md:text-3xl
49-
lg:text-5xl lg:max-w-[800px]"
50-
>
51-
<span className="underline decoration-dashed decoration-gray-500 decoration-3 underline-offset-2">
52-
Configuration and tools
53-
</span>{' '}
54-
for publishing and maintaining high-quality JavaScript packages
55-
</h2>
56-
<Link
57-
to="./docs/"
58-
className={`py-2 px-4 bg-gray-500 text-white rounded uppercase font-extrabold`}
59-
>
60-
Get Started
61-
</Link>
62-
</div>
39+
<div className="flex flex-1 flex-col min-h-0 relative overflow-x-hidden">
40+
<div className="flex flex-1 min-h-0 relative justify-center overflow-x-hidden">
41+
<div className="flex flex-col gap-20 md:gap-32 max-w-full py-32">
42+
<div className="flex flex-col items-center gap-8 text-center px-4">
43+
<h1 className="font-black flex gap-3 items-center text-4xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em]">
44+
<span>TanStack</span>
45+
<span className={twMerge(gradientText)}>Config</span>
46+
</h1>
47+
<h2
48+
className="font-bold text-2xl max-w-md
49+
md:text-3xl
50+
lg:text-5xl lg:max-w-2xl"
51+
>
52+
<span className="underline decoration-dashed decoration-gray-500 decoration-3 underline-offset-2">
53+
Configuration and tools
54+
</span>{' '}
55+
for publishing and maintaining high-quality JavaScript packages
56+
</h2>
57+
<Link
58+
to="./docs/"
59+
className={`py-2 px-4 bg-gray-500 text-white rounded uppercase font-extrabold`}
60+
>
61+
Get Started
62+
</Link>
63+
</div>
6364

64-
<LibraryFeatureHighlights
65-
featureHighlights={library.featureHighlights}
66-
/>
65+
<LibraryFeatureHighlights
66+
featureHighlights={library.featureHighlights}
67+
/>
6768

68-
<div className="px-4 sm:px-6 lg:px-8 mx-auto container">
69-
<div className=" sm:text-center pb-16">
70-
<h3 className="text-3xl text-center mx-auto leading-tight font-extrabold tracking-tight sm:text-4xl lg:leading-none mt-2">
71-
Hassle-Free Setup
72-
</h3>
73-
<p className="mt-4 text-xl max-w-3xl mx-auto leading-7 opacity-60">
74-
Incorporate TanStack Config into your development toolkit and
75-
experience a new level of efficiency, speed, and customization in
76-
building and releasing high-quality JavaScript packages.
77-
</p>
69+
<div className="px-4 sm:px-6 lg:px-8 mx-auto">
70+
<div className="sm:text-center pb-16">
71+
<h3 className="text-3xl text-center mx-auto leading-tight font-extrabold tracking-tight sm:text-4xl lg:leading-none mt-2">
72+
Hassle-Free Setup
73+
</h3>
74+
<p className="mt-4 text-xl max-w-3xl mx-auto leading-7 opacity-60">
75+
Incorporate TanStack Config into your development toolkit and
76+
experience a new level of efficiency, speed, and customization in
77+
building and releasing high-quality JavaScript packages.
78+
</p>
79+
</div>
80+
<div className="grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-4 mx-auto">
81+
{[
82+
// A list of features that @tanstack/config provides
83+
'Vite ecosystem',
84+
'Opinionated defaults',
85+
'Publint-compliant',
86+
'Minimal configuration',
87+
'Package versioning',
88+
'Automated changelogs',
89+
].map((d, i) => {
90+
return (
91+
<span key={i} className="flex items-center gap-2">
92+
<FaCheckCircle className="text-green-500 " /> {d}
93+
</span>
94+
)
95+
})}
96+
</div>
7897
</div>
79-
<div className="grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-4 w-[max-content] mx-auto">
80-
{[
81-
// A list of features that @tanstack/config provides
82-
'Vite ecosystem',
83-
'Opinionated defaults',
84-
'Publint-compliant',
85-
'Minimal configuration',
86-
'Package versioning',
87-
'Automated changelogs',
88-
].map((d, i) => {
89-
return (
90-
<span key={i} className="flex items-center gap-2">
91-
<FaCheckCircle className="text-green-500 " /> {d}
98+
99+
<div className="px-4 lg:max-w-screen-lg md:mx-auto mx-auto">
100+
<h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
101+
Partners
102+
</h3>
103+
<div className="h-8" />
104+
<div className="max-w-screen-md mx-auto">
105+
<div
106+
className="flex-1 flex flex-col items-center text-sm text-center
107+
bg-white/80 shadow-xl shadow-gray-500/20 rounded-lg
108+
divide-y-2 divide-gray-500 divide-opacity-10 overflow-hidden
109+
dark:bg-black/40 dark:shadow-none"
110+
>
111+
<span className="flex items-center gap-2 p-12 text-4xl text-rose-500 font-black uppercase">
112+
Config <TbHeartHandshake /> You?
92113
</span>
93-
)
94-
})}
114+
<div className="flex flex-col p-4 gap-4">
115+
<div>
116+
We're looking for a TanStack Config OSS Partner to go above and
117+
beyond the call of sponsorship. Are you as invested in TanStack
118+
Config as we are? Let's push the boundaries of Config together!
119+
</div>
120+
<a
121+
href="mailto:[email protected]?subject=TanStack Config Partnership"
122+
className="text-blue-500 uppercase font-black text-sm"
123+
>
124+
Let's chat
125+
</a>
126+
</div>
127+
</div>
128+
</div>
95129
</div>
96-
</div>
97130

98-
<div className="px-4 w-[500px] max-w-full mx-auto">
99-
<h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
100-
Partners
101-
</h3>
102-
<div className="h-8" />
103-
<div
104-
className="flex-1 flex flex-col items-center text-sm text-center
105-
bg-white/80 shadow-xl shadow-gray-500/20 rounded-lg
106-
divide-y-2 divide-gray-500 divide-opacity-10 overflow-hidden
107-
dark:bg-black/40 dark:shadow-none"
108-
>
109-
<span className="flex items-center gap-2 p-12 text-4xl text-rose-500 font-black uppercase">
110-
Config <TbHeartHandshake /> You?
111-
</span>
112-
<div className="flex flex-col p-4 gap-4">
113-
<div>
114-
We're looking for a TanStack Config OSS Partner to go above and
115-
beyond the call of sponsorship. Are you as invested in TanStack
116-
Config as we are? Let's push the boundaries of Config together!
117-
</div>
131+
<div className="relative text-lg overflow-hidden">
132+
<h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
133+
Sponsors
134+
</h3>
135+
<div
136+
className="my-4 flex flex-wrap mx-auto max-w-screen-lg"
137+
style={{
138+
aspectRatio: '1/1',
139+
}}
140+
>
141+
<Await
142+
promise={sponsorsPromise}
143+
fallback={<CgSpinner className="text-2xl animate-spin" />}
144+
children={(sponsors) => {
145+
return <SponsorPack sponsors={sponsors} />
146+
}}
147+
/>
148+
</div>
149+
<div className="text-center">
118150
<a
119-
href="mailto:partners@tanstack.com?subject=TanStack Config Partnership"
120-
className="text-blue-500 uppercase font-black text-sm"
151+
href="https://github.com/sponsors/tannerlinsley"
152+
className="inline-block bg-green-500 px-4 py-2 text-xl mx-auto leading-tight font-extrabold tracking-tight text-white rounded-full"
121153
>
122-
Let's chat
154+
Become a Sponsor!
123155
</a>
124156
</div>
125157
</div>
126-
</div>
127158

128-
<div className="relative text-lg overflow-hidden">
129-
<h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
130-
Sponsors
131-
</h3>
132-
<div
133-
className="my-4 flex flex-wrap mx-auto max-w-screen-lg"
134-
style={{
135-
aspectRatio: '1/1',
136-
}}
137-
>
138-
<Await
139-
promise={sponsorsPromise}
140-
fallback={<CgSpinner className="text-2xl animate-spin" />}
141-
children={(sponsors) => {
142-
return <SponsorPack sponsors={sponsors} />
143-
}}
144-
/>
145-
</div>
146-
<div className="text-center">
147-
<a
148-
href="https://github.com/sponsors/tannerlinsley"
149-
className="inline-block bg-green-500 px-4 py-2 text-xl mx-auto leading-tight font-extrabold tracking-tight text-white rounded-full"
159+
<div className="mx-auto max-w-[400px] flex flex-col gap-2 items-center">
160+
<div className="shadow-lg rounded-lg overflow-hidden bg-white dark:bg-gray-800 dark:text-white">
161+
<Carbon />
162+
</div>
163+
<span
164+
className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500
165+
dark:bg-opacity-20"
150166
>
151-
Become a Sponsor!
152-
</a>
153-
</div>
154-
</div>
155-
156-
<div className="mx-auto max-w-[400px] flex flex-col gap-2 items-center">
157-
<div className="shadow-lg rounded-lg overflow-hidden bg-white dark:bg-gray-800 dark:text-white">
158-
<Carbon />
167+
This ad helps us keep the lights on 😉
168+
</span>
159169
</div>
160-
<span
161-
className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500
162-
dark:bg-opacity-20"
163-
>
164-
This ad helps us keep the lights on 😉
165-
</span>
166-
</div>
167170

168-
<div className="flex flex-col gap-4 items-center">
169-
<div className="font-extrabold text-xl lg:text-2xl">
170-
Wow, you've come a long way!
171-
</div>
172-
<div className="italic font-sm opacity-70">
173-
Only one thing left to do...
174-
</div>
175-
<div>
176-
<Link
177-
to="./docs/"
178-
className={`inline-block py-2 px-4 bg-gray-500 text-white rounded uppercase font-extrabold`}
179-
>
180-
Get Started!
181-
</Link>
171+
<div className="flex flex-col gap-4 items-center">
172+
<div className="font-extrabold text-xl lg:text-2xl">
173+
Wow, you've come a long way!
174+
</div>
175+
<div className="italic font-sm opacity-70">
176+
Only one thing left to do...
177+
</div>
178+
<div>
179+
<Link
180+
to="./docs/"
181+
className={`inline-block py-2 px-4 bg-gray-500 text-white rounded uppercase font-extrabold`}
182+
>
183+
Get Started!
184+
</Link>
185+
</div>
182186
</div>
187+
<Footer />
183188
</div>
184-
<Footer />
185189
</div>
186-
</>
190+
</div>
187191
)
188192
}

0 commit comments

Comments
 (0)