営業提案 / 共通CSSと設定

この作例の全ページに共通するCSSとプロジェクト設定です。CSSは製品のbusinessプリセットを拡張します。個別ページのソースと組み合わせて使います。

design/theme.css

/* Original illustrative sales proposal. Extends MIT-0 business theme. */
:root{--accent:#174d49;--text:#172d38;--muted:#4d646b;--background:#fffdf9;}
.ps-mode-presentation{font-size:24pt;line-height:1.45;}
.ps-mode-presentation .ps-body{padding:38pt 58pt 50pt;}
.ps-mode-presentation h1{font-size:46pt;line-height:1.3;letter-spacing:-.025em;}
.ps-mode-presentation h2{font-size:32pt;border-bottom:2pt solid #c9d7cd;padding-bottom:10pt;}
.ps-mode-presentation h3{font-size:26pt;}
.ps-mode-presentation table{font-size:20pt;}
th{background:#e4eee7;color:#174d49;}td,th{border-color:#ccd8d3;padding:.4em .65em;}
.ps-mode-presentation .ps-layout-title{background:linear-gradient(125deg,#e0ede5,#faf0df);}
.ps-layout-title .ps-body{align-items:flex-start;text-align:left;}
.ps-mode-presentation .ps-layout-title h1{font-size:52pt;max-width:800pt;}
.ps-section::after{content:"ILLUSTRATIVE / 架空の企業・数値・提案";position:absolute;bottom:16pt;left:58pt;color:#50676c;font-size:20pt;letter-spacing:.06em;}
.ps-layout-title blockquote{color:#174d49;border:0;font-weight:700;margin:12pt 0;padding:0;}
.ps-mode-presentation .kicker{font-size:20pt;letter-spacing:.1em;color:#50676c;margin-bottom:14pt;}
.ps-mode-presentation figure{margin:6pt 0 12pt;}
.ps-mode-presentation blockquote{background:#eaf1ec;padding:12pt 18pt;border-radius:6pt;color:#174d49;}
.ps-mode-paged{font-size:11pt;line-height:1.65;}
.ps-mode-paged h1{font-size:27pt;letter-spacing:-.02em;}
.ps-mode-paged h2{font-size:18pt;margin-top:16pt;}
.ps-mode-paged h3{font-size:13pt;}
.ps-mode-paged .ps-fixed>.ps-body{padding:18mm 18mm 20mm;}
.ps-mode-paged figure{margin:8pt 0;}
.ps-mode-paged .ps-section::after{left:18mm;bottom:9mm;font-size:9pt;}
.ps-mode-paged table{font-size:10pt;}
.ps-mode-paged blockquote{background:#eaf1ec;padding:8pt 12pt;}

/* Cover: a local raster illustration, placed in a flow-based CSS grid. */
.ps-mode-presentation .cover-image .ps-body{display:grid;grid-template-columns:1.55fr 1fr;grid-auto-rows:auto;gap:10pt 28pt;align-content:center;align-items:start;justify-items:start;}
.cover-image .ps-body>*{grid-column:1;margin:0;}
.ps-mode-presentation .cover-image h1{font-size:44pt;line-height:1.18;max-width:none;}
.ps-mode-presentation .cover-image .kicker{grid-column:1/-1;font-size:20pt;margin:0;}
.ps-mode-presentation .cover-image .ps-body>p{font-size:20pt;line-height:1.45;}
.ps-mode-presentation .cover-image blockquote{font-size:20pt;line-height:1.45;padding:0;margin:0;}
.ps-mode-presentation .cover-image .ps-body>p:last-of-type{font-size:20pt;line-height:1.5;}
.ps-mode-presentation .cover-image .cover-art{grid-column:2;grid-row:2/7;align-self:center;width:100%;margin:0;}
.cover-art img{display:block;width:100%;height:auto;border-radius:12pt;}
.cover-art figcaption{font-size:20pt;line-height:1.45;text-align:left;color:#50676c;margin-top:8pt;}

.wworpoint/project.json

{
  "schemaVersion": 1,
  "name": "sales-ja",
  "entry": "document.md",
  "document": {
    "mode": "presentation",
    "lang": "ja-JP",
    "defaultPage": {
      "size": "16:9",
      "orientation": "landscape"
    }
  },
  "theme": {
    "preset": "business",
    "entry": "design/theme.css"
  },
  "output": {
    "directory": "dist",
    "formats": [
      "pdf"
    ]
  },
  "security": {
    "html": "none",
    "sharedAssetRoots": []
  }
}