Skip to content

Commit 8440231

Browse files
itsmeurbiitsmeurbi
committed
fix: replace custom css classes when possible
1 parent 7a7cab2 commit 8440231

9 files changed

Lines changed: 43 additions & 136 deletions

File tree

‎src/About.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -92,12 +92,12 @@ function About() {
9292

9393
const hero = (
9494
<section className="pt-8 mb-6">
95-
<div className="page-frame">
95+
<div className="mx-auto w-full max-w-6xl px-4">
9696
<Card className="overflow-hidden rounded-3xl">
9797
<div className="grid gap-8 p-6 md:grid-cols-2 md:p-8 lg:p-10">
98-
<div className="brand-grid justify-center">
99-
<span className="eyebrow">{t('aboutUs.heroEyebrow')}</span>
100-
<h1 className="section-title text-slate-950">Web Dev Talks</h1>
98+
<div className="grid content-center gap-5 md:gap-7">
99+
<span className="inline-flex items-center gap-2 rounded-full border border-yellow-300/40 bg-yellow-300/10 px-3 py-1.5 text-[0.82rem] font-bold uppercase tracking-[0.08em] text-sky-600">{t('aboutUs.heroEyebrow')}</span>
100+
<h1 className="text-4xl font-bold leading-none tracking-tight text-slate-950 md:text-5xl lg:text-6xl">Web Dev Talks</h1>
101101
<blockquote className="border-l-4 border-yellow-300 pl-5 text-lg leading-8 text-slate-700">
102102
{t('aboutUs.quote')}
103103
<span className="mt-3 block font-semibold text-slate-950">{t('aboutUs.adrianReyes')}</span>
@@ -119,9 +119,9 @@ function About() {
119119
<Card key={section.title} className="rounded-3xl p-6 md:p-8">
120120
<div className="grid gap-6 md:grid-cols-3 md:gap-10">
121121
<div>
122-
<h2 className="section-subtitle text-slate-950">{section.title}</h2>
122+
<h2 className="text-2xl font-bold tracking-tight text-slate-950 md:text-3xl">{section.title}</h2>
123123
</div>
124-
<div className="prose-copy space-y-4 md:col-span-2">
124+
<div className="space-y-4 text-base leading-8 text-black/80 md:col-span-2 md:text-lg">
125125
{section.body.map((paragraph) => (
126126
<p key={paragraph}>{paragraph}</p>
127127
))}
@@ -142,8 +142,8 @@ function About() {
142142
<Card className="rounded-3xl p-6 md:p-8">
143143
<div className="grid gap-8 lg:grid-cols-2">
144144
<div className="space-y-4">
145-
<p className="eyebrow">{t('aboutUs.offer')}</p>
146-
<h2 className="section-subtitle text-slate-950">{t('aboutUs.offerRights')}</h2>
145+
<p className="inline-flex items-center gap-2 rounded-full border border-yellow-300/40 bg-yellow-300/10 px-3 py-1.5 text-[0.82rem] font-bold uppercase tracking-[0.08em] text-sky-600">{t('aboutUs.offer')}</p>
146+
<h2 className="text-2xl font-bold tracking-tight text-slate-950 md:text-3xl">{t('aboutUs.offerRights')}</h2>
147147
<p className="text-slate-600">
148148
<strong>{t('aboutUs.note')}</strong> {t('aboutUs.benefitsNote')}
149149
</p>
@@ -162,8 +162,8 @@ function About() {
162162
<Card className="rounded-3xl p-6 md:p-8">
163163
<div className="mb-6 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
164164
<div>
165-
<p className="eyebrow">{t('aboutUs.communityHeader')}</p>
166-
<h2 className="section-subtitle mt-4 text-slate-950">{t('aboutUs.gallery')}</h2>
165+
<p className="inline-flex items-center gap-2 rounded-full border border-yellow-300/40 bg-yellow-300/10 px-3 py-1.5 text-[0.82rem] font-bold uppercase tracking-[0.08em] text-sky-600">{t('aboutUs.communityHeader')}</p>
166+
<h2 className="mt-4 text-2xl font-bold tracking-tight text-slate-950 md:text-3xl">{t('aboutUs.gallery')}</h2>
167167
</div>
168168
<p className="max-w-xl text-slate-600">
169169
{t('aboutUs.galleryDescription')}

‎src/CodeOfConduct.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -127,12 +127,12 @@ function CodeOfConduct() {
127127

128128
const hero = (
129129
<section className="pt-8 mb-6">
130-
<div className="page-frame">
130+
<div className="mx-auto w-full max-w-6xl px-4">
131131
<Card className="rounded-3xl px-6 py-8 md:px-8 md:py-10">
132132
<div className="grid gap-6 md:grid-cols-2">
133133
<div>
134-
<span className="eyebrow">{t('codeOfConduct.heroEyebrow')}</span>
135-
<h1 className="section-title mt-4 text-slate-950">{t('codeOfConduct.title')}</h1>
134+
<span className="inline-flex items-center gap-2 rounded-full border border-yellow-300/40 bg-yellow-300/10 px-3 py-1.5 text-[0.82rem] font-bold uppercase tracking-[0.08em] text-sky-600">{t('codeOfConduct.heroEyebrow')}</span>
135+
<h1 className="mt-4 text-4xl font-bold leading-none tracking-tight text-slate-950 md:text-5xl lg:text-6xl">{t('codeOfConduct.title')}</h1>
136136
</div>
137137
<div className="space-y-4 text-slate-600">
138138
<p>{t('codeOfConduct.heroDescription')}</p>
@@ -150,8 +150,8 @@ function CodeOfConduct() {
150150
<Card className="rounded-3xl p-6 md:p-8">
151151
<div className="mb-6 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
152152
<div>
153-
<p className="eyebrow">{t('codeOfConduct.tableOfContents')}</p>
154-
<h2 className="section-subtitle mt-4 text-slate-950">{t('codeOfConduct.tableOfContents')}</h2>
153+
<p className="inline-flex items-center gap-2 rounded-full border border-yellow-300/40 bg-yellow-300/10 px-3 py-1.5 text-[0.82rem] font-bold uppercase tracking-[0.08em] text-sky-600">{t('codeOfConduct.tableOfContents')}</p>
154+
<h2 className="mt-4 text-2xl font-bold tracking-tight text-slate-950 md:text-3xl">{t('codeOfConduct.tableOfContents')}</h2>
155155
</div>
156156
</div>
157157
<div className="grid gap-3 md:grid-cols-2">
@@ -198,14 +198,14 @@ function CodeOfConduct() {
198198
<span className="sr-only">{t('codeOfConduct.copyLink')}</span>
199199
</Button>
200200
</Tooltip>
201-
<h2 className={`section-subtitle ${section.tone === 'danger' ? 'text-red-950' : 'text-slate-950'}`}>
201+
<h2 className={`text-2xl font-bold tracking-tight md:text-3xl ${section.tone === 'danger' ? 'text-red-950' : 'text-slate-950'}`}>
202202
{section.title}
203203
</h2>
204204
</div>
205205

206206
<div className="space-y-5 lg:col-span-2">
207207
{section.intro.map((paragraph) => (
208-
<p key={paragraph} className="prose-copy">
208+
<p key={paragraph} className="text-base leading-8 text-black/80 md:text-lg">
209209
{paragraph}
210210
</p>
211211
))}

‎src/Footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Footer = (): ReactElement => {
99

1010
return (
1111
<footer className="border-t border-black/8 bg-white/80 backdrop-blur-xl">
12-
<div className="page-frame flex flex-col gap-5 py-6 md:flex-row md:items-center md:justify-between">
12+
<div className="mx-auto flex w-full max-w-6xl flex-col gap-5 px-4 py-6 md:flex-row md:items-center md:justify-between">
1313
<div className="flex items-center gap-4">
1414
<Link to="/" className="inline-flex items-center gap-3">
1515
<span className="inline-flex h-12 w-12 overflow-hidden rounded-2xl border border-black/10 bg-white shadow-sm">

‎src/Home.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,18 @@ const Home = (): ReactElement => {
1313

1414
const hero = (
1515
<section className="relative overflow-hidden pt-10">
16-
<div className="page-frame relative pb-10 pt-6 md:pb-14">
17-
<div className="hero-orb hero-orb-left" />
18-
<div className="hero-orb hero-orb-right" />
16+
<div className="relative mx-auto w-full max-w-6xl px-4 pb-10 pt-6 md:pb-14">
17+
<div className="pointer-events-none absolute left-[-5rem] top-16 h-56 w-56 rounded-full bg-yellow-300/35 blur-3xl" />
18+
<div className="pointer-events-none absolute right-[-4rem] top-8 h-72 w-72 rounded-full bg-sky-300/20 blur-3xl" />
1919
<Card className="relative overflow-hidden rounded-3xl px-6 py-8 md:px-10 md:py-12">
2020
<div className="grid items-center gap-10 lg:grid-cols-2">
21-
<div className="brand-grid">
22-
<span className="eyebrow">
21+
<div className="grid gap-5 md:gap-7">
22+
<span className="inline-flex items-center gap-2 rounded-full border border-yellow-300/40 bg-yellow-300/10 px-3 py-1.5 text-[0.82rem] font-bold uppercase tracking-[0.08em] text-sky-600">
2323
<Sparkles className="h-4 w-4" />
2424
{t('homePage.eyebrow')}
2525
</span>
26-
<div className="brand-grid">
27-
<h1 className="section-title text-balance text-slate-950">
26+
<div className="grid gap-5 md:gap-7">
27+
<h1 className="text-balance text-4xl font-bold leading-none tracking-tight text-slate-950 md:text-5xl lg:text-6xl">
2828
{t('homePage.headline')}
2929
</h1>
3030
<p className="max-w-2xl text-lg text-slate-600 md:text-xl">
@@ -75,22 +75,22 @@ const Home = (): ReactElement => {
7575
<SiteShell hero={hero}>
7676
<section className="-mt-2 grid gap-5 md:grid-cols-3">
7777
<Card className="rounded-3xl p-6">
78-
<p className="eyebrow mb-4">{t('homePage.card1Eyebrow')}</p>
79-
<h2 className="section-subtitle mb-3 text-slate-950">{t('homePage.card1Title')}</h2>
78+
<p className="mb-4 inline-flex items-center gap-2 rounded-full border border-yellow-300/40 bg-yellow-300/10 px-3 py-1.5 text-[0.82rem] font-bold uppercase tracking-[0.08em] text-sky-600">{t('homePage.card1Eyebrow')}</p>
79+
<h2 className="mb-3 text-2xl font-bold tracking-tight text-slate-950 md:text-3xl">{t('homePage.card1Title')}</h2>
8080
<p className="text-slate-600">
8181
{t('homePage.card1Body')}
8282
</p>
8383
</Card>
8484
<Card className="rounded-3xl p-6">
85-
<p className="eyebrow mb-4">{t('homePage.card2Eyebrow')}</p>
86-
<h2 className="section-subtitle mb-3 text-slate-950">{t('homePage.card2Title')}</h2>
85+
<p className="mb-4 inline-flex items-center gap-2 rounded-full border border-yellow-300/40 bg-yellow-300/10 px-3 py-1.5 text-[0.82rem] font-bold uppercase tracking-[0.08em] text-sky-600">{t('homePage.card2Eyebrow')}</p>
86+
<h2 className="mb-3 text-2xl font-bold tracking-tight text-slate-950 md:text-3xl">{t('homePage.card2Title')}</h2>
8787
<p className="text-slate-600">
8888
{t('homePage.card2Body')}
8989
</p>
9090
</Card>
9191
<Card className="rounded-3xl p-6">
92-
<p className="eyebrow mb-4">{t('homePage.card3Eyebrow')}</p>
93-
<h2 className="section-subtitle mb-3 text-slate-950">{t('homePage.card3Title')}</h2>
92+
<p className="mb-4 inline-flex items-center gap-2 rounded-full border border-yellow-300/40 bg-yellow-300/10 px-3 py-1.5 text-[0.82rem] font-bold uppercase tracking-[0.08em] text-sky-600">{t('homePage.card3Eyebrow')}</p>
93+
<h2 className="mb-3 text-2xl font-bold tracking-tight text-slate-950 md:text-3xl">{t('homePage.card3Title')}</h2>
9494
<p className="text-slate-600">
9595
{t('homePage.card3Body')}
9696
</p>

‎src/NavBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const NavBar = (): ReactElement => {
3232

3333
return (
3434
<header className="sticky top-0 z-30 border-b border-black/8 bg-white/75 backdrop-blur-xl">
35-
<div className="page-frame flex items-center justify-between gap-4 py-3">
35+
<div className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4 px-4 py-3">
3636
<div className="flex items-center gap-3">
3737
<button
3838
type="button"

‎src/Sponsorship.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -142,12 +142,12 @@ const Sponsorship = (): ReactElement => {
142142

143143
const hero = (
144144
<section className="pt-8 mb-6">
145-
<div className="page-frame">
145+
<div className="mx-auto w-full max-w-6xl px-4">
146146
<Card className="overflow-hidden rounded-3xl">
147147
<div className="grid gap-10 p-6 md:grid-cols-2 md:p-8 lg:p-10">
148148
<div className="space-y-5">
149-
<span className="eyebrow">{t('sponsorship.heroEyebrow')}</span>
150-
<h1 className="section-title text-slate-950">{t('navbar.sponsorship')}</h1>
149+
<span className="inline-flex items-center gap-2 rounded-full border border-yellow-300/40 bg-yellow-300/10 px-3 py-1.5 text-[0.82rem] font-bold uppercase tracking-[0.08em] text-sky-600">{t('sponsorship.heroEyebrow')}</span>
150+
<h1 className="text-4xl font-bold leading-none tracking-tight text-slate-950 md:text-5xl lg:text-6xl">{t('navbar.sponsorship')}</h1>
151151
<p className="text-lg leading-8 text-slate-600">{t('sponsorship.description1')}</p>
152152
<p className="text-slate-600">{t('sponsorship.description2')}</p>
153153
<p className="text-slate-600">{t('sponsorship.description3')}</p>
@@ -193,8 +193,8 @@ const Sponsorship = (): ReactElement => {
193193
<Card className="rounded-3xl p-6 md:p-8">
194194
<div className="grid gap-8 lg:grid-cols-3">
195195
<div>
196-
<p className="eyebrow">{t('sponsorship.attendeesTitle')}</p>
197-
<h2 className="section-subtitle mt-4 text-slate-950">{t('sponsorship.audienceProfile')}</h2>
196+
<p className="inline-flex items-center gap-2 rounded-full border border-yellow-300/40 bg-yellow-300/10 px-3 py-1.5 text-[0.82rem] font-bold uppercase tracking-[0.08em] text-sky-600">{t('sponsorship.attendeesTitle')}</p>
197+
<h2 className="mt-4 text-2xl font-bold tracking-tight text-slate-950 md:text-3xl">{t('sponsorship.audienceProfile')}</h2>
198198
<p className="mt-4 text-slate-600">{t('sponsorship.venues')}</p>
199199
</div>
200200
<div className="mx-auto w-full min-w-0 max-w-xl rounded-3xl border border-black/8 bg-white/82 p-4 shadow-sm sm:col-span-2 sm:p-6">
@@ -251,8 +251,8 @@ const Sponsorship = (): ReactElement => {
251251
<Card className="rounded-3xl p-6 md:p-8">
252252
<div className="mb-6 flex items-end justify-between gap-4">
253253
<div>
254-
<p className="eyebrow">{t('sponsorship.ourSponsors')}</p>
255-
<h2 className="section-subtitle mt-4 text-slate-950">{t('sponsorship.ourSponsors')}</h2>
254+
<p className="inline-flex items-center gap-2 rounded-full border border-yellow-300/40 bg-yellow-300/10 px-3 py-1.5 text-[0.82rem] font-bold uppercase tracking-[0.08em] text-sky-600">{t('sponsorship.ourSponsors')}</p>
255+
<h2 className="mt-4 text-2xl font-bold tracking-tight text-slate-950 md:text-3xl">{t('sponsorship.ourSponsors')}</h2>
256256
</div>
257257
</div>
258258
<div className="grid gap-4 md:grid-cols-3">
@@ -267,8 +267,8 @@ const Sponsorship = (): ReactElement => {
267267
<Card className="rounded-3xl p-6 md:p-8">
268268
<div className="mb-6 flex items-end justify-between gap-4">
269269
<div>
270-
<p className="eyebrow">{t('sponsorship.ourPatreons')}</p>
271-
<h2 className="section-subtitle mt-4 text-slate-950">{t('sponsorship.ourPatreons')}</h2>
270+
<p className="inline-flex items-center gap-2 rounded-full border border-yellow-300/40 bg-yellow-300/10 px-3 py-1.5 text-[0.82rem] font-bold uppercase tracking-[0.08em] text-sky-600">{t('sponsorship.ourPatreons')}</p>
271+
<h2 className="mt-4 text-2xl font-bold tracking-tight text-slate-950 md:text-3xl">{t('sponsorship.ourPatreons')}</h2>
272272
</div>
273273
</div>
274274
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">

‎src/components/SiteShell.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function SiteShell({
1414
<NavBar />
1515
<main className="pb-16">
1616
{hero}
17-
<div className="page-frame">{children}</div>
17+
<div className="mx-auto w-full max-w-6xl px-4">{children}</div>
1818
</main>
1919
<Footer />
2020
</div>

‎src/components/ui/card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
55
({ className, ...props }, ref) => (
66
<div
77
ref={ref}
8-
className={cn('glass-card rounded-3xl', className)}
8+
className={cn('rounded-3xl border border-black/10 bg-white/80 shadow-xl backdrop-blur-xl', className)}
99
{...props}
1010
/>
1111
),

‎src/styles.css‎

Lines changed: 0 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -71,93 +71,6 @@ textarea {
7171
transparent;
7272
}
7373

74-
.page-frame {
75-
width: min(1120px, calc(100vw - 2rem));
76-
margin: 0 auto;
77-
}
78-
79-
.glass-card {
80-
background: var(--card);
81-
border: 1px solid var(--border);
82-
box-shadow: var(--shadow);
83-
backdrop-filter: blur(16px);
84-
}
85-
86-
.hero-orb {
87-
position: absolute;
88-
inset: auto;
89-
border-radius: 999px;
90-
filter: blur(32px);
91-
opacity: 0.7;
92-
pointer-events: none;
93-
}
94-
95-
.hero-orb-left {
96-
top: 4rem;
97-
left: -5rem;
98-
width: 14rem;
99-
height: 14rem;
100-
background: rgba(242, 211, 86, 0.34);
101-
}
102-
103-
.hero-orb-right {
104-
top: 2rem;
105-
right: -4rem;
106-
width: 18rem;
107-
height: 18rem;
108-
background: rgba(82, 150, 199, 0.18);
109-
}
110-
111-
.text-balance {
112-
text-wrap: balance;
113-
}
114-
115-
.prose-copy {
116-
color: rgba(23, 23, 23, 0.82);
117-
font-size: clamp(1rem, 0.98rem + 0.2vw, 1.08rem);
118-
line-height: 1.8;
119-
}
120-
121-
.prose-copy p {
122-
margin: 0;
123-
}
124-
125-
.section-title {
126-
font-family: "Source Sans 3", "Segoe UI", Roboto, sans-serif;
127-
font-size: clamp(1.8rem, 1.25rem + 2.2vw, 3.4rem);
128-
line-height: 1.05;
129-
letter-spacing: -0.025em;
130-
font-weight: 700;
131-
}
132-
133-
.section-subtitle {
134-
font-family: "Source Sans 3", "Segoe UI", Roboto, sans-serif;
135-
font-size: clamp(1.3rem, 1.08rem + 0.9vw, 2rem);
136-
line-height: 1.12;
137-
letter-spacing: -0.02em;
138-
font-weight: 700;
139-
}
140-
141-
.eyebrow {
142-
display: inline-flex;
143-
align-items: center;
144-
gap: 0.5rem;
145-
border-radius: 999px;
146-
border: 1px solid rgba(242, 211, 86, 0.42);
147-
background: rgba(242, 211, 86, 0.12);
148-
color: var(--brand-soft);
149-
padding: 0.35rem 0.75rem;
150-
font-size: 0.82rem;
151-
font-weight: 700;
152-
letter-spacing: 0.08em;
153-
text-transform: uppercase;
154-
}
155-
156-
.brand-grid {
157-
display: grid;
158-
gap: 1.25rem;
159-
}
160-
16174
.sheet-overlay[data-state="open"] {
16275
animation: sheet-overlay-in 180ms ease-out forwards;
16376
}
@@ -217,9 +130,3 @@ textarea {
217130
transform: translateX(-18px);
218131
}
219132
}
220-
221-
@media (min-width: 768px) {
222-
.brand-grid {
223-
gap: 1.75rem;
224-
}
225-
}

0 commit comments

Comments
 (0)