Add CSS to default HTML template

jgm · Aug 9, 2020 · 2adde29 · 2adde29
1 parent 499fc11
commit 2adde29
Showing 1 changed file with 107 additions and 0 deletions.
diff --git a/data/templates/default.html5 b/data/templates/default.html5
@@ -15,6 +15,113 @@ $if(keywords)$
 $endif$
   <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
   <style>
+    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;
+      }
+    }
+    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;
+    }
+
+    /* Pandoc-specific elements */
+    header {
+      margin-bottom: 6em;
+      text-align: center;
+    }
+    nav a {
+      color: black;
+    }
+    nav a:not(:hover) {
+      text-decoration: none;
+    }
+    #TOC > ul {
+      margin-top: 1em;
+    }
+    #TOC:before {
+      content: 'Contents';
+      font-size: 36px; /* same as h1 */
+      font-weight: bold;
+      display: block;
+    }
     $styles.html()$
   </style>
 $for(css)$