@open-press/cli 0.3.0

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

@@ -0,0 +1,213 @@
+/* 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;
+  font-size: clamp(
+    calc(18pt - var(--openpress-type-step-down)),
+    calc(4cqw - var(--openpress-type-step-down)),
+    calc(28pt - var(--openpress-type-step-down))
+  );
+  border-bottom: 0;
+  padding-bottom: 0;
+  color: var(--openpress-color-ink);
+}
+
+.reader-page--toc h2.toc-heading--continuation {
+  display: none;
+}
+
+.toc-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45mm;
+  margin: 11mm 0 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: openpress-toc-index;
+}
+
+.toc-continuation .toc-list {
+  margin-top: 0;
+}
+
+.toc-list li {
+  border-bottom: 0;
+}
+
+.toc-list .toc-level-2 {
+  counter-increment: openpress-toc-index;
+  margin-top: 5.8mm;
+}
+
+.toc-list a {
+  display: grid;
+  grid-template-columns: 10mm minmax(0, 1fr) 12mm;
+  column-gap: 3.4mm;
+  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;
+  width: auto;
+  height: auto;
+  border: 0;
+  background: transparent;
+  color: var(--openpress-color-muted);
+  font-family: var(--openpress-font-mono);
+  font-variant-numeric: tabular-nums;
+  font-weight: 400;
+  letter-spacing: 0;
+  font-size: calc(8pt - var(--openpress-type-step-down));
+  text-align: left;
+}
+
+.toc-index {
+  font-size: 0;
+}
+
+.toc-index::before {
+  content: attr(data-toc-index);
+  font-size: calc(9.5pt - var(--openpress-type-step-down));
+}
+
+.toc-level-2 a {
+  margin-top: 0;
+  padding: 2.9mm 0 1.9mm;
+  border-top: 0;
+}
+
+.toc-level-2:first-child {
+  margin-top: 0;
+}
+
+.toc-level-2 .toc-index::before {
+  color: var(--openpress-color-muted);
+  font-size: calc(10.6pt - var(--openpress-type-step-down));
+}
+
+.toc-level-2 .toc-title {
+  color: var(--openpress-color-ink);
+  font-size: calc(12.8pt - var(--openpress-type-step-down));
+  font-weight: 500;
+}
+
+.toc-level-2 .toc-title::after {
+  content: none;
+}
+
+.toc-level-2 .toc-page {
+  color: var(--openpress-color-ink);
+  font-size: calc(10.4pt - var(--openpress-type-step-down));
+}
+
+.toc-level-3 a {
+  grid-template-columns: 10mm minmax(0, 1fr) 12mm;
+  padding: 1.12mm 0 1.12mm 7.5mm;
+  color: var(--openpress-color-muted);
+  font-size: calc(11pt - var(--openpress-type-step-down));
+}
+
+.toc-level-3 .toc-index::before {
+  color: var(--openpress-color-muted);
+  font-size: calc(10pt - var(--openpress-type-step-down));
+}
+
+.toc-level-3 .toc-page {
+  font-size: calc(10.2pt - var(--openpress-type-step-down));
+}
+
+.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 var(--openpress-color-line-strong);
+  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: calc(10.2pt - var(--openpress-type-step-down));
+  justify-self: end;
+  min-width: 10mm;
+  text-align: right;
+}
+
+/* Dark editorial contents surface, aligned with cover/back-cover. */
+.reader-page--toc {
+  --toc-ink: #f7f9fb;
+  --toc-muted: rgba(247, 249, 251, 0.68);
+  --toc-line: rgba(247, 249, 251, 0.22);
+  --toc-leader: rgba(247, 249, 251, 0.28);
+  color: var(--toc-ink);
+  background-color: #a95f32;
+  background-image: none;
+}
+
+.reader-page--toc .page-frame {
+  display: block;
+  background: transparent;
+}
+
+.reader-page--toc .page-body {
+  height: 100%;
+}
+
+.reader-page--toc .page-header,
+.reader-page--toc .page-footer {
+  display: none;
+}
+
+.reader-page--toc h2,
+.toc-list a,
+.toc-title,
+.toc-level-2 .toc-title,
+.toc-level-2 .toc-page {
+  color: var(--toc-ink);
+}
+
+.reader-page--toc h2.toc-heading--continuation,
+.toc-index,
+.toc-index::before,
+.toc-level-2 .toc-index::before,
+.toc-level-3 a,
+.toc-level-3 .toc-index::before,
+.toc-page {
+  color: var(--toc-muted);
+}
+
+.toc-list a:hover .toc-title {
+  color: var(--toc-muted);
+}
+
+.toc-title::after {
+  border-bottom-color: var(--toc-leader);
+}

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

@@ -0,0 +1,53 @@
+/* _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-block);
+  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(
+    calc(10px - var(--openpress-type-step-down)),
+    calc(1.05cqw - var(--openpress-type-step-down)),
+    calc(11px - var(--openpress-type-step-down))
+  );
+  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 screen and (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/claude-document/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/claude-document/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: var(--openpress-status-success);
+  font-weight: 600;
+}
+
+.cell-partial {
+  color: var(--openpress-status-warn);
+  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: var(--openpress-status-success);
+}
+
+.status-building {
+  color: var(--openpress-status-info);
+}
+
+.status-planned {
+  color: var(--openpress-color-muted);
+}
+
+.status-ai-full {
+  color: var(--openpress-status-info);
+}
+
+.status-ai-partial {
+  color: var(--openpress-status-warn);
+}
+
+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;
+}