9355121b7c
Phase B. Images on threads and comments, stored in /data/uploads — inside the volume that already holds board.db, so there is one directory to back up rather than two and no second mount to remember. Not in the site repository, which is the distinction that matters: the content editor uploads by committing, and a private photo committed there would go through the build pipeline and out onto vienalatina.com. The type is decided by the first bytes, not the filename. content.py trusts the extension, which is tolerable where Hugo serves the result; here we serve it back, so an HTML file called gato.png would be a script running on our own origin. Five magic-number checks, no new dependency. The uploaded name is kept only as text to show a person; the name on disk is generated. Staging is separate from saving so a refused picture cannot leave a half-made thread behind. Threads and comments are soft-deleted, so the serving route checks the parent is still live. Without it, taking a post down leaves its photo readable by anyone who noted the URL. And the hole this phase existed to close: backup-board.sh archived board.db and nothing else, so the first upload would have made the nightly backup silently incomplete while still reporting success. It now archives the uploads directory too, verifies the archive, and names the directory when it is empty rather than passing over it in silence. Tested by restoring: destroyed the directory, restored from the archive, compared bytes. IMAGE_EXTENSIONS moves to uploads.py and content.py imports it, so the editor and the board cannot drift apart about what counts as a picture. 46 new tests, 176 in total. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NizVpJ2dwzCbjCrTLCjeHn
327 lines
8.5 KiB
CSS
327 lines
8.5 KiB
CSS
/* =========================================================
|
|
Members area — stylesheet.
|
|
|
|
The :root block below is copied from
|
|
themes/vienalatina/assets/css/main.css, which already duplicates it for the
|
|
same reason: each stylesheet stands on its own. The two files are served by
|
|
different things — Hugo fingerprints one, Flask serves the other — so
|
|
sharing a file would couple the app's deploy to the site's build for no gain.
|
|
If the brand colours change, change them in both.
|
|
========================================================= */
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
|
|
--brand: #c0391c;
|
|
--brand-dark: #9a2a0f;
|
|
--brand-soft: #fbe2db;
|
|
--brand-softer: #fdf1ed;
|
|
|
|
--bg: #f8f3ef;
|
|
--surface: #ffffff;
|
|
--surface-soft: #f2ebe6;
|
|
--border: #c2a89f;
|
|
--border-light: #e0cec8;
|
|
|
|
--text: #1a0d09;
|
|
--muted: #5c3d37;
|
|
--subtle: #9a7870;
|
|
|
|
--danger: #a11b1b;
|
|
|
|
--shadow: 0 2px 16px rgba(60, 20, 10, 0.09);
|
|
--shadow-sm: 0 1px 6px rgba(60, 20, 10, 0.06);
|
|
--radius-xl: 18px;
|
|
--radius-lg: 12px;
|
|
--radius-md: 8px;
|
|
--radius-sm: 5px;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }
|
|
a { color: var(--brand-dark); }
|
|
button, input, select, textarea { font: inherit; }
|
|
|
|
/* --- chrome ---------------------------------------------------------- */
|
|
|
|
.site-bar {
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.site-bar__inner {
|
|
max-width: 860px;
|
|
margin: 0 auto;
|
|
padding: 1rem 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.site-bar__brand { text-decoration: none; }
|
|
.site-bar__brand-text { color: var(--brand); font-weight: 700; font-size: 1.25rem; }
|
|
|
|
.site-bar__account { display: flex; align-items: center; gap: 0.75rem; }
|
|
.site-bar__account form { margin: 0; }
|
|
.who { color: var(--muted); font-size: 0.9rem; }
|
|
|
|
.site-bar__pages { border-top: 1px solid var(--border-light); background: var(--surface); }
|
|
.page-nav {
|
|
max-width: 860px;
|
|
margin: 0 auto;
|
|
padding: 0.6rem 16px;
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
}
|
|
.page-nav a { color: var(--muted); text-decoration: none; }
|
|
.page-nav a:hover { color: var(--brand); }
|
|
|
|
.page-shell { max-width: 860px; margin: 0 auto; padding: 2rem 16px 4rem; }
|
|
|
|
.site-foot {
|
|
margin-top: 3rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--border-light);
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
color: var(--subtle);
|
|
}
|
|
.site-foot a { color: var(--subtle); }
|
|
.site-foot__legal { margin-top: 0.5rem; }
|
|
|
|
/* --- cards ----------------------------------------------------------- */
|
|
|
|
.feed-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.feed-head h1 { margin: 0; }
|
|
|
|
.card {
|
|
background: var(--surface);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-sm);
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.card--center { text-align: center; }
|
|
.card--comment { background: var(--surface); border-left: 3px solid var(--border-light); }
|
|
|
|
.card__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.85rem;
|
|
color: var(--subtle);
|
|
}
|
|
.card__title { margin: 0.4rem 0 0.6rem; font-size: 1.35rem; }
|
|
.card__title a { color: var(--text); text-decoration: none; }
|
|
.card__title a:hover { color: var(--brand); }
|
|
.card__excerpt { margin: 0; color: var(--muted); }
|
|
.card__foot { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--subtle); }
|
|
|
|
.section-head { margin: 2rem 0 1rem; font-size: 1.05rem; color: var(--muted); }
|
|
|
|
.tag {
|
|
background: var(--brand-soft);
|
|
color: var(--brand-dark);
|
|
border-radius: 999px;
|
|
padding: 0.15rem 0.6rem;
|
|
font-size: 0.72rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.tag--quiet { background: var(--surface-soft); color: var(--muted); }
|
|
|
|
/* --- prose ----------------------------------------------------------- */
|
|
|
|
.prose { line-height: 1.65; }
|
|
.prose :first-child { margin-top: 0; }
|
|
.prose :last-child { margin-bottom: 0; }
|
|
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
|
|
.prose pre {
|
|
background: var(--surface-soft);
|
|
padding: 0.9rem;
|
|
border-radius: var(--radius-md);
|
|
overflow-x: auto;
|
|
}
|
|
.prose code { background: var(--surface-soft); padding: 0.1rem 0.3rem; border-radius: var(--radius-sm); }
|
|
.prose pre code { background: none; padding: 0; }
|
|
.prose blockquote {
|
|
margin: 1rem 0;
|
|
padding-left: 1rem;
|
|
border-left: 3px solid var(--border-light);
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* --- forms and buttons ------------------------------------------------ */
|
|
|
|
label { display: block; margin: 1rem 0 0.35rem; font-weight: 600; font-size: 0.9rem; }
|
|
label.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
|
|
label.check input { margin: 0; }
|
|
|
|
input[type="text"], input[type="email"], input[type="date"],
|
|
input:not([type]), select, textarea {
|
|
width: 100%;
|
|
padding: 0.6rem 0.75rem;
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
input[type="checkbox"] { width: auto; }
|
|
textarea { resize: vertical; line-height: 1.55; }
|
|
|
|
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
background: var(--brand);
|
|
color: #fff;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
padding: 0.6rem 1.4rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
.btn:hover { background: var(--brand-dark); }
|
|
|
|
.linkish {
|
|
background: none;
|
|
border: 0;
|
|
padding: 0;
|
|
color: var(--brand-dark);
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
}
|
|
.linkish--danger { color: var(--danger); }
|
|
|
|
.actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-top: 1.25rem;
|
|
}
|
|
.actions form { margin: 0; }
|
|
.actions--row { margin-top: 0; gap: 0.75rem; }
|
|
|
|
.pager { display: flex; justify-content: space-between; margin-top: 2rem; }
|
|
|
|
/* --- tables, flashes, odds and ends ----------------------------------- */
|
|
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: var(--surface);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.table th, .table td {
|
|
text-align: left;
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid var(--border-light);
|
|
font-size: 0.92rem;
|
|
vertical-align: top;
|
|
}
|
|
.table th { background: var(--surface-soft); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
|
|
.table tr:last-child td { border-bottom: 0; }
|
|
.row--off { opacity: 0.55; }
|
|
|
|
.flash {
|
|
padding: 0.85rem 1.1rem;
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.flash--ok { background: var(--brand-softer); color: var(--brand-dark); }
|
|
.flash--error { background: #fdecea; color: var(--danger); }
|
|
|
|
.muted { color: var(--muted); }
|
|
.small { font-size: 0.85rem; }
|
|
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
|
|
|
|
.password {
|
|
font-size: 1.3rem;
|
|
letter-spacing: 0.06em;
|
|
background: var(--surface-soft);
|
|
padding: 1rem;
|
|
border-radius: var(--radius-md);
|
|
user-select: all;
|
|
word-break: break-all;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.feed-head { flex-direction: column; align-items: flex-start; }
|
|
.table { display: block; overflow-x: auto; }
|
|
}
|
|
|
|
/* --- editor ----------------------------------------------------------- */
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.tab {
|
|
padding: 0.4rem 1rem;
|
|
border-radius: 999px;
|
|
text-decoration: none;
|
|
color: var(--muted);
|
|
background: var(--surface-soft);
|
|
font-size: 0.9rem;
|
|
}
|
|
.tab--on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
|
|
|
|
.fieldset {
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-md);
|
|
padding: 0.85rem 1rem 1rem;
|
|
margin: 1rem 0 0;
|
|
}
|
|
.fieldset legend { padding: 0 0.4rem; font-weight: 600; font-size: 0.9rem; }
|
|
.fieldset .check { margin: 0.35rem 0; }
|
|
|
|
input[type="file"] {
|
|
width: 100%;
|
|
padding: 0.5rem 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Attached pictures. A row that wraps, thumbnails rather than full-bleed:
|
|
a thread with four photos should still read as a conversation. */
|
|
.shots {
|
|
list-style: none;
|
|
margin: 0.75rem 0 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
.shots img {
|
|
display: block;
|
|
max-height: 220px;
|
|
max-width: 100%;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border-light);
|
|
}
|