try css styling

.github/workflows/release-docs.yml

@@ -16,10 +16,12 @@ jobs:
       - name: Install dependencies
         run: |
           sudo apt-get update
+          
+          # texlive-latex-recommended \
+          # texlive-fonts-recommended \
+          # texlive-latex-extra \
+            
           sudo apt-get install -y pandoc \
-            texlive-latex-recommended \
-            texlive-fonts-recommended \
-            texlive-latex-extra \
             jq \
             curl
 
@@ -33,13 +35,15 @@ jobs:
             pandoc "src/${doc}.md" \
               --toc \
               --standalone \
+              --embed-resources \
               --metadata title="CMBA ${doc}" \
+              --css src/style.css \
               -o "dist/${doc}.html"
 
             # PDF
-            pandoc "src/${doc}.md" \
-              --metadata title="CMBA ${doc}" \
-              -o "dist/${doc}.pdf"
+            # pandoc "src/${doc}.md" \
+            #  --metadata title="CMBA ${doc}" \
+            #  -o "dist/${doc}.pdf"
           done
 
           # Include source markdown for transparency
@@ -93,12 +97,8 @@ jobs:
               curl -sS -X DELETE -H "$AUTH" \
                 "$API/repos/$OWNER/$NAME/releases/$RELEASE_ID/assets/$existing_asset_id" >/dev/null
             fi
-
-            echo "Uploading: $filename"
-            curl -sS --fail -X POST -H "$AUTH" \
-  -H "Accept: application/json" \
-  -F "attachment=@$f" \
-  "$API/repos/$OWNER/$NAME/releases/$RELEASE_ID/assets?name=$filename"
+            echo "Uploading $filename" 
+            curl -sS --fail -X POST -H "$AUTH" -H "Accept: application/json" -F "attachment=@$f" "$API/repos/$OWNER/$NAME/releases/$RELEASE_ID/assets?name=$filename" >/dev/null
           done
 
           echo "Done. Release page: ${GITEA_BASE_URL}/${OWNER}/${NAME}/releases/tag/${TAG}"

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);
+  }
+}