mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
fix(site): style Astro-rendered <pre> blocks in prose bodies (#133)
The Astro migration switched fenced code blocks from the hand-written `<div class="code-block-wrap"><pre class="code-block">` wrapper to Astro+Shiki's auto-generated `<pre class="astro-code">`. The existing CSS only targeted the legacy class names, so docs and tutorial code blocks rendered with no padding, no border-radius, and no margin. On top of that, the inner `<code>` inherited `.prose code`'s cream pill styling and showed it through Shiki's dark theme. Extends `.prose .code-block` rules to cover `.prose pre`, adds the missing margin and max-width, and resets `.prose pre code` to drop the inline-code background and border. Shiki's inline background color still wins on `.astro-code`, so the box keeps its dark theme; hand-written `.code-block` blocks on the case-study page get the warmer oklch palette as before. Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -2291,7 +2291,13 @@ main#main {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Fenced code blocks: covers Astro+Shiki's auto-generated <pre class="astro-code">
|
||||
in markdown bodies and the legacy hand-written <pre class="code-block"> still
|
||||
used by the case-study pages. Shiki sets background/color inline, so its theme
|
||||
wins on .astro-code; the CSS values here apply to .code-block. */
|
||||
.prose pre,
|
||||
.prose .code-block {
|
||||
margin: 1.25em 0;
|
||||
padding: var(--spacing-md);
|
||||
background: oklch(12% 0.005 350);
|
||||
color: oklch(92% 0.005 350);
|
||||
@@ -2301,6 +2307,7 @@ main#main {
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.55;
|
||||
border: 1px solid oklch(20% 0.005 350);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.code-block-copy {
|
||||
@@ -2352,12 +2359,14 @@ main#main {
|
||||
content: "Copied";
|
||||
}
|
||||
|
||||
.prose pre code,
|
||||
.prose .code-block code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.prose blockquote {
|
||||
|
||||
Reference in New Issue
Block a user