/* ========================================================================== Markdown Prose rendering for posts/pages' Markdown content (kramdown). There's no M3E "article" component for this, so it stays hand-written CSS - but every color/size here now comes from M3E's own design tokens (--md-sys-color-*, --md-sys-typescale-*) instead of a bespoke palette, so prose always matches whatever scheme m3e-theme is currently applying. The surface itself (background, border, corner radius) is left to the surrounding m3e-content-pane (_layouts/post.html and page.html) rather than duplicated here. ========================================================================== */ .markdown { --markdown-quote-bg: var( --md-sys-color-surface-container-high, var(--md-sys-color-surface-variant) ); --markdown-inline-code-bg: var( --md-sys-color-surface-container-high, var(--md-sys-color-surface-variant) ); --markdown-pre-bg: #2b2b2b; --markdown-pre-text: #f8f8f2; --markdown-table-row: var( --md-sys-color-surface-container, var(--md-sys-color-surface-variant) ); --markdown-radius: var(--md-sys-shape-corner-medium, 0.75rem); --markdown-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Single knob for "all article headings, scaled up together" - h1-h6 below each multiply their own existing typescale token by this instead of hardcoding six new, independently-chosen sizes, so the headings grow in proportion to the hierarchy they already had (h1 stays the biggest, h4-h6 the smallest, same ratios as before) rather than flattening the scale or needing six numbers kept in sync by hand. */ --markdown-heading-scale: 1.25; /* m3e-content-pane (the element this class is applied to) draws its own internal padding via this custom property, on top of whatever plain CSS `padding` is set on the element itself - left at its default, an article's content would get padded twice over (once here, once again by the component internally). Zeroing it out makes this class the single source of truth for the pane's inset, matching how every other surface on the site (cards, the sidebar) is spaced with plain CSS alone. */ --m3e-content-pane-container-padding: 0; color: var(--md-sys-color-on-surface); /* Slightly smaller and more open than the site's own UI text - long- form prose reads more comfortably a touch smaller with more breathing room between lines than text tuned for short strings (nav, buttons, cards). */ font: var(--md-sys-typescale-body-large-font-weight, 400) var(--md-sys-typescale-body-large-font-size, 1rem) / 1.8 var(--font-body); /* A small side inset on mobile now, rather than none - .app-body__main (site.css) already provides its own gutter, so this stacks a second, smaller one on top of it deliberately, nudging the text edge very slightly in from the post list's own cards instead of lining up flush with them. Top padding is deliberately tighter than the other three sides - the titlebar right above already reads as the start of the page, so a full 1rem gap on top of that read as too much empty space before the actual content began. */ padding: 0.5rem 0.5rem 1rem; /* The actual fix for justify's usual web problem (uneven "rivers" of whitespace between words) isn't avoiding justify, it's the hyphenation print/newspaper columns always pair it with and the web usually skips: with hyphens: auto, the browser can break long words at the line edge instead of stretching gaps to fill the line. Relies on (_layouts/default.html) for the hyphenation dictionary to know which language's rules to apply. */ hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } @media (min-width: 50em) { .markdown { /* Back to a real inset on its own, wide enough here that it no longer needs to line up with .app-body__main's gutter - top stays tighter than the rest for the same reason as the mobile value above. */ padding: 0rem 2rem 2rem; } } /* Headings */ .markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { font-family: var(--font-heading); line-height: 1.25; margin-top: 2.2rem; margin-bottom: 1rem; /* Keeps the heading clear of the sticky app bar when navigating to an anchor link. */ scroll-margin-top: 5rem; } /* The first h2 in a post (almost always the very first heading overall - h1 is reserved for the page-level title outside .markdown entirely, see _layouts/article.html) shouldn't repeat the shared 2.2rem top margin above it: .markdown's own top padding (also deliberately tight, see above) already provides the gap between the titlebar and the content that follows, so stacking this margin on top of that padding just doubled up the same gap. :first-of-type (not :first-child) still matches even when kramdown puts something else - a leading image, a paragraph - before the first h2, since it counts first among h2 siblings specifically, not first among ALL children regardless of type. !important because .markdown h1, h2, ... above sets the same property on the same element with equal selector specificity (0,0,2) - source order alone would normally let this second rule win already, but a later edit to that shared rule (e.g. turning it into a single grouped selector) could quietly reorder that outcome; an explicit !important makes this override immune to that instead of relying on it. */ .markdown h2:first-of-type { margin-top: 0 !important; } /* Only h1 gets the accent color and center alignment - h2-h6 stay left- aligned and in the regular text color, so a post's actual title-level heading reads as visually distinct from its section headings instead of all of them looking the same. Sizes are deliberately reused from the same handful of typescale steps the rest of the site already uses (site.css: the page's hero title is display-medium, the profile name and titlebar/post-card text are title-large/-medium) rather than pulling in a whole separate headline- large/medium/small scale just for article prose - h1 (headline-medium) is the only size on this page that doesn't already appear elsewhere, and h4-h6 intentionally share one size (they're rarely all used in the same post, and don't need three more distinct sizes to look correct next to each other). */ .markdown h1 { /* text-transform: uppercase; */ margin-top: 0 !important; color: var(--md-sys-color-primary); text-align: center; font-size: calc( var(--md-sys-typescale-headline-medium-font-size, 1.75rem) * var(--markdown-heading-scale) ); font-weight: var(--md-sys-typescale-headline-medium-font-weight, 400); } .markdown h2 { /* text-transform: uppercase; */ color: var(--md-sys-color-primary); text-align: center; font-size: calc( var(--md-sys-typescale-title-large-font-size, 1.375rem) * var(--markdown-heading-scale) ); font-weight: var(--md-sys-typescale-title-large-font-weight, 500); } .markdown h3 { font-size: calc( var(--md-sys-typescale-title-medium-font-size, 1rem) * var(--markdown-heading-scale) ); font-weight: var(--md-sys-typescale-title-medium-font-weight, 500); } .markdown h4, .markdown h5, .markdown h6 { font-size: calc( var(--md-sys-typescale-title-small-font-size, 0.875rem) * var(--markdown-heading-scale) ); font-weight: var(--md-sys-typescale-title-small-font-weight, 500); } .markdown h6 { color: var(--md-sys-color-on-surface-variant); } /* Text */ .markdown p { margin: 1rem 0; } /* Initial letter - opt-in per paragraph, not automatic on the first one, so it can be called as many times as wanted in a single post (a long post with several sections might want one at the top of each). Add kramdown's inline attribute list right after the paragraph in the Markdown source to turn it on for that paragraph specifically: Lorem ipsum dolor sit amet... {: .initial-letter} Deliberately the plain version, not a traditional drop cap: no float, no custom line-height/margin to make it span multiple lines, no different color or font. Just a bigger first letter, inline with the rest of its own line like any other character - font-size is the entire effect. */ .markdown p.initial-letter::first-letter { font-size: 1.8em; } .markdown strong { font-weight: 700; } .markdown em { font-style: italic; } .markdown del { text-decoration: line-through; color: var(--md-sys-color-on-surface-variant); } /* Link */ .markdown a { color: var(--md-sys-color-primary); font-weight: 600; } /* Hover/focus underline itself is global (site.css) - covers this link too, no need to repeat it here. */ .markdown a:where([href^="http"]) { word-break: break-word; } /* Lists */ .markdown ul, .markdown ol { padding-left: 2rem; margin: 1rem 0; } .markdown li { margin: 0.4rem 0; } .markdown li > p { margin: 0.5rem 0; } .markdown input[type="checkbox"] { margin-right: 0.5em; transform: translateY(1px); } .markdown .task-list { list-style: none; padding: 0; } /* Blockquotes */ .markdown blockquote { margin: 1.5rem 0; padding: 0.75rem 1rem; color: var(--md-sys-color-on-surface); background: var(--markdown-quote-bg); border-left: 0.25rem solid var(--md-sys-color-primary); border-top-right-radius: var(--markdown-radius); border-bottom-right-radius: var(--markdown-radius); } .markdown blockquote blockquote { margin-left: 0; background: var(--md-sys-color-surface); } /* Code */ .markdown code { font-family: var(--markdown-mono); background: var(--markdown-inline-code-bg); padding: 0.2em 0.4em; border-radius: var(--markdown-radius); font-size: 0.95em; font-variant-ligatures: common-ligatures; font-feature-settings: "liga" 1, "calt" 1; } .markdown pre { /* Stays a fixed dark surface regardless of theme - deliberately, code reads as "correct" dark either way. */ background: var(--markdown-pre-bg); color: var(--markdown-pre-text); padding: 1rem; overflow-x: auto; border-radius: var(--markdown-radius); margin: 1.5rem 0; border: 1px solid var(--md-sys-color-outline-variant); } .markdown pre code { background: none; color: inherit; padding: 0; font-size: 0.9em; line-height: 1.5; } /* Tables */ .markdown table { border-collapse: collapse; margin: 1.5rem 0; width: 100%; font-size: 0.95em; border-radius: var(--markdown-radius); overflow: hidden; border-style: hidden; box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant); } .markdown th, .markdown td { border: 1px solid var(--md-sys-color-outline-variant); padding: 0.6em 0.8em; color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface); } .markdown th { font-weight: 600; background: var(--markdown-quote-bg); } .markdown tr:nth-child(even) td { background: var(--markdown-table-row); } /* Horizontal rule */ .markdown hr { border: none; border-top: 1px solid var(--md-sys-color-outline-variant); margin: 2.5rem 0; } /* Images and media */ .markdown img { max-width: 100%; display: block; margin: 1.5rem auto; border-radius: var(--markdown-radius); } .markdown figure { margin: 1.5rem 0; } .markdown figcaption { font-size: 0.85em; color: var(--md-sys-color-on-surface-variant); text-align: center; } .markdown iframe, .markdown video { max-width: 100%; } /* Definition lists */ .markdown dl { margin: 1.5rem 0; } .markdown dt { font-weight: 600; } .markdown dd { margin-left: 1.5rem; margin-bottom: 0.8rem; color: var(--md-sys-color-on-surface-variant); } /* Footnotes (markdown-it-footnote) */ .markdown .footnotes { font-size: 0.9em; color: var(--md-sys-color-on-surface-variant); border-top: 1px solid var(--md-sys-color-outline-variant); margin-top: 3rem; } .markdown .footnotes ol { padding-left: 1.5rem; } .markdown sup { font-size: 0.75em; }