| rather than | . The nowrap keeps a two-part date ("509 or 508", "478 to 476") on one line instead of wrapping merely because the column is narrow. */ .source-table tbody th[scope="row"] { color: var(--ink); font-weight: 600; white-space: nowrap; } /* The chronology event cells carry the Basic HTML two-space sentence rule. Like every prose context in this sheet they need white-space: pre-wrap for the literal double spaces to render -- a | defaults to `normal`, which collapses them silently.
overflow-wrap: break-word is paired with it as elsewhere, so a long
token cannot overflow a narrow cell. */
.source-table td {
white-space: pre-wrap;
overflow-wrap: break-word;
}
@media (max-width: 720px) {
.source-table table {
font-size: 0.8rem;
}
.source-table th,
.source-table td {
padding: 0.34rem 0.5rem;
}
}
/* ---- Note boxes (house treatment) ---------------------------------------- */
.note-box {
margin: 1.5rem 0 1.5rem 1.6rem;
padding: 0.7rem 0.9rem;
background: var(--note-bg);
border-left: 3px solid var(--note-border);
color: var(--ink-mid);
font-size: 0.85rem;
line-height: 1.58;
text-align: left;
}
/* The two-space sentence rule (Basic HTML) depends on white-space:
pre-wrap to render its literal double spaces; the house .note-box
rule would otherwise reset text to white-space: normal and silently
collapse them back to one. */
.note-box p.content-note {
margin: 0;
text-align: left;
text-indent: 0;
white-space: pre-wrap;
overflow-wrap: break-word;
}
/* Quotation passages (Captain-ordered): visually kin to note boxes --
same background, border, padding, font -- but a structurally separate
class, so the notes toggle (which only ever queries .note-box) can
never hide one. */
.quotation {
margin: 1.5rem 0 1.5rem 1.6rem;
padding: 0.7rem 0.9rem;
background: var(--note-bg);
border-left: 3px solid var(--note-border);
color: var(--ink-mid);
font-size: 0.85rem;
line-height: 1.58;
text-align: left;
}
.quotation p.quotation-text {
margin: 0 0 0.45rem;
text-align: left;
text-indent: 0;
white-space: pre-wrap;
overflow-wrap: break-word;
}
.quotation p.quotation-text:last-child {
margin-bottom: 0;
}
/* ---- Colophon / source note ------------------------------------------------ */
.source-note {
margin: 3rem auto 0;
max-width: 42rem;
padding: 1.5rem 1.25rem;
border-top: 1px solid var(--rule);
font-size: 0.9rem;
}
.source-note h2 {
text-align: left;
font-size: 1.1rem;
}
.source-note dl {
display: grid;
grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
column-gap: 1em;
row-gap: 0.4em;
}
.source-note dt {
font-weight: bold;
}
/* Captain order 2026-10-11 (Ref 41): the front colophon (aside.colophon)
takes On War's .colophon dl/dt layout -- column-gap 1.25rem, row-gap
0.5rem, dt in --ink-light at weight 600. Scoped to .colophon so the
About box (#end-note, also .source-note) is untouched. */
.colophon dl {
column-gap: 1.25rem;
row-gap: 0.5rem;
}
.colophon dt {
color: var(--ink-light);
font-weight: 600;
}
.source-note dd {
margin: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* ---- Footer ---------------------------------------------------------------- */
/* Footer: the Analects presentation (Captain order 2026-09-28) -- the dark
"furniture" bar in both themes, gold top rule, 0.86rem, body typeface. */
.site-footer {
padding: 2.5rem 1rem;
color: var(--footer-text);
background: var(--footer-bg);
border-top: 3px solid var(--gold);
font-size: 0.86rem;
text-align: center;
}
.site-footer p {
margin: 0.2rem;
}
.site-footer a {
color: var(--toggle-hover-color);
}
/* =====================================================================
Part 2 verse indentation ladder -- this edition's own mechanism
(Basic HTML, PIPE 1/2), re-themed into this palette/type scale only.
Rules kept mutually exclusive (not "baseline plus override") because
a :not()-heavy baseline selector can outrank the plain .verse-label /
.sub-line rules meant to override it -- see build_basic_html.py.
===================================================================== */
.verse-chapter p:not(.verse-label):not(.sub-line):not(.poem):not(.center):not(.noindent):not(.signature),
.verse-chapter .content-note {
text-indent: 0;
padding-left: var(--indent-unit);
}
.verse-chapter p.verse-label {
text-indent: calc(-1 * var(--indent-unit));
padding-left: var(--indent-unit);
}
.verse-chapter p.sub-line {
text-indent: 0;
padding-left: calc(2 * var(--indent-unit));
}
p {
margin-top: 0.5em;
margin-bottom: 0.5em;
text-indent: 1.5em;
}
p:not(.center):not(.poem):not(.noindent):not(.signature):not(.content-note) {
white-space: pre-wrap;
overflow-wrap: break-word;
word-wrap: break-word;
}
p.center, p.poem, p.noindent, p.signature {
text-indent: 0;
white-space: normal;
}
p.poem {
margin-left: 10%;
}
p.signature {
text-align: right;
font-style: italic;
}
div.chapter.editorial h3 {
font-size: 1.1em;
font-weight: bold;
text-align: left;
}
h1.part {
font-size: 1.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-block: 2rem 3rem;
padding: 3.5rem 1rem;
border-top: 1px solid var(--gold);
border-bottom: 1px solid var(--gold);
color: var(--rust);
}
/* Every .chapter div in this build -- Part 1's front-matter sections,
the six Introduction sections, the section holding the Bibliography
and Footnotes, the two editorial sections, and Part 2's thirteen
chapters alike -- gets this rhythm: 3.5rem of breathing room above
and below (matching consecutive .chapter/.document-section in the
prototypes) plus a dividing rule after it. Deliberately uniform
rather than scoped to Part 2 only: every one of these IS a document
section, and a reader should feel the same separation between all of
them. The two editorial sections (div.chapter.editorial) get this
too -- checked after the change: they read exactly like the other
sections, just with more air, which is the point. --source-rail is
0 for this build (see :root), so the right-hand padding component
is inert -- no gutter. */
div.chapter {
padding: 3.5rem var(--source-rail) 3.5rem 0;
border-bottom: 1px solid var(--rule);
}
/* A Part divider (h1.part, inside div.part-division) already draws its
own top and bottom rule. Where a .chapter's border-bottom would sit
immediately above one, it doubles the divider's own top rule --
two parallel hairlines framing an empty band, not a design. Suppress
it declaratively (by relationship, not by naming the two sections
that happen to precede a divider today) so a future third Part never
reintroduces the defect. */
div.chapter:has(+ .part-division) {
border-bottom: none;
}
/* Maps the prototypes' .chapter-header (a wrapper we do not have)
2rem margin-bottom onto the heading itself. */
div.chapter > h2 {
margin-bottom: 2rem;
}
.part-title {
display: block;
font-size: 0.6em;
letter-spacing: 0.02em;
text-transform: none;
margin-top: 0.4rem;
color: var(--ink-light);
}
a.part-link {
font-weight: bold;
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* ---- Print -------------------------------------------------------------- */
@media print {
@page {
size: letter;
margin: 0.65in 0.7in;
}
body {
color: #000;
background: #fff;
font-size: 11pt;
}
.site-header,
.section-bar,
.skip-link,
.contents-backdrop,
.contents-toggle,
.contents-close,
.display-controls,
.top-link {
display: none !important;
}
main {
margin-left: 0 !important;
}
.contents-panel {
position: static;
width: 100%;
padding: 0.35in 0;
overflow: visible;
border-right: 0;
box-shadow: none;
transform: none;
visibility: visible;
inset: auto;
}
.contents-panel {
break-after: page;
}
.source-note {
background: none;
border: 0;
box-shadow: none;
}
.site-footer {
margin-top: 0.3in;
padding-top: 0.15in;
border-top: 1px solid #999;
background: none;
text-align: center;
}
.site-footer a[href="#top"] {
display: none !important;
}
h2, h3, h4 {
break-after: avoid;
}
.note-box, table, tr {
break-inside: avoid;
}
a {
color: #000;
text-decoration: none;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---- Captain-ordered 2026-09-24: divider spacing, main sections / large
chapters only (see the block comment above add_divider_spacing_css() in
build_restored_html.py for the full boundary set and rationale). ---- */
/* Captain order 2026-10-11: "review all the divider spacings in each build
and update them to the Analects layout." Every divider is
spacing-line-spacing with ONE gap G = clamp(3.5rem, 8vw, 7rem) above and
below the 1px line, measured to visible ink (text Range rects, drawn
borders, images): 56 / 58.9 / 102.4 / 112px at 420 / 736 / 1280 / 1920.
This block replaces the 2026-09-24 per-boundary patches (the nine
`h2:has(> #id)` margin resets, the padding-top 45.5 / 63.38 / 78.5px
tweaks and the Part-banner -1 / -10px margins) with shared rules: every
chapter, the Part banners, the front-matter rules and the colophon take
--divider-gap on both sides; the neighbouring margins that used to add
to it are zeroed. The title page itself is not changed. */
main {
--divider-gap: clamp(3.5rem, 8vw, 7rem);
}
/* G less the ink's own offset inside the box (measured, every width): the
h2's leading above its text ~2.6px; a chapter ending in a paragraph has the
last line's leading ~2.5px below its text; one ending in a note-box
(its left border runs to the box edge) has none. Reference (#citations)
keeps the 0 bottom padding set at its own rule below. */
div.chapter:not(.front-matter) {
padding-top: calc(var(--divider-gap) - 2.6px);
padding-bottom: var(--divider-gap);
}
div.chapter:not(.front-matter):not(#citations):has(> p:last-child) {
padding-bottom: calc(var(--divider-gap) - 2.5px);
}
div.chapter:not(.front-matter) > :first-child {
margin-top: 0;
}
div.chapter > :last-child {
margin-bottom: 0;
}
/* the wrapper's last visible content is a boxed Contents-page link ~23.8px
above its content edge; this is the line above the Part 1 banner */
div.chapter.front-matter {
padding-bottom: calc(var(--divider-gap) - 23.8px);
}
/* 2026-10-11 (Analects layout) -- Captain order: "Update both Sunzi titles in the
Title section to same layout as Analects." The title h1 (the source title,
words and s untouched) takes the computed values of Analects' title h1 (analects.css `.title-page h1`, lines 436-445, 2152-2155, 2527-2530): Bodoni stack, 400 weight, uppercase, 0.015em tracking, no margins, clamp(3.25rem, 6vw, 6.75rem) / line-height 0.82, and below 700px clamp(2.65rem, 14vw, 4.2rem) / 0.86. Scoped to this one h1 so h1.part is unchanged. Font-family and text-align already match the base h1 rule. */ .chapter.front-matter > h1:first-child { margin: 0; color: var(--title-ink); font-size: clamp(3.25rem, 6vw, 6.75rem); font-weight: 400; letter-spacing: 0.015em; line-height: 0.82; text-transform: uppercase; } @media (max-width: 700px) { .chapter.front-matter > h1:first-child { font-size: clamp(2.65rem, 14vw, 4.2rem); line-height: 0.86; } } /* 2026-10-11 (Analects layout) -- Captain order: match the gap between the Sunzi title and the line below it to Analects. Analects' `.title-page .kicker` sits clamp(1.45rem, 2.8vw, 2.2rem) below its h1; this h4 (the first subtitle line) takes that same margin less 1px, which makes the h1-last-line -> next-line gap (DOM Range rects) equal Analects' within 0.01px at 420-1920 (the 1px is the difference in the two next-lines' own box offsets). Scoped to this one boundary; the h4's own font, size and colour are unchanged. */ .chapter.front-matter > h1:first-child + h4 { margin-top: calc(clamp(1.45rem, 2.8vw, 2.2rem) - 1px); } .part-division { margin: 0; } /* the h1's own ink sits 2px above / 1px below its content box */ h1.part { margin: 0; padding-block: calc(var(--divider-gap) + 2px) calc(var(--divider-gap) + 1px); } /* the two front-matter rules: dedication text sits ~2.5px inside its box, the h2 below ~2.7px; after the colophon the last row ~2.8px above and the dedication ~1.5px below */ hr { margin-block: calc(var(--divider-gap) - 2.5px) calc(var(--divider-gap) - 2.7px); } #source-note + hr { margin-block: calc(var(--divider-gap) - 2.8px) calc(var(--divider-gap) - 1.5px); } .colophon { margin-top: calc(var(--divider-gap) + 0.2px); padding-top: calc(var(--divider-gap) - 2px); padding-bottom: 0; /* Captain order 2026-10-12: content and divider width as Analects' #colophon (full reading column, no side padding, no 42rem cap), as Sunzi-war. */ max-width: none; padding-right: 0; padding-left: 0; } /* Captain order 2026-10-12 ("Match the Prototype"): above 900px Analects' #colophon divider runs its 3.25rem source rail past the text on the right (832 px line over 780 px text); the text width stays the column's. */ @media (min-width: 901px) { #source-note { margin-right: -3.25rem; padding-right: 3.25rem; } } /* Captain order 2026-10-12: stacked at 560px and narrower, as Analects' .colophon (the long "Arsinoe Library Edition, published by..." label had squeezed the value column to one letter per line). */ @media (max-width: 560px) { .colophon dl { display: block; } .colophon dt { margin-top: 0.7rem; } .colophon dt:first-child { margin-top: 0; } } .colophon > .front-edition-notice > h2:first-child { margin-top: 0; } /* Captain order 2026-09-28: "update all the 'About this archival edition' sections to look like Analects (color, text box, spacing, etc.)"; then "...no section line / space divider as requested for all sections. Again, reference Analects for correct example." #end-note (the "About the Arsinoe Library Edition" box; heading and text ruled unchanged -- style only) takes Analects' aside#source-note card (analects.css ~1717-1755): note-bg fill, 1px --rule border, 0 0.8rem 2rem shadow, 2.5rem padding (1.5rem at <=720px), body-size text with no indent, the heading 1.35rem / 1.2 / 3px top padding / 1.5rem below, the last paragraph's bottom margin 0 so the inner bottom gap equals the padding. Width is Analects' min(100% - 2rem, 52rem) of |
|---|