Skip to content

Commit 9b4320c

Browse files
danhollickdanhollick
committed
responsive changes
1 parent 7e74623 commit 9b4320c

File tree

1 file changed

+52
-38
lines changed

1 file changed

+52
-38
lines changed

‎src/app/course/page.tsx‎

Lines changed: 52 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,10 @@ export const metadata: Metadata = {
5454

5555
export default async function Course() {
5656
return (
57-
<div className="grid sm:grid-cols-[1fr_--spacing(6)_1fr_--spacing(6)_1fr] lg:grid-cols-[1fr_--spacing(12)_1fr_--spacing(12)_1fr]">
58-
<div className="col-start-2 row-span-full row-start-1 grid border-x border-black/5 max-sm:hidden dark:border-white/10"></div>
59-
<GridContainer className="col-span-full col-start-1 row-start-1 mt-12 mb-16 grid sm:my-36 sm:grid-cols-3 sm:gap-x-6 lg:gap-x-12">
60-
<div className="grid-span-1 relative grid items-center justify-center p-2 after:absolute after:bottom-0 after:-left-[100vw] after:h-px after:w-[200vw] after:bg-black/5 max-sm:px-4 dark:after:bg-white/10">
57+
<div className="grid md:grid-cols-[1fr_--spacing(6)_1fr_--spacing(6)_1fr] lg:grid-cols-[1fr_--spacing(12)_1fr_--spacing(12)_1fr]">
58+
<div className="col-start-2 row-span-full row-start-1 grid border-x border-black/5 max-md:hidden dark:border-white/10"></div>
59+
<GridContainer className="col-span-full col-start-1 row-start-1 mt-12 mb-16 grid md:my-36 md:grid-cols-3 md:gap-x-6 lg:gap-x-12">
60+
<div className="grid-span-1 relative grid items-center justify-center p-2 after:absolute after:bottom-0 after:-left-[100vw] after:h-px after:w-[200vw] after:bg-black/5 max-md:px-4 dark:after:bg-white/10">
6161
<DotGridImage
6262
darkMode={true}
6363
width={472}
@@ -70,18 +70,18 @@ export default async function Course() {
7070
height={667}
7171
className="aspect-[472/667] w-full max-w-[226px] dark:hidden"
7272
/>
73-
<Signature className="pointer-events-none absolute -bottom-8 mx-auto translate-x-1/4 fill-gray-900 sm:hidden dark:fill-gray-200" />
73+
<Signature className="pointer-events-none absolute inset-x-0 -bottom-8 mx-auto -translate-x-1/4 fill-gray-900 md:hidden dark:fill-gray-200" />
7474
</div>
75-
<div className="relative grid content-between border-black/5 max-sm:mt-10 max-sm:border-t sm:col-span-2 dark:border-white/10">
76-
<div className="border-b border-black/5 p-2 max-sm:px-4 dark:border-white/10">
75+
<div className="relative grid content-between border-black/5 max-md:mt-10 max-md:border-t md:col-span-2 dark:border-white/10">
76+
<div className="border-b border-black/5 p-2 max-md:px-4 dark:border-white/10">
7777
<p className="font-mono text-sm font-medium text-gray-700 uppercase dark:text-gray-400">
7878
By the creator of Tailwind CSS
7979
</p>
8080
<h1 className="mt-2 text-6xl tracking-tighter text-balance text-gray-900 md:text-7xl lg:text-8xl dark:text-white">
8181
Tailwind CSS by Example
8282
</h1>
8383
</div>
84-
<div className="mt-8 border-t border-black/5 p-2 max-sm:border-y max-sm:px-4 dark:border-white/10">
84+
<div className="mt-8 border-t border-black/5 p-2 max-md:border-y max-md:px-4 dark:border-white/10">
8585
<p className="text-sm/6 text-gray-600 dark:text-gray-400">
8686
Join the waitlist to get early access, free chapters and sneak peaks.
8787
</p>
@@ -90,89 +90,103 @@ export default async function Course() {
9090
</div>
9191
</div>
9292
</div>
93-
<div className="relative py-5 pl-16 font-mono text-xs font-medium text-gray-700 uppercase after:absolute after:bottom-0 after:-left-[100vw] after:h-px after:w-[200vw] after:bg-gray-950/5 max-sm:hidden sm:col-span-3 dark:text-gray-400 dark:after:bg-white/10">
93+
<div className="relative py-5 pl-16 font-mono text-xs font-medium text-gray-700 uppercase after:absolute after:bottom-0 after:-left-[100vw] after:h-px after:w-[200vw] after:bg-gray-950/5 max-md:hidden md:col-span-3 dark:text-gray-400 dark:after:bg-white/10">
9494
<p>
9595
Adam Wathan, <br />
9696
Wrestling enthusiast
9797
</p>
9898
<Signature className="pointer-events-none absolute mx-auto -translate-x-1/4 -translate-y-[110%] fill-gray-900 dark:fill-gray-200" />
9999
</div>
100-
<div className="prose grid max-w-2xl border-black/5 p-2 max-sm:mt-10 max-sm:border-t max-sm:px-4 sm:col-span-2 sm:col-start-2 dark:border-white/10">
101-
<p className="text-xl/7 text-gray-600 dark:text-gray-300">
100+
<div className="prose grid max-w-2xl border-black/5 p-2 max-md:mt-10 max-md:border-t max-md:px-4 md:col-span-2 md:col-start-2 dark:border-white/10">
101+
<p className="text-xl/7">
102102
A video course that teaches you how to build beautiful, responsive UIs—without writing a single line of
103103
custom CSS. Learn by doing, with real-world examples that take you from simple layouts to fully polished
104104
components.
105105
</p>
106-
<h3 className="text-xl/7 font-medium tracking-tighter text-gray-900 dark:text-white">
107-
Why are we making a course?
108-
</h3>
109-
<p className="text-sm/7 text-gray-900 dark:text-white">
106+
<h3 className="text-xl/7 font-medium tracking-tighter">Why are we making a course?</h3>
107+
<p className="text-sm/7">
110108
The thing that makes Tailwind so powerful is that it’s relatively un-opinionated. Sure, it has a lot of
111109
sensible defaults like the color palette or the spacing scale, but they are fairly low level. How you use
112110
them is up to you.
113111
</p>
114-
<p className="text-sm/7 text-gray-900 dark:text-white">
112+
<p className="text-sm/7">
115113
But it turns out, some people like opinions. Over the past 8 years of building everything we make with
116114
Tailwind, we’ve developed a style of using it. This course is about showing you that style, through building
117115
beautiful, real-world, examples.
118116
</p>
119-
<h3 className="text-xl/7 font-medium tracking-tighter text-gray-900 dark:text-white">What you’ll learn</h3>
120-
<p className="text-sm/7 text-gray-900 dark:text-white">
117+
<h3 className="text-xl/7 font-medium tracking-tighter">What you’ll learn</h3>
118+
<p className="text-sm/7">
121119
In the first half, you'll learn the core concepts behind Tailwind—like working with utility classes,
122120
managing hover and focus states, customizing themes, and building responsive designs with ease.
123121
</p>
124-
<p className="text-sm/7 text-gray-900 dark:text-white">
122+
<p className="text-sm/7">
125123
Then, in the "By Example" section, you'll see how it all comes together by building real-world UI components
126124
like marketing pages, checkout flows, and full dashboards—step by step, alongside the creator of Tailwind
127125
CSS himself.
128126
</p>
129-
<ol className="text-sm/7 text-gray-900 dark:text-white">
130-
<li>
131-
<span className="font-semibold">Core Concepts:</span> - The fundamental concepts of Tailwind CSS,
132-
including how to use utility classes, manage hover and focus states, customize themes, and build
133-
responsive designs.
127+
<ol className="not-prose mt-12 text-sm/7">
128+
<li className="grid grid-cols-[auto_repeat(5,minmax(0,1fr))] gap-x-6 xl:gap-y-10">
129+
<div className="grid size-7 grid-cols-1 grid-rows-1 place-content-center border-1 border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white">
130+
<div className="col-start-1 row-start-1 grid place-content-center">
131+
<div className="h-7 w-5 bg-white dark:bg-gray-950" />
132+
</div>
133+
<div className="col-start-1 row-start-1 grid place-content-center tracking-widest">1</div>
134+
</div>
135+
<div className="col-span-5">
136+
<span className="font-semibold">Core Concepts:</span> - The fundamental concepts of Tailwind CSS,
137+
including how to use utility classes, manage hover and focus states, customize themes, and build
138+
responsive designs.
139+
</div>
134140
</li>
135-
<li>
136-
<span className="font-semibold">By Example:</span> - Build real-world UI components using the concepts
137-
learned in the first half. You’ll see all the tricks and techniques we use to create beautiful, responsive
138-
designs.
141+
<li className="mt-6 grid grid-cols-[auto_repeat(5,minmax(0,1fr))] gap-x-6 xl:gap-y-10">
142+
<div className="grid size-7 grid-cols-1 grid-rows-1 place-content-center border-1 border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white">
143+
<div className="col-start-1 row-start-1 grid place-content-center">
144+
<div className="h-7 w-5 bg-white dark:bg-gray-950" />
145+
</div>
146+
<div className="col-start-1 row-start-1 grid place-content-center tracking-widest">2</div>
147+
</div>
148+
<div className="col-span-5">
149+
<span className="font-semibold">By Example:</span> - Build real-world UI components using the concepts
150+
learned in the first half. You’ll see all the tricks and techniques we use to create beautiful,
151+
responsive designs.
152+
</div>
139153
</li>
140154
</ol>
141155
</div>
142-
<GridContainer className="mt-10 grid grid-cols-2 gap-2 sm:col-span-3 sm:grid-cols-3 sm:gap-x-6 lg:gap-x-12">
156+
<GridContainer className="mt-10 grid grid-cols-2 gap-2 md:col-span-3 md:grid-cols-3 md:gap-x-6 lg:gap-x-12">
143157
<ImageGrid images={[form_example_01, form_example_02, form_example_03]} />
144158
<ImageGrid images={[landing_page_example_01, landing_page_example_02, landing_page_example_03]} />
145159
<ImageGrid images={[music_player_example_01, music_player_example_02, music_player_example_03]} />
146160
<ImageGrid images={[hero_example_01, hero_example_02, hero_example_03]} />
147161
</GridContainer>
148-
<div className="prose mt-10 grid max-w-2xl p-2 max-sm:px-4 sm:col-span-2 sm:col-start-2">
149-
<h3 className="text-xl/7 font-medium tracking-tighter text-gray-900 dark:text-white">Who is it for?</h3>
150-
<p className="text-sm/7 text-gray-900 dark:text-white">
162+
<div className="prose mt-10 grid max-w-2xl p-2 max-md:px-4 md:col-span-2 md:col-start-2">
163+
<h3 className="text-xl/7 font-medium tracking-tighter">Who is it for?</h3>
164+
<p className="text-sm/7">
151165
Whether you're brand new to Tailwind CSS or looking to level up your skills, this course gives you a deep
152166
understanding of how to build beautiful, responsive interfaces with utility-first CSS.
153167
</p>
154-
<p className="text-sm/7 text-gray-900 dark:text-white">
168+
<p className="text-sm/7">
155169
If you’re just starting out with Tailwind, you’ll learn the fundamentals and how to use it effectively. If
156170
you’re already familiar with Tailwind, you’ll see how we use it in practice to build real-world components
157171
and layouts.
158172
</p>
159173
<div className="not-prose relative mt-10 max-w-md">
160174
<SignUpForm />
161175
</div>
162-
<p className="mt-10 text-sm/7 text-gray-900 dark:text-white">
176+
<p className="mt-10 text-sm/7">
163177
If this sounds like something you’d be interested in, sign up to the waitlist to get early access, free
164178
chapters and sneak peaks at the course content.
165179
</p>
166180
<Signature className="w-36 fill-gray-900 dark:fill-gray-200" />
167-
<p className="text-sm/7 font-semibold text-gray-900 dark:text-white">- Adam</p>
181+
<p className="text-sm/7 font-semibold">- Adam</p>
168182
</div>
169183
</GridContainer>
170184
</div>
171185
);
172186
}
173187

174188
const ImageGrid = ({ images }: { images: { src: string }[] }) => (
175-
<div className="grid grid-cols-2 gap-2 p-1 sm:last:hidden lg:gap-4">
189+
<div className="grid grid-cols-2 gap-2 p-1 md:last:hidden lg:gap-4">
176190
<Image
177191
src={images[0].src}
178192
alt="Hero section preview for Tailwind CSS by Example"
@@ -187,15 +201,15 @@ const ImageGrid = ({ images }: { images: { src: string }[] }) => (
187201
width={360}
188202
height={298}
189203
quality={100}
190-
className="aspect-180/149 w-full rounded-lg object-cover outline -outline-offset-1 outline-black/5 max-sm:hidden dark:outline-white/10"
204+
className="aspect-180/149 w-full rounded-lg object-cover outline -outline-offset-1 outline-black/5 max-md:hidden dark:outline-white/10"
191205
/>
192206
<Image
193207
src={images[2].src}
194208
alt="Hero section preview for Tailwind CSS by Example"
195209
width={360}
196210
height={298}
197211
quality={100}
198-
className="aspect-180/149 w-full rounded-lg object-cover outline -outline-offset-1 outline-black/5 max-sm:hidden dark:outline-white/10"
212+
className="aspect-180/149 w-full rounded-lg object-cover outline -outline-offset-1 outline-black/5 max-md:hidden dark:outline-white/10"
199213
/>
200214
</div>
201215
);

0 commit comments

Comments
 (0)