Skip to content

Commit a8b30d6

Browse files
codercatdevcodercatdev
committed
update theme colors
1 parent fa1846a commit a8b30d6

4 files changed

Lines changed: 59 additions & 60 deletions

File tree

‎apps/astro-for-beginners/src/app.postcss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@font-face {
22
font-family: 'Nunito';
33
src: url('/fonts/Nunito-VariableFont_wght.ttf');
4-
font-display: swap;
4+
font-display: primary;
55
}
66

77
@tailwind base;

‎apps/astro-for-beginners/src/routes/+layout.svelte‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@
3333
<AppShell>
3434
<svelte:fragment slot="header">
3535
<!-- App Bar -->
36-
<AppBar background="bg-gradient-to-r from-blue-800 to-yellow-500">
36+
<AppBar
37+
background="bg-gradient-to-r from-primary-800 via-primary-500 via-70% to-secondary-500 to-97%"
38+
>
3739
<svelte:fragment slot="lead">
3840
<a
3941
href="/"
@@ -69,7 +71,7 @@
6971

7072
<a
7173
href="/#pricing"
72-
class="px-6 py-3 text-sm font-bold text-indigo-800 transition-transform bg-white rounded-lg sm:text-xl hover:scale-105"
74+
class="px-6 py-3 text-sm font-bold text-primary-800 transition-transform bg-white rounded-lg sm:text-xl hover:scale-105"
7375
>
7476
Start Learning
7577
</a>

‎apps/astro-for-beginners/src/routes/+page.svelte‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
import { Tiktok, Youtube } from '@steeze-ui/simple-icons';
1414
</script>
1515

16-
<main class="bg-gradient-to-r from-blue-800 to-yellow-500">
16+
<main class="bg-gradient-to-r from-primary-800 via-primary-500 via-70% to-secondary-500 to-97%">
1717
<div class="px-10">
1818
<div
1919
class="relative flex flex-col p-2 pt-20 text-white md:items-center md:text-center overflow-x-clip"
@@ -77,7 +77,7 @@
7777
</div>
7878
<div class="w-full max-w-3xl px-10 mx-auto text-left translate-y-40">
7979
<div class="relative p-4 py-6 pt-12 bg-white md:p-10 rounded-2xl">
80-
<h2 class="mb-2 text-3xl font-bold text-blue-800 md:text-4xl md:mb-4">
80+
<h2 class="mb-2 text-3xl font-bold text-primary-800 md:text-4xl md:mb-4">
8181
Updated for Astro 3.0!
8282
</h2>
8383

@@ -86,14 +86,14 @@
8686
</p>
8787

8888
<a
89-
class="inline-block w-full px-8 py-4 mb-2 text-sm text-center text-white transition-transform duration-200 rounded-lg bg-blue-900 sm:text-xl md:text-2xl hover:scale-105"
89+
class="inline-block w-full px-8 py-4 mb-2 text-sm text-center text-white transition-transform duration-200 rounded-lg bg-primary-900 sm:text-xl md:text-2xl hover:scale-105"
9090
href="#pricing"
9191
>
9292
Start Learning
9393
</a>
9494
</div>
9595
</div>
96-
<section class="py-20 bg-blue-800 bg-opacity-60" id="overview">
96+
<section class="py-20 bg-primary-800 bg-opacity-60" id="overview">
9797
<div
9898
class="grid items-center justify-between max-w-6xl grid-cols-1 px-10 mx-auto mt-40 text-center sm:grid-cols-1 lg:grid-cols-3 gap-y-24 lg:gap-y-4"
9999
>
@@ -180,7 +180,7 @@
180180
</div>
181181
<div class="order-2 translate-x-0 lg:w-2/3 lg:relative lg:translate-x-10">
182182
<div
183-
class="absolute right-0 bg-blue-400 rounded-lg -top-5 -bottom-5 left-10 opacity-20"
183+
class="absolute right-0 bg-primary-400 rounded-lg -top-5 -bottom-5 left-10 opacity-20"
184184
></div>
185185
<img
186186
src="https://media.codingcat.dev/image/upload/f_auto,q_auto/v1701028803/main-codingcatdev-photo/whisker-word.jpg"
@@ -212,7 +212,7 @@
212212
</section>
213213
<section
214214
id="topics"
215-
class="relative px-8 py-24 text-white bg-blue-800 bg-opacity-60 lg:py-40 overflow-x-clip"
215+
class="relative px-8 py-24 text-white bg-primary-800 bg-opacity-60 lg:py-40 overflow-x-clip"
216216
>
217217
<div class="max-w-2xl mx-auto mb-20">
218218
<h2 class="text-4xl font-bold md:text-6xl text-left md:text-center mb-6 leading-[3rem]">
@@ -330,7 +330,7 @@
330330
</p>
331331
</div>
332332
</section>
333-
<section id="yourInstructor" class="px-8 pb-32 text-white bg-blue-800 bg-opacity-60 pt-60">
333+
<section id="yourInstructor" class="px-8 pb-32 text-white bg-primary-800 bg-opacity-60 pt-60">
334334
<div class="max-w-6xl mx-auto">
335335
<h2 class="mb-20 text-4xl font-bold text-center md:text-6xl lg:text-left lg:mb-4">
336336
Hi, I&#39;m Alex Patterson
@@ -346,7 +346,7 @@
346346

