Skip to content

Commit a45a09c

Browse files
kascitkascit
committed
leveler
1 parent b06fa88 commit a45a09c

36 files changed

Lines changed: 2374 additions & 2193 deletions

‎src/components.css‎

Lines changed: 46 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
/* Code block styling */
2-
pre {
2+
:not(.mockup-code) > pre {
33
@apply overflow-x-auto p-6 rounded-lg my-6 bg-base-300/50 border border-base-content/8 shadow-sm relative;
44
white-space: pre;
55
scrollbar-width: thin;
66
scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
77
}
88

9-
pre::-webkit-scrollbar {
9+
:not(.mockup-code) > pre::-webkit-scrollbar {
1010
height: 6px;
1111
}
1212

13-
pre::-webkit-scrollbar-track {
13+
:not(.mockup-code) > pre::-webkit-scrollbar-track {
1414
background: transparent;
1515
}
1616

17-
pre::-webkit-scrollbar-thumb {
17+
:not(.mockup-code) > pre::-webkit-scrollbar-thumb {
1818
background: rgba(156, 163, 175, 0.3);
1919
border-radius: 3px;
2020
}
2121

22-
pre::-webkit-scrollbar-thumb:hover {
22+
:not(.mockup-code) > pre::-webkit-scrollbar-thumb:hover {
2323
background: rgba(156, 163, 175, 0.5);
2424
}
2525

26-
pre code {
26+
:not(.mockup-code) > pre code {
2727
@apply text-sm whitespace-pre text-base-content/90;
2828
}
2929

@@ -260,19 +260,19 @@ footer.footer .social-icon {
260260
display: block;
261261
padding: 1.25rem;
262262
margin-bottom: 1rem;
263-
border: 1px solid rgba(var(--base-content), 0.12);
263+
border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
264264
border-radius: var(--rounded-box, 0.5rem);
265265
transition: all 0.2s ease;
266266
text-decoration: none;
267-
background: rgba(var(--base-200), 0.4);
268-
color: rgb(var(--base-content));
267+
background: color-mix(in oklab, var(--color-base-200) 40%, transparent);
268+
color: var(--color-base-content);
269269
}
270270

271271
.link-card:hover {
272272
transform: translateY(-2px);
273-
border-color: rgba(var(--base-content), 0.25);
273+
border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent);
274274
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
275-
background: rgba(var(--base-200), 0.7);
275+
background: color-mix(in oklab, var(--color-base-200) 70%, transparent);
276276
}
277277

278278
.link-title {
@@ -282,17 +282,17 @@ footer.footer .social-icon {
282282
display: flex;
283283
align-items: center;
284284
gap: 0.75rem;
285-
color: rgb(var(--base-content));
285+
color: var(--color-base-content);
286286
}
287287

288288
.link-desc {
289289
font-size: 0.875rem;
290-
color: rgba(var(--base-content), 0.7);
290+
color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
291291
}
292292

293293
.link-icon {
294294
font-size: 1.5rem;
295-
color: rgb(var(--info));
295+
color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
296296
}
297297

298298
/* ─── Project Card ─── */
@@ -326,21 +326,21 @@ footer.footer .social-icon {
326326
width: 2.25rem;
327327
height: 2.25rem;
328328
border-radius: 0.5rem;
329-
background: rgba(var(--primary), 0.12);
330-
border: 1px solid rgba(var(--primary), 0.15);
329+
background: color-mix(in oklab, var(--color-primary) 12%, transparent);
330+
border: 1px solid color-mix(in oklab, var(--color-primary) 15%, transparent);
331331
flex-shrink: 0;
332332
transition: all 0.25s ease;
333333
}
334334

335335
.project-card:hover .project-card-icon-wrap {
336-
background: rgba(var(--primary), 0.2);
337-
border-color: rgba(var(--primary), 0.3);
336+
background: color-mix(in oklab, var(--color-primary) 20%, transparent);
337+
border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
338338
transform: scale(1.08);
339339
}
340340

341341
.project-card-icon-wrap i {
342342
font-size: 1rem;
343-
color: rgb(var(--primary));
343+
color: var(--color-primary);
344344
}
345345

346346
.project-card-info {
@@ -352,18 +352,18 @@ footer.footer .social-icon {
352352
font-weight: 600;
353353
margin: 0;
354354
line-height: 1.3;
355-
color: rgb(var(--base-content));
355+
color: var(--color-base-content);
356356
}
357357

358358
.project-card-lang {
359359
font-size: 0.7rem;
360-
color: rgba(var(--base-content), 0.45);
360+
color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
361361
margin-top: 0.125rem;
362362
}
363363

364364
.project-card-desc {
365365
font-size: 0.84rem;
366-
color: rgba(var(--base-content), 0.65);
366+
color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
367367
margin: 0.375rem 0 0.75rem;
368368
line-height: 1.55;
369369
}
@@ -378,16 +378,16 @@ footer.footer .social-icon {
378378
.project-card-tech {
379379
font-size: 0.65rem;
380380
padding: 0.15rem 0.5rem;
381-
border: 1px solid rgba(var(--accent), 0.2);
381+
border: 1px solid color-mix(in oklab, var(--color-accent) 20%, transparent);
382382
border-radius: var(--rounded-badge, 1rem);
383-
color: rgba(var(--base-content), 0.55);
384-
background: rgba(var(--accent), 0.05);
383+
color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
384+
background: color-mix(in oklab, var(--color-accent) 5%, transparent);
385385
transition: all 0.2s ease;
386386
}
387387

388388
.project-card:hover .project-card-tech {
389-
border-color: rgba(var(--accent), 0.3);
390-
color: rgba(var(--base-content), 0.7);
389+
border-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
390+
color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
391391
}
392392

393393
.project-card-actions {
@@ -408,27 +408,27 @@ footer.footer .social-icon {
408408
border-radius: var(--rounded-btn, 0.375rem);
409409
text-decoration: none;
410410
transition: all 0.2s ease;
411-
border: 1px solid rgba(var(--base-content), 0.15);
412-
color: rgba(var(--base-content), 0.7);
411+
border: 1px solid color-mix(in oklab, var(--color-base-content) 15%, transparent);
412+
color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
413413
background: transparent;
414414
}
415415

416416
.project-card-btn:hover {
417-
border-color: rgba(var(--primary), 0.5);
418-
color: rgb(var(--base-content));
419-
background: rgba(var(--primary), 0.1);
417+
border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
418+
color: var(--color-base-content);
419+
background: color-mix(in oklab, var(--color-primary) 10%, transparent);
420420
transform: translateY(-1px);
421421
}
422422

423423
.project-card-btn.btn-live {
424-
background: rgba(var(--primary), 0.12);
425-
border-color: rgba(var(--primary), 0.3);
426-
color: rgb(var(--base-content));
424+
background: color-mix(in oklab, var(--color-primary) 12%, transparent);
425+
border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
426+
color: var(--color-base-content);
427427
}
428428

429429
.project-card-btn.btn-live:hover {
430-
background: rgba(var(--primary), 0.25);
431-
border-color: rgba(var(--primary), 0.5);
430+
background: color-mix(in oklab, var(--color-primary) 25%, transparent);
431+
border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
432432
}
433433

434434
.project-card-btn i {
@@ -458,9 +458,9 @@ footer.footer .social-icon {
458458
}
459459

460460
.project-card-badge.badge-archived {
461-
background: rgba(var(--base-content), 0.06);
462-
border: 1px solid rgba(var(--base-content), 0.12);
463-
color: rgba(var(--base-content), 0.4);
461+
background: color-mix(in oklab, var(--color-base-content) 6%, transparent);
462+
border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
463+
color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
464464
}
465465

466466
.project-card-badge.badge-wip {
@@ -502,3 +502,9 @@ main .design-showcase ul li,
502502
main .design-showcase ol li {
503503
@apply pl-0 mb-2 leading-relaxed before:hidden;
504504
}
505+
506+
/* ─── Landing Page Resets ─── */
507+
.landing-page nav { display: none; }
508+
.landing-page .drawer-side { @apply lg:hidden; }
509+
.landing-page .drawer-toggle { display: none; }
510+
.landing-page .drawer-content { @apply lg:w-full; }

‎src/layout.css‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,15 @@ html {
3232
@apply text-base-content/80 hover:text-base-content hover:bg-base-content/10 transition-colors duration-200 no-underline;
3333
}
3434

35+
/* Force Menu Focus/Active states to adhere to monochromatic theme */
36+
.menu :where(li) > :where(a, details > summary):focus,
37+
.menu :where(li) > :where(a, details > summary):focus-visible {
38+
@apply bg-base-content/5 text-base-content outline-none;
39+
}
40+
.menu :where(li) > :where(a, details > summary):active {
41+
@apply bg-base-content/10 text-base-content;
42+
}
43+
3544

3645

3746
/* Sidebar search input */
@@ -118,7 +127,7 @@ html {
118127

119128
/* Feature cards */
120129
.feature-card {
121-
@apply bg-base-100 border border-base-200/50 shadow-sm hover:shadow-md hover:border-base-300 transition-all duration-300 rounded-xl;
130+
@apply bg-base-200/40 border border-base-content/10 shadow-sm hover:shadow-md hover:border-base-content/25 transition-all duration-300 rounded-xl;
122131
}
123132

124133
/* Feature icon background */
@@ -164,7 +173,7 @@ html {
164173

165174
/* Testimonial cards */
166175
.testimonial-card {
167-
@apply bg-base-100 border border-base-200/50 shadow-sm hover:shadow-md hover:border-base-300 transition-all duration-300 h-full min-h-[17.5rem] rounded-xl p-8 flex flex-col justify-between;
176+
@apply bg-base-200/40 border border-base-content/10 shadow-sm hover:shadow-md hover:border-base-content/25 transition-all duration-300 h-full min-h-[17.5rem] rounded-xl p-8 flex flex-col justify-between;
168177
}
169178

170179
/* Testimonial quote */
@@ -230,11 +239,11 @@ html {
230239

231240
/* Pretty Link Card Styling */
232241
.pretty-link-card {
233-
@apply w-full rounded-xl overflow-hidden bg-base-100 border border-base-200 shadow-sm transition-all duration-300;
242+
@apply w-full rounded-xl overflow-hidden bg-base-200/40 border border-base-content/10 shadow-sm transition-all duration-300;
234243
}
235244

236245
.pretty-link-card:hover {
237-
@apply border-base-300 shadow-md transform -translate-y-0.5 bg-base-200/50;
246+
@apply border-base-content/25 shadow-md transform -translate-y-0.5 bg-base-200/80;
238247
}
239248

240249
.pretty-link-image-wrapper {

‎src/main.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@
3636

3737
@plugin "./daisyui.js" {
3838
themes:
39-
night --default,
40-
lofi;
39+
light --default,
40+
dark;
4141
}
4242

4343
/* Optional for custom themes – Docs: https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme */

‎src/theme-system.css‎

Lines changed: 55 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,65 @@
1-
/* Ashen Monochromatic Theme Overrides */
2-
:root,
3-
[data-theme="night"] {
4-
--primary: 156 163 175;
5-
--primary-focus: 107 114 128;
6-
--primary-content: 17 24 39;
1+
/* Enterprise Monochromatic Theme DaisyUI v5 Overrides */
2+
3+
[data-theme="dark"],
4+
html[data-theme="dark"] {
5+
/* Enforce Deep Zinc Background */
6+
background-color: #09090b !important;
7+
8+
/* Primary interactions: Soft White for premium contrast */
9+
--color-primary: #fafafa;
10+
--color-primary-content: #18181b;
711

8-
--neutral: 24 24 27; /* Zinc 900 */
9-
--neutral-focus: 9 9 11; /* Zinc 950 */
10-
--neutral-content: 250 250 250; /* Zinc 50 */
12+
/* Neutrals & Accents */
13+
--color-neutral: #18181b;
14+
--color-neutral-content: #a1a1aa;
15+
--color-accent: #27272a;
16+
--color-accent-content: #fafafa;
1117

12-
--base-100: 9 9 11; /* Zinc 950 / Deepest sleek dark */
13-
--base-200: 24 24 27; /* Zinc 900 */
14-
--base-300: 39 39 42; /* Zinc 800 */
15-
--base-content: 228 228 231; /* Zinc 200 */
18+
/* Base structural colors */
19+
--color-base-100: #09090b; /* Zinc 950 */
20+
--color-base-200: #18181b; /* Zinc 900 */
21+
--color-base-300: #27272a; /* Zinc 800 */
22+
--color-base-content: #e4e4e7; /* Zinc 200 */
1623

17-
--info: 100 116 139;
18-
--success: 107 114 128;
19-
--warning: 161 161 170;
20-
--error: 127 29 29;
24+
/* Semantics: Muted professional hues */
25+
--color-info: #60a5fa; /* blue-400 */
26+
--color-success: #34d399; /* emerald-400 */
27+
--color-warning: #fbbf24; /* amber-400 */
28+
--color-error: #f87171; /* red-400 */
2129

22-
--rounded-box: 0.5rem;
23-
--rounded-btn: 0.375rem;
24-
--rounded-badge: 1rem;
25-
--animation-btn: 0.2s;
26-
--animation-input: 0.15s;
27-
--btn-text-case: normal;
28-
--btn-focus-scale: 0.98;
29-
--border-btn: 1px;
30-
--tab-border: 1px;
31-
--tab-radius: 0.375rem;
30+
--radius-box: 0.5rem;
31+
--radius-field: 0.375rem;
32+
--radius-selector: 1rem;
3233
}
3334

34-
[data-theme="lofi"] {
35-
--primary: 9 9 11; /* Zinc 950 */
36-
--primary-focus: 24 24 27; /* Zinc 900 */
37-
--primary-content: 255 255 255; /* White */
35+
[data-theme="light"],
36+
html[data-theme="light"] {
37+
/* Enforce Pure White Background */
38+
background-color: #ffffff !important;
39+
40+
/* Primary interactions: Soft Black for premium contrast */
41+
--color-primary: #18181b;
42+
--color-primary-content: #ffffff;
3843

39-
--neutral: 244 244 245; /* Zinc 100 */
40-
--neutral-focus: 228 228 231; /* Zinc 200 */
41-
--neutral-content: 9 9 11; /* Zinc 950 */
44+
/* Neutrals & Accents */
45+
--color-neutral: #f4f4f5;
46+
--color-neutral-content: #52525b;
47+
--color-accent: #e4e4e7;
48+
--color-accent-content: #09090b;
4249

43-
--base-100: 255 255 255; /* Pure White */
44-
--base-200: 250 250 250; /* Zinc 50 */
45-
--base-300: 244 244 245; /* Zinc 100 */
46-
--base-content: 24 24 27; /* Zinc 900 */
50+
/* Base structural colors */
51+
--color-base-100: #ffffff; /* White */
52+
--color-base-200: #fafafa; /* Zinc 50 */
53+
--color-base-300: #f4f4f5; /* Zinc 100 */
54+
--color-base-content: #27272a; /* Zinc 800 */
4755

48-
--info: 113 113 122; /* Zinc 500 */
49-
--success: 63 63 70; /* Zinc 700 */
50-
--warning: 39 39 42; /* Zinc 800 */
51-
--error: 9 9 11; /* Zinc 950 */
56+
/* Semantics: Vibrant professional hues */
57+
--color-info: #3b82f6; /* blue-500 */
58+
--color-success: #10b981; /* emerald-500 */
59+
--color-warning: #f59e0b; /* amber-500 */
60+
--color-error: #ef4444; /* red-500 */
61+
62+
--radius-box: 0.5rem;
63+
--radius-field: 0.375rem;
64+
--radius-selector: 1rem;
5265
}

0 commit comments

Comments
 (0)