jekyll-theme-docsteer 1.0.0

data/_sass/docsteer/_faq.scss

@@ -0,0 +1,140 @@
+// ── FAQ accordion ────────────────────────────────────────────
+// Built on native <details>/<summary>: it opens and closes with no JS, and is
+// keyboard accessible without a single ARIA attribute. main.js only adds the
+// "expand all" control and hash deep-linking.
+
+.faq {
+  margin-top: var(--sp-6);
+}
+
+.faq__tools {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: var(--sp-3);
+}
+
+.faq__toggle-all {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 6px var(--sp-3);
+  border-radius: var(--r-pill);
+  border: 1px solid var(--border-strong);
+  background: var(--bg-elev);
+  color: var(--text-soft);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  cursor: pointer;
+  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
+    background var(--dur) var(--ease);
+
+  &:hover {
+    color: var(--brand);
+    border-color: var(--brand);
+    background: var(--brand-soft);
+  }
+}
+
+.faq__section {
+  margin-top: var(--sp-7);
+  margin-bottom: var(--sp-3);
+  font-size: var(--fs-h3);
+}
+
+.faq__group {
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  overflow: hidden;
+  background: var(--bg-elev);
+}
+
+// ── One question ─────────────────────────────────────────────
+.faq-item {
+  & + & { border-top: 1px solid var(--border); }
+
+  &[open] {
+    background: var(--bg-sunken);
+
+    .faq-item__q { color: var(--brand); }
+    .faq-item__chevron { transform: rotate(180deg); }
+  }
+}
+
+.faq-item__q {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-4);
+  padding: var(--sp-4) var(--sp-5);
+  font-size: var(--fs-md);
+  font-weight: 600;
+  line-height: 1.45;
+  color: var(--text);
+  cursor: pointer;
+  list-style: none;              // Firefox
+  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
+
+  &::-webkit-details-marker { display: none; }   // Safari
+  &:hover { color: var(--brand); background: var(--brand-soft); }
+
+  // The whole row is the hit target, so give it a visible focus ring.
+  &:focus-visible {
+    outline: 2px solid var(--brand);
+    outline-offset: -2px;
+  }
+}
+
+.faq-item__chevron {
+  flex: none;
+  font-size: var(--fs-sm);
+  color: var(--text-faint);
+  transition: transform var(--dur-lg) var(--ease);
+}
+
+.faq-item__a {
+  position: relative;
+  padding: 0 var(--sp-5) var(--sp-5);
+  color: var(--text-soft);
+
+  // .prose scopes its flow rules to DIRECT children (.prose > * + *), and an
+  // answer sits one level deeper — so re-establish them here, or paragraphs
+  // inside an answer collapse against each other with no spacing at all.
+  > * + * { margin-top: var(--sp-4); }
+  > p { max-width: var(--measure); }
+  > h3, > h4 { margin-top: var(--sp-5); }
+
+  > :first-child { margin-top: 0; }
+  > :last-child { margin-bottom: 0; }
+}
+
+// Per-question anchor, revealed on hover like the heading anchors.
+.faq-item__permalink {
+  position: absolute;
+  top: 2px;
+  right: var(--sp-4);
+  color: var(--text-faint);
+  font-size: var(--fs-xs);
+  opacity: 0;
+  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
+
+  &:hover { color: var(--brand); }
+  &:focus-visible { opacity: 1; }
+}
+.faq-item:hover .faq-item__permalink { opacity: 1; }
+
+// Deep-linked question: flash the brand colour so it is obvious which one.
+.faq-item:target {
+  box-shadow: inset 3px 0 0 var(--brand);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .faq-item__chevron { transition: none; }
+}
+
+// Print: every answer visible, no chrome.
+@media print {
+  .faq__tools { display: none; }
+  .faq-item__a { display: block !important; }
+  .faq-item__chevron,
+  .faq-item__permalink { display: none; }
+}

data/_sass/docsteer/_footer.scss