347347
<div class="flex flex-col items-center gap-y-4 mb-10 lg:mb-0 w-full md:min-w-[400px]">
348348
<div
349-
class="inline-block max-w-sm p-2 rounded-full bg-gradient-to-r from-blue-800 to-yellow-500"
349+
class="inline-block max-w-sm p-2 rounded-full bg-gradient-to-r from-primary-800 via-primary-500 via-70% to-secondary-500 to-97%"
350350
>
351351
<img
352352
class="inline-block rounded-full md:h-80 md:w-80"
@@ -405,7 +405,7 @@
405405
class="grid grid-cols-1 gap-y-10 lg:grid-cols-[1fr,1fr] justify-stretch items-center ml[10px] max-w-xl lg:max-w-6xl mx-auto"
406406
>
407407
<div class="shadow-xl lg:min-w-[500px] bg-white rounded-xl p-10 flex flex-col">
408-
<h3 class="text-2xl font-bold text-center text-blue-700">Half-stack (Basic Package)</h3>
408+
<h3 class="text-2xl font-bold text-center text-primary-700">Half-stack (Basic Package)</h3>
409409
<p class="mb-4 text-xl text-center text-gray-500">Static Site Generation Only</p>
410410
<p class="flex items-start justify-center mb-10 font-bold text-gray-700 text-7xl">
411411
<span class="text-sm">US</span> $75
@@ -417,11 +417,6 @@
417417
<Icon src={CheckCircled} class="w-8 h-8" theme="solid" />
418418
</span> Astro Components, Integrations, and Islands
419419
</li>
420-
<li class="relative flex items-center text-lg text-gray-900 gap-2">
421-
<span>
422-
<Icon src={CheckCircled} class="w-8 h-8" theme="solid" />
423-
</span> Markdown and Content Collections with Zod and TypeScript
424-
</li>
425420
<li class="relative flex items-center text-lg text-gray-900 gap-2">
426421
<span>
427422
<Icon src={CheckCircled} class="w-8 h-8" theme="solid" />
@@ -440,7 +435,7 @@
440435
</ul>
441436

