Patternflow

/* Variants — the shelf of firmwares built on the core.

   Set as a document, not a store: the same one-column prose shape as
   /compliance and /terms. Someone reading this is deciding whether to flash a
   stranger's binary onto hardware they paid for, and the honest paragraph
   under each entry is the part that matters. A card grid would push that
   paragraph out of the way in favour of the feature list, which is exactly
   the wrong emphasis. */

.page {
  min-height: 100vh;
  padding: 48px 24px 96px;
  background: var(--pf-cream);
  color: var(--pf-ink);
  font-family: var(--pf-sans);
}

.doc {
  max-width: 900px;
  margin: 0 auto;
  overflow-wrap: break-word;
}

.head {
  padding-bottom: 28px;
  margin-bottom: 36px;
  border-bottom: var(--pf-rule-w) solid var(--pf-rule);
}

.brand {
  display: inline-block;
  margin-bottom: 24px;
  font-family: var(--pf-mono);
  font-size: var(--pf-fs-mono);
  letter-spacing: var(--pf-track-mono);
  text-transform: uppercase;
  color: var(--pf-ink-muted);
  text-decoration: none;
}
.brand:hover { color: var(--pf-led); }

.title {
  margin: 0 0 14px;
  font-size: var(--pf-fs-h2);
  font-weight: 500;
  letter-spacing: var(--pf-track-tight);
  line-height: 1.15;
}

.lede {
  margin: 0;
  max-width: 58ch;
  font-size: var(--pf-fs-sub);
  line-height: 1.6;
  color: var(--pf-ink-muted);
}




/* ── one variant, as a card ─────────────────────────────────────────────

   The prose version of this page was a wall of text and nobody could tell
   the firmwares apart. What a person is actually deciding is two things —
   what does it add, what does it give up — so those get the visual weight
   and everything else is support. */


/* A grid, so the shelf reads as a shelf. Cards are short by design — name,
   maker, install — and a single column of short cards is mostly whitespace.
   auto-fit + minmax means one column on a phone and two or three on a
   desktop without naming any breakpoints. */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  align-items: start;
}

/* An open card needs the room its details take, and taking the full row is
   less jarring than growing one cell and pushing its neighbours down. */
.card:has(.details) { grid-column: 1 / -1; }

.card {
  padding: 24px;
  border: var(--pf-rule-w) solid var(--pf-rule);
  background: rgba(255, 255, 255, 0.42);
}

.cardHead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  /* The byline sits in here now, so the space before the buttons is the
     head's to give. */
  margin-bottom: 20px;
}

.name {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: var(--pf-track-tight);
}

.status {
  font-family: var(--pf-mono);
  font-size: 10px;
  letter-spacing: var(--pf-track-mono);
  text-transform: uppercase;
  padding: 2px 7px;
  border: var(--pf-rule-w) solid var(--pf-ink-faint);
  color: var(--pf-ink-muted);
  white-space: nowrap;
}
.status[data-s='available'] { border-color: var(--pf-led); color: var(--pf-led); }

.by {
  margin: 0;
  font-family: var(--pf-mono);
  font-size: var(--pf-fs-mono);
  color: var(--pf-ink-faint);
}
.by a { color: var(--pf-ink-muted); }

.summary {
  margin: 0 0 18px;
  max-width: 54ch;
  font-size: var(--pf-fs-body);
  line-height: 1.6;
}

/* The decision, at a glance: what arrives, what leaves. */
.adds li::before {
  content: '+';
  color: var(--pf-led);
  font-weight: 700;
  margin-right: 6px;
}

