Alexey Pavlov
a16bf812e4
- CSS-переменные --bg, --surface, --ink, --mute, --accent для обеих тем - darkMode: 'class' в Tailwind config - ThemeToggle компонент с Sun/Moon, сохраняет выбор в localStorage - Inline-скрипт в layout.js защищает от FOUC (FlashOfUnstyledContent) - Авто-определение по prefers-color-scheme как fallback - not-found.js: красивая 404 страница вместо дефолтной Next - Обновлены все компоненты и страницы — Header, Footer, ArticleCard, page.js, blog, tag, about
94 lines
2.6 KiB
CSS
94 lines
2.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* === Theme tokens === */
|
|
:root {
|
|
--bg: 250 250 249; /* почти белый, тёплый */
|
|
--surface: 255 255 255; /* карточки */
|
|
--surface-2: 245 245 244; /* приглушённый фон */
|
|
--border: 231 229 228;
|
|
--ink: 28 25 23; /* основной текст */
|
|
--mute: 120 113 108; /* приглушённый текст */
|
|
--accent: 16 185 129; /* emerald-500 */
|
|
--accent-2: 5 150 105; /* emerald-600 */
|
|
--accent-soft: 209 250 229; /* emerald-100 */
|
|
}
|
|
|
|
.dark {
|
|
--bg: 10 10 10;
|
|
--surface: 20 20 20;
|
|
--surface-2: 28 28 28;
|
|
--border: 42 42 42;
|
|
--ink: 229 231 235;
|
|
--mute: 156 163 175;
|
|
--accent: 16 185 129;
|
|
--accent-2: 52 211 153;
|
|
--accent-soft: 6 78 59;
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
background: rgb(var(--bg));
|
|
color: rgb(var(--ink));
|
|
}
|
|
body { @apply font-sans antialiased; }
|
|
::selection { background: rgb(var(--accent) / 0.25); }
|
|
}
|
|
|
|
@layer components {
|
|
.btn {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
.btn-primary {
|
|
background: rgb(var(--accent));
|
|
color: white;
|
|
}
|
|
.btn-primary:hover { background: rgb(var(--accent-2)); }
|
|
|
|
.btn-ghost {
|
|
color: rgb(var(--mute));
|
|
}
|
|
.btn-ghost:hover {
|
|
background: rgb(var(--surface-2));
|
|
color: rgb(var(--ink));
|
|
}
|
|
|
|
.container-narrow { @apply max-w-3xl mx-auto px-4; }
|
|
.container-wide { @apply max-w-6xl mx-auto px-4; }
|
|
|
|
.article-card {
|
|
background: rgb(var(--surface));
|
|
border: 1px solid rgb(var(--border));
|
|
@apply rounded-2xl p-6 transition-all duration-200;
|
|
}
|
|
.article-card:hover {
|
|
border-color: rgb(var(--accent) / 0.4);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px -10px rgb(0 0 0 / 0.08);
|
|
}
|
|
.dark .article-card:hover {
|
|
box-shadow: 0 10px 25px -10px rgb(0 0 0 / 0.5);
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
@apply text-xs px-2.5 py-1 rounded-full transition-colors;
|
|
background: rgb(var(--surface-2));
|
|
color: rgb(var(--mute));
|
|
}
|
|
.tag:hover {
|
|
background: rgb(var(--accent-soft));
|
|
color: rgb(var(--accent-2));
|
|
}
|
|
|
|
.surface { background: rgb(var(--surface)); }
|
|
.surface-2 { background: rgb(var(--surface-2)); }
|
|
.ink { color: rgb(var(--ink)); }
|
|
.mute { color: rgb(var(--mute)); }
|
|
.accent { color: rgb(var(--accent)); }
|
|
.border-soft { border-color: rgb(var(--border)); }
|
|
.border-b-soft { border-bottom: 1px solid rgb(var(--border)); }
|
|
.border-t-soft { border-top: 1px solid rgb(var(--border)); }
|
|
}
|