442437
<a
443-
class="inline-block w-full px-8 py-4 mb-2 text-sm text-center text-white transition-transform duration-200 rounded-lg bg-blue-800 sm:text-xl md:text-2xl hover:scale-105"
438+
class="inline-block w-full px-8 py-4 mb-2 text-sm text-center text-white transition-transform duration-200 rounded-lg bg-primary-800 sm:text-xl md:text-2xl hover:scale-105"
444439
href="https://learn.jamesqquick.com/c0f821a5-6b5d-4668-82fe-4e4684e22d0e"
445440
data-podia-embed="link"
446441
>
@@ -449,9 +444,11 @@
449444
<p class="mb-4 text-sm text-gray-700 text-light">*30 day money-back guarantee</p>
450445
</div>
451446
<div
452-
class="shadow-xl lg:min-w-[500px] bg-white rounded-xl p-10 flex flex-col shadow-blue-900 border-8 border-blue-400 py-20 -ml-[10px]"
447+
class="shadow-xl lg:min-w-[500px] bg-white rounded-xl p-10 flex flex-col shadow-primary-900 border-8 border-primary-400 py-20 -ml-[10px]"
453448
>
454-
<h3 class="text-2xl font-bold text-center text-blue-700">Full-stack (Premium Package)</h3>
449+
<h3 class="text-2xl font-bold text-center text-primary-700">
450+
Full-stack (Premium Package)
451+
</h3>
455452
<p class="mb-4 text-xl text-center text-gray-500">
456453
Static Site Generation + Server-side Rendering
457454
</p>
@@ -473,12 +470,12 @@
473470
<li class="relative flex items-center text-lg text-gray-900 gap-2">
474471
<span>
475472
<Icon src={CheckCircled} class="w-8 h-8" theme="solid" />
476-
</span> Database Integration Using Xata
473+
</span> Database Integration Using Firebase
477474
</li>
478475
<li class="relative flex items-center text-lg text-gray-900 gap-2">
479476
<span>
480477
<Icon src={CheckCircled} class="w-8 h-8" theme="solid" />
481-
</span> Building a Basic Auth Strategy Using Cookies
478+
</span> Authentication with Firebase on the Server
482479
</li>
483480
<li class="relative flex items-center text-lg text-gray-900 gap-2">
484481
<span>
@@ -488,7 +485,7 @@
488485
</ul>
489486

490487
<a
491-
class="inline-block w-full px-8 py-4 mb-2 text-sm text-center text-white transition-transform duration-200 rounded-lg bg-blue-800 sm:text-xl md:text-2xl hover:scale-105"
488+
class="inline-block w-full px-8 py-4 mb-2 text-sm text-center text-white transition-transform duration-200 rounded-lg bg-primary-800 sm:text-xl md:text-2xl hover:scale-105"
492489
href="https://learn.codingcat.dev/astro-for-beginners"
493490
data-podia-embed="link"
494491
>
@@ -567,15 +564,15 @@
567564
</div>
568565
</section>
569566
<!-- <Pricing /> -->
570-
<section class="relative px-8 text-white bg-blue-800 bg-opacity-60 false overflow-x-clip">
567+
<section class="relative px-8 text-white bg-primary-800 bg-opacity-60 false overflow-x-clip">
571568
<div class="max-w-2xl mx-auto mb-20"></div>
572569

573570
<div class="py-20">
574571
<div class="flex flex-col items-center content-center mb-6">
575572
<p class="mb-4 text-lg">What are you waiting for?</p>
576573
<a
577574
href="#pricing"
578-
class="px-6 py-3 text-sm font-bold text-indigo-800 transition-transform bg-white rounded-lg sm:text-xl hover:scale-105"
575+
class="px-6 py-3 text-sm font-bold text-primary-800 transition-transform bg-white rounded-lg sm:text-xl hover:scale-105"
579576
>
580577
Start learning today!
581578
</a>

