Kyle Isom
940993a2e3
CSS custom properties overridden via [data-theme="dark"] with prefers-color-scheme fallback. Toggle in nav persists choice to localStorage. No Go changes — CSS and template only. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
468 lines
9.5 KiB
CSS
468 lines
9.5 KiB
CSS
/* mcq — Tufte-inspired reading UI */
|
|
|
|
/* ===========================
|
|
Colour tokens
|
|
=========================== */
|
|
:root {
|
|
--bg: #fffff8;
|
|
--bg-alt: #f8f4eb;
|
|
--text: #111;
|
|
--text-dim: #666;
|
|
--text-lt: #999;
|
|
--accent: #a00000;
|
|
--accent-h: #c00000;
|
|
--border: #ccc;
|
|
--border-lt: #e0ddd1;
|
|
--code-bg: #f0ede4;
|
|
--green: #4a7c40;
|
|
--blue: #3b5998;
|
|
--error-bg: #fdf0f0;
|
|
--error-border: #e8c4c4;
|
|
}
|
|
|
|
/* Dark theme — explicit toggle */
|
|
[data-theme="dark"] {
|
|
--bg: #1a1a1a;
|
|
--bg-alt: #242420;
|
|
--text: #d4d0c8;
|
|
--text-dim: #999;
|
|
--text-lt: #666;
|
|
--accent: #d44040;
|
|
--accent-h: #e85050;
|
|
--border: #3a3a36;
|
|
--border-lt: #2e2e2a;
|
|
--code-bg: #2a2a24;
|
|
--green: #6aac58;
|
|
--blue: #5b89c8;
|
|
--error-bg: #2a1a1a;
|
|
--error-border: #4a2a2a;
|
|
}
|
|
|
|
/* Dark theme — system preference fallback */
|
|
@media (prefers-color-scheme: dark) {
|
|
html:not([data-theme]) {
|
|
--bg: #1a1a1a;
|
|
--bg-alt: #242420;
|
|
--text: #d4d0c8;
|
|
--text-dim: #999;
|
|
--text-lt: #666;
|
|
--accent: #d44040;
|
|
--accent-h: #e85050;
|
|
--border: #3a3a36;
|
|
--border-lt: #2e2e2a;
|
|
--code-bg: #2a2a24;
|
|
--green: #6aac58;
|
|
--blue: #5b89c8;
|
|
--error-bg: #2a1a1a;
|
|
--error-border: #4a2a2a;
|
|
}
|
|
}
|
|
|
|
/* ===========================
|
|
Reset
|
|
=========================== */
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
|
|
|
|
/* ===========================
|
|
Base — Tufte typography
|
|
=========================== */
|
|
body {
|
|
font-family: Georgia, "Palatino Linotype", Palatino, "Book Antiqua", serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
}
|
|
a { color: var(--accent); text-decoration: none; }
|
|
a:hover { color: var(--accent-h); text-decoration: underline; }
|
|
p { margin-bottom: 1rem; }
|
|
h1, h2, h3, h4 {
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
color: var(--text);
|
|
}
|
|
h2 { font-size: 1.625rem; margin-bottom: 0.25rem; }
|
|
code {
|
|
font-family: Menlo, "DejaVu Sans Mono", Consolas, monospace;
|
|
font-size: 0.8125rem;
|
|
color: var(--text);
|
|
background: var(--code-bg);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* ===========================
|
|
Top navigation — minimal
|
|
=========================== */
|
|
.topnav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 5%;
|
|
height: 44px;
|
|
background: var(--bg);
|
|
border-bottom: 1px solid var(--border-lt);
|
|
}
|
|
.topnav-brand {
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
font-variant: small-caps;
|
|
letter-spacing: 0.1em;
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
}
|
|
.topnav-brand:hover { color: var(--accent); text-decoration: none; }
|
|
.topnav-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
.topnav-user {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-dim);
|
|
}
|
|
.theme-toggle {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
padding: 0.25rem;
|
|
line-height: 1;
|
|
color: var(--text-dim);
|
|
}
|
|
.theme-toggle:hover {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ===========================
|
|
Page containers
|
|
=========================== */
|
|
.page-container {
|
|
width: 70%;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 2rem 0;
|
|
}
|
|
.auth-container {
|
|
max-width: 380px;
|
|
margin: 6rem auto 2rem;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.page-container {
|
|
width: auto;
|
|
padding: 1.5rem 1rem;
|
|
}
|
|
}
|
|
|
|
/* ===========================
|
|
Auth pages
|
|
=========================== */
|
|
.auth-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.auth-header .brand {
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
font-variant: small-caps;
|
|
letter-spacing: 0.1em;
|
|
color: var(--text);
|
|
}
|
|
.auth-header .tagline {
|
|
font-size: 0.75rem;
|
|
color: var(--text-lt);
|
|
font-style: italic;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* ===========================
|
|
Cards
|
|
=========================== */
|
|
.card {
|
|
background: var(--bg);
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.auth-container .card {
|
|
background: var(--bg-alt);
|
|
border: 1px solid var(--border-lt);
|
|
border-radius: 4px;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
/* ===========================
|
|
Alerts
|
|
=========================== */
|
|
.error {
|
|
background: var(--error-bg);
|
|
color: var(--accent);
|
|
border: 1px solid var(--error-border);
|
|
padding: 0.625rem 1rem;
|
|
border-radius: 3px;
|
|
margin-bottom: 1rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* ===========================
|
|
Buttons
|
|
=========================== */
|
|
button, .btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.375rem 1rem;
|
|
font-size: 0.8125rem;
|
|
font-weight: 400;
|
|
font-family: inherit;
|
|
border: 1px solid var(--border);
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
transition: background 0.12s, border-color 0.12s;
|
|
line-height: 1.4;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
button:hover, .btn:hover {
|
|
background: var(--bg-alt);
|
|
border-color: var(--text-lt);
|
|
text-decoration: none;
|
|
color: var(--text);
|
|
}
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--text-dim);
|
|
border-color: var(--border-lt);
|
|
}
|
|
.btn-ghost:hover {
|
|
background: var(--bg-alt);
|
|
color: var(--text);
|
|
border-color: var(--border);
|
|
text-decoration: none;
|
|
}
|
|
.btn-sm {
|
|
padding: 0.1875rem 0.625rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* ===========================
|
|
Forms
|
|
=========================== */
|
|
.form-group { margin-bottom: 1rem; }
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
font-weight: 400;
|
|
font-variant: small-caps;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-dim);
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
.form-group input {
|
|
width: 100%;
|
|
padding: 0.5rem 0.625rem;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 3px;
|
|
color: var(--text);
|
|
font-size: 0.9375rem;
|
|
font-family: inherit;
|
|
transition: border-color 0.12s;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
.form-group input:focus {
|
|
outline: none;
|
|
border-color: var(--text-dim);
|
|
}
|
|
.form-group input::placeholder { color: var(--border); }
|
|
.form-actions { margin-top: 0.5rem; }
|
|
|
|
/* ===========================
|
|
Document list
|
|
=========================== */
|
|
.doc-list {
|
|
margin-top: 1.5rem;
|
|
border-top: 1px solid var(--border-lt);
|
|
}
|
|
.doc-item {
|
|
display: block;
|
|
padding: 0.875rem 0;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--border-lt);
|
|
transition: background 0.1s;
|
|
}
|
|
.doc-item:hover {
|
|
background: var(--bg-alt);
|
|
text-decoration: none;
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
margin-left: -0.5rem;
|
|
margin-right: -0.5rem;
|
|
}
|
|
.doc-item.doc-read {
|
|
opacity: 0.5;
|
|
}
|
|
.doc-title {
|
|
font-size: 1.0625rem;
|
|
font-weight: 400;
|
|
color: var(--text);
|
|
margin-bottom: 0.125rem;
|
|
}
|
|
.doc-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
font-size: 0.75rem;
|
|
color: var(--text-lt);
|
|
font-style: italic;
|
|
}
|
|
.doc-badge {
|
|
display: inline-block;
|
|
padding: 0 0.375rem;
|
|
border-radius: 2px;
|
|
font-size: 0.625rem;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-variant: small-caps;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
.doc-badge.unread {
|
|
background: transparent;
|
|
color: var(--accent);
|
|
}
|
|
.doc-badge.read {
|
|
background: transparent;
|
|
color: var(--green);
|
|
}
|
|
|
|
/* ===========================
|
|
Read view
|
|
=========================== */
|
|
.read-header {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.read-header h2 {
|
|
font-size: 2rem;
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
}
|
|
.read-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
font-size: 0.8125rem;
|
|
color: var(--text-lt);
|
|
font-style: italic;
|
|
margin-top: 0.375rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.read-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* ===========================
|
|
Markdown body — Tufte prose
|
|
=========================== */
|
|
.markdown-body {
|
|
font-size: 1.0625rem;
|
|
line-height: 1.8;
|
|
padding-top: 0.5rem;
|
|
border-top: 1px solid var(--border-lt);
|
|
}
|
|
.markdown-body h1 {
|
|
font-size: 2rem;
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
margin: 2rem 0 0.75rem;
|
|
}
|
|
.markdown-body h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
margin: 1.75rem 0 0.5rem;
|
|
}
|
|
.markdown-body h3 {
|
|
font-size: 1.1875rem;
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
margin: 1.5rem 0 0.5rem;
|
|
}
|
|
.markdown-body h4 {
|
|
font-size: 1.0625rem;
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
margin: 1.25rem 0 0.375rem;
|
|
}
|
|
.markdown-body p { margin-bottom: 1rem; }
|
|
.markdown-body ul, .markdown-body ol {
|
|
margin-bottom: 1rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
.markdown-body li {
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
.markdown-body pre {
|
|
background: var(--code-bg);
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 1rem 1.25rem;
|
|
overflow-x: auto;
|
|
margin: 1rem 0;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.6;
|
|
}
|
|
.markdown-body pre code {
|
|
background: none;
|
|
padding: 0;
|
|
font-size: inherit;
|
|
color: var(--text);
|
|
}
|
|
.markdown-body blockquote {
|
|
border-left: none;
|
|
padding: 0;
|
|
margin: 1rem 0 1rem 1.5rem;
|
|
font-style: italic;
|
|
color: var(--text-dim);
|
|
}
|
|
.markdown-body table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 1rem 0;
|
|
font-size: 0.875rem;
|
|
}
|
|
.markdown-body th, .markdown-body td {
|
|
padding: 0.375rem 0.75rem;
|
|
border-bottom: 1px solid var(--border-lt);
|
|
text-align: left;
|
|
}
|
|
.markdown-body th {
|
|
background: transparent;
|
|
font-weight: 400;
|
|
font-variant: small-caps;
|
|
letter-spacing: 0.04em;
|
|
border-bottom: 2px solid var(--border);
|
|
}
|
|
.markdown-body hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border-lt);
|
|
margin: 2rem 0;
|
|
}
|
|
.markdown-body a { color: var(--accent); }
|
|
.markdown-body a:hover { color: var(--accent-h); }
|
|
.markdown-body img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
.markdown-body strong { font-weight: 700; }
|