mc/mcq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bc1627915e94df58bb10e45c1016341f75285f12
mcq/web/static/style.css
Kyle Isom bc1627915e Initial implementation of mcq — document reading queue 
Single-binary service: push raw markdown via REST/gRPC API, read rendered
HTML through mobile-friendly web UI. MCIAS auth on all endpoints, SQLite
storage, goldmark rendering with GFM and syntax highlighting.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-28 11:53:26 -07:00

369 lines
8.0 KiB
CSS
Raw Blame History

/* mcq — Nord dark theme, mobile-first reading UI */
/* ===========================
Colour tokens (Nord palette)
=========================== */
:root {
--n0: #2E3440;
--n1: #3B4252;
--n2: #434C5E;
--n3: #4C566A;
--s0: #D8DEE9;
--s1: #E5E9F0;
--s2: #ECEFF4;
--f0: #8FBCBB;
--f1: #88C0D0;
--f2: #81A1C1;
--f3: #5E81AC;
--red: #BF616A;
--green: #A3BE8C;
--yellow: #EBCB8B;
}
/* ===========================
Reset
=========================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
/* ===========================
Base
=========================== */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
background: var(--n0);
color: var(--s0);
line-height: 1.6;
min-height: 100vh;
}
a { color: var(--f1); text-decoration: none; }
a:hover { color: var(--f0); text-decoration: underline; }
p { margin-bottom: 0.875rem; }
h2 { font-size: 1.375rem; font-weight: 600; color: var(--s2); margin-bottom: 0.25rem; }
code {
font-family: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
font-size: 0.8125rem;
color: var(--f0);
background: var(--n2);
padding: 0.125rem 0.375rem;
border-radius: 3px;
}
/* ===========================
Top navigation
=========================== */
.topnav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
height: 48px;
background: var(--n1);
border-bottom: 1px solid var(--n3);
position: sticky;
top: 0;
z-index: 100;
}
.topnav-brand {
font-size: 1rem;
font-weight: 700;
color: var(--s2);
text-decoration: none;
letter-spacing: 0.04em;
}
.topnav-brand:hover { color: var(--f1); text-decoration: none; }
.topnav-right {
display: flex;
align-items: center;
gap: 0.75rem;
}
.topnav-user {
font-size: 0.8125rem;
color: var(--s1);
}
/* ===========================
Page containers
=========================== */
.page-container {
max-width: 720px;
margin: 0 auto;
padding: 1.5rem 1rem;
}
.auth-container {
max-width: 420px;
margin: 5rem auto 2rem;
padding: 0 1rem;
}
/* ===========================
Auth pages
=========================== */
.auth-header {
text-align: center;
margin-bottom: 1.75rem;
}
.auth-header .brand {
font-size: 1.5rem;
font-weight: 700;
color: var(--s2);
letter-spacing: 0.04em;
}
.auth-header .tagline {
font-size: 0.6875rem;
color: var(--f2);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-top: 0.25rem;
}
/* ===========================
Cards
=========================== */
.card {
background: var(--n1);
border: 1px solid var(--n3);
border-radius: 6px;
padding: 1.25rem;
margin-bottom: 1rem;
}
.card:last-child { margin-bottom: 0; }
/* ===========================
Alerts
=========================== */
.error {
background: rgba(191, 97, 106, 0.12);
color: #e07c82;
border: 1px solid rgba(191, 97, 106, 0.3);
padding: 0.75rem 1rem;
border-radius: 4px;
margin-bottom: 1rem;
font-size: 0.875rem;
}
/* ===========================
Buttons
=========================== */
button, .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
padding: 0.5rem 1.25rem;
font-size: 0.875rem;
font-weight: 600;
font-family: inherit;
border: 1px solid var(--f3);
border-radius: 4px;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background 0.12s, border-color 0.12s, color 0.12s;
line-height: 1.4;
background: var(--f3);
color: var(--s2);
}
button:hover, .btn:hover {
background: var(--f2);
border-color: var(--f2);
text-decoration: none;
color: var(--s2);
}
.btn-ghost {
background: transparent;
color: var(--s0);
border-color: var(--n3);
}
.btn-ghost:hover {
background: var(--n2);
color: var(--s1);
border-color: var(--n3);
text-decoration: none;
}
.btn-sm {
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
}
/* ===========================
Forms
=========================== */
.form-group { margin-bottom: 1rem; }
.form-group label {
display: block;
font-size: 0.6875rem;
font-weight: 700;
color: var(--s0);
margin-bottom: 0.375rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.form-group input {
width: 100%;
padding: 0.5rem 0.75rem;
background: var(--n0);
border: 1px solid var(--n3);
border-radius: 4px;
color: var(--s1);
font-size: 0.9375rem;
font-family: inherit;
transition: border-color 0.12s, box-shadow 0.12s;
-webkit-appearance: none;
appearance: none;
}
.form-group input:focus {
outline: none;
border-color: var(--f3);
box-shadow: 0 0 0 3px rgba(94, 129, 172, 0.2);
}
.form-group input::placeholder { color: var(--n3); }
.form-actions { margin-top: 0.25rem; }
/* ===========================
Document list
=========================== */
.doc-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1rem;
}
.doc-item {
display: block;
background: var(--n1);
border: 1px solid var(--n3);
border-radius: 6px;
padding: 1rem 1.25rem;
text-decoration: none;
transition: border-color 0.12s, background 0.12s;
}
.doc-item:hover {
border-color: var(--f3);
background: var(--n2);
text-decoration: none;
}
.doc-item.doc-read {
opacity: 0.6;
}
.doc-title {
font-size: 1rem;
font-weight: 600;
color: var(--s2);
margin-bottom: 0.25rem;
}
.doc-meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
font-size: 0.75rem;
color: var(--n3);
}
.doc-badge {
display: inline-block;
padding: 0.0625rem 0.375rem;
border-radius: 3px;
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.doc-badge.unread {
background: rgba(94, 129, 172, 0.2);
color: var(--f1);
border: 1px solid rgba(94, 129, 172, 0.35);
}
.doc-badge.read {
background: rgba(163, 190, 140, 0.15);
color: var(--green);
border: 1px solid rgba(163, 190, 140, 0.3);
}
/* ===========================
Read view
=========================== */
.read-header {
margin-bottom: 1.25rem;
}
.read-meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
font-size: 0.75rem;
color: var(--n3);
margin-top: 0.25rem;
margin-bottom: 0.75rem;
}
.read-actions {
display: flex;
gap: 0.5rem;
}
/* ===========================
Markdown body
=========================== */
.markdown-body {
font-size: 0.9375rem;
line-height: 1.7;
}
.markdown-body h1 { font-size: 1.5rem; font-weight: 700; color: var(--s2); margin: 1.5rem 0 0.75rem; }
.markdown-body h2 { font-size: 1.25rem; font-weight: 600; color: var(--s2); margin: 1.25rem 0 0.5rem; }
.markdown-body h3 { font-size: 1.0625rem; font-weight: 600; color: var(--s1); margin: 1rem 0 0.5rem; }
.markdown-body h4 { font-size: 0.9375rem; font-weight: 600; color: var(--s1); margin: 0.75rem 0 0.375rem; }
.markdown-body p { margin-bottom: 0.75rem; }
.markdown-body ul, .markdown-body ol {
margin-bottom: 0.75rem;
padding-left: 1.5rem;
}
.markdown-body li { margin-bottom: 0.25rem; }
.markdown-body pre {
background: var(--n0);
border: 1px solid var(--n3);
border-radius: 4px;
padding: 0.875rem 1rem;
overflow-x: auto;
margin-bottom: 0.75rem;
font-size: 0.8125rem;
line-height: 1.5;
}
.markdown-body pre code {
background: none;
padding: 0;
font-size: inherit;
color: var(--s0);
}
.markdown-body blockquote {
border-left: 3px solid var(--f3);
padding-left: 1rem;
color: var(--s0);
margin-bottom: 0.75rem;
}
.markdown-body table {
width: 100%;
border-collapse: collapse;
margin-bottom: 0.75rem;
font-size: 0.875rem;
}
.markdown-body th, .markdown-body td {
padding: 0.5rem 0.75rem;
border: 1px solid var(--n3);
text-align: left;
}
.markdown-body th {
background: var(--n2);
font-weight: 600;
color: var(--s2);
}
.markdown-body hr {
border: none;
border-top: 1px solid var(--n3);
margin: 1.25rem 0;
}
.markdown-body a { color: var(--f1); }
.markdown-body a:hover { color: var(--f0); }
.markdown-body img {
max-width: 100%;
height: auto;
}
.markdown-body strong { color: var(--s2); }
Reference in New Issue View Git Blame Copy Permalink