‎apps/astro-for-beginners/theme.ts‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -12,36 +12,36 @@ export const astroCustomTheme: CustomThemeConfig = {
1212
'--theme-rounded-container': '8px',
1313
'--theme-border-base': '1px',
1414
// =~= Theme On-X Colors =~=
15-
'--on-primary': '0 0 0',
16-
'--on-secondary': '255 255 255',
15+
'--on-primary': '255 255 255',
16+
'--on-secondary': '0 0 0',
1717
'--on-tertiary': '0 0 0',
1818
'--on-success': '0 0 0',
1919
'--on-warning': '0 0 0',
2020
'--on-error': '255 255 255',
2121
'--on-surface': '255 255 255',
2222
// =~= Theme Colors =~=
23-
// primary | #0FBA81
24-
'--color-primary-50': '219 245 236', // #dbf5ec
25-
'--color-primary-100': '207 241 230', // #cff1e6
26-
'--color-primary-200': '195 238 224', // #c3eee0
27-
'--color-primary-300': '159 227 205', // #9fe3cd
28-
'--color-primary-400': '87 207 167', // #57cfa7
29-
'--color-primary-500': '15 186 129', // #0FBA81
30-
'--color-primary-600': '14 167 116', // #0ea774
31-
'--color-primary-700': '11 140 97', // #0b8c61
32-
'--color-primary-800': '9 112 77', // #09704d
33-
'--color-primary-900': '7 91 63', // #075b3f
34-
// secondary | #4F46E5
35-
'--color-secondary-50': '229 227 251', // #e5e3fb
36-
'--color-secondary-100': '220 218 250', // #dcdafa
37-
'--color-secondary-200': '211 209 249', // #d3d1f9
38-
'--color-secondary-300': '185 181 245', // #b9b5f5
39-
'--color-secondary-400': '132 126 237', // #847eed
40-
'--color-secondary-500': '79 70 229', // #4F46E5
41-
'--color-secondary-600': '71 63 206', // #473fce
42-
'--color-secondary-700': '59 53 172', // #3b35ac
43-
'--color-secondary-800': '47 42 137', // #2f2a89
44-
'--color-secondary-900': '39 34 112', // #272270
23+
// primary | #4F46E5
24+
'--color-primary-50': '229 227 251', // #e5e3fb
25+
'--color-primary-100': '220 218 250', // #dcdafa
26+
'--color-primary-200': '211 209 249', // #d3d1f9
27+
'--color-primary-300': '185 181 245', // #b9b5f5
28+
'--color-primary-400': '132 126 237', // #847eed
29+
'--color-primary-500': '79 70 229', // #4F46E5
30+
'--color-primary-600': '71 63 206', // #473fce
31+
'--color-primary-700': '59 53 172', // #3b35ac
32+
'--color-primary-800': '47 42 137', // #2f2a89
33+
'--color-primary-900': '39 34 112', // #272270
34+
// secondary | #EAB308
35+
'--color-secondary-50': '252 244 218', // #fcf4da
36+
'--color-secondary-100': '251 240 206', // #fbf0ce
37+
'--color-secondary-200': '250 236 193', // #faecc1
38+
'--color-secondary-300': '247 225 156', // #f7e19c
39+
'--color-secondary-400': '240 202 82', // #f0ca52
40+
'--color-secondary-500': '234 179 8', // #EAB308
41+
'--color-secondary-600': '211 161 7', // #d3a107
42+
'--color-secondary-700': '176 134 6', // #b08606
43+
'--color-secondary-800': '140 107 5', // #8c6b05
44+
'--color-secondary-900': '115 88 4', // #735804
4545
// tertiary | #0EA5E9
4646
'--color-tertiary-50': '219 242 252', // #dbf2fc
4747
'--color-tertiary-100': '207 237 251', // #cfedfb
@@ -75,17 +75,17 @@ export const astroCustomTheme: CustomThemeConfig = {
7575
'--color-warning-700': '176 134 6', // #b08606
7676
'--color-warning-800': '140 107 5', // #8c6b05
7777
'--color-warning-900': '115 88 4', // #735804
78-
// error | #D41976
79-
'--color-error-50': '249 221 234', // #f9ddea
80-
'--color-error-100': '246 209 228', // #f6d1e4
81-
'--color-error-200': '244 198 221', // #f4c6dd
82-
'--color-error-300': '238 163 200', // #eea3c8
83-
'--color-error-400': '225 94 159', // #e15e9f
84-
'--color-error-500': '212 25 118', // #D41976
85-
'--color-error-600': '191 23 106', // #bf176a
86-
'--color-error-700': '159 19 89', // #9f1359
87-
'--color-error-800': '127 15 71', // #7f0f47
88-
'--color-error-900': '104 12 58', // #680c3a
78+
// error | #f80d0d
79+
'--color-error-50': '254 219 219', // #fedbdb
80+
'--color-error-100': '254 207 207', // #fecfcf
81+
'--color-error-200': '253 195 195', // #fdc3c3
82+
'--color-error-300': '252 158 158', // #fc9e9e
83+
'--color-error-400': '250 86 86', // #fa5656
84+
'--color-error-500': '248 13 13', // #f80d0d
85+
'--color-error-600': '223 12 12', // #df0c0c
86+
'--color-error-700': '186 10 10', // #ba0a0a
87+
'--color-error-800': '149 8 8', // #950808
88+
'--color-error-900': '122 6 6', // #7a0606
8989
// surface | #495a8f
9090
'--color-surface-50': '228 230 238', // #e4e6ee
9191
'--color-surface-100': '219 222 233', // #dbdee9

0 commit comments

Comments
 (0)