/* What is served here vs what the maintainer has released. */
.versions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 16px;
  font-family: var(--pf-mono);
  font-size: var(--pf-fs-mono);
  color: var(--pf-ink);
}
.vLabel {
  color: var(--pf-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--pf-track-mono);
  font-size: 10px;
  margin-right: 6px;
}
.vStale { color: var(--pf-led); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

.install {
  font-family: var(--pf-mono);
  font-size: var(--pf-fs-mono);
  letter-spacing: 0.04em;
  padding: 9px 18px;
  background: var(--pf-ink);
  color: var(--pf-cream);
  border: var(--pf-rule-w) solid var(--pf-ink);
  text-decoration: none;
}
.install:hover { background: var(--pf-led); border-color: var(--pf-led); }

.secondary {
  font-family: var(--pf-mono);
  font-size: var(--pf-fs-mono);
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border: var(--pf-rule-w) solid var(--pf-rule);
  color: var(--pf-ink);
  text-decoration: none;
}
.secondary:hover { border-color: var(--pf-led); color: var(--pf-led); }

.hostRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--pf-mono);
  font-size: 11px;
  color: var(--pf-ink-faint);
}
.hostRow input {
  flex: 1;
  max-width: 240px;
  font: inherit;
  font-size: 12px;
  padding: 6px 9px;
  border: var(--pf-rule-w) solid var(--pf-rule);
  background: rgba(255, 255, 255, 0.7);
  color: var(--pf-ink);
}
.hostRow input:focus { outline: none; border-color: var(--pf-led); }

.note {
  margin: 0;
  max-width: 58ch;
  font-size: var(--pf-fs-row-d);
  line-height: 1.65;
  color: var(--pf-ink-muted);
}

/* ── how switching works ───────────────────────────────────────────────── */

.how {
  margin-top: 56px;
  padding-top: 32px;
  border-top: var(--pf-rule-w) solid var(--pf-rule);
}

.how h2 {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: var(--pf-track-tight);
}

.how h3 {
  margin: 26px 0 8px;
  font-size: var(--pf-fs-body);
  font-weight: 600;
}

.how p {
  margin: 0 0 12px;
  max-width: 58ch;
  font-size: var(--pf-fs-body);
  line-height: 1.7;
  color: var(--pf-ink-muted);
}

.how strong { color: var(--pf-ink); font-weight: 600; }

.how code {
  font-family: var(--pf-mono);
  font-size: 0.92em;
  padding: 1px 5px;
  border: var(--pf-rule-w) solid var(--pf-rule);
  background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 640px) {
  .page { padding: 32px 18px 72px; }
  .title { font-size: 26px; }
}

/* Details, folded away until asked for. */
.details {
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--pf-rule-w) solid var(--pf-rule);
}

.detailLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
  font-family: var(--pf-mono);
  font-size: var(--pf-fs-mono);
}
.detailLinks a { color: var(--pf-ink-muted); }
.detailLinks a:hover { color: var(--pf-led); }

/* The empty slot. Dashed, quieter than a real entry, and unmistakably a
   place rather than a thing. */
.makeCard {
  display: flex;
  gap: 18px;
  padding: 24px;
  border: var(--pf-rule-w) dashed var(--pf-ink-ghost);
}

.plus {
  font-family: var(--pf-mono);
  font-size: 30px;
  line-height: 1;
  color: var(--pf-ink-ghost);
}

.makeBody {
  margin: 6px 0 0;
  max-width: 52ch;
  font-size: var(--pf-fs-row-d);
  line-height: 1.6;
  color: var(--pf-ink-muted);
}

.sectionHead {
  margin: 40px 0 6px;
  font-family: var(--pf-mono);
  font-size: 11px;
  letter-spacing: var(--pf-track-mono);
  text-transform: uppercase;
  color: var(--pf-ink-muted);
}
.sectionHead:first-of-type { margin-top: 0; }

.sectionNote {
  margin: 0 0 18px;
  max-width: 58ch;
  font-size: var(--pf-fs-row-d);
  line-height: 1.65;
  color: var(--pf-ink-muted);
}

/* ── the two views, as tabs where the title was ──────────────────────────
   "Firmware" is the shelf, "Features" the catalogue. The current one is
   the h1; the other is a link in the same size, dimmed - so the other view
   is one click away and impossible to miss, which a sentence in the lede
   was not. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 26px;
  margin: 0 0 14px;
}
.tabs .title { margin: 0; }
/* The link carries .title too, so it is set exactly like the h1 at every
   width (the phone size above included); this only dims it. */
.tabLink {
  color: var(--pf-ink-faint);
  text-decoration: none;
}
.tabLink:hover { color: var(--pf-led); }