ミニ参考書 / 共通CSSと設定

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

作例一覧へ戻る

design/theme.css

/* Original illustrative document style; extends built-in business preset. */
:root{--accent:#79603b;--text:#172d38;--muted:#4d646b;--background:#fffdf9;}
.ps-mode-paged{font-size:11pt;line-height:1.65;}
.ps-mode-paged .ps-fixed>.ps-body{padding:18mm 18mm 20mm;}
h1{font-size:26pt;line-height:1.3;}h2{font-size:16pt;margin-top:14pt;}
table{font-size:10pt;line-height:1.55;}th{background:#eaf1ee;}td,th{padding:.45em .6em;border-color:#ccd8d3;}
blockquote{background:#eef3ef;padding:8pt 12pt;font-size:10pt;}figure{margin:8pt 0;}

.hint-bubble{position:relative;border:1.5pt solid #79603b;border-radius:12pt;background:#fff4da;padding:12pt 15pt;margin:16pt 0 20pt;font-size:10pt;color:#493b27;}.hint-bubble:after{content:"";position:absolute;bottom:-8pt;left:24pt;width:14pt;height:14pt;background:#fff4da;border-right:1.5pt solid #79603b;border-bottom:1.5pt solid #79603b;transform:rotate(45deg);}.hint-bubble strong{color:#674b20;}

.hint-bubble strong{display:block;margin-bottom:4pt;}

.wworpoint/project.json

{
  "schemaVersion": 1,
  "name": "guide-ja",
  "entry": "document.md",
  "document": {
    "mode": "paged",
    "lang": "ja",
    "defaultPage": {
      "size": "A4",
      "orientation": "portrait"
    }
  },
  "theme": {
    "preset": "business",
    "entry": "design/theme.css"
  },
  "output": {
    "directory": "dist",
    "formats": [
      "pdf"
    ]
  },
  "security": {
    "html": "none",
    "sharedAssetRoots": []
  }
}