Skip to content

Commit e059e32

Browse files
webstackdevwebstackdev
committed
Use Tailwind theme styles in pages
1 parent 6c7ddd1 commit e059e32

13 files changed

Lines changed: 206 additions & 206 deletions

File tree

‎src/pages/404.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,19 @@ const path = '/404/'
99
<div class="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
1010
<div class="max-w-lg w-full text-center">
1111
<div class="mb-8">
12-
<h1 class="text-9xl font-bold text-[var(--color-text-muted)] mb-4">404</h1>
13-
<h2 class="text-3xl md:text-4xl font-bold text-[var(--color-text)] mb-4">
12+
<h1 class="text-9xl font-bold text-text-muted mb-4">404</h1>
13+
<h2 class="text-3xl md:text-4xl font-bold text-text mb-4">
1414
Page Not Found
1515
</h2>
16-
<p class="text-lg text-[var(--color-text-muted)] mb-8">
16+
<p class="text-lg text-text-muted mb-8">
1717
Sorry, the page you are looking for doesn't exist or has been moved.
1818
</p>
1919
</div>
2020

2121
<div class="space-y-4">
2222
<a
2323
href="/"
24-
class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--color-primary)] transition-colors duration-200"
24+
class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-primary hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors duration-200"
2525
>
2626
Go Home
2727
</a>

‎src/pages/articles/[...slug].astro‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,31 +54,31 @@ const authorId =
5454

5555
<div set:html={renderedContent} />
5656

57-
<div class="border-t border-[var(--color-border)] pt-8 mt-12" slot="after-content">
57+
<div class="border-t border-border pt-8 mt-12" slot="after-content">
5858
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
5959
<div>
60-
<h3 class="text-lg font-semibold text-[var(--color-text)] mb-2">
60+
<h3 class="text-lg font-semibold text-text mb-2">
6161
Share this article
6262
</h3>
63-
<p class="text-[var(--color-text-offset)] text-sm">
63+
<p class="text-text-offset text-sm">
6464
Found this helpful? Share it with others who might benefit.
6565
</p>
6666
</div>
6767
<Shares
6868
url={`https://webstackbuilders.com${path}`}
6969
title={pageTitle}
7070
description={`Read "${pageTitle}" on Webstack Builders`}
71-
class="flex-shrink-0"
71+
class="shrink-0"
7272
/>
7373
</div>
7474

7575
{/* WebMentions - shows mentions, likes, and reposts from across the web */}
7676
<WebMentions url={`https://webstackbuilders.com${path}`} />
7777
</div>
7878

79-
<div class="border-t border-[var(--color-border)] pt-8 mt-12" slot="related-content">
79+
<div class="border-t border-border pt-8 mt-12" slot="related-content">
8080
<header class="mb-8">
81-
<h3 class="text-2xl font-bold text-[var(--color-text)]">Other things I've written</h3>
81+
<h3 class="text-2xl font-bold text-text">Other things I've written</h3>
8282
</header>
8383
<Carousel title="" variant="suggested" currentSlug={article.id} limit={5} type="articles" />
8484
</div>

