From e0ee5899c049cbfc50fe61a268c66f79d881a67f Mon Sep 17 00:00:00 2001 From: Tony Date: Wed, 14 Jan 2026 10:53:40 -0600 Subject: [PATCH] try css styling --- .github/workflows/release-docs.yml | 6 +- src/style.css | 280 +++++++++++++++++++++++++++++ 2 files changed, 281 insertions(+), 5 deletions(-) create mode 100644 src/style.css diff --git a/.github/workflows/release-docs.yml b/.github/workflows/release-docs.yml index eb3c10a..ca16764 100644 --- a/.github/workflows/release-docs.yml +++ b/.github/workflows/release-docs.yml @@ -29,10 +29,6 @@ jobs: run: | set -euo pipefail mkdir -p dist - mkdir -p assets_tmp - curl -fsSL \ - -o ./assets_tmp/github-markdown.css \ - https://raw.githubusercontent.com/sindresorhus/github-markdown-css/main/github-markdown.css for doc in cmba-bylaws; do # Mobile-friendly HTML with TOC + serif styling @@ -41,7 +37,7 @@ jobs: --standalone \ --embed-resources \ --metadata title="CMBA ${doc}" \ - --css ./assets_tmp/github-markdown.css \ + --css src/style.css \ -o "dist/${doc}.html" # PDF diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..ac624a4 --- /dev/null +++ b/src/style.css @@ -0,0 +1,280 @@ +/* CMBA Rulebook CSS for Pandoc HTML + Compatible with Pandoc's default HTML structure: + - header#title-block-header + - nav#TOC[role="doc-toc"] + - headings with ids/classes like .unnumbered +*/ + +:root{ + --bg: #ffffff; + --fg: #111827; /* slate-900 */ + --muted: #6b7280; /* gray-500 */ + --border: #e5e7eb; /* gray-200 */ + --card: #f9fafb; /* gray-50 */ + --link: #1d4ed8; /* blue-700 */ + --link-hover: #1e40af; /* blue-800 */ + --code-bg: #0b1020; /* dark */ + --code-fg: #e5e7eb; + + --radius: 12px; + --content-max: 980px; + --toc-max: 320px; +} + +/* Base */ +html { scroll-behavior: smooth; } +body{ + margin: 0; + background: var(--bg); + color: var(--fg); + font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; + line-height: 1.6; + font-size: 16px; + text-rendering: optimizeLegibility; +} + +/* Layout: single column on mobile, TOC sidebar on wide screens */ +body{ + display: block; +} + +/* Give anchored headings a little offset for mobile browser bars */ +h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]{ + scroll-margin-top: 84px; +} + +/* Main document container: Pandoc outputs direct children; we style them */ +header#title-block-header, +nav#TOC, +main, +body > h1, body > h2, body > h3, body > h4, body > h5, body > h6, +body > p, body > ul, body > ol, body > table, body > blockquote, body > pre, body > hr, +body > dl{ + max-width: var(--content-max); + margin-left: auto; + margin-right: auto; +} + +/* Title block */ +header#title-block-header{ + padding: 20px 16px 8px; + border-bottom: 1px solid var(--border); + margin-bottom: 8px; +} +header#title-block-header .title{ + margin: 0 0 6px; + font-size: 1.75rem; + line-height: 1.2; + letter-spacing: -0.02em; +} +header#title-block-header .subtitle{ + margin: 0 0 8px; + color: var(--muted); +} +header#title-block-header .author, +header#title-block-header .date{ + margin: 0; + color: var(--muted); + font-size: 0.95rem; +} + +/* TOC card */ +nav#TOC{ + padding: 0 16px 12px; + margin-bottom: 10px; +} +nav#TOC > ul{ + margin: 0; + padding: 14px 16px; + background: var(--card); + border: 1px solid var(--border); + border-radius: var(--radius); +} +nav#TOC ul{ + list-style: none; +} +nav#TOC li{ + margin: 6px 0; +} +nav#TOC a{ + color: var(--link); + text-decoration: none; +} +nav#TOC a:hover{ + color: var(--link-hover); + text-decoration: underline; +} +nav#TOC ul ul{ + margin-top: 6px; + padding-left: 14px; + border-left: 2px solid var(--border); +} + +/* Content padding */ +body > *{ + padding-left: 16px; + padding-right: 16px; + box-sizing: border-box; +} + +/* Headings */ +h1, h2, h3, h4, h5, h6{ + line-height: 1.25; + margin: 22px auto 10px; + letter-spacing: -0.01em; +} +h1{ font-size: 1.55rem; } +h2{ font-size: 1.25rem; } +h3{ font-size: 1.1rem; } +h4{ font-size: 1.0rem; } +h5{ font-size: 0.95rem; } +h6{ font-size: 0.9rem; color: var(--muted); } + +/* Unnumbered headings (Pandoc uses .unnumbered sometimes) */ +.unnumbered{ + scroll-margin-top: 84px; +} + +/* Paragraphs and lists */ +p{ + margin: 0 auto 12px; +} +ul, ol{ + margin: 0 auto 14px; + padding-left: 1.25rem; +} +li{ + margin: 6px 0; +} + +/* Links */ +a{ + color: var(--link); + text-decoration-thickness: 2px; + text-underline-offset: 3px; +} +a:hover{ + color: var(--link-hover); +} + +/* Blockquotes */ +blockquote{ + margin: 14px auto; + padding: 10px 14px; + border-left: 4px solid var(--border); + background: var(--card); + border-radius: 10px; + color: #111827; +} +blockquote p{ margin: 0; } + +/* Horizontal rule */ +hr{ + border: 0; + border-top: 1px solid var(--border); + margin: 18px auto; +} + +/* Tables */ +table{ + width: 100%; + border-collapse: collapse; + margin: 14px auto 18px; + overflow: hidden; + border: 1px solid var(--border); + border-radius: var(--radius); + display: block; /* enables horizontal scroll on small screens */ +} +thead th{ + background: var(--card); + text-align: left; + font-weight: 600; +} +th, td{ + padding: 10px 12px; + border-bottom: 1px solid var(--border); + vertical-align: top; +} +tbody tr:last-child td{ border-bottom: 0; } + +/* Code */ +code{ + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 0.95em; + background: #f3f4f6; + padding: 0.12em 0.32em; + border-radius: 6px; +} +pre{ + margin: 14px auto 18px; + padding: 12px 14px; + background: var(--code-bg); + color: var(--code-fg); + border-radius: var(--radius); + overflow: auto; + border: 1px solid rgba(255,255,255,0.08); +} +pre code{ + background: transparent; + color: inherit; + padding: 0; +} + +/* Small-screen polish */ +@media (max-width: 520px){ + header#title-block-header .title{ font-size: 1.45rem; } + body{ font-size: 16px; } + nav#TOC > ul{ padding: 12px 14px; } +} + +/* Wide-screen layout: TOC sidebar + content */ +@media (min-width: 1080px){ + body{ + display: grid; + grid-template-columns: minmax(260px, var(--toc-max)) minmax(0, 1fr); + gap: 18px; + align-items: start; + padding: 18px; + } + + /* Remove the auto max-width behavior inside grid; we manage widths here */ + header#title-block-header, + nav#TOC, + body > h1, body > h2, body > h3, body > h4, body > h5, body > h6, + body > p, body > ul, body > ol, body > table, body > blockquote, body > pre, body > hr, + body > dl{ + max-width: none; + margin-left: 0; + margin-right: 0; + } + + header#title-block-header{ + grid-column: 1 / -1; + padding: 16px 18px 10px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: var(--bg); + margin-bottom: 0; + } + + nav#TOC{ + grid-column: 1; + padding: 0; + margin: 0; + position: sticky; + top: 18px; + max-height: calc(100vh - 36px); + overflow: auto; + } + nav#TOC > ul{ + margin: 0; + } + + /* Treat the rest of the content as column 2 */ + body > :not(header#title-block-header):not(nav#TOC){ + grid-column: 2; + padding-left: 0; + padding-right: 0; + max-width: var(--content-max); + } +} \ No newline at end of file