@highjumpdigitalsoftware/blog-kit 0.6.0

package/core/css/base.css

@@ -0,0 +1,146 @@
+/* ============================================================
+   blog-kit — Base layer (scoped reset + prose typography)
+   ------------------------------------------------------------
+   Everything is scoped under .blog-root. Two jobs:
+     1. LEAK-OUT: we never emit a bare element selector, so the
+        blog can't touch the host page.
+     2. LEAK-IN: we re-declare the inherited properties (font,
+        colour, line-height, etc.) explicitly on .blog-root so a
+        host site's body/global styles don't cascade into us.
+   The ONLY thing we intentionally let through is the --blog-*
+   token layer (the tenant's "paint").
+
+   IMPORTANT — specificity: every element rule below is wrapped in
+   :where(.blog-root) so it has NEAR-ZERO specificity (just the
+   element, 0,0,1). That guarantees component classes (.bk-*, 0,1,0)
+   ALWAYS win over these prose defaults. Without :where, a rule like
+   `.blog-root h3` (0,1,1) would out-specify a component's
+   `.bk-verdict-card__verdict` (0,1,0) and, e.g., paint a dark-panel
+   heading near-black → invisible. Base is a fallback; components win.
+   ============================================================ */
+
+.blog-root {
+  /* Re-assert inherited properties so the host can't bleed in */
+  font-family: var(--blog-font-body);
+  font-size: 1rem;
+  line-height: 1.7;
+  font-weight: 400;
+  letter-spacing: normal;
+  color: var(--blog-text);
+  text-align: left;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+:where(.blog-root) *,
+:where(.blog-root) *::before,
+:where(.blog-root) *::after {
+  box-sizing: border-box;
+}
+
+/* --- Headings --- */
+:where(.blog-root) h1,
+:where(.blog-root) h2,
+:where(.blog-root) h3,
+:where(.blog-root) h4,
+:where(.blog-root) h5,
+:where(.blog-root) h6 {
+  font-family: var(--blog-font-display);
+  font-weight: var(--blog-heading-weight);
+  text-transform: var(--blog-heading-transform);
+  letter-spacing: var(--blog-tracking-tight);
+  color: var(--blog-ink);
+  line-height: 1.22;
+  margin: 0 0 var(--blog-sp-4);
+}
+:where(.blog-root) h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.85rem); margin-bottom: var(--blog-sp-5); }
+:where(.blog-root) h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.95rem); margin-top: var(--blog-sp-12); }
+:where(.blog-root) h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem); margin-top: var(--blog-sp-8); }
+:where(.blog-root) h4 { font-size: 1.1rem; margin-top: var(--blog-sp-6); }
+:where(.blog-root) h5,
+:where(.blog-root) h6 { font-size: 1rem; margin-top: var(--blog-sp-5); }
+
+/* First heading shouldn't push a big top margin */
+:where(.blog-root) > :first-child { margin-top: 0; }
+
+/* --- Body copy --- */
+:where(.blog-root) p {
+  margin: 0 0 var(--blog-sp-5);
+  color: var(--blog-text);
+}
+:where(.blog-root) strong, :where(.blog-root) b { font-weight: 700; color: var(--blog-ink); }
+:where(.blog-root) em, :where(.blog-root) i { font-style: italic; }
+:where(.blog-root) small { font-size: 0.85em; color: var(--blog-mute-2); }
+
+/* --- Links --- */
+:where(.blog-root) a {
+  color: var(--blog-brand);
+  text-decoration: none;
+}
+:where(.blog-root) a:hover { text-decoration: underline; }
+
+/* --- Lists (prose defaults; component lists opt out via .bk-*) --- */
+:where(.blog-root) ul,
+:where(.blog-root) ol {
+  margin: 0 0 var(--blog-sp-5);
+  padding-left: 1.4em;
+}
+:where(.blog-root) li { margin: 0 0 var(--blog-sp-2); }
+:where(.blog-root) li::marker { color: var(--blog-mute-2); }
+
+/* --- Inline code --- */
+:where(.blog-root) :not(pre) > code {
+  font-family: var(--blog-font-mono);
+  font-size: 0.88em;
+  background: var(--blog-bg-tertiary);
+  border: 1px solid var(--blog-border-subtle);
+  border-radius: var(--blog-radius-xs);
+  padding: 0.12em 0.36em;
+  color: var(--blog-ink);
+}
+
+/* --- Media --- */
+:where(.blog-root) img,
+:where(.blog-root) video,
+:where(.blog-root) svg {
+  max-width: 100%;
+  height: auto;
+}
+:where(.blog-root) img { border-radius: var(--blog-radius-md); }
+
+/* --- Blockquote (prose; PullQuote/QuoteBlock are components) --- */
+:where(.blog-root) blockquote {
+  margin: var(--blog-sp-6) 0;
+  padding: var(--blog-sp-2) 0 var(--blog-sp-2) var(--blog-sp-5);
+  border-left: 3px solid var(--blog-brand);
+  color: var(--blog-mute);
+  font-style: italic;
+}
+
+/* --- Horizontal rule --- */
+:where(.blog-root) hr {
+  border: 0;
+  border-top: 1px solid var(--blog-border-light);
+  margin: var(--blog-sp-10) 0;
+}
+
+/* --- Tables (prose; ComparisonTable is a component) --- */
+:where(.blog-root) table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--blog-sp-6) 0;
+  font-size: 0.95rem;
+}
+:where(.blog-root) th,
+:where(.blog-root) td {
+  text-align: left;
+  padding: var(--blog-sp-3) var(--blog-sp-4);
+  border-bottom: 1px solid var(--blog-border-light);
+}
+:where(.blog-root) th { color: var(--blog-ink); font-weight: 600; }
+
+/* --- The article measure --- */
+:where(.blog-root) .bk-prose {
+  max-width: var(--blog-max-content);
+  margin-inline: auto;
+}