6ac814475e
Everything on this site so far has been a file built from git. This is the first component that runs code to answer a request and the first whose data git does not hold, so the trade is stated in the README and the backup script is not optional. Roles are owner, admin and user. The owner is seeded once from BOARD_OWNER and cannot be seeded again, because otherwise editing a compose file would be a quieter way to take the top role than asking for it; ownership moves only by transfer, inside the app. There is exactly one owner and a partial unique index enforces it, so the invariant holds even when a handler is wrong. The owner is beyond suspension and demotion by everyone, themselves included. Only the owner makes admins; admins make users. Sign-in goes through Gitea as a confidential OAuth client — the opposite of Decap, which has to be public because it runs in the browser. The rule the whole thing rests on is that a Gitea account is not a membership: entry needs an active row in `members`, or every account on the instance is a member, starting with the translations bot. Admins can delete any post; nobody can edit anyone else's, admins included. Taking a post down is visible to its author. Quietly rewriting it is not, and an admin who could do that could leave a sentence attributed to someone who never wrote it. The plan said admins could do both; this is the one place the implementation departs from it. Markdown renders with raw HTML disabled, which is the entire XSS defence and the reason there is no sanitiser: the renderer emits only its own tags and escapes the rest. The CSP carries no 'unsafe-inline', which makes an inline onsubmit silently inert rather than broken, so the confirmation dialogs live in a static file and a test fails any template that grows an inline handler. GDPR is in scope rather than deferred: erasure removes the member row and moves their authorship to a tombstone so the conversations around them still read, and any member can download their own writing. Verified: 63 checks pass, covering the membership gate, every role predicate, a direct insert of a second owner being refused by the index, atomic ownership transfer, CSRF, an offsite login redirect, script tags rendering as text, soft deletes leaving both listings and exports, and the member screens rendering for each role. Smoke-tested live: headers, both static assets, and the bare /comunidad redirect that the Caddy matcher has to cover. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NizVpJ2dwzCbjCrTLCjeHn
276 lines
7.4 KiB
CSS
276 lines
7.4 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: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; }
|
|
}
|