@@ -0,0 +1,51 @@
+// ── Site footer ─────────────────────────────────────────────
+.site-footer {
+  margin-top: var(--sp-9);
+  border-top: 1px solid var(--border);
+  background: var(--bg-sunken);
+}
+.site-footer__inner {
+  max-width: var(--shell-max);
+  margin-inline: auto;
+  padding: var(--sp-7) var(--sp-5);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-6);
+  justify-content: space-between;
+}
+.site-footer__brand { max-width: 380px; }
+.site-footer__tag { margin-top: var(--sp-3); font-size: .9rem; color: var(--text-soft); }
+.site-footer__social { margin-top: var(--sp-4); display: flex; gap: var(--sp-2); }
+.site-footer__social a {
+  width: 36px; height: 36px;
+  display: grid; place-items: center;
+  border-radius: var(--r-sm);
+  color: var(--text-soft);
+  border: 1px solid var(--border);
+  background: var(--bg-elev);
+}
+.site-footer__social a:hover { color: var(--brand); border-color: var(--brand); }
+
+.site-footer__nav { display: grid; gap: var(--sp-2); align-content: start; }
+.site-footer__nav a { color: var(--text-soft); font-size: .9rem; }
+.site-footer__nav a:hover { color: var(--brand); }
+
+.site-footer__bar {
+  border-top: 1px solid var(--border);
+  padding: var(--sp-4) var(--sp-5);
+  max-width: var(--shell-max);
+  margin-inline: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-3);
+  align-items: center;
+  justify-content: space-between;
+  font-size: .82rem;
+  color: var(--text-faint);
+}
+.site-footer__right { display: inline-flex; align-items: center; gap: var(--sp-4); }
+.site-footer__credit a { color: var(--brand); font-weight: 600; }
+
+@media (max-width: 560px) {
+  .site-footer__bar { flex-direction: column; align-items: flex-start; }
+}

data/_sass/docsteer/_home.scss

@@ -0,0 +1,184 @@
+// ── Home / landing ───────────────────────────────────────────
+.home {
+  max-width: var(--shell-max);
+  margin-inline: auto;
+  padding-inline: var(--sp-5);
+}
+
+// ── Hero ─────────────────────────────────────────────────────
+.hero {
+  position: relative;
+  text-align: center;
+  padding: var(--sp-9) var(--sp-4) var(--sp-8);
+  overflow: hidden;
+  isolation: isolate;
+}
+.hero__inner { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; }
+
+.hero__eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 5px 14px;
+  margin-bottom: var(--sp-5);
+  font-size: var(--fs-xs);
+  font-weight: 650;
+  letter-spacing: var(--tr-wide);
+  text-transform: uppercase;
+  color: var(--brand);
+  background: var(--brand-soft);
+  border: 1px solid hsl(var(--brand-h) var(--brand-s) 55% / .18);
+  border-radius: var(--r-pill);
+}
+
+.hero__title {
+  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  line-height: 1.08;
+  color: var(--text);
+  text-wrap: balance;
+}
+.hero__lead {
+  margin-top: var(--sp-5);
+  margin-inline: auto;
+  max-width: 58ch;
+  font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
+  line-height: 1.6;
+  color: var(--text-soft);
+  text-wrap: pretty;
+}
+
+.hero__actions {
+  margin-top: var(--sp-6);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-3);
+  justify-content: center;
+}
+
+.hero__search {
+  margin-top: var(--sp-7);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-3);
+  height: 46px;
+  padding-inline: var(--sp-5);
+  min-width: min(440px, 92vw);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--r-pill);
+  background: var(--bg-elev);
+  color: var(--text-faint);
+  font-size: var(--fs-base);
+  box-shadow: var(--shadow-sm);
+  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
+}
+.hero__search:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
+.hero__search > span { text-align: left; }
+.hero__search kbd { margin-left: auto; }
+
+// Backdrop: a hairline grid that fades out, plus one soft brand glow.
+.hero__glow {
+  position: absolute;
+  inset: -10% -20% auto;
+  height: 620px;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    radial-gradient(ellipse 60% 50% at 50% 0%,
+      hsl(var(--brand-h) var(--brand-s) 55% / .13), transparent 70%),
+    linear-gradient(to right, var(--border) 1px, transparent 1px) 0 0 / 64px 64px,
+    linear-gradient(to bottom, var(--border) 1px, transparent 1px) 0 0 / 64px 64px;
+  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 15%, #000 20%, transparent 75%);
+  mask-image: radial-gradient(ellipse 70% 60% at 50% 15%, #000 20%, transparent 75%);
+}
+
+// ── Feature grid ─────────────────────────────────────────────
+.features { padding-block: var(--sp-7); }
+.features__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
+  gap: var(--sp-4);
+}
+.feature-card {
+  padding: var(--sp-5);
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
+    border-color var(--dur) var(--ease);
+}
+.feature-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+  border-color: var(--border-strong);
+}
+.feature-card__icon {
+  display: grid;
+  place-items: center;
+  width: 38px; height: 38px;
+  margin-bottom: var(--sp-4);
+  border-radius: var(--r-md);
+  font-size: .95rem;
+  color: var(--brand);
+  background: var(--brand-soft);
+  border: 1px solid hsl(var(--brand-h) var(--brand-s) 55% / .16);
+}
+.feature-card h3 {
+  font-size: var(--fs-md);
+  font-weight: 650;
+  margin-bottom: var(--sp-2);
+}
+.feature-card p {
+  color: var(--text-soft);
+  font-size: var(--fs-sm);
+  line-height: 1.6;
+}
+.feature-card__link {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  margin-top: var(--sp-3);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+}
+.feature-card__link i { font-size: .8em; transition: transform var(--dur) var(--ease); }
+.feature-card__link:hover i { transform: translateX(2px); }
+
+// ── Link sections ────────────────────────────────────────────
+.link-section { padding-block: var(--sp-6); }
+.link-section__head { margin-bottom: var(--sp-5); max-width: 60ch; }
+.link-section__head h2 { font-size: var(--fs-h2); }
+.link-section__head p { color: var(--text-soft); margin-top: var(--sp-2); }
+.link-section__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
+  gap: var(--sp-3);
+}
+.link-tile {
+  display: grid;
+  gap: 3px;
+  padding: var(--sp-4);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  color: var(--text);
+  background: var(--bg-elev);
+  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
+    transform var(--dur) var(--ease);
+}
+.link-tile:hover {
+  text-decoration: none;
+  border-color: var(--border-strong);
+  background: var(--bg-sunken);
+  transform: translateY(-1px);
+}
+.link-tile > i { color: var(--brand); font-size: .95rem; margin-bottom: var(--sp-1); }
+.link-tile__title { font-weight: 600; letter-spacing: var(--tr-snug); }
+.link-tile__text { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.5; }
+
+.home__prose { max-width: var(--content-max); margin: var(--sp-8) auto; }
+
+@media (max-width: 640px) {
+  .hero { padding-block: var(--sp-7) var(--sp-6); }
+  .hero__search { margin-top: var(--sp-6); }
+}

