svemagie.net/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-05-15 06:58:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(css): fix 10 design system violations in component classes

Browse Source 
- .widget-title: font-bold -> font-semibold
- .repo-card: add shadow-sm
- .fab-menu-item: rounded-xl -> rounded-lg, shadow-md -> shadow-sm
- .p-category: hover border surface -> accent
- .widget: remove mb-4 (conflicts with space-y containers)
- Remove duplicate focus-visible system (outline vs ring)
- Remove duplicate time monospace rule
- .post-type-dropdown: prefers-color-scheme -> .dark class
- .save-later-btn/.share-post-btn: add dark mode variants

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
This commit is contained in:
Ricardo
2026-03-07 15:58:38 +01:00
parent c71a7f38a8
commit 2f442862af
1 changed files with 32 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/tailwind.css
+32 -36
View File
@@ -332,7 +332,7 @@
/* Category tags (post metadata pills) */ /* Category tags (post metadata pills) */
.p-category { .p-category {
@apply inline-block px-2 py-0.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 rounded border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-500 transition-colors; @apply inline-block px-2 py-0.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 rounded border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors;
} }
/* Inline hashtags in post content — styled as subtle links, not pills */ /* Inline hashtags in post content — styled as subtle links, not pills */
@@ -358,7 +358,7 @@
/* GitHub components */ /* GitHub components */
.repo-card { .repo-card {
@apply p-4 border border-surface-200 dark:border-surface-700 rounded-lg; @apply p-4 border border-surface-200 dark:border-surface-700 rounded-lg shadow-sm;
} }
.repo-meta { .repo-meta {
@@ -391,11 +391,11 @@
/* Widget cards */ /* Widget cards */
.widget { .widget {
@apply p-4 mb-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden; @apply p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;
} }
.widget-title { .widget-title {
@apply font-bold text-lg mb-4; @apply font-semibold text-lg mb-4;
} }
/* Collapsible widget wrapper */ /* Collapsible widget wrapper */
@@ -495,17 +495,6 @@
} }
} }
/* Focus states */
@layer base {
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
@apply outline-2 outline-offset-2 outline-accent-500;
}
}
/* Active states — subtle press feedback on buttons */ /* Active states — subtle press feedback on buttons */
@layer base { @layer base {
button:active:not(:disabled), button:active:not(:disabled),
@@ -548,7 +537,7 @@
} }
.fab-menu-item { .fab-menu-item {
@apply flex items-center gap-3 px-4 py-3 rounded-xl bg-surface-50 dark:bg-surface-800 shadow-md hover:shadow-lg border border-surface-200 dark:border-surface-700 text-surface-700 dark:text-surface-200 hover:text-accent-600 dark:hover:text-accent-400 no-underline transition-all duration-150 text-sm font-medium; @apply flex items-center gap-3 px-4 py-3 rounded-lg bg-surface-50 dark:bg-surface-800 shadow-sm border border-surface-200 dark:border-surface-700 text-surface-700 dark:text-surface-200 hover:text-accent-600 dark:hover:text-accent-400 no-underline transition-all duration-150 text-sm font-medium;
} }
.fab-menu-divider { .fab-menu-divider {
@@ -568,13 +557,6 @@
} }
} }
/* Dates — monospace for technical texture (system.md: every <time> gets font-mono) */
@layer base {
time {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
}
/* Apply content-visibility to images and post items for performance */ /* Apply content-visibility to images and post items for performance */
@layer base { @layer base {
/* Responsive typography */ /* Responsive typography */
@@ -907,6 +889,14 @@ body[data-indiekit-auth="true"] .save-later-btn:hover {
pointer-events: none; pointer-events: none;
} }
.dark body[data-indiekit-auth="true"] .save-later-btn {
color: #9ca3af;
}
.dark body[data-indiekit-auth="true"] .save-later-btn:hover {
border-color: #4b5563;
color: #60a5fa;
}
/* Share Post buttons — hidden until auth confirmed */ /* Share Post buttons — hidden until auth confirmed */
.share-post-btn { .share-post-btn {
display: none; display: none;
@@ -931,6 +921,14 @@ body[data-indiekit-auth="true"] .share-post-btn:hover {
color: #10b981; color: #10b981;
} }
.dark body[data-indiekit-auth="true"] .share-post-btn {
color: #9ca3af;
}
.dark body[data-indiekit-auth="true"] .share-post-btn:hover {
border-color: #4b5563;
color: #10b981;
}
/* Post type dropdown */ /* Post type dropdown */
.post-type-dropdown { .post-type-dropdown {
display: none; display: none;
@@ -970,17 +968,15 @@ body[data-indiekit-auth="true"] .share-post-btn:hover {
color: #10b981; color: #10b981;
} }
/* Dark mode */ /* Dark mode — class-based (matches site's darkMode: "class" config) */
@media (prefers-color-scheme: dark) { .dark .post-type-dropdown {
.post-type-dropdown { background: #1f2937;
background: #1f2937; border-color: #374151;
border-color: #374151; }
} .dark .post-type-dropdown-item {
.post-type-dropdown-item { color: #d1d5db;
color: #d1d5db; }
} .dark .post-type-dropdown-item:hover {
.post-type-dropdown-item:hover { background: #374151;
background: #374151; color: #34d399;
color: #34d399;
}
} }