@open-press/cli 0.3.0

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

@@ -0,0 +1,236 @@
+/* page-surfaces / chapter-opener
+ * H2-only chapter divider for book-like working documents.
+ */
+
+.reader-page--chapter-opener {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--openpress-color-document);
+  background-image:
+    var(--openpress-paper-texture),
+    linear-gradient(90deg, rgba(168, 148, 112, 0.07), transparent 44%);
+  background-size: var(--openpress-paper-texture-size), auto;
+  background-position: var(--openpress-paper-texture-position), 0 0;
+}
+
+.reader-page--chapter-opener:has(.chapter-opener-illustration) {
+  --chapter-opener-bg: #6f9f8a;
+  --chapter-opener-ink: #101211;
+  --chapter-opener-title: #1f2d3d;
+  --chapter-opener-paper: var(--openpress-color-paper);
+  background-color: var(--chapter-opener-bg);
+  background-image: none;
+}
+
+.reader-page--chapter-opener:has(.chapter-opener-tone--sage) {
+  --chapter-opener-bg: #6f9f8a;
+  --chapter-opener-title: #1f2d3d;
+  --chapter-opener-paper: #fbfaf6;
+}
+
+.reader-page--chapter-opener:has(.chapter-opener-tone--lavender) {
+  --chapter-opener-bg: #8680bf;
+  --chapter-opener-title: #101211;
+  --chapter-opener-paper: #fbfaf6;
+}
+
+.reader-page--chapter-opener:has(.chapter-opener-tone--mint) {
+  --chapter-opener-bg: #bfd4cd;
+  --chapter-opener-title: #101211;
+  --chapter-opener-paper: #fbfaf6;
+}
+
+.reader-page--chapter-opener:has(.chapter-opener-tone--amber) {
+  --chapter-opener-bg: #d7b56d;
+  --chapter-opener-title: #101211;
+  --chapter-opener-paper: #fffaf0;
+}
+
+.reader-page--chapter-opener::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 6mm;
+  border-right: 1px solid var(--openpress-color-line);
+  background: rgba(243, 234, 219, 0.52);
+}
+
+.reader-page--chapter-opener:has(.chapter-opener-illustration)::before {
+  content: none;
+}
+
+.reader-page--chapter-opener .page-frame {
+  background: transparent;
+}
+
+.reader-page--chapter-opener .page-body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: clamp(20px, 3.4cqw, 40px);
+  width: min(138mm, 84%);
+  max-width: none;
+  min-height: 0;
+  margin-inline: auto;
+  padding-bottom: 4mm;
+  z-index: 1;
+}
+
+.reader-page--chapter-opener:has(.chapter-opener-illustration) .page-body {
+  justify-content: flex-end;
+  align-items: flex-start;
+  width: min(168mm, 86%);
+  padding-bottom: 28mm;
+  gap: clamp(10px, 1.8cqw, 20px);
+  z-index: 2;
+}
+
+.reader-page--chapter-opener .page-body::before {
+  content: none;
+}
+
+.reader-page--chapter-opener:has(.chapter-opener-illustration) .chapter-opener-body {
+  display: contents;
+}
+
+.chapter-opener-illustration {
+  position: absolute;
+  top: 26mm;
+  right: 18mm;
+  width: min(98mm, 48%);
+  margin: 0;
+  color: var(--chapter-opener-ink, #101211);
+  z-index: 1;
+}
+
+.chapter-opener-illustration svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+}
+
+.chapter-opener-illustration__paper {
+  fill: var(--chapter-opener-paper, var(--openpress-color-paper));
+}
+
+.chapter-opener-illustration__stroke,
+.chapter-opener-illustration__arrow,
+.chapter-opener-illustration__thin {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.chapter-opener-illustration__stroke,
+.chapter-opener-illustration__arrow {
+  stroke-width: 14;
+}
+
+.chapter-opener-illustration__thin {
+  stroke-width: 8;
+}
+
+.chapter-opener-illustration__node,
+.chapter-opener-illustration__dot {
+  fill: currentColor;
+}
+
+.chapter-opener-kicker {
+  display: none;
+}
+
+.reader-page--chapter-opener:has(.chapter-opener-illustration) .chapter-opener-kicker {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  min-height: 8mm;
+  margin: 0 0 clamp(4px, 1cqw, 10px);
+  padding: 0 7mm;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  color: var(--chapter-opener-ink, #101211);
+  font-family: var(--openpress-font-body);
+  font-size: clamp(
+    calc(10pt - var(--openpress-type-step-down)),
+    calc(1.8cqw - var(--openpress-type-step-down)),
+    calc(14pt - var(--openpress-type-step-down))
+  );
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0;
+}
+
+.chapter-opener-title {
+  max-width: 100%;
+  margin: 0;
+  color: var(--openpress-color-ink);
+  font-family: var(--openpress-font-body);
+  font-size: clamp(
+    calc(38px - var(--openpress-type-step-down)),
+    calc(8.7cqw - var(--openpress-type-step-down)),
+    calc(68px - var(--openpress-type-step-down))
+  );
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: 0;
+}
+
+.reader-page--chapter-opener:has(.chapter-opener-illustration) .chapter-opener-title {
+  max-width: 118mm;
+  color: var(--chapter-opener-title, var(--openpress-color-ink));
+  font-family: var(--openpress-font-serif);
+  font-size: clamp(
+    calc(52px - var(--openpress-type-step-down)),
+    calc(12.4cqw - var(--openpress-type-step-down)),
+    calc(112px - var(--openpress-type-step-down))
+  );
+  line-height: 0.92;
+  letter-spacing: 0;
+}
+
+.chapter-opener-title::before {
+  content: none;
+}
+
+.chapter-opener-subtitle {
+  max-width: 112mm;
+  margin: 0;
+  color: var(--openpress-color-ink);
+  font-family: var(--openpress-font-body);
+  font-size: clamp(
+    calc(18pt - var(--openpress-type-step-down)),
+    calc(3.8cqw - var(--openpress-type-step-down)),
+    calc(28pt - var(--openpress-type-step-down))
+  );
+  line-height: 1.32;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.reader-page--chapter-opener:has(.chapter-opener-illustration) .chapter-opener-subtitle {
+  max-width: 100mm;
+  color: var(--chapter-opener-title, var(--openpress-color-ink));
+}
+
+.chapter-opener-summary {
+  max-width: 108mm;
+  margin: 0;
+  color: var(--openpress-color-body);
+  font-size: clamp(
+    calc(9.8pt - var(--openpress-type-step-down)),
+    calc(1.7cqw - var(--openpress-type-step-down)),
+    calc(11.2pt - var(--openpress-type-step-down))
+  );
+  line-height: 1.7;
+}
+
+.chapter-opener-body > :first-child {
+  margin-top: 0;
+}
+
+.chapter-opener-body > :last-child {
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,309 @@
+/* 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 {
+  position: relative;
+  overflow: hidden;
+  --chapter-opener-bg: #a95f32;
+  --chapter-opener-ink: #101820;
+  --chapter-opener-title: #f7f9fb;
+  --chapter-opener-paper: #f7f9fb;
+  --cover-muted: rgba(247, 249, 251, 0.68);
+  --cover-rule: rgba(247, 249, 251, 0.34);
+  background-color: var(--chapter-opener-bg);
+  background-image: none;
+  padding: 22mm 22mm 18mm 27mm;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 10mm;
+}
+
+.reader-page--cover::before,
+.reader-page--back-cover::before {
+  content: none;
+}
+
+.reader-page--cover::after,
+.reader-page--back-cover::after {
+  content: none;
+}
+
+.reader-app.is-ready .reader-page.reader-page--cover,
+.reader-app.is-ready .reader-page.reader-page--back-cover,
+.reader-page.reader-page--cover.is-active,
+.reader-page.reader-page--back-cover.is-active {
+  display: flex;
+}
+
+.cover-meta,
+.back-cover-meta {
+  position: absolute;
+  top: 22mm;
+  right: 22mm;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--openpress-space-3);
+  padding-bottom: 0;
+  border-bottom: 0;
+  font-family: var(--openpress-font-body);
+  font-size: clamp(
+    calc(8pt - var(--openpress-type-step-down)),
+    calc(1.25cqw - var(--openpress-type-step-down)),
+    calc(9.5pt - var(--openpress-type-step-down))
+  );
+  color: var(--chapter-opener-title);
+  letter-spacing: 0.08em;
+  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: none;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.cover-main,
+.back-cover-main {
+  position: absolute;
+  left: 27mm;
+  right: 22mm;
+  bottom: 36mm;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  min-height: 0;
+  justify-content: flex-end;
+  align-items: flex-start;
+  max-width: 124mm;
+  padding-bottom: 0;
+}
+
+.cover-title,
+.back-cover-title {
+  margin: 0;
+  max-width: 118mm;
+  font-family: var(--openpress-font-serif);
+  font-size: clamp(
+    calc(56px - var(--openpress-type-step-down)),
+    calc(12.2cqw - var(--openpress-type-step-down)),
+    calc(112px - var(--openpress-type-step-down))
+  );
+  font-weight: 700;
+  line-height: 0.92;
+  letter-spacing: 0;
+  color: var(--chapter-opener-title);
+}
+
+.cover-tagline {
+  margin: 6mm 0 0;
+  font-family: var(--openpress-font-body);
+  font-size: clamp(
+    calc(13pt - var(--openpress-type-step-down)),
+    calc(2.25cqw - var(--openpress-type-step-down)),
+    calc(17pt - var(--openpress-type-step-down))
+  );
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--chapter-opener-title);
+}
+
+.cover-rule,
+.back-cover-rule {
+  height: 1px;
+  width: 38mm;
+  background: var(--openpress-color-line-strong);
+  margin: 7mm 0 8mm;
+}
+
+.cover-subtitle {
+  margin: 5mm 0 0;
+  font-family: var(--openpress-font-body);
+  font-size: clamp(
+    calc(10.5pt - var(--openpress-type-step-down)),
+    calc(1.95cqw - var(--openpress-type-step-down)),
+    calc(13pt - var(--openpress-type-step-down))
+  );
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.6;
+  color: var(--chapter-opener-title);
+  max-width: 112mm;
+}
+
+.cover-summary {
+  margin: var(--openpress-space-2) 0 0;
+  font-family: var(--openpress-font-body);
+  font-size: clamp(
+    calc(9pt - var(--openpress-type-step-down)),
+    calc(1.65cqw - var(--openpress-type-step-down)),
+    calc(10.5pt - var(--openpress-type-step-down))
+  );
+  line-height: 1.8;
+  color: var(--openpress-color-body);
+  max-width: 122mm;
+}
+
+.cover-scope {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 4.5mm;
+  width: 100%;
+  max-width: 124mm;
+  margin-top: 8mm;
+  padding-top: 4mm;
+  border-top: 1px solid var(--cover-rule);
+}
+
+.cover-scope span {
+  min-width: 0;
+  padding: 0;
+  border-left: 0;
+  font-family: var(--openpress-font-mono);
+  font-size: calc(8pt - var(--openpress-type-step-down));
+  line-height: 1.3;
+  letter-spacing: 0.05em;
+  color: var(--chapter-opener-title);
+  white-space: nowrap;
+}
+
+.cover-scope span + span::before {
+  content: "/";
+  margin-right: 4.5mm;
+  color: rgba(247, 249, 251, 0.36);
+}
+
+.cover-author {
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  column-gap: 4mm;
+  align-items: baseline;
+  margin: 8mm 0 0;
+  padding-top: 4mm;
+  border-top: 1px solid var(--cover-rule);
+  color: var(--chapter-opener-title);
+  font-family: var(--openpress-font-body);
+  font-size: clamp(
+    calc(10.8pt - var(--openpress-type-step-down)),
+    calc(1.78cqw - var(--openpress-type-step-down)),
+    calc(13pt - var(--openpress-type-step-down))
+  );
+  line-height: 1.3;
+}
+
+.cover-author span {
+  color: var(--cover-muted);
+  font-family: var(--openpress-font-mono);
+  font-size: 0.78em;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.cover-author strong {
+  color: var(--chapter-opener-title);
+  font-weight: 500;
+  letter-spacing: 0.05em;
+}
+
+.reader-page--cover .chapter-opener-illustration,
+.reader-page--back-cover .chapter-opener-illustration {
+  position: absolute;
+  top: 26mm;
+  right: 18mm;
+  width: min(96mm, 46%);
+  margin: 0;
+  color: var(--chapter-opener-ink);
+  filter: none;
+  z-index: 1;
+}
+
+.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 {
+  position: absolute;
+  left: 27mm;
+  right: 22mm;
+  bottom: 22mm;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding-top: 0;
+  border-top: 0;
+  font-family: var(--openpress-font-body);
+  font-size: clamp(
+    calc(8pt - var(--openpress-type-step-down)),
+    calc(1.25cqw - var(--openpress-type-step-down)),
+    calc(9.5pt - var(--openpress-type-step-down))
+  );
+  color: var(--cover-muted);
+  letter-spacing: 0.08em;
+  flex-shrink: 0;
+}
+
+.cover-byline span:first-child,
+.back-cover-byline span:first-child {
+  font-family: var(--openpress-font-body);
+  font-weight: 400;
+  letter-spacing: 0;
+  color: var(--chapter-opener-title);
+}
+
+.lecture-mark {
+  display: inline-grid;
+  place-items: center;
+  width: auto;
+  min-width: 21mm;
+  height: 8mm;
+  margin: 0 0 7mm;
+  padding: 0 3.5mm;
+  border: 1px solid currentColor;
+  background: transparent;
+  font-family: var(--openpress-font-body);
+  font-size: clamp(
+    calc(9pt - var(--openpress-type-step-down)),
+    calc(1.8cqw - var(--openpress-type-step-down)),
+    calc(12pt - var(--openpress-type-step-down))
+  );
+  font-weight: 700;
+  letter-spacing: 0;
+  color: var(--chapter-opener-title);
+}