/* Shared article + page styles — SINGLE SOURCE OF TRUTH. * * Loaded by both: * - src/layouts/BaseLayout.astro (the Astro frontend — tag in ) * - public/admin/preview.js (the Decap CMS preview pane — via CMS.registerPreviewStyle) * * When you redesign an article/page, edit THIS file. Both the live site and * the CMS preview update automatically — no duplication, no drift. * * Classes defined here: * .article — blog post container (+ all .article__* children) * .page — static markdown page container * .prose-body — rendered markdown body typography (already global on site, * duplicated here so the preview iframe has it too) * * CSS variables use `--color-*` (from src/styles/base.css on the frontend) with * light-theme fallbacks so this file is self-sufficient when loaded into the * Decap preview iframe where Tailwind's @theme block isn't available. */ /* ─── Variable fallbacks + dark theme ───────────────────────────────────── * On the frontend these `var()` calls resolve to Tailwind @theme tokens * (defined in src/styles/base.css under :root / html[data-theme="dark"]). * In the preview iframe there's no Tailwind, so the fallback literals * below take over — and `[data-theme="dark"]` overrides them to the dark * palette for the preview's own theme toggle. * ──────────────────────────────────────────────────────────────────────── */ .article, .page { --_bg: var(--color-base, #ffffff); --_fg: var(--color-fg, #0f172a); --_muted: var(--color-muted, #64748b); --_line: var(--color-line, #e2e8f0); --_card: var(--color-card, #f8fafc); --_accent: var(--color-accent, #2563eb); --_accent-fg: var(--color-accent-fg, #ffffff); color: var(--_fg); font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif); } /* Dark-mode overrides for the preview iframe. On the frontend, html[data-theme="dark"] flips --color-* in base.css — these selectors don't match there. In the preview iframe, we set data-theme="dark" on via the preview toggle, and these overrides swap the fallback literals to the dark palette. */ html[data-theme="dark"] { background: #0f172a; color: #f1f5f9; } html[data-theme="dark"] .article, html[data-theme="dark"] .page { --_bg: #0f172a; --_fg: #f1f5f9; --_muted: #94a3b8; --_line: #1e293b; --_card: #1e293b; --_accent: #3b82f6; --_accent-fg: #ffffff; } html[data-theme="dark"] .prose-body { color: #f1f5f9; } html[data-theme="dark"] .prose-body h1, html[data-theme="dark"] .prose-body h2, html[data-theme="dark"] .prose-body h3 { color: #f1f5f9; } html[data-theme="dark"] .prose-body code { background: #1e293b; border-color: #334155; color: #e2e8f0; } html[data-theme="dark"] .prose-body blockquote { color: #94a3b8; border-color: #3b82f6; } html[data-theme="dark"] .prose-body a { color: #3b82f6; } /* ─── Blog post layout ──────────────────────────────────────────────────── */ .article { max-width: 44rem; margin: 0 auto; padding: 4rem 1.5rem; } .article__header { margin-bottom: 2rem; } .article__date { font-size: 0.8125rem; color: var(--_muted); text-transform: uppercase; letter-spacing: 0.05em; display: block; } .article__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; margin: 0.5rem 0 1rem; color: var(--_fg); } .article__lead { font-size: 1.25rem; color: var(--_muted); margin: 0 0 0.5rem; line-height: 1.5; } .article__author { color: var(--_muted); font-size: 0.875rem; margin: 0; } .article__hero { width: 100%; border-radius: 12px; margin: 2rem 0; display: block; } .article__hero--empty { aspect-ratio: 16 / 9; background: repeating-linear-gradient( 45deg, var(--_card), var(--_card) 10px, var(--_bg) 10px, var(--_bg) 20px ); display: flex; align-items: center; justify-content: center; color: var(--_muted); font-style: italic; font-size: 0.875rem; border: 1px dashed var(--_line); } .article__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 1rem 0; } .article__tag { font-size: 0.75rem; padding: 0.25rem 0.625rem; background: var(--_card); border: 1px solid var(--_line); border-radius: 9999px; color: var(--_muted); font-weight: 500; } .article__banner { display: inline-block; padding: 0.5rem 0.875rem; border-radius: 6px; font-weight: 600; font-size: 0.8125rem; margin-bottom: 1rem; } .article__banner--draft { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; } .article__banner--featured { background: #dbeafe; color: #1e3a8a; border: 1px solid #bfdbfe; } .article__footer { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--_line); } .article__back { color: var(--_accent); text-decoration: none; font-weight: 500; } .article__back:hover { text-decoration: underline; } /* ─── Static page layout ───────────────────────────────────────────────── */ .page { max-width: 48rem; margin: 0 auto; padding: 4rem 1.5rem; } .page__title { font-size: 2.5rem; font-weight: 800; margin: 0 0 1rem; line-height: 1.15; color: var(--_fg); } .page__lead { font-size: 1.125rem; color: var(--_muted); margin: 0 0 2rem; line-height: 1.55; } .page__hero { width: 100%; max-height: 360px; object-fit: cover; border-radius: 12px; margin: 0 0 2rem; display: block; } /* ─── Rendered markdown body ─────────────────────────────────────────────── * `.prose-body` is ALSO defined in src/styles/base.css (via @layer components) * for the frontend. Duplicated here so the Decap preview iframe — which does * NOT load base.css — gets the same typography. * ──────────────────────────────────────────────────────────────────────── */ .prose-body { line-height: 1.7; color: var(--color-fg, #0f172a); font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif); } .prose-body > :first-child { margin-top: 0; } .prose-body > :last-child { margin-bottom: 0; } .prose-body h1, .prose-body h2, .prose-body h3 { font-weight: 700; margin: 2rem 0 1rem; line-height: 1.25; color: var(--color-fg, #0f172a); } .prose-body h1 { font-size: 2rem; } .prose-body h2 { font-size: 1.75rem; } .prose-body h3 { font-size: 1.375rem; } .prose-body p { margin: 1rem 0; } .prose-body ul, .prose-body ol { margin: 1rem 0; padding-left: 1.5rem; } .prose-body ul { list-style: disc; } .prose-body ol { list-style: decimal; } .prose-body code { background: var(--color-card, #f8fafc); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-family: var(--font-mono, "Source Code Pro", ui-monospace, Menlo, monospace); font-size: 0.875em; border: 1px solid var(--color-line, #e2e8f0); } .prose-body pre { background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1.5rem 0; line-height: 1.5; font-size: 0.875rem; } .prose-body pre code { background: transparent; padding: 0; color: inherit; border: 0; } .prose-body blockquote { border-left: 4px solid var(--color-accent, #2563eb); padding: 0.5rem 1rem; margin: 1.5rem 0; color: var(--color-muted, #64748b); font-style: italic; } .prose-body img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1.5rem 0; } .prose-body a { color: var(--color-accent, #2563eb); text-decoration: underline; text-underline-offset: 2px; } /* ────────────────────────────────────────────────────────────────────── * Editor block components — render targets for the rich text "+" blocks * registered in public/admin/preview.js (Youtube, Code Block, Callout, * Gallery, Key Takeaways). Ported from afk-place. Shared between the * frontend (loaded via BaseLayout) and the Decap preview iframe (loaded * via CMS.registerPreviewStyle). * ────────────────────────────────────────────────────────────────────── */ /* ─── Embedded YouTube (16:9 responsive) ───────────────────────────── */ .prose-body .embed-responsive { position: relative; display: block; width: 100%; padding: 0; margin: 1.25rem 0; overflow: hidden; border-radius: 0.5rem; background: #000; } .prose-body .embed-youtube { aspect-ratio: 16 / 9; } .prose-body .embed-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ─── Code Block (advanced — line numbers + max lines + copy) ──────── */ .prose-body .code-shell { position: relative; margin: 1rem 0; } .prose-body .code-shell > pre { margin: 0; } .prose-body .code-copy-btn { position: absolute; top: 0.6rem; right: 0.7rem; z-index: 3; border-radius: 0.4rem; padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 600; line-height: 1; background: rgba(17, 22, 33, 0.92); color: #f6f8ff; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; opacity: 0; transition: opacity 150ms ease, background-color 150ms ease, color 150ms ease; } .prose-body .code-shell:hover .code-copy-btn, .prose-body .code-copy-btn:focus-visible { opacity: 1; } .prose-body .code-copy-btn:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.2); background: #0b0f18; } .prose-body .code-copy-btn[data-copied="true"] { color: var(--color-accent, #2563eb); opacity: 1; } .prose-body pre { position: relative; } .prose-body pre[data-line-numbers="true"] code { counter-reset: line; } .prose-body pre[data-line-numbers="true"] code > .line, .prose-body pre[data-line-numbers="true"] code > .code-line { --code-ln-left: 0.7rem; --code-ln-width: 2ch; --code-ln-gap: 0.5rem; display: block; white-space: pre; padding: 0.08rem 1rem 0.08rem calc(var(--code-ln-left) + var(--code-ln-width) + var(--code-ln-gap)); position: relative; line-height: 1.5; min-height: 1.5em; } .prose-body pre[data-line-numbers="true"] code > .line::before, .prose-body pre[data-line-numbers="true"] code > .code-line::before { counter-increment: line; content: counter(line); position: absolute; left: var(--code-ln-left); width: var(--code-ln-width); top: 50%; transform: translateY(-50%); text-align: right; opacity: 0.62; font-size: 1em; line-height: 1.5; font-variant-numeric: tabular-nums; user-select: none; } .prose-body pre[data-line-numbers="true"] code > .line:hover, .prose-body pre[data-line-numbers="true"] code > .code-line:hover { background: rgba(148, 163, 184, 0.14); } .prose-body pre[data-max-lines] { --code-line-box: 1.66rem; height: calc(var(--code-max-lines, 0) * var(--code-line-box) + 1.75rem); overflow-x: auto; overflow-y: scroll; scrollbar-gutter: stable both-edges; scrollbar-width: thin; scrollbar-color: rgba(170, 180, 205, 0.65) rgba(28, 35, 49, 0.85); } .prose-body pre[data-max-lines]::-webkit-scrollbar { width: 10px; height: 10px; } .prose-body pre[data-max-lines]::-webkit-scrollbar-track { background: rgba(28, 35, 49, 0.85); border-radius: 999px; } .prose-body pre[data-max-lines]::-webkit-scrollbar-thumb { background: rgba(170, 180, 205, 0.72); border-radius: 999px; } .prose-body pre[data-max-lines]::-webkit-scrollbar-thumb:hover { background: rgba(192, 201, 224, 0.85); } /* ─── Callout (info / tip / success / warning / danger / accent) ──── */ .prose-body .callout { margin: 1.25rem 0; border-radius: 0.6rem; border: 1px solid; padding: 0.9rem 1rem; background: var(--color-card, #f8fafc); } .prose-body .callout__title { margin: 0 0 0.45rem; font-weight: 700; line-height: 1.3; } .prose-body .callout__title-row { display: inline-flex; align-items: center; gap: 0.45rem; } .prose-body .callout__icon { width: 1.2rem; height: 1.2rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; background: rgba(255, 255, 255, 0.45); } .prose-body .callout--no-title { padding-top: 0.75rem; } .prose-body .callout__summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0; } .prose-body .callout__summary::-webkit-details-marker { display: none; } .prose-body .callout--collapsible .callout__summary::after { content: "▾"; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.75; font-size: 1rem; line-height: 1; transition: transform 0.18s ease; } .prose-body .callout--collapsible:not([open]) .callout__summary::after { transform: rotate(-90deg); } .prose-body .callout--collapsible .callout__body { margin-top: 0.6rem; } .prose-body .callout__body { margin: 0; line-height: 1.6; } .prose-body .callout__body p { margin: 0.35rem 0; } .prose-body .callout__body ul { margin: 0.35rem 0; padding-left: 1.2rem; } .prose-body .callout__body li { margin: 0.2rem 0; } .prose-body .callout--info { border-color: #34baf0; background: #1fa2d6; color: #04131c; } .prose-body .callout--tip { border-color: #24c6dd; background: #13aeca; color: #04131c; } .prose-body .callout--success { border-color: #36d07f; background: #19b96a; color: #03190f; } .prose-body .callout--warning { border-color: #ffc04d; background: #f4aa2a; color: #241301; } .prose-body .callout--danger { border-color: #ff6767; background: #f24848; color: #ffffff; } .prose-body .callout--accent { border-color: #c781ff; background: #a55cff; color: #ffffff; } .prose-body .callout :where(a, strong, em) { color: inherit; } .prose-body .callout code { background: rgba(8, 26, 38, 0.25); color: inherit; padding: 0.1em 0.35em; border-radius: 0.25rem; } /* ─── Key Takeaways ──────────────────────────────────────────────── */ .prose-body .key-takeaways { margin: 1.4rem 0; border-radius: 0.6rem; border: 1px dashed var(--color-line, #e2e8f0); background: var(--color-card, #f8fafc); padding: 0.95rem 1rem; } .prose-body .key-takeaways__title { margin: 0 0 0.6rem; font-weight: 700; letter-spacing: 0.02em; } .prose-body .key-takeaways__list { margin: 0; padding-left: 1.2rem; } .prose-body .key-takeaways__list li { margin: 0.25rem 0; } /* ─── Gallery (grid + hover + lightbox trigger) ──────────────────── */ .prose-body .md-gallery { margin: 1.25rem 0; } .prose-body .md-gallery__grid { display: grid; grid-template-columns: repeat( min(var(--md-gallery-effective-columns, var(--md-gallery-columns, 4)), 4), minmax(0, 1fr) ); gap: 0.55rem; } @media (max-width: 960px) { .prose-body .md-gallery__grid { grid-template-columns: repeat( min(var(--md-gallery-effective-columns, var(--md-gallery-columns, 4)), 3), minmax(0, 1fr) ); } } @media (max-width: 720px) { .prose-body .md-gallery__grid { grid-template-columns: repeat( min(var(--md-gallery-effective-columns, var(--md-gallery-columns, 4)), 2), minmax(0, 1fr) ); } } .prose-body .md-gallery[data-gallery-count="1"] .md-gallery__item { max-width: 100%; margin-left: auto; margin-right: auto; } .prose-body .md-gallery__item { display: block; border: 0; border-radius: 0.45rem; overflow: hidden; padding: 0; background: rgba(15, 23, 42, 0.06); cursor: zoom-in; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease; } .prose-body .md-gallery__item img { width: 100%; height: auto; object-fit: contain; object-position: center center; display: block; margin: 0 !important; border: 0 !important; transition: transform 180ms ease; } .prose-body .md-gallery__item:hover { transform: translateY(-2px); background: rgba(15, 23, 42, 0.1); box-shadow: 0 10px 24px rgba(3, 6, 16, 0.18); } .prose-body .md-gallery__item:hover img { transform: scale(1.015); } .prose-body .md-gallery__grid > .md-gallery__item:only-child { grid-column: 1 / -1; justify-self: stretch; }