Skip to content

Commit ebf9b08

Browse files
psegurappsegurap
committed
added styles for dark mode
1 parent d986a1d commit ebf9b08

3 files changed

Lines changed: 31 additions & 30 deletions

File tree

‎index.html‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html class="light">
2+
<html >
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -15,7 +15,9 @@
1515
<div class="bg-white dark:bg-gray-900">
1616
<main class="isolate">
1717
<!-- Hero section -->
18-
<div class="relative isolate -z-10 bg-gray-100">
18+
<div
19+
class="relative isolate -z-10 bg-gray-100 dark:bg-gray-800"
20+
>
1921
<div class="overflow-hidden">
2022
<div class="mx-auto max-w-7xl px-6 pb-24 pt-16 lg:px-8">
2123
<div
@@ -30,7 +32,7 @@
3032
Hi there, I'm Pedro!
3133
</h1>
3234
<p
33-
class="mt-8 text-lg font-medium text-pretty text-gray-500 w-full lg:max-w-md sm:text-xl/8 lg:max-w-none dark:text-gray-400"
35+
class="mt-8 text-lg font-medium text-pretty text-gray-500 w-full lg:max-w-md sm:text-xl/8 lg:max-w-none dark:text-gray-300"
3436
>
3537
I'm a proud dad and devoted husband,
3638
balancing family life with my passion
@@ -39,7 +41,7 @@
3941
playing whenever I get the chance.
4042
</p>
4143
<p
42-
class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:max-w-md sm:text-xl/8 lg:max-w-none dark:text-gray-400"
44+
class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:max-w-md sm:text-xl/8 lg:max-w-none dark:text-gray-300"
4345
>
4446
I bring energy and passion to everything
4547
I do, whether it’s coding, cheering for
@@ -55,7 +57,7 @@
5557
alt="Animated picture of Pedro"
5658
/>
5759
<img
58-
class="mt-4 w-full lg:mt-10 rounded-lg shadow"
60+
class="mt-4 w-full lg:mt-10 rounded-sm shadow dark:border-2 dark:border-gray-100/10 dark:shadow-lg"
5961
src="./src/close-up-code-coding.jpg"
6062
alt="Close up code coding"
6163
/>
@@ -66,7 +68,7 @@
6668
</div>
6769

6870
<!-- Logo cloud -->
69-
<div class="bg-white py-20 sm:py-30 dark:bg-gray-900">
71+
<div class="bg-white py-20 sm:py-30 dark:bg-gray-700">
7072
<div class="mx-auto max-w-7xl px-6 lg:px-8">
7173
<div class="mx-auto max-w-2xl text-center">
7274
<h2
@@ -86,65 +88,65 @@
8688
class="mt-10 grid grid-cols-2 gap-2 overflow-hidden sm:mx-0 rounded-2xl md:grid-cols-3 lg:grid-cols-6"
8789
>
8890
<div
89-
class="bg-gray-100 p-8 sm:p-10 dark:bg-white/5 shadow-sm"
91+
class="bg-gray-100 p-8 sm:p-10 dark:bg-gray-200 shadow-sm"
9092
>
9193
<img
9294
src="./src/logos/Next.js.png"
9395
alt="Next.js logo"
94-
class="max-h-12 w-full object-contain dark:hidden"
96+
class="max-h-12 w-full object-contain"
9597
/>
9698
</div>
9799
<div
98-
class="bg-gray-100 p-6 sm:p-10 dark:bg-white/5 shadow-sm"
100+
class="bg-gray-100 p-6 sm:p-10 dark:bg-gray-200 shadow-sm"
99101
>
100102
<img
101103
src="./src/logos/Tailwind_CSS.png"
102104
alt="Tailwind CSS logo"
103-
class="max-h-12 w-full object-contain dark:hidden"
105+
class="max-h-12 w-full object-contain"
104106
/>
105107
</div>
106108
<div
107-
class="bg-gray-100 p-6 sm:p-10 dark:bg-white/5 shadow-sm"
109+
class="bg-gray-100 p-6 sm:p-10 dark:bg-gray-200 shadow-sm"
108110
>
109111
<img
110112
src="./src/logos/Cypress.io.png"
111113
alt="Cypress.io logo"
112-
class="max-h-12 w-full object-contain dark:hidden"
114+
class="max-h-12 w-full object-contain"
113115
/>
114116
</div>
115117
<div
116-
class="bg-gray-100 p-6 sm:p-10 dark:bg-white/5 shadow-sm"
118+
class="bg-gray-100 p-6 sm:p-10 dark:bg-gray-200 shadow-sm"
117119
>
118120
<img
119121
src="./src/logos/Git.png"
120122
alt="Git logo"
121-
class="max-h-12 w-full object-contain dark:hidden"
123+
class="max-h-12 w-full object-contain"
122124
/>
123125
</div>
124126
<div
125-
class="bg-gray-100 p-6 sm:p-10 dark:bg-white/5 shadow-sm"
127+
class="bg-gray-100 p-6 sm:p-10 dark:bg-gray-200 shadow-sm"
126128
>
127129
<img
128130
src="./src/logos/React.png"
129131
alt="React logo"
130-
class="max-h-12 w-full object-contain dark:hidden"
132+
class="max-h-12 w-full object-contain"
131133
/>
132134
</div>
133135
<div
134-
class="bg-gray-100 p-6 sm:p-10 dark:bg-white/5 shadow-sm"
136+
class="bg-gray-100 p-6 sm:p-10 dark:bg-gray-200 shadow-sm"
135137
>
136138
<img
137139
src="./src/logos/Laravel.png"
138140
alt="Laravel logo"
139-
class="max-h-12 w-full object-contain dark:hidden"
141+
class="max-h-12 w-full object-contain"
140142
/>
141143
</div>
142144
</div>
143145
</div>
144146
</div>
145147

