Add CSS to default HTML template

jgm · Aug 15, 2020 · 35b05b5 · 35b05b5
1 parent 5734167
commit 35b05b5
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 0 deletions.
diff --git a/MANUAL.txt b/MANUAL.txt
@@ -2142,6 +2142,56 @@ ODT or pptx.
 [Unicode Bidirectional Algorithm]: https://www.w3.org/International/articles/inline-bidi-markup/uba-basics
 [Language subtag lookup]: https://r12a.github.io/app-subtags/
 
+### Variables for HTML
+
+`document-css`
+:   Enables inclusion of most of the CSS in the `styles.html`
+    [partial](#partials) (have a look with
+    `pandoc --print-default-data-file=templates/styles.html`).
+    This variable is set to `true` by default, unless you use
+    [`--css`](#option--css).
+
+`mainfont`
+:   sets the CSS `font-family` property on the `html` element.
+
+`fontsize`
+:   sets the base CSS `font-size`, which you'd usually set
+    to e.g. `20px`, but it also accepts `pt`
+    (12pt = 16px in most browsers).
+
+`fontcolor`
+:   sets the CSS `color` property on the `html` element.
+
+`linkcolor`
+:   sets the CSS `color` property on all links.
+
+`monofont`
+:   sets the CSS `font-family` property on `code` elements.
+
+`linestretch`
+:   sets the CSS `line-height` property on the `html` element,
+    which is preferred to be unitless.
+
+`backgroundcolor`
+:   sets the CSS `background-color` property on the `html` element.
+
+`margin-left`, `margin-right`, `margin-top`, `margin-bottom`
+:   sets the corresponding CSS `padding` properties on the `body` element.
+
+`style`
+:   can be used to provide additional CSS,
+    potentially overriding the default. For example:
+
+    ```
+    ---
+    title: my doc
+    style: |
+      blockquote {
+        border-left: none;
+      }
+    ---
+    ```
+
 ### Variables for HTML math
 
 `classoption`

diff --git a/data/templates/default.html5 b/data/templates/default.html5
@@ -16,6 +16,7 @@ $endif$
   <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
   <style>
     $styles.html()$
+    $style$
   </style>
 $for(css)$
   <link rel="stylesheet" href="$css$" />

diff --git a/data/templates/styles.html b/data/templates/styles.html
@@ -1,3 +1,111 @@
+$if(document-css)$
+html {
+  line-height: $if(linestretch)$$linestretch$$else$1.7$endif$;
+  font-family: $if(mainfont)$$mainfont$$else$Georgia, serif$endif$;
+  font-size: $if(fontsize)$$fontsize$$else$20px$endif$;
+  color: $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
+  background-color: $if(backgroundcolor)$$backgroundcolor$$else$#fdfdfd$endif$;
+}
+body {
+  margin: 0 auto;
+  max-width: 40em;
+  padding-left: $if(margin-left)$$margin-left$$else$50px$endif$;
+  padding-right: $if(margin-right)$$margin-right$$else$50px$endif$;
+  padding-top: $if(margin-top)$$margin-top$$else$50px$endif$;
+  padding-bottom: $if(margin-bottom)$$margin-bottom$$else$50px$endif$;
+  hyphens: auto;
+  word-wrap: break-word;
+  text-rendering: optimizeLegibility;
+  font-kerning: normal;
+}
+@media (max-width: 600px) {
+  body {
+    font-size: 0.9em;
+    padding: 1em;
+  }
+}
+@media print {
+  body {
+    background-color: transparent;
+    color: black;
+  }
+  p, h2, h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2, h3, h4 {
+    page-break-after: avoid;
+  }
+}
+p {
+  margin-top: 1.7em;
+}
+a {
+  color: $if(linkcolor)$$linkcolor$$else$#1a1a1a$endif$;
+}
+a:visited {
+  color: $if(linkcolor)$$linkcolor$$else$#1a1a1a$endif$;
+}
+img {
+  max-width: 100%;
+}
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 1.7em;
+}
+ol, ul {
+  padding-left: 1.7em;
+  margin-top: 1.7em;
+}
+li > ol, li > ul {
+  margin-top: 0;
+}
+blockquote {
+  margin: 1.7em 0 1.7em 1.7em;
+  padding-left: 1em;
+  border-left: 2px solid #e6e6e6;
+  font-style: italic;
+}
+code {
+  font-family: $if(monofont)$$monofont$$else$Menlo, Monaco, 'Lucida Console', Consolas, monospace$endif$;
+  background-color: #f0f0f0;
+  font-size: 85%;
+  margin: 0;
+  padding: .2em .4em;
+}
+pre {
+  line-height: 1.5em;
+  padding: 1em;
+  background-color: #f0f0f0;
+  overflow: auto;
+}
+pre code {
+  padding: 0;
+  overflow: visible;
+}
+hr {
+  background-color: #1a1a1a;
+  border: none;
+  height: 1px;
+  margin-top: 1.7em;
+}
+table {
+  border-collapse: collapse;
+  width: 100%;
+  overflow-x: auto;
+  display: block;
+}
+th, td {
+  border-bottom: 1px solid lightgray;
+  padding: 1em 3em 1em 0;
+}
+header {
+  margin-bottom: 6em;
+  text-align: center;
+}
+nav a:not(:hover) {
+  text-decoration: none;
+}
+$endif$
 code{white-space: pre-wrap;}
 span.smallcaps{font-variant: small-caps;}
 span.underline{text-decoration: underline;}

diff --git a/src/Text/Pandoc/Writers/HTML.hs b/src/Text/Pandoc/Writers/HTML.hs
@@ -307,6 +307,7 @@ pandocToHtml opts (Pandoc meta blocks) = do
                           "/*]]>*/\n")
                           | otherwise -> mempty
                     Nothing -> mempty
+  let mCss :: Maybe [Text] = lookupContext "css" $ metadata
   let context =   (if stHighlighting st
                       then case writerHighlightStyle opts of
                                 Just sty -> defField "highlighting-css"
@@ -325,6 +326,7 @@ pandocToHtml opts (Pandoc meta blocks) = do
                         PlainMath -> defField "displaymath-css" True
                         WebTeX _  -> defField "displaymath-css" True
                         _         -> id) $
+                  defField "document-css" (isNothing mCss) $
                   defField "quotes" (stQuotes st) $
                   -- for backwards compatibility we populate toc
                   -- with the contents of the toc, rather than a