@open-press/cli 0.3.0

package/template/skills/editorial-monograph/starter/document/theme/page-surfaces/cover.css

@@ -0,0 +1,147 @@
+/* page-surfaces / cover
+ * Cover and back-cover share most of their layout chrome (meta header, byline
+ * footer, central main column). Shared selectors live here so cover is the
+ * primary reference; back-cover.css only refines the parts that differ.
+ */
+
+.reader-page--cover,
+.reader-page--back-cover {
+  background: var(--openpress-color-document);
+  padding: clamp(28px, 5cqw, 48px) clamp(24px, 4.5cqw, 42px);
+  flex-direction: column;
+  justify-content: space-between;
+  gap: clamp(16px, 2.5cqw, 24px);
+}
+
+.reader-app.is-ready .reader-page--cover,
+.reader-app.is-ready .reader-page--back-cover,
+.reader-page--cover.is-active,
+.reader-page--back-cover.is-active {
+  display: flex;
+}
+
+.cover-meta,
+.back-cover-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--openpress-space-3);
+  padding-bottom: var(--openpress-space-2);
+  border-bottom: 1px solid var(--openpress-color-ink);
+  font-family: var(--openpress-font-body);
+  font-size: clamp(8pt, 1.25cqw, 9.5pt);
+  color: var(--openpress-color-muted);
+  letter-spacing: 0.12em;
+  flex-shrink: 0;
+}
+
+.mihua-logo,
+.openpress-logo {
+  display: block;
+  width: clamp(112px, 18cqw, 154px);
+  height: auto;
+  flex-shrink: 0;
+  object-fit: contain;
+}
+
+.cover-meta-title {
+  margin-left: auto;
+  max-width: 48%;
+  padding-top: 0.35em;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.cover-main,
+.back-cover-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.cover-title {
+  margin: 0;
+  font-family: var(--openpress-font-serif);
+  font-size: clamp(36px, 8.5cqw, 64px);
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: 0.01em;
+  color: var(--openpress-color-ink);
+}
+
+.cover-tagline {
+  margin: var(--openpress-space-2) 0 0;
+  font-family: var(--openpress-font-serif);
+  font-size: clamp(14px, 2.4cqw, 20px);
+  font-weight: 300;
+  letter-spacing: 0.08em;
+  color: var(--openpress-color-muted);
+}
+
+.cover-rule,
+.back-cover-rule {
+  height: 1px;
+  width: 40px;
+  background: var(--openpress-color-ink);
+  margin: var(--openpress-space-3) 0;
+}
+
+.cover-subtitle {
+  margin: 0;
+  font-family: var(--openpress-font-body);
+  font-size: clamp(10.5pt, 1.85cqw, 12.5pt);
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  line-height: 1.55;
+  color: var(--openpress-color-ink);
+}
+
+.cover-summary {
+  margin: var(--openpress-space-2) 0 0;
+  font-family: var(--openpress-font-body);
+  font-size: clamp(9pt, 1.65cqw, 10pt);
+  line-height: 1.8;
+  color: var(--openpress-color-muted);
+  max-width: 90%;
+}
+
+.cover-visual,
+.back-cover-visual {
+  margin: var(--openpress-space-3) 0 0;
+  flex-shrink: 0;
+}
+
+.cover-visual img,
+.back-cover-visual img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 22cqh;
+  object-fit: cover;
+  border: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.cover-byline,
+.back-cover-byline {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding-top: var(--openpress-space-2);
+  border-top: 1px solid var(--openpress-color-ink);
+  font-family: var(--openpress-font-body);
+  font-size: clamp(8pt, 1.25cqw, 9.5pt);
+  color: var(--openpress-color-muted);
+  letter-spacing: 0.12em;
+  flex-shrink: 0;
+}
+
+.cover-byline span:first-child,
+.back-cover-byline span:first-child {
+  font-family: var(--openpress-font-serif);
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  color: var(--openpress-color-ink);
+}

package/template/skills/editorial-monograph/starter/document/theme/page-surfaces/toc.css

@@ -0,0 +1,139 @@
+/* page-surfaces / toc
+ * Table-of-contents page surface routed by `kind: toc` and built by the
+ * engine's renderToc(). Layout uses a 3-column grid (index / title / page).
+ */
+
+.reader-page--toc {
+  padding: 0;
+}
+
+.reader-page--toc h2 {
+  margin-top: 0;
+  font-family: var(--openpress-font-serif);
+  font-weight: 300;
+  letter-spacing: 0.12em;
+  font-size: clamp(15pt, 3.6cqw, 18pt);
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.reader-page--toc h2.toc-heading--continuation {
+  margin-bottom: 0;
+  color: var(--openpress-color-muted);
+  font-family: var(--openpress-font-mono);
+  font-size: calc(8.5pt - var(--openpress-type-step-down));
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-align: right;
+}
+
+.toc-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75mm;
+  margin: 10mm 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.toc-continuation .toc-list {
+  margin-top: 5mm;
+}
+
+.toc-list li {
+  border-bottom: 0;
+}
+
+.toc-list a {
+  display: grid;
+  grid-template-columns: 9mm minmax(0, 1fr) 12mm;
+  column-gap: 3mm;
+  align-items: baseline;
+  color: var(--openpress-color-ink);
+  text-decoration: none;
+  padding: 1.6mm 0;
+  font-weight: 400;
+  line-height: 1.38;
+}
+
+.toc-list a:hover .toc-title {
+  color: var(--openpress-color-muted);
+}
+
+.toc-index {
+  display: inline-block;
+  color: var(--openpress-color-muted);
+  font-family: var(--openpress-font-mono);
+  font-variant-numeric: tabular-nums;
+  font-weight: 400;
+  letter-spacing: 0;
+  font-size: 9.5pt;
+  text-align: left;
+}
+
+.toc-level-2 a {
+  margin-top: 2.5mm;
+  padding: 3mm 0 2mm;
+  border-top: 1px solid rgba(169, 180, 194, 0.42);
+}
+
+.toc-level-2:first-child a {
+  margin-top: 0;
+  border-top: 0;
+}
+
+.toc-level-2 .toc-title {
+  color: var(--openpress-color-ink);
+  font-size: 12pt;
+  font-weight: 500;
+}
+
+.toc-level-2 .toc-title::after {
+  content: none;
+}
+
+.toc-level-2 .toc-page {
+  color: var(--openpress-color-ink);
+  font-size: 9.8pt;
+}
+
+.toc-level-3 a {
+  grid-template-columns: 9mm minmax(0, 1fr) 12mm;
+  padding: 1.28mm 0 1.28mm 7mm;
+  color: var(--openpress-color-muted);
+  font-size: 10pt;
+}
+
+.toc-level-3 .toc-index {
+  font-size: 9pt;
+}
+
+.toc-level-3 .toc-page {
+  font-size: 9.5pt;
+}
+
+.toc-title {
+  display: flex;
+  gap: 3mm;
+  align-items: baseline;
+  color: var(--openpress-color-ink);
+}
+
+.toc-title::after {
+  content: "";
+  flex: 1;
+  min-width: 10mm;
+  border-bottom: 1px dotted rgba(72, 101, 129, 0.32);
+  transform: translateY(-0.22em);
+}
+
+.toc-page {
+  color: var(--openpress-color-muted);
+  font-family: var(--openpress-font-mono);
+  font-variant-numeric: tabular-nums;
+  font-weight: 400;
+  font-size: 9.8pt;
+  justify-self: end;
+  min-width: 10mm;
+  text-align: right;
+}

package/template/skills/editorial-monograph/starter/document/theme/patterns/_chart-frame.css

@@ -0,0 +1,49 @@
+/* _chart-frame.css
+ * 共用圖表外框。文件圖表只要在 figure 上掛 chart-frame，
+ * 元件自己的 class 只負責內部結構樣式。
+ */
+
+.reader-page--content .page-body > figure.chart-frame,
+:where(.chart-frame) {
+  width: 100%;
+  max-width: none;
+  margin: var(--openpress-space-3) 0 var(--openpress-space-4);
+  margin-left: 0;
+  margin-right: 0;
+  padding: var(--openpress-space-2);
+  border: 1px solid rgba(0, 0, 0, 0.07);
+  background: var(--openpress-color-document);
+  box-sizing: border-box;
+  break-inside: avoid;
+}
+
+:where(.chart-frame) figcaption {
+  margin-top: var(--openpress-space-2);
+  color: var(--openpress-color-muted);
+  font-size: clamp(10px, 1.05cqw, 11px);
+  line-height: 1.55;
+  letter-spacing: 0.04em;
+  text-align: center;
+}
+
+.reader-page--content .page-body > figure svg,
+:where(.chart-frame) svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  overflow: visible;
+}
+
+@media (max-width: 899px) {
+  .reader-page--content .page-body > figure.chart-frame,
+  :where(.chart-frame) {
+    max-height: 100%;
+  }
+
+  .reader-page--content .page-body > figure svg,
+  :where(.chart-frame) svg {
+    width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+}

package/template/skills/editorial-monograph/starter/document/theme/patterns/figure-grid.css

@@ -0,0 +1,68 @@
+/* figure-grid
+ * Reusable image grid pattern for inline Markdown/HTML figures.
+ */
+
+table.figure-grid {
+  border: 0;
+  background: transparent;
+  table-layout: fixed;
+}
+
+div.figure-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 4mm;
+  margin: var(--openpress-space-4) 0 var(--openpress-space-2);
+  break-inside: avoid;
+}
+
+table.figure-grid td {
+  border: 0;
+  padding: 0 2mm 3mm;
+  vertical-align: top;
+}
+
+table.figure-grid figure,
+div.figure-grid figure {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.figure-grid img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 62mm;
+}
+
+/* Three-column triptych: one lead figure plus two siblings, centered on the
+ * page. Use this when a section needs a coordinated trio of images at a fixed
+ * aspect ratio (e.g. founder profile, milestone photo set). */
+div.figure-grid--triptych {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 3mm;
+  width: min(92%, 156mm);
+  margin: var(--openpress-space-4) auto var(--openpress-space-2);
+}
+
+div.figure-grid--triptych figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0;
+}
+
+div.figure-grid--triptych img {
+  width: 100%;
+  max-height: none;
+  aspect-ratio: 3 / 2;
+  object-fit: cover;
+}
+
+div.figure-grid--triptych .figure-grid__lead img {
+  aspect-ratio: 4 / 3;
+}
+
+div.figure-grid--triptych figcaption {
+  text-align: left;
+}

