TerslerThe little junk rig that could

Source files / site · raw

style.css

/* tersler site: one stylesheet, system fonts, light + dark */
:root {
  --bg: #fbfaf7; --fg: #1d1d1b; --muted: #6b6a64; --line: #e3e0d8; --panel: #f2f0ea;
  --accent: #b4541a; --code-bg: #f0eee7; --good: #2f7d32; --bad: #b3261e;
  --s0: #b4541a; --s1: #3a6ea5; --s2: #5b8c3a; --s3: #8a5aa8; --s4: #a08a2a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161614; --fg: #e8e6df; --muted: #9b998f; --line: #34332e; --panel: #1f1e1b;
    --accent: #e98a4b; --code-bg: #23221f; --good: #7cc47f; --bad: #f28b82;
    --s0: #e98a4b; --s1: #7aa7d9; --s2: #93c46b; --s3: #c39be0; --s4: #d9c25e;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .88em; }
code { background: var(--code-bg); padding: .1em .3em; border-radius: 3px; }
pre { background: var(--code-bg); padding: 12px 14px; border-radius: 6px; overflow-x: auto; line-height: 1.45; }
pre code { background: none; padding: 0; font-size: 1em; }

.top { display: flex; align-items: baseline; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 1.2rem; color: var(--fg); text-decoration: none; letter-spacing: -.01em; }
.tag { color: var(--muted); font-size: .9rem; }

.wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr) 210px; gap: 36px; max-width: 1320px; margin: 0 auto; padding: 24px; }
.side, .toc { position: sticky; top: 16px; align-self: start; display: flex; flex-direction: column; font-size: .92rem; max-height: calc(100vh - 32px); overflow-y: auto; }
.side a, .toc a { color: var(--muted); text-decoration: none; padding: 4px 8px; border-radius: 4px; }
.side a:hover, .toc a:hover { color: var(--fg); background: var(--panel); }
.side a[aria-current] { color: var(--fg); background: var(--panel); font-weight: 600; }
.side a:last-child { margin-top: 10px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 10px; }
.toch { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 8px; }
.toc a.l3 { padding-left: 20px; font-size: .86rem; }

main { min-width: 0; max-width: 860px; }
h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.01em; position: relative; }
h1 { font-size: 2rem; margin: 0 0 16px; }
h2 { margin-top: 2.2em; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
h3 { margin-top: 1.8em; }
.anchor { position: absolute; left: -1em; color: var(--line); text-decoration: none; opacity: 0; }
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor { opacity: 1; }
.lead { font-size: 1.05rem; color: var(--muted); }
blockquote { margin: 1em 0; padding: 2px 16px; border-left: 3px solid var(--accent); color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
img { max-width: 100%; }
small { color: var(--muted); }
li.task { list-style: none; margin-left: -1.3em; }
.box { display: inline-block; width: 1em; height: 1em; border: 1.5px solid var(--muted); border-radius: 3px; text-align: center; line-height: .95em; font-size: .85em; vertical-align: -.1em; }
.box.done { background: var(--good); border-color: var(--good); color: var(--bg); }

.tw { overflow-x: auto; margin: 1em 0; }
table { border-collapse: collapse; font-size: .86rem; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 6px 10px; border-bottom: 1px solid var(--line); }
th { font-weight: 600; background: var(--panel); vertical-align: bottom; }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
.good { color: var(--good); font-weight: 600; }
.bad { color: var(--bad); font-weight: 600; }
details { margin: 1em 0; }
summary { cursor: pointer; color: var(--accent); }

.hero { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 8px; }
.hero figure { margin: 0; }
.hero img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); display: block; }
.hero figcaption { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.hero .cards { margin: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 20px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.card b { display: block; font-size: 1.5rem; letter-spacing: -.02em; }
.card span { font-size: .85rem; color: var(--muted); }

figure { margin: 1.2em 0; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .limit { stroke: var(--bad); stroke-dasharray: 5 4; stroke-width: 1.2; }
.chart text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart .val { fill: var(--fg); font-size: 10px; }
.chart .lim { fill: var(--bad); }
.chart .ln { fill: none; stroke-width: 1.6; }
.chart rect.s0, .legend i.s0 { fill: var(--s0); background: var(--s0); } .chart .ln.s0 { stroke: var(--s0); }
.chart rect.s1, .legend i.s1 { fill: var(--s1); background: var(--s1); } .chart .ln.s1 { stroke: var(--s1); }
.chart rect.s2, .legend i.s2 { fill: var(--s2); background: var(--s2); } .chart .ln.s2 { stroke: var(--s2); }
.chart rect.s3, .legend i.s3 { fill: var(--s3); background: var(--s3); } .chart .ln.s3 { stroke: var(--s3); }
.chart rect.s4, .legend i.s4 { fill: var(--s4); background: var(--s4); } .chart .ln.s4 { stroke: var(--s4); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.gallery img { border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.crumb { color: var(--muted); font-size: .9rem; margin-bottom: 4px; }
pre.src { counter-reset: ln; padding-left: 0; }
pre.src .ln { display: block; padding-left: 4.2em; position: relative; }
pre.src .ln::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 3.2em; text-align: right; color: var(--muted); opacity: .6; user-select: none; }

footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; padding: 16px 24px; text-align: center; }

@media (max-width: 1100px) {
  .wrap { grid-template-columns: 180px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 760px) {
  .wrap { grid-template-columns: 1fr; padding: 16px; gap: 12px; }
  .side { position: static; flex-direction: row; flex-wrap: wrap; gap: 2px; max-height: none; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
  .side a:last-child { margin-top: 0; border-top: 0; padding-top: 4px; }
  .anchor { display: none; }
  h1 { font-size: 1.6rem; }
  .top { padding: 12px 16px; }
  .tag { font-size: .8rem; }
  .hero { grid-template-columns: 1fr; }
  .hero figure { max-width: 360px; }
}
.nw { white-space: nowrap; }