website
git clone https://git.pyrossh.dev/website
木 Personal website of pyrossh. Built with astrojs, shiki, vite.
assets/css/markdown.css
| 3c79a68 | 1 | /* Shared typography for rendered markdown content (blog posts + repo |
| 44991dd | 2 | READMEs) — anything wrapped in a plain <article class="markdown-body"> |
| 44991dd | 3 | (see repo.njk/post.njk; no wrapping custom element anymore). Extracted |
| 44991dd | 4 | from the old posts-detail.css so repo pages get the same look instead |
| 44991dd | 5 | of no styling at all. Deliberately scoped to .markdown-body p/li code |
| 44991dd | 6 | (inline code), not .markdown-body code generally — a bare `code` |
| 44991dd | 7 | selector would also catch the <code> inside fenced <pre> blocks and |
| 44991dd | 8 | stomp the syntax-highlighting styles from shared.css with the small |
| 44991dd | 9 | inline-code padding/background (that shared styling is cross-cutting |
| 44991dd | 10 | between markdown content and the file-viewer, so it stays global |
| 44991dd | 11 | rather than duplicated here). */ |
| 44991dd | 12 | .markdown-body { |
| 44991dd | 13 | font-size: 1.1rem; |
| 44991dd | 14 | line-height: 1.5; |
| 3c79a68 | 15 | |
| 44991dd | 16 | h1 { |
| ada6e53 | 17 | font-size: var(--fs-heading-md); |
| 44991dd | 18 | font-weight: 700; |
| 44991dd | 19 | margin-top: 0; |
| 44991dd | 20 | margin-bottom: 0.5rem; |
| 44991dd | 21 | } |
| 3c79a68 | 22 | |
| 44991dd | 23 | h2 { |
| ada6e53 | 24 | font-size: var(--fs-heading-md); |
| 44991dd | 25 | font-weight: 700; |
| 44991dd | 26 | margin-top: 0; |
| 44991dd | 27 | margin-bottom: 0.5rem; |
| 44991dd | 28 | } |
| 3c79a68 | 29 | |
| 44991dd | 30 | h3 { |
| ada6e53 | 31 | font-size: var(--fs-heading-sm); |
| 44991dd | 32 | font-weight: 700; |
| 44991dd | 33 | margin-top: 0.5rem; |
| 44991dd | 34 | margin-bottom: 0.1rem; |
| 44991dd | 35 | } |
| 3c79a68 | 36 | |
| 44991dd | 37 | p { |
| 44991dd | 38 | font-size: 1.1rem; |
| 44991dd | 39 | padding-bottom: 1rem; |
| 44991dd | 40 | } |
| 3c79a68 | 41 | |
| 44991dd | 42 | li { |
| 44991dd | 43 | font-size: 1.1rem; |
| 44991dd | 44 | } |
| 3c79a68 | 45 | |
| 44991dd | 46 | p code, |
| 44991dd | 47 | li code { |
| 44991dd | 48 | color: var(--color-code-fg) !important; |
| 44991dd | 49 | background: var(--color-code-bg) !important; |
| 44991dd | 50 | word-wrap: break-word; |
| 44991dd | 51 | box-decoration-break: clone; |
| 44991dd | 52 | padding: 2px 4px; |
| 44991dd | 53 | border-radius: 0.2rem; |
| 44991dd | 54 | font-weight: 400; |
| 44991dd | 55 | font-size: 0.8rem; |
| 44991dd | 56 | font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
| 44991dd | 57 | } |
| 44991dd | 58 | |
| 44991dd | 59 | /* Fenced code blocks in a README (markdown-it output — no language- |
| 44991dd | 60 | class on the <pre> itself, unlike Prism's blog-post output, which is |
| 44991dd | 61 | how this targets only the README case) get a subtle border + corner |
| 44991dd | 62 | radius, matching the framed-code-block look. */ |
| 44991dd | 63 | pre:not([class*="language-"]) { |
| 44991dd | 64 | border: 1px solid var(--color-box-bg); |
| 44991dd | 65 | border-radius: 0.4rem; |
| 44991dd | 66 | } |
| 44991dd | 67 | |
| 44991dd | 68 | blockquote { |
| 44991dd | 69 | font-size: 1.2rem; |
| 44991dd | 70 | font-weight: 600; |
| 44991dd | 71 | background: var(--color-highlight-bg); |
| 44991dd | 72 | padding: 0.4rem; |
| 44991dd | 73 | margin: 16px 0px; |
| 3c79a68 | 74 | |
| 44991dd | 75 | p { |
| 44991dd | 76 | padding: 0; |
| 44991dd | 77 | } |
| 44991dd | 78 | } |
| 3c79a68 | 79 | } |