@open-press/cli 0.3.0 → 0.6.0

package/template/packs/editorial-monograph/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/packs/editorial-monograph/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/packs/editorial-monograph/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;
+}