mc/mcq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to Tufte-inspired reading theme

Browse Source 
Cream background, serif typography (Georgia/Palatino), italic headings,
small-caps labels, minimal chrome. Reading area at 70% width. Designed
for long-form markdown reading on mobile and desktop.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kyle Isom
2026-03-28 12:17:43 -07:00
parent 648e9dc3d9
commit a5b90b690e
1 changed files with 205 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

365
web/static/style.css
View File

@@ -1,77 +1,78 @@
/* mcq — Nord dark theme, mobile-first reading UI */ /* mcq — Tufte-inspired reading UI */
/* =========================== /* ===========================
Colour tokens (Nord palette) Colour tokens
=========================== */ =========================== */
:root { :root {
--n0: #2E3440; --bg: #fffff8;
--n1: #3B4252; --bg-alt: #f8f4eb;
--n2: #434C5E; --text: #111;
--n3: #4C566A; --text-dim: #666;
--s0: #D8DEE9; --text-lt: #999;
--s1: #E5E9F0; --accent: #a00000;
--s2: #ECEFF4; --accent-h: #c00000;
--f0: #8FBCBB; --border: #ccc;
--f1: #88C0D0; --border-lt: #e0ddd1;
--f2: #81A1C1; --code-bg: #f0ede4;
--f3: #5E81AC; --green: #4a7c40;
--red: #BF616A; --blue: #3b5998;
--green: #A3BE8C;
--yellow: #EBCB8B;
} }
/* =========================== /* ===========================
Reset Reset
=========================== */ =========================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; } html { font-size: 16px; -webkit-font-smoothing: antialiased; }
/* =========================== /* ===========================
Base Base — Tufte typography
=========================== */ =========================== */
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-family: Georgia, "Palatino Linotype", Palatino, "Book Antiqua", serif;
background: var(--n0); background: var(--bg);
color: var(--s0); color: var(--text);
line-height: 1.6; line-height: 1.6;
min-height: 100vh; min-height: 100vh;
} }
a { color: var(--f1); text-decoration: none; } a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--f0); text-decoration: underline; } a:hover { color: var(--accent-h); text-decoration: underline; }
p { margin-bottom: 0.875rem; } p { margin-bottom: 1rem; }
h2 { font-size: 1.375rem; font-weight: 600; color: var(--s2); margin-bottom: 0.25rem; } h1, h2, h3, h4 {
font-weight: 400;
font-style: italic;
color: var(--text);
}
h2 { font-size: 1.625rem; margin-bottom: 0.25rem; }
code { code {
font-family: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace; font-family: Menlo, "DejaVu Sans Mono", Consolas, monospace;
font-size: 0.8125rem; font-size: 0.8125rem;
color: var(--f0); color: var(--text);
background: var(--n2); background: var(--code-bg);
padding: 0.125rem 0.375rem; padding: 0.125rem 0.375rem;
border-radius: 3px; border-radius: 2px;
} }
/* =========================== /* ===========================
Top navigation Top navigation — minimal
=========================== */ =========================== */
.topnav { .topnav {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 1rem; padding: 0 5%;
height: 48px; height: 44px;
background: var(--n1); background: var(--bg);
border-bottom: 1px solid var(--n3); border-bottom: 1px solid var(--border-lt);
position: sticky;
top: 0;
z-index: 100;
} }
.topnav-brand { .topnav-brand {
font-size: 1rem; font-size: 0.875rem;
font-weight: 700; font-weight: 400;
color: var(--s2); font-variant: small-caps;
letter-spacing: 0.1em;
color: var(--text);
text-decoration: none; text-decoration: none;
letter-spacing: 0.04em;
} }
.topnav-brand:hover { color: var(--f1); text-decoration: none; } .topnav-brand:hover { color: var(--accent); text-decoration: none; }
.topnav-right { .topnav-right {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -79,41 +80,49 @@ code {
} }
.topnav-user { .topnav-user {
font-size: 0.8125rem; font-size: 0.8125rem;
color: var(--s1); color: var(--text-dim);
} }
/* =========================== /* ===========================
Page containers Page containers
=========================== */ =========================== */
.page-container { .page-container {
max-width: 720px; width: 70%;
max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding: 1.5rem 1rem; padding: 2rem 0;
} }
.auth-container { .auth-container {
max-width: 420px; max-width: 380px;
margin: 5rem auto 2rem; margin: 6rem auto 2rem;
padding: 0 1rem; padding: 0 1rem;
} }
@media (max-width: 768px) {
.page-container {
width: auto;
padding: 1.5rem 1rem;
}
}
/* =========================== /* ===========================
Auth pages Auth pages
=========================== */ =========================== */
.auth-header { .auth-header {
text-align: center; text-align: center;
margin-bottom: 1.75rem; margin-bottom: 2rem;
} }
.auth-header .brand { .auth-header .brand {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 400;
color: var(--s2); font-variant: small-caps;
letter-spacing: 0.04em; letter-spacing: 0.1em;
color: var(--text);
} }
.auth-header .tagline { .auth-header .tagline {
font-size: 0.6875rem; font-size: 0.75rem;
color: var(--f2); color: var(--text-lt);
text-transform: uppercase; font-style: italic;
letter-spacing: 0.12em;
margin-top: 0.25rem; margin-top: 0.25rem;
} }
@@ -121,23 +130,28 @@ code {
Cards Cards
=========================== */ =========================== */
.card { .card {
background: var(--n1); background: var(--bg);
border: 1px solid var(--n3); border: none;
border-radius: 6px; border-radius: 0;
padding: 1.25rem; padding: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.card:last-child { margin-bottom: 0; } .auth-container .card {
background: var(--bg-alt);
border: 1px solid var(--border-lt);
border-radius: 4px;
padding: 1.5rem;
}
/* =========================== /* ===========================
Alerts Alerts
=========================== */ =========================== */
.error { .error {
background: rgba(191, 97, 106, 0.12); background: #fdf0f0;
color: #e07c82; color: var(--accent);
border: 1px solid rgba(191, 97, 106, 0.3); border: 1px solid #e8c4c4;
padding: 0.75rem 1rem; padding: 0.625rem 1rem;
border-radius: 4px; border-radius: 3px;
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 0.875rem; font-size: 0.875rem;
} }
@@ -149,40 +163,39 @@ button, .btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.375rem; padding: 0.375rem 1rem;
padding: 0.5rem 1.25rem; font-size: 0.8125rem;
font-size: 0.875rem; font-weight: 400;
font-weight: 600;
font-family: inherit; font-family: inherit;
border: 1px solid var(--f3); border: 1px solid var(--border);
border-radius: 4px; border-radius: 3px;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
transition: background 0.12s, border-color 0.12s, color 0.12s; transition: background 0.12s, border-color 0.12s;
line-height: 1.4; line-height: 1.4;
background: var(--f3); background: var(--bg);
color: var(--s2); color: var(--text);
} }
button:hover, .btn:hover { button:hover, .btn:hover {
background: var(--f2); background: var(--bg-alt);
border-color: var(--f2); border-color: var(--text-lt);
text-decoration: none; text-decoration: none;
color: var(--s2); color: var(--text);
} }
.btn-ghost { .btn-ghost {
background: transparent; background: transparent;
color: var(--s0); color: var(--text-dim);
border-color: var(--n3); border-color: var(--border-lt);
} }
.btn-ghost:hover { .btn-ghost:hover {
background: var(--n2); background: var(--bg-alt);
color: var(--s1); color: var(--text);
border-color: var(--n3); border-color: var(--border);
text-decoration: none; text-decoration: none;
} }
.btn-sm { .btn-sm {
padding: 0.25rem 0.75rem; padding: 0.1875rem 0.625rem;
font-size: 0.75rem; font-size: 0.75rem;
} }
@@ -192,106 +205,111 @@ button:hover, .btn:hover {
.form-group { margin-bottom: 1rem; } .form-group { margin-bottom: 1rem; }
.form-group label { .form-group label {
display: block; display: block;
font-size: 0.6875rem; font-size: 0.75rem;
font-weight: 700; font-weight: 400;
color: var(--s0); font-variant: small-caps;
margin-bottom: 0.375rem;
text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
color: var(--text-dim);
margin-bottom: 0.375rem;
} }
.form-group input { .form-group input {
width: 100%; width: 100%;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.625rem;
background: var(--n0); background: var(--bg);
border: 1px solid var(--n3); border: 1px solid var(--border);
border-radius: 4px; border-radius: 3px;
color: var(--s1); color: var(--text);
font-size: 0.9375rem; font-size: 0.9375rem;
font-family: inherit; font-family: inherit;
transition: border-color 0.12s, box-shadow 0.12s; transition: border-color 0.12s;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
.form-group input:focus { .form-group input:focus {
outline: none; outline: none;
border-color: var(--f3); border-color: var(--text-dim);
box-shadow: 0 0 0 3px rgba(94, 129, 172, 0.2);
} }
.form-group input::placeholder { color: var(--n3); } .form-group input::placeholder { color: var(--border); }
.form-actions { margin-top: 0.25rem; } .form-actions { margin-top: 0.5rem; }
/* =========================== /* ===========================
Document list Document list
=========================== */ =========================== */
.doc-list { .doc-list {
display: flex; margin-top: 1.5rem;
flex-direction: column; border-top: 1px solid var(--border-lt);
gap: 0.5rem;
margin-top: 1rem;
} }
.doc-item { .doc-item {
display: block; display: block;
background: var(--n1); padding: 0.875rem 0;
border: 1px solid var(--n3);
border-radius: 6px;
padding: 1rem 1.25rem;
text-decoration: none; text-decoration: none;
transition: border-color 0.12s, background 0.12s; border-bottom: 1px solid var(--border-lt);
transition: background 0.1s;
} }
.doc-item:hover { .doc-item:hover {
border-color: var(--f3); background: var(--bg-alt);
background: var(--n2);
text-decoration: none; text-decoration: none;
padding-left: 0.5rem;
padding-right: 0.5rem;
margin-left: -0.5rem;
margin-right: -0.5rem;
} }
.doc-item.doc-read { .doc-item.doc-read {
opacity: 0.6; opacity: 0.5;
} }
.doc-title { .doc-title {
font-size: 1rem; font-size: 1.0625rem;
font-weight: 600; font-weight: 400;
color: var(--s2); color: var(--text);
margin-bottom: 0.25rem; margin-bottom: 0.125rem;
} }
.doc-meta { .doc-meta {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: 0.75rem;
font-size: 0.75rem; font-size: 0.75rem;
color: var(--n3); color: var(--text-lt);
font-style: italic;
} }
.doc-badge { .doc-badge {
display: inline-block; display: inline-block;
padding: 0.0625rem 0.375rem; padding: 0 0.375rem;
border-radius: 3px; border-radius: 2px;
font-size: 0.625rem; font-size: 0.625rem;
font-weight: 700; font-weight: 400;
text-transform: uppercase; font-style: normal;
font-variant: small-caps;
letter-spacing: 0.06em; letter-spacing: 0.06em;
} }
.doc-badge.unread { .doc-badge.unread {
background: rgba(94, 129, 172, 0.2); background: transparent;
color: var(--f1); color: var(--accent);
border: 1px solid rgba(94, 129, 172, 0.35);
} }
.doc-badge.read { .doc-badge.read {
background: rgba(163, 190, 140, 0.15); background: transparent;
color: var(--green); color: var(--green);
border: 1px solid rgba(163, 190, 140, 0.3);
} }
/* =========================== /* ===========================
Read view Read view
=========================== */ =========================== */
.read-header { .read-header {
margin-bottom: 1.25rem; margin-bottom: 1.5rem;
}
.read-header h2 {
font-size: 2rem;
font-style: italic;
font-weight: 400;
line-height: 1.3;
} }
.read-meta { .read-meta {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: 0.75rem;
font-size: 0.75rem; font-size: 0.8125rem;
color: var(--n3); color: var(--text-lt);
margin-top: 0.25rem; font-style: italic;
margin-top: 0.375rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.read-actions { .read-actions {
@@ -300,69 +318,96 @@ button:hover, .btn:hover {
} }
/* =========================== /* ===========================
Markdown body Markdown body — Tufte prose
=========================== */ =========================== */
.markdown-body { .markdown-body {
font-size: 0.9375rem; font-size: 1.0625rem;
line-height: 1.7; line-height: 1.8;
padding-top: 0.5rem;
border-top: 1px solid var(--border-lt);
} }
.markdown-body h1 { font-size: 1.5rem; font-weight: 700; color: var(--s2); margin: 1.5rem 0 0.75rem; } .markdown-body h1 {
.markdown-body h2 { font-size: 1.25rem; font-weight: 600; color: var(--s2); margin: 1.25rem 0 0.5rem; } font-size: 2rem;
.markdown-body h3 { font-size: 1.0625rem; font-weight: 600; color: var(--s1); margin: 1rem 0 0.5rem; } font-weight: 400;
.markdown-body h4 { font-size: 0.9375rem; font-weight: 600; color: var(--s1); margin: 0.75rem 0 0.375rem; } font-style: italic;
.markdown-body p { margin-bottom: 0.75rem; } 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 { .markdown-body ul, .markdown-body ol {
margin-bottom: 0.75rem; margin-bottom: 1rem;
padding-left: 1.5rem; padding-left: 1.5rem;
} }
.markdown-body li { margin-bottom: 0.25rem; } .markdown-body li {
margin-bottom: 0.375rem;
}
.markdown-body pre { .markdown-body pre {
background: var(--n0); background: var(--code-bg);
border: 1px solid var(--n3); border: none;
border-radius: 4px; border-radius: 0;
padding: 0.875rem 1rem; padding: 1rem 1.25rem;
overflow-x: auto; overflow-x: auto;
margin-bottom: 0.75rem; margin: 1rem 0;
font-size: 0.8125rem; font-size: 0.8125rem;
line-height: 1.5; line-height: 1.6;
} }
.markdown-body pre code { .markdown-body pre code {
background: none; background: none;
padding: 0; padding: 0;
font-size: inherit; font-size: inherit;
color: var(--s0); color: var(--text);
} }
.markdown-body blockquote { .markdown-body blockquote {
border-left: 3px solid var(--f3); border-left: none;
padding-left: 1rem; padding: 0;
color: var(--s0); margin: 1rem 0 1rem 1.5rem;
margin-bottom: 0.75rem; font-style: italic;
color: var(--text-dim);
} }
.markdown-body table { .markdown-body table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-bottom: 0.75rem; margin: 1rem 0;
font-size: 0.875rem; font-size: 0.875rem;
} }
.markdown-body th, .markdown-body td { .markdown-body th, .markdown-body td {
padding: 0.5rem 0.75rem; padding: 0.375rem 0.75rem;
border: 1px solid var(--n3); border-bottom: 1px solid var(--border-lt);
text-align: left; text-align: left;
} }
.markdown-body th { .markdown-body th {
background: var(--n2); background: transparent;
font-weight: 600; font-weight: 400;
color: var(--s2); font-variant: small-caps;
letter-spacing: 0.04em;
border-bottom: 2px solid var(--border);
} }
.markdown-body hr { .markdown-body hr {
border: none; border: none;
border-top: 1px solid var(--n3); border-top: 1px solid var(--border-lt);
margin: 1.25rem 0; margin: 2rem 0;
} }
.markdown-body a { color: var(--f1); } .markdown-body a { color: var(--accent); }
.markdown-body a:hover { color: var(--f0); } .markdown-body a:hover { color: var(--accent-h); }
.markdown-body img { .markdown-body img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
.markdown-body strong { color: var(--s2); } .markdown-body strong { font-weight: 700; }