Short reference guide / Shared CSS and settings

These are the CSS and project settings shared by all pages of this example. The CSS extends the product’s business preset. Use them together with the individual page sources.

Back to example overview

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-en",
  "entry": "document.md",
  "document": {
    "mode": "paged",
    "lang": "en-US",
    "defaultPage": {
      "size": "A4",
      "orientation": "portrait"
    }
  },
  "theme": {
    "preset": "business",
    "entry": "design/theme.css"
  },
  "output": {
    "directory": "dist",
    "formats": [
      "pdf"
    ]
  },
  "security": {
    "html": "none",
    "sharedAssetRoots": []
  }
}