Ken
eaef3f8e84
Replace the narrow 720px column layout with a three-width breakout system: - Reading width (--width-prose, 720px): prose paragraphs, lists, blockquotes - Wide width (--width-code, 840px): code blocks, inline SVGs, figures, .wide/.breakout - Full width (--width-container, 1100px): hero diagrams, .full elements The outer container is wide; individual content blocks self-constrain via max-width + margin: auto. This creates the narrow-wide-narrow rhythm. Changes: - prose.css: Add .prose > * breakout pattern for three widths, SVG styling - BaseLayout.astro: Remove max-width from main (children handle their own widths) - [...slug].astro: Remove --width-prose constraint from .prose-wrapper - prose.css: Remove old left:50%/translateX(-50%) code block hack
240 lines
4.6 KiB
CSS
240 lines
4.6 KiB
CSS
/* Prose — typographic treatment for rendered markdown */
|
|
|
|
/* --- Three-width layout system --- */
|
|
/* Default: all direct children constrained to reading width */
|
|
|
|
.prose > * {
|
|
max-width: var(--width-prose);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Wide: code blocks, SVGs, figures, and .wide/.breakout elements */
|
|
|
|
.prose > pre,
|
|
.prose > svg,
|
|
.prose > figure,
|
|
.prose > .wide,
|
|
.prose > .breakout {
|
|
max-width: var(--width-code);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Full-bleed: hero diagrams, comparison layouts */
|
|
|
|
.prose > .full {
|
|
max-width: var(--width-container);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* --- Headings (Structure voice: Inter) --- */
|
|
|
|
.prose h2 {
|
|
font-family: var(--font-structure);
|
|
font-size: var(--type-2xl);
|
|
font-weight: 600;
|
|
line-height: var(--leading-snug);
|
|
letter-spacing: -0.015em;
|
|
margin-top: var(--space-8);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.prose h3 {
|
|
font-family: var(--font-structure);
|
|
font-size: var(--type-xl);
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
letter-spacing: -0.01em;
|
|
margin-top: var(--space-5);
|
|
margin-bottom: var(--space-1-5);
|
|
}
|
|
|
|
.prose h4 {
|
|
font-family: var(--font-structure);
|
|
font-size: var(--type-lg);
|
|
font-weight: 600;
|
|
line-height: var(--leading-heading);
|
|
letter-spacing: -0.005em;
|
|
margin-top: var(--space-4);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
/* --- Body (Prose voice: Source Serif 4) --- */
|
|
|
|
.prose p {
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.prose p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* --- Links --- */
|
|
|
|
.prose a {
|
|
color: var(--accent-primary);
|
|
text-decoration: none;
|
|
transition: color var(--duration-fast) var(--ease-default);
|
|
}
|
|
|
|
.prose a:hover {
|
|
color: var(--accent-primary-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* --- Blockquotes --- */
|
|
|
|
.prose blockquote {
|
|
font-family: var(--font-prose);
|
|
font-size: 1.25rem;
|
|
font-style: italic;
|
|
line-height: var(--leading-relaxed);
|
|
border-left: 3px solid var(--accent-primary);
|
|
padding-left: var(--space-3);
|
|
margin-top: var(--space-3);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
/* --- Lists --- */
|
|
|
|
.prose ul,
|
|
.prose ol {
|
|
padding-left: var(--space-3);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.prose li {
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.prose li > ul,
|
|
.prose li > ol {
|
|
margin-top: var(--space-1);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* --- Inline code (Evidence voice: JetBrains Mono) --- */
|
|
|
|
.prose code {
|
|
font-family: var(--font-evidence);
|
|
font-size: 0.9em;
|
|
color: var(--code-text);
|
|
background-color: var(--surface-code);
|
|
padding: 0.15em 0.35em;
|
|
border-radius: var(--rounded-sm);
|
|
}
|
|
|
|
/* --- Pre code reset --- */
|
|
|
|
.prose pre code {
|
|
font-size: 1rem;
|
|
background: none;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
/* --- Code blocks (wide breakout via three-width system) --- */
|
|
|
|
.prose pre {
|
|
border: 1px solid var(--border-subtle);
|
|
border-left: 3px solid var(--accent-primary);
|
|
border-radius: var(--rounded-md);
|
|
padding: var(--space-3);
|
|
margin-top: var(--space-5);
|
|
margin-bottom: var(--space-5);
|
|
overflow-x: auto;
|
|
line-height: var(--leading-relaxed);
|
|
font-family: var(--font-evidence);
|
|
tab-size: 2;
|
|
}
|
|
|
|
/* Warm scrollbar styling */
|
|
.prose pre::-webkit-scrollbar {
|
|
height: 6px;
|
|
}
|
|
|
|
.prose pre::-webkit-scrollbar-track {
|
|
background: var(--surface-inset);
|
|
border-radius: var(--rounded-full);
|
|
}
|
|
|
|
.prose pre::-webkit-scrollbar-thumb {
|
|
background: var(--border-default);
|
|
border-radius: var(--rounded-full);
|
|
}
|
|
|
|
.prose pre::-webkit-scrollbar-thumb:hover {
|
|
background: var(--border-strong);
|
|
}
|
|
|
|
/* Focus-visible outline */
|
|
.prose pre:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* --- Inline SVG diagrams --- */
|
|
|
|
.prose svg {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: var(--rounded-md);
|
|
margin-top: var(--space-5);
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
|
|
/* --- Horizontal rules --- */
|
|
|
|
.prose hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border-subtle);
|
|
margin-top: var(--space-6);
|
|
margin-bottom: var(--space-6);
|
|
max-width: 5rem;
|
|
}
|
|
|
|
/* --- Strong / Em --- */
|
|
|
|
.prose strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.prose em {
|
|
font-style: italic;
|
|
}
|
|
|
|
/* --- Images --- */
|
|
|
|
.prose img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: var(--rounded-md);
|
|
margin-top: var(--space-3);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
/* --- Tables --- */
|
|
|
|
.prose table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: var(--space-3);
|
|
margin-bottom: var(--space-3);
|
|
font-size: var(--type-sm);
|
|
}
|
|
|
|
.prose th {
|
|
font-family: var(--font-structure);
|
|
font-weight: 600;
|
|
text-align: left;
|
|
padding: var(--space-1) var(--space-2);
|
|
border-bottom: 2px solid var(--border-default);
|
|
}
|
|
|
|
.prose td {
|
|
padding: var(--space-1) var(--space-2);
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
} |