add bleed to code blocks and images on liveline page
Code blocks and chart placeholders now extend 36px beyond the 550px prose column on each side via negative margins (.ll-bleed class). This aligns the code text (after line numbers) flush with the prose left edge. - --ll-bleed: 36px CSS variable (8px div padding + 28px line-number span) - Responsive: bleed disabled below 650px viewport - overflow-x-hidden on page wrapper prevents horizontal scroll
This commit is contained in:
@@ -25,6 +25,10 @@
|
||||
--ll-font-code: "SF Mono", "SFMono-Regular", "Consolas", "Liberation Mono",
|
||||
Menlo, Courier, monospace;
|
||||
|
||||
/* Bleed: code blocks & images extend beyond prose column.
|
||||
36px = 8px div padding-left + 28px line-number span (border-box includes its 20px paddingRight) */
|
||||
--ll-bleed: 36px;
|
||||
|
||||
/* Spacing scale */
|
||||
--ll-spacing-xxs: 0.5rem;
|
||||
--ll-spacing-xs: 1rem;
|
||||
@@ -188,6 +192,24 @@
|
||||
.liveline-article > :nth-child(8) { animation-delay: 0.35s; }
|
||||
.liveline-article > :nth-child(n + 9) { animation-delay: 0.4s; }
|
||||
|
||||
/* ========================================================================
|
||||
Bleed — code blocks and images extend beyond the prose column so that
|
||||
the code text (after line numbers) aligns with the prose left edge.
|
||||
36px = 8px div padding-left + 28px line-number span (border-box, includes padding).
|
||||
======================================================================== */
|
||||
|
||||
.ll-bleed {
|
||||
margin-left: calc(-1 * var(--ll-bleed));
|
||||
margin-right: calc(-1 * var(--ll-bleed));
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.ll-bleed {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================================
|
||||
Header fade gradient
|
||||
======================================================================== */
|
||||
|
||||
Reference in New Issue
Block a user