121 lines
2.4 KiB
CSS
121 lines
2.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* Light Mode Variables */
|
|
--color-background: #FAFAF8;
|
|
--color-text-primary: #2C3E50;
|
|
--color-text-header: #0A1628;
|
|
--color-accent: #2A4D5C;
|
|
--color-accent-hover: #1E3D4A;
|
|
--color-border: #E2E8F0;
|
|
--color-card: #FFFFFF;
|
|
--color-shadow: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.dark {
|
|
/* Dark Mode Variables */
|
|
--color-background: #0A1628;
|
|
--color-text-primary: #F5E6D3;
|
|
--color-text-header: #F5E6D3;
|
|
--color-accent: #D4A574;
|
|
--color-accent-hover: #C49860;
|
|
--color-border: #2A4D5C;
|
|
--color-card: #1E2D3A;
|
|
--color-shadow: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
html {
|
|
font-family: Inter, system-ui, sans-serif;
|
|
background-color: var(--color-background);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-background);
|
|
color: var(--color-text-primary);
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.theme-bg {
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
.theme-text {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.theme-header {
|
|
color: var(--color-text-header);
|
|
}
|
|
|
|
.theme-accent {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.theme-accent-bg {
|
|
background-color: var(--color-accent);
|
|
}
|
|
|
|
.theme-accent-bg:hover {
|
|
background-color: var(--color-accent-hover);
|
|
}
|
|
|
|
.theme-border {
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
.theme-card {
|
|
background-color: var(--color-card);
|
|
}
|
|
|
|
.theme-shadow {
|
|
box-shadow: 0 4px 6px -1px var(--color-shadow), 0 2px 4px -1px var(--color-shadow);
|
|
}
|
|
|
|
.reading-content {
|
|
@apply mx-auto px-6 py-8;
|
|
font-family: var(--reading-font-family, Georgia, Times, serif);
|
|
font-size: var(--reading-font-size, 16px);
|
|
max-width: var(--reading-max-width, 800px);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.reading-content h1,
|
|
.reading-content h2,
|
|
.reading-content h3,
|
|
.reading-content h4,
|
|
.reading-content h5,
|
|
.reading-content h6 {
|
|
@apply font-bold mt-8 mb-4 theme-header;
|
|
}
|
|
|
|
.reading-content p {
|
|
@apply mb-4 theme-text;
|
|
}
|
|
|
|
.reading-content blockquote {
|
|
@apply border-l-4 pl-4 italic my-6 theme-border theme-text;
|
|
}
|
|
|
|
.reading-content ul,
|
|
.reading-content ol {
|
|
@apply mb-4 pl-6 theme-text;
|
|
}
|
|
|
|
.reading-content li {
|
|
@apply mb-2;
|
|
}
|
|
|
|
.reading-content strong {
|
|
@apply font-semibold theme-header;
|
|
}
|
|
|
|
.reading-content em {
|
|
@apply italic;
|
|
}
|
|
} |