try css styling
All checks were successful
Build and publish CMBA rulebooks (Gitea) / build-release (push) Successful in 7s
All checks were successful
Build and publish CMBA rulebooks (Gitea) / build-release (push) Successful in 7s
This commit is contained in:
Tony
6
.github/workflows/release-docs.yml
vendored
6
.github/workflows/release-docs.yml
vendored
@@ -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
|
||||
|
||||
280
src/style.css
Normal file
280
src/style.css
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user