146148
<!-- What I’ve Built -->
147-
<div class="bg-gray-100 py-20 pb-40 sm:pt-30 dark:bg-gray-900">
149+
<div class="bg-gray-100 py-20 pb-40 sm:pt-30 dark:bg-gray-800">
148150
<div class="mx-auto max-w-7xl px-6 lg:px-8">
149151
<div class="mx-auto max-w-2xl text-center">
150152
<h2
@@ -164,7 +166,7 @@
164166
class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-12 lg:mx-0 lg:max-w-none lg:grid-cols-3"
165167
>
166168
<div
167-
class="overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800/50 dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10"
169+
class="overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-700 dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10"
168170
>
169171
<div>
170172
<div
@@ -173,7 +175,7 @@
173175
<img
174176
src="./src/logos/cypress-axe-reporter.png"
175177
alt="Design featuring Axe, Cypress.io and JavaScript logos"
176-
class="aspect-video w-full bg-white-100 object-cover sm:aspect-2/1 lg:aspect-3/2 dark:bg-gray-800"
178+
class="aspect-video w-full object-cover sm:aspect-2/1 lg:aspect-3/2"
177179
/>
178180
</div>
179181
<div
@@ -183,11 +185,11 @@
183185
class="flex items-center gap-x-2 text-xs"
184186
>
185187
<span
186-
class="bg-gray-100 text-gray-600 text-xs font-medium px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-gray-300"
188+
class="bg-gray-100 text-gray-600 text-xs font-medium px-2.5 py-0.5 rounded-sm dark:bg-gray-600 dark:text-gray-300"
187189
>axe-core</span
188190
>
189191
<span
190-
class="bg-gray-100 text-gray-600 text-xs font-medium px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-gray-300"
192+
class="bg-gray-100 text-gray-600 text-xs font-medium px-2.5 py-0.5 rounded-sm dark:bg-gray-600 dark:text-gray-300"
191193
>cypress.io</span
192194
>
193195
</div>
@@ -248,7 +250,7 @@
248250
</div>
249251

250252
<div
251-
class="overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800/50 dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10"
253+
class="overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-700 dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10"
252254
>
253255
<div>
254256
<div
@@ -257,7 +259,7 @@
257259
<img
258260
src="./src/logos/conduce-en-estados-unidos.png"
259261
alt="Design featuring Git, Next.js and Tailwind CSS logos"
260-
class="aspect-video w-full bg-white-100 object-cover sm:aspect-2/1 lg:aspect-3/2 dark:bg-gray-800"
262+
class="aspect-video w-full object-cover sm:aspect-2/1 lg:aspect-3/2"
261263
/>
262264
</div>
263265
<div
@@ -267,11 +269,11 @@
267269
class="flex items-center gap-x-2 text-xs"
268270
>
269271
<span
270-
class="bg-gray-100 text-gray-600 text-xs font-medium px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-gray-300"
272+
class="bg-gray-100 text-gray-600 text-xs font-medium px-2.5 py-0.5 rounded-sm dark:bg-gray-600 dark:text-gray-300"
271273
>next.js</span
272274
>
273275
<span
274-
class="bg-gray-100 text-gray-600 text-xs font-medium px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-gray-300"
276+
class="bg-gray-100 text-gray-600 text-xs font-medium px-2.5 py-0.5 rounded-sm dark:bg-gray-600 dark:text-gray-300"
275277
>tailwind</span
276278
>
277279
</div>

‎src/output.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/styles.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
@import "tailwindcss";
2-
@custom-variant dark (&:where(.dark, .dark *));
1+
@import "tailwindcss";

0 commit comments

Comments
 (0)