re-structure
This commit is contained in:
Tony
309
styles/style.css
Normal file
309
styles/style.css
Normal file
@@ -0,0 +1,309 @@
|
||||
/* 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
|
||||
*/
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap");
|
||||
|
||||
: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);
|
||||
|
||||
/* Rulebook serif stack */
|
||||
font-family:
|
||||
"Merriweather",
|
||||
"Georgia",
|
||||
"Times New Roman",
|
||||
Times,
|
||||
"Liberation Serif",
|
||||
serif;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.quote-icon {
|
||||
display: inline-block;
|
||||
width: 0.9em;
|
||||
height: 0.9em;
|
||||
vertical-align: middle;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("data:image/svg+xml;utf8,\
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'>\
|
||||
<path fill='currentColor' d='M96 224c0-35.3 28.7-64 64-64h32V64H160C71.6 64 0 135.6 0 224v64c0 70.7 57.3 128 128 128h32V288h-32c-17.7 0-32-14.3-32-32v-32zm256 0c0-35.3 28.7-64 64-64h32V64h-32c-88.4 0-160 71.6-160 160v64c0 70.7 57.3 128 128 128h32V288h-32c-17.7 0-32-14.3-32-32v-32z'/>\
|
||||
</svg>");
|
||||
}
|
||||
.quote-btn {
|
||||
margin-left:.5rem;
|
||||
font-size:.8em;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
/* 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