package/template/skills/editorial-monograph/starter/document/theme/patterns/table-utilities.css

@@ -0,0 +1,66 @@
+/* table-utilities
+ * Semantic table helpers used by content Markdown.
+ */
+
+.cell-check,
+.cell-partial,
+.cell-dash {
+  display: inline-block;
+  font-feature-settings: "tnum";
+  line-height: 1;
+}
+
+.cell-check {
+  color: #24a148;
+  font-weight: 600;
+}
+
+.cell-partial {
+  color: #b58105;
+  font-weight: 500;
+}
+
+.cell-dash {
+  color: var(--openpress-color-text-placeholder);
+  letter-spacing: -0.04em;
+}
+
+.status-text {
+  display: inline;
+  font-size: inherit;
+  line-height: inherit;
+  white-space: nowrap;
+}
+
+.status-live {
+  color: #198038;
+}
+
+.status-building {
+  color: #0f62fe;
+}
+
+.status-planned {
+  color: #525252;
+}
+
+.status-ai-full {
+  color: #007d79;
+}
+
+.status-ai-partial {
+  color: #8a5a00;
+}
+
+td.numeric,
+th.numeric {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+td.savings-rate,
+th.savings-rate {
+  color: var(--openpress-color-green);
+  font-weight: 600;
+}