117 lines
2.8 KiB
CSS
117 lines
2.8 KiB
CSS
|
/* ── Reset & base ─────────────────────────────────────────────── */
|
||
|
|
*,
|
||
|
|
*::before,
|
||
|
|
*::after {
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--color-primary: #0d6efd;
|
||
|
|
--color-primary-dark: #0a58ca;
|
||
|
|
--color-bg: #ffffff;
|
||
|
|
--color-bg-secondary: #f8f9fa;
|
||
|
|
--color-text: #212529;
|
||
|
|
--color-text-muted: #6c757d;
|
||
|
|
--color-border: #dee2e6;
|
||
|
|
--color-success: #198754;
|
||
|
|
--color-danger: #dc3545;
|
||
|
|
--color-warning: #ffc107;
|
||
|
|
--radius: 8px;
|
||
|
|
--shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||
|
|
--font-mono: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme='dark'] {
|
||
|
|
--color-bg: #1a1a2e;
|
||
|
|
--color-bg-secondary: #16213e;
|
||
|
|
--color-text: #e0e0e0;
|
||
|
|
--color-text-muted: #a0a0a0;
|
||
|
|
--color-border: #2a2a4a;
|
||
|
|
--shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||
|
|
color: var(--color-text);
|
||
|
|
background: var(--color-bg);
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
min-height: 100dvh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: var(--color-primary);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
a:hover {
|
||
|
|
color: var(--color-primary-dark);
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Utilities ────────────────────────────────────────────────── */
|
||
|
|
.container {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 1200px;
|
||
|
|
margin-inline: auto;
|
||
|
|
padding-inline: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
padding: 0.5rem 1rem;
|
||
|
|
border: none;
|
||
|
|
border-radius: var(--radius);
|
||
|
|
font-size: 0.875rem;
|
||
|
|
font-weight: 500;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background 0.15s, transform 0.1s;
|
||
|
|
}
|
||
|
|
.btn:active {
|
||
|
|
transform: scale(0.97);
|
||
|
|
}
|
||
|
|
.btn-primary {
|
||
|
|
background: var(--color-primary);
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.btn-primary:hover {
|
||
|
|
background: var(--color-primary-dark);
|
||
|
|
}
|
||
|
|
.btn-success {
|
||
|
|
background: var(--color-success);
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.btn-danger {
|
||
|
|
background: var(--color-danger);
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Code blocks (markdown rendered) ─────────────────────────── */
|
||
|
|
pre code {
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
font-size: 0.85rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Cards ────────────────────────────────────────────────────── */
|
||
|
|
.card {
|
||
|
|
background: var(--color-bg);
|
||
|
|
border: 1px solid var(--color-border);
|
||
|
|
border-radius: var(--radius);
|
||
|
|
box-shadow: var(--shadow);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Responsive ───────────────────────────────────────────────── */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.container {
|
||
|
|
padding-inline: 0.75rem;
|
||
|
|
}
|
||
|
|
}
|