‎src/pages/articles/index.astro‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const sortedArticles = allArticles.sort(
2424
<section class="space-y-12">
2525
{
2626
sortedArticles.map(article => (
27-
<article class="bg-[var(--color-bg)] rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 overflow-hidden group">
27+
<article class="bg-bg rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 overflow-hidden group">
2828
<a href={`/articles/${article.id}`} class="block">
2929
{article.data.image && (
3030
<div class="aspect-video overflow-hidden">
@@ -38,7 +38,7 @@ const sortedArticles = allArticles.sort(
3838
)}
3939

4040
<div class="p-6 md:p-8 space-y-4">
41-
<div class="flex flex-wrap items-center gap-3 text-sm text-[var(--color-text-muted)]">
41+
<div class="flex flex-wrap items-center gap-3 text-sm text-text-muted">
4242
<time datetime={article.data.publishDate.toISOString()} class="flex items-center gap-1">
4343
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4444
<path
@@ -58,32 +58,32 @@ const sortedArticles = allArticles.sort(
5858
{article.data.tags && article.data.tags.length > 0 && (
5959
<div class="flex flex-wrap gap-2">
6060
{article.data.tags.slice(0, 3).map((tag: string) => (
61-
<span class="text-xs font-medium text-[var(--color-primary)] bg-[var(--color-primary-bg)] px-2 py-1 rounded-full uppercase tracking-wide">
61+
<span class="text-xs font-medium text-primary bg-primary-bg px-2 py-1 rounded-full uppercase tracking-wide">
6262
{tag}
6363
</span>
6464
))}
6565
</div>
6666
)}
6767

6868
{article.data.isDraft && (
69-
<span class="inline-block bg-[var(--color-secondary-bg)] text-[var(--color-secondary)] px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wide">
69+
<span class="inline-block bg-secondary-bg text-secondary px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wide">
7070
Draft
7171
</span>
7272
)}
7373
</div>
7474

75-
<h2 class="text-2xl md:text-3xl font-bold text-[var(--color-text)] leading-tight group-hover:text-[var(--color-primary)] transition-colors duration-300">
75+
<h2 class="text-2xl md:text-3xl font-bold text-text leading-tight group-hover:text-primary transition-colors duration-300">
7676
{article.data.title}
7777
</h2>
7878

7979
{article.data.description && (
80-
<p class="text-[var(--color-text-muted)] leading-relaxed line-clamp-3">
80+
<p class="text-text-muted leading-relaxed line-clamp-3">
8181
{article.data.description}
8282
</p>
8383
)}
8484

8585
<div class="flex items-center justify-between pt-4">
86-
<div class="flex items-center gap-2 text-sm text-[var(--color-text-muted)]">
86+
<div class="flex items-center gap-2 text-sm text-text-muted">
8787
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
8888
<path
8989
stroke-linecap="round"
@@ -95,7 +95,7 @@ const sortedArticles = allArticles.sort(
9595
~5 min read
9696
</div>
9797

98-
<div class="flex items-center text-[var(--color-primary)] font-medium group-hover:text-[var(--color-primary-hover)] transition-colors duration-300">
98+
<div class="flex items-center text-primary font-medium group-hover:text-primary-hover transition-colors duration-300">
9999
Read more
100100
<svg
101101
class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-300"

‎src/pages/case-studies/[slug].astro‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -48,39 +48,39 @@ const cover = caseStudy.data.image
4848
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
4949
{
5050
caseStudy.data.client && (
51-
<div class="bg-[var(--color-bg-offset)] p-4 rounded-xl">
52-
<span class="font-semibold text-[var(--color-text)]">Client:</span>
53-
<span class="ml-2 text-[var(--color-text-offset)]">
51+
<div class="bg-bg-offset p-4 rounded-xl">
52+
<span class="font-semibold text-text">Client:</span>
53+
<span class="ml-2 text-text-offset">
5454
{caseStudy.data.client}
5555
</span>
5656
</div>
5757
)
5858
}
5959
{
6060
caseStudy.data.industry && (
61-
<div class="bg-[var(--color-bg-offset)] p-4 rounded-xl">
62-
<span class="font-semibold text-[var(--color-text)]">Industry:</span>
63-
<span class="ml-2 text-[var(--color-text-offset)]">
61+
<div class="bg-bg-offset p-4 rounded-xl">
62+
<span class="font-semibold text-text">Industry:</span>
63+
<span class="ml-2 text-text-offset">
6464
{caseStudy.data.industry}
6565
</span>
6666
</div>
6767
)
6868
}
6969
{
7070
caseStudy.data.projectType && (
71-
<div class="bg-[var(--color-bg-offset)] p-4 rounded-xl">
72-
<span class="font-semibold text-[var(--color-text)]">Project Type:</span>
73-
<span class="ml-2 text-[var(--color-text-offset)]">
71+
<div class="bg-bg-offset p-4 rounded-xl">
72+
<span class="font-semibold text-text">Project Type:</span>
73+
<span class="ml-2 text-text-offset">
7474
{caseStudy.data.projectType}
7575
</span>
7676
</div>
7777
)
7878
}
7979
{
8080
caseStudy.data.duration && (
81-
<div class="bg-[var(--color-bg-offset)] p-4 rounded-xl">
82-
<span class="font-semibold text-[var(--color-text)]">Duration:</span>
83-
<span class="ml-2 text-[var(--color-text-offset)]">
81+
<div class="bg-bg-offset p-4 rounded-xl">
82+
<span class="font-semibold text-text">Duration:</span>
83+
<span class="ml-2 text-text-offset">
8484
{caseStudy.data.duration}
8585
</span>
8686
</div>
@@ -96,9 +96,9 @@ const cover = caseStudy.data.image
9696
<WebMentions url={`https://webstackbuilders.com${path}`} />
9797
</div>
9898

99-
<div class="border-t border-[var(--color-border)] pt-8 mt-12" slot="related-content">
99+
<div class="border-t border-border pt-8 mt-12" slot="related-content">
100100
<header class="mb-8">
101-
<h3 class="text-2xl font-bold text-[var(--color-text)]">Other projects I've worked on</h3>
101+
<h3 class="text-2xl font-bold text-text">Other projects I've worked on</h3>
102102
</header>
103103
<Carousel title="" variant="suggested" currentSlug={caseStudy.id} limit={4} type="case-studies" />
104104
</div>

‎src/pages/case-studies/index.astro‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const sortedCaseStudies = allCaseStudies.sort(
1919
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
2020
{
2121
sortedCaseStudies.map(caseStudy => (
22-
<article class="bg-[var(--color-bg)] rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 overflow-hidden group">
22+
<article class="bg-bg rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 overflow-hidden group">
2323
<a href={`/case-studies/${caseStudy.id}`} class="block h-full">
2424
{caseStudy.data.image && (
2525
<div class="aspect-video overflow-hidden">
@@ -41,24 +41,24 @@ const sortedCaseStudies = allCaseStudies.sort(
4141
)}
4242

4343
<div class="p-6 space-y-4">
44-
<h2 class="text-xl font-semibold text-[var(--color-text)] leading-tight group-hover:text-[var(--color-primary)] transition-colors duration-300">
44+
<h2 class="text-xl font-semibold text-text leading-tight group-hover:text-primary transition-colors duration-300">
4545
{caseStudy.data.title}
4646
</h2>
4747

4848
{caseStudy.data.description && (
49-
<p class="text-[var(--color-text-muted)] text-sm leading-relaxed line-clamp-3">
49+
<p class="text-text-muted text-sm leading-relaxed line-clamp-3">
5050
{caseStudy.data.description}
5151
</p>
5252
)}
5353

5454
<div class="space-y-3">
5555
{caseStudy.data.client && (
56-
<span class="inline-block text-sm font-medium text-[var(--color-primary)] bg-[var(--color-primary-bg)] px-3 py-1 rounded-full">
56+
<span class="inline-block text-sm font-medium text-primary bg-primary-bg px-3 py-1 rounded-full">
5757
Client: {caseStudy.data.client}
5858
</span>
5959
)}
6060

61-
<time class="block text-sm text-[var(--color-text-muted)]">
61+
<time class="block text-sm text-text-muted">
6262
{caseStudy.data.publishDate.toLocaleDateString('en-US', {
6363
year: 'numeric',
6464
month: 'long',
@@ -69,7 +69,7 @@ const sortedCaseStudies = allCaseStudies.sort(
6969
{caseStudy.data.tags && (
7070
<div class="flex flex-wrap gap-2 pt-2">
7171
{caseStudy.data.tags.slice(0, 3).map((tag: string) => (
72-
<span class="text-xs font-medium text-[var(--color-text-muted)] bg-[var(--color-bg-offset)] px-2 py-1 rounded-full">
72+
<span class="text-xs font-medium text-text-muted bg-bg-offset px-2 py-1 rounded-full">
7373
{tag}
7474
</span>
7575
))}

‎src/pages/consent/index.astro‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,28 @@ const path = '/consent/'
88
<BaseLayout pageTitle={pageTitle} path={path}>
99
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
1010
<header class="text-center mb-16">
11-
<h1 class="text-4xl md:text-5xl font-bold text-[var(--color-text)] mb-6">
11+
<h1 class="text-4xl md:text-5xl font-bold text-text mb-6">
1212
Cookie Policy & Settings
1313
</h1>
14-
<p class="text-xl text-[var(--color-text-muted)] max-w-3xl mx-auto">
14+
<p class="text-xl text-text-muted max-w-3xl mx-auto">
1515
Manage your cookie preferences and learn how we use cookies to improve your experience.
1616
</p>
1717
</header>
1818

1919
<!-- Cookie Settings Panel -->
20-
<div class="bg-[var(--color-bg)] rounded-2xl shadow-lg p-8 mb-12">
20+
<div class="bg-bg rounded-2xl shadow-lg p-8 mb-12">
2121
<div class="flex items-center justify-between mb-6">
22-
<h2 class="text-2xl font-bold text-[var(--color-text)]">Your Cookie Preferences</h2>
22+
<h2 class="text-2xl font-bold text-text">Your Cookie Preferences</h2>
2323
<div class="flex gap-3">
2424
<button
2525
id="consent-allow-all"
26-
class="px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-hover)] transition-colors duration-200 font-medium"
26+
class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors duration-200 font-medium"
2727
>
2828
Allow All
2929
</button>
3030
<button
3131
id="consent-save-preferences"
32-
class="px-4 py-2 bg-[var(--color-text-muted)] text-white rounded-lg hover:bg-[var(--color-text)] transition-colors duration-200 font-medium"
32+
class="px-4 py-2 bg-text-muted text-white rounded-lg hover:bg-text transition-colors duration-200 font-medium"
3333
>
3434
Save Preferences
3535
</button>
@@ -80,7 +80,7 @@ const path = '/consent/'
8080
<label class="relative inline-flex items-center cursor-pointer">
8181
<input type="checkbox" id="analytics-cookies" aria-labelledby="analytics-cookies-label" class="sr-only peer" checked />
8282
<div
83-
class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
83+
class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
8484
>
8585
</div>
8686
</label>
@@ -107,7 +107,7 @@ const path = '/consent/'
107107
<label class="relative inline-flex items-center cursor-pointer">
108108
<input type="checkbox" id="functional-cookies" aria-labelledby="functional-cookies-label" class="sr-only peer" checked />
109109
<div
110-
class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
110+
class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
111111
>
112112
</div>
113113
</label>
@@ -134,7 +134,7 @@ const path = '/consent/'
134134
<label class="relative inline-flex items-center cursor-pointer">
135135
<input type="checkbox" id="marketing-cookies" aria-labelledby="marketing-cookies-label" class="sr-only peer" />
136136
<div
137-
class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
137+
class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
138138
>
139139
</div>
140140
</label>
@@ -164,7 +164,7 @@ const path = '/consent/'
164164
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
165165
<div class="flex items-start">
166166
<div
167-
class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mr-4 flex-shrink-0"
167+
class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mr-4 shrink-0"
168168
>
169169
<svg
170170
class="w-4 h-4 text-blue-600 dark:text-blue-400"
@@ -190,7 +190,7 @@ const path = '/consent/'
190190
</div>
191191
<div class="flex items-start">
192192
<div
193-
class="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mr-4 flex-shrink-0"
193+
class="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mr-4 shrink-0"
194194
>
195195
<svg
196196
class="w-4 h-4 text-green-600 dark:text-green-400"
@@ -312,7 +312,7 @@ const path = '/consent/'
312312
</p>
313313
<div class="flex items-start">
314314
<div
315-
class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mr-4 flex-shrink-0"
315+
class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mr-4 shrink-0"
316316
>
317317
<svg
318318
class="w-4 h-4 text-blue-600 dark:text-blue-400"

0 commit comments

Comments
 (0)