sirenamc/stackline

Stackline, a team task board you run from the web or from Claude/ChatGPT. FastAPI + DataK3 + appid + Models + MCP.

• dodil-challenge
• dodil-challenge-boards

A remix template · 0 remixes · Remix sirenamc/stackline

app/boards/doors/static/paper.css

/* Stackline: a stack of tabbed index cards. Each list has its own tab colour, the cards carry
   their number on the tab, and the type is a soft serif for titles over a plain grotesque. */
:root {
  --paper: #f4f0e6;
  --tint: #faf7f0;
  --slip: #fffdf8;
  --ink: #23211c;
  --ink-faded: #6b665a;
  --rule: #ddd5c4;
  --rule-strong: #a9a090;
  --desk: #f4f0e6;
  --accent: #23211c;
  --sage: #b8ccae;
  --butter: #f1d88c;
  --blush: #efb7a5;
  --sky: #b6cae2;
  --lilac: #cbbfe0;
  --red: #b0361f;
  --amber: #8a5a00;
  --violet: #5b4691;
  --green: #2f6b3a;
  --field: rgba(255, 255, 255, .6);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="night"] {
  --paper: #1e1d1a; --tint: #24231f; --slip: #2d2b27; --ink: #f1ece0; --ink-faded: #b1aa9b;
  --rule: #3d3a34; --rule-strong: #77705f; --desk: #1e1d1a; --accent: #f1ece0;
  --sage: #8fa886; --butter: #cdb466; --blush: #c98f7e; --sky: #8ea3bf; --lilac: #a598c0;
  --red: #ff9a85; --amber: #f0c66b; --violet: #c9b8f2; --green: #9cc99e; --field: rgba(0, 0, 0, .22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --paper: #1e1d1a; --tint: #24231f; --slip: #2d2b27; --ink: #f1ece0; --ink-faded: #b1aa9b;
    --rule: #3d3a34; --rule-strong: #77705f; --desk: #1e1d1a; --accent: #f1ece0;
    --sage: #8fa886; --butter: #cdb466; --blush: #c98f7e; --sky: #8ea3bf; --lilac: #a598c0;
    --red: #ff9a85; --amber: #f0c66b; --violet: #c9b8f2; --green: #9cc99e; --field: rgba(0, 0, 0, .22);
  }
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font: 16px/1.55 var(--sans); }
a { color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }

.sheet { max-width: 1320px; margin: 0 auto; }
.paper { position: relative; padding: 22px 44px 40px; min-height: 100vh; }

/* the top line: the mark and name on the left, tools on the right */
.masthead { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand svg { flex: none; }
.nameplate { margin: 0; font: 600 29px/1 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.6px; }
.masthead .grow { flex: 1; }
.switch {
  font: 500 14px var(--sans); color: var(--ink-faded); background: none; border: 1px solid var(--rule);
  border-radius: 999px; padding: 5px 13px; cursor: pointer;
}

/* buttons: one dark pill for the main action, outlined for the rest */
.press {
  font: 600 15px var(--sans); color: var(--paper); background: var(--ink); border: 1px solid var(--ink);
  border-radius: 999px; padding: 10px 22px; cursor: pointer; text-decoration: none; display: inline-block;
}
.plain {
  font: 600 15px var(--sans); background: transparent; border: 1px solid var(--rule-strong); color: var(--ink);
  border-radius: 999px; padding: 9px 20px; cursor: pointer; text-decoration: none; display: inline-block;
}
.plain:hover, .switch:hover { border-color: var(--ink); }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.section-head { margin: 0 0 10px; font: 600 18px var(--serif); padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.footer { margin-top: 36px; padding-top: 14px; border-top: 1.5px solid var(--ink); font-size: 14px; color: var(--ink-faded); }
.footer p { margin: 3px 0; }
code, .mono { font: 13.5px ui-monospace, Menlo, monospace; background: var(--field); padding: 1px 6px; border-radius: 4px; word-break: break-all; }

@media (max-width: 700px) {
  .paper { padding: 14px 16px 28px; }
}
.muted { color: var(--ink-faded); }