feat: add prose styling for markdown content with full typographic treatment
This commit is contained in:
Ken
@@ -0,0 +1,206 @@
|
||||
/* Prose — typographic treatment for rendered markdown */
|
||||
|
||||
/* --- 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 (breakout width) --- */
|
||||
|
||||
.prose pre {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: min(var(--width-code), calc(100vw - var(--gutter) * 2));
|
||||
max-width: var(--width-code);
|
||||
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;
|
||||
}
|
||||
|
||||
/* --- 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);
|
||||
}
|
||||
Reference in New Issue
Block a user