data/_sass/docsteer/_layout.scss

@@ -0,0 +1,52 @@
+// ── App shell / grid ─────────────────────────────────────────
+.page-shell {
+  max-width: var(--shell-max);
+  margin-inline: auto;
+  display: grid;
+  // Single column by default. The sidebar column is reserved only when the
+  // sidebar was actually rendered (.has-sidebar comes from default.html), so a
+  // layout can never leave an empty column holding the content hostage.
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+}
+.page-shell.has-sidebar { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
+
+.page-main {
+  min-width: 0;
+  padding: var(--sp-7) var(--sp-6) var(--sp-9);
+}
+.layout-page .page-main,
+.layout-home .page-main { padding-inline: 0; }
+
+// Doc: content + optional TOC
+.doc-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--sp-7);
+  max-width: calc(var(--content-max) + var(--toc-w) + 48px);
+  margin-inline: auto;
+}
+.doc-grid.has-toc {
+  grid-template-columns: minmax(0, 1fr) var(--toc-w);
+}
+
+.prose { max-width: var(--content-max); }
+.prose.is-wide { max-width: none; }
+
+// Page (non-doc) content centring
+.layout-page .prose {
+  margin-inline: auto;
+  padding: var(--sp-7) var(--sp-5) var(--sp-9);
+}
+
+@media (max-width: 1180px) {
+  .doc-grid.has-toc { grid-template-columns: minmax(0, 1fr); }
+  .toc { display: none; }
+}
+
+@media (max-width: 960px) {
+  // Must out-specify .page-shell.has-sidebar to collapse into the drawer.
+  .page-shell,
+  .page-shell.has-sidebar { grid-template-columns: minmax(0, 1fr); }
+  .page-main { padding: var(--sp-5) var(--sp-5) var(--sp-8); }
+}

data/_sass/docsteer/_lightbox.scss

@@ -0,0 +1,73 @@
+// ── Image lightbox ──────────────────────────────────────────
+.lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 130;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: var(--sp-6);
+  background: hsl(220 40% 4% / .9);
+  backdrop-filter: blur(4px);
+}
+.lightbox.is-open { display: flex; animation: fade .16s var(--ease); }
+
+.lightbox__figure {
+  position: relative;
+  max-width: min(1100px, 94vw);
+  max-height: 88vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sp-3);
+}
+.lightbox__img {
+  max-width: 100%;
+  max-height: 82vh;
+  border-radius: var(--r-md);
+  box-shadow: 0 24px 80px hsl(0 0% 0% / .5);
+  animation: pop .18s var(--ease);
+}
+.lightbox__caption { color: hsl(0 0% 100% / .82); font-size: .88rem; text-align: center; }
+
+.lightbox__btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 46px; height: 46px;
+  display: grid; place-items: center;
+  border-radius: 50%;
+  color: #fff;
+  background: hsl(0 0% 100% / .12);
+  border: 1px solid hsl(0 0% 100% / .2);
+  transition: background var(--dur) var(--ease);
+}
+.lightbox__btn:hover { background: hsl(0 0% 100% / .25); }
+.lightbox__prev { left: -68px; }
+.lightbox__next { right: -68px; }
+.lightbox__close {
+  position: fixed;
+  top: var(--sp-5);
+  right: var(--sp-5);
+  width: 42px; height: 42px;
+  display: grid; place-items: center;
+  border-radius: 50%;
+  color: #fff;
+  background: hsl(0 0% 100% / .12);
+  border: 1px solid hsl(0 0% 100% / .2);
+}
+.lightbox__close:hover { background: hsl(0 0% 100% / .25); }
+.lightbox__count {
+  position: fixed;
+  top: var(--sp-5);
+  left: var(--sp-5);
+  color: hsl(0 0% 100% / .7);
+  font-size: .82rem;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (max-width: 820px) {
+  .lightbox__prev { left: 4px; }
+  .lightbox__next { right: 4px; }
+  .lightbox__btn { background: hsl(0 0% 0% / .4); }
+}

data/_sass/docsteer/_navbar.scss

@@ -0,0 +1,169 @@
+// ── Top navbar ───────────────────────────────────────────────
+.navbar {
+  position: sticky;
+  top: 0;
+  z-index: 90;
+  height: var(--nav-h);
+  background: color-mix(in srgb, var(--bg) 82%, transparent);
+  border-bottom: 1px solid var(--border);
+  backdrop-filter: saturate(180%) blur(14px);
+  -webkit-backdrop-filter: saturate(180%) blur(14px);
+}
+// Fallback for browsers without color-mix
+@supports not (background: color-mix(in srgb, red 50%, blue)) {
+  .navbar { background: var(--bg); }
+}
+
+.navbar__inner {
+  height: 100%;
+  max-width: var(--shell-max);
+  margin-inline: auto;
+  padding-inline: var(--sp-5);
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+}
+
+// ── Brand ────────────────────────────────────────────────────
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-3);
+  font-weight: 650;
+  letter-spacing: var(--tr-snug);
+  color: var(--text);
+}
+.brand:hover { text-decoration: none; }
+.brand__logo { height: 26px; width: auto; }
+.brand__mark {
+  display: grid;
+  place-items: center;
+  width: 28px; height: 28px;
+  border-radius: 8px;
+  font-size: .85rem;
+  font-weight: 700;
+  color: var(--brand-contrast);
+  background: linear-gradient(140deg, var(--brand), var(--accent));
+}
+.brand__name { font-size: 1rem; }
+
+// ── Primary links ────────────────────────────────────────────
+.navbar__links {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: var(--sp-4);
+}
+.navbar__link {
+  position: relative;
+  padding: var(--sp-2) var(--sp-3);
+  border-radius: var(--r-sm);
+  color: var(--text-soft);
+  font-size: var(--fs-sm);
+  font-weight: 550;
+  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
+}
+.navbar__link:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
+.navbar__link.is-active {
+  color: var(--brand);
+  background: var(--brand-soft);
+  font-weight: 650;
+}
+.navbar__link i { margin-right: 6px; opacity: .7; font-size: .9em; }
+
+// ── Tools ────────────────────────────────────────────────────
+.navbar__tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
+
+.navbar__icon-btn {
+  display: grid;
+  place-items: center;
+  width: 36px; height: 36px;
+  border-radius: var(--r-sm);
+  color: var(--text-soft);
+  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
+}
+.navbar__icon-btn:hover { color: var(--text); background: var(--surface-2); }
+
+// dark-mode icon swap
+.icon-dark { display: none; }
+[data-mode="dark"] .icon-light { display: none; }
+[data-mode="dark"] .icon-dark { display: block; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mode="light"]) .icon-light { display: none; }
+  :root:not([data-mode="light"]) .icon-dark { display: block; }
+}
+
+.navbar__burger { display: none; width: 36px; height: 36px; place-items: center; border-radius: var(--r-sm); color: var(--text-soft); }
+.navbar__burger:hover { background: var(--surface-2); }
+
+// ── Skin picker ──────────────────────────────────────────────
+.skin-picker { position: relative; }
+.skin-picker__menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 10px);
+  min-width: 190px;
+  padding: var(--sp-2);
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow-lg);
+  display: none;
+  z-index: 95;
+}
+.skin-picker.is-open .skin-picker__menu {
+  display: grid;
+  gap: 1px;
+  animation: menu-in .14s var(--ease-out);
+}
+@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
+
+.skin-picker__opt {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  width: 100%;
+  padding: var(--sp-2) var(--sp-3);
+  border-radius: var(--r-sm);
+  font-size: var(--fs-sm);
+  font-weight: 500;
+  text-align: left;
+  color: var(--text-soft);
+  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
+}
+.skin-picker__opt:hover { background: var(--surface-2); color: var(--text); }
+.skin-picker__opt[aria-checked="true"] { color: var(--text); font-weight: 650; }
+// Selected marker: a small filled dot, drawn in CSS (no icon dependency)
+.skin-picker__opt::after {
+  content: "";
+  width: 6px; height: 6px;
+  margin-left: auto;
+  border-radius: 50%;
+  background: var(--brand);
+  opacity: 0;
+  transition: opacity var(--dur) var(--ease);
+}
+.skin-picker__opt[aria-checked="true"]::after { opacity: 1; }
+.skin-picker__label { flex: 1; }
+
+.skin-dot {
+  width: 15px; height: 15px;
+  flex: none;
+  border-radius: 5px;
+  box-shadow: inset 0 0 0 1px hsl(0 0% 0% / .14);
+}
+.skin-dot--aqua     { background: linear-gradient(140deg,#1668f0,#00b4d8); }
+.skin-dot--violet   { background: linear-gradient(140deg,#6d3bf5,#d946ef); }
+.skin-dot--mint     { background: linear-gradient(140deg,#0b8069,#21c8a8); }
+.skin-dot--ember    { background: linear-gradient(140deg,#d81b45,#f59e0b); }
+.skin-dot--graphite { background: linear-gradient(140deg,#0c0f14,#64748b); }
+.skin-dot--clay     { background: linear-gradient(140deg,#b04a26,#c98a3f); }
+
+@media (max-width: 960px) {
+  .navbar__burger { display: grid; }
+  .navbar__links { display: none; }
+}
+@media (max-width: 560px) {
+  .brand__name { display: none; }
+  .navbar__inner { gap: var(--sp-1); padding-inline: var(--sp-4); }
+}

data/_sass/docsteer/_print.scss

@@ -0,0 +1,13 @@
+// ── Print ────────────────────────────────────────────────────
+@media print {
+  .navbar, .sidebar, .toc, .site-footer, .to-top,
+  .search-modal, .lightbox, .doc-pager, .doc-head__edit,
+  .sidebar-scrim, .bmc { display: none !important; }
+
+  .page-shell, .doc-grid { display: block; max-width: none; }
+  .page-main { padding: 0; }
+  a { text-decoration: underline; }
+  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
+  .prose pre, .prose table { break-inside: avoid; }
+  body { color: #000; background: #fff; }
+}