Add CSS to default HTML template (#6601)
This commit is contained in:
Mauro Bieg
GitHub
parent
d5a7abd47f
commit
caa225ad82
7 changed files with 571 additions and 0 deletions
37
MANUAL.txt
37
MANUAL.txt
|
|
@ -2142,6 +2142,43 @@ 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`).
|
||||
Unless you use [`--css`](#option--css), this variable
|
||||
is set to `true` by default. You can disable it with
|
||||
e.g. `pandoc -M document-css=false`.
|
||||
|
||||
`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.
|
||||
|
||||
### Variables for HTML math
|
||||
|
||||
`classoption`
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
|
|
|
|||
|
|
@ -310,6 +310,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"
|
||||
|
|
@ -328,6 +329,7 @@ pandocToHtml opts (Pandoc meta blocks) = do
|
|||
PlainMath -> defField "displaymath-css" True
|
||||
WebTeX _ -> defField "displaymath-css" True
|
||||
_ -> id) $
|
||||
defField "document-css" (isNothing mCss && slideVariant == NoSlides) $
|
||||
defField "quotes" (stQuotes st) $
|
||||
-- for backwards compatibility we populate toc
|
||||
-- with the contents of the toc, rather than a
|
||||
|
|
|
|||
|
|
@ -6,6 +6,112 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>lhs-test</title>
|
||||
<style>
|
||||
html {
|
||||
line-height: 1.7;
|
||||
font-family: Georgia, serif;
|
||||
font-size: 20px;
|
||||
color: #1a1a1a;
|
||||
background-color: #fdfdfd;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto;
|
||||
max-width: 40em;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
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: #1a1a1a;
|
||||
}
|
||||
a:visited {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
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: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
|
||||
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;
|
||||
}
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
span.underline{text-decoration: underline;}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,112 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>lhs-test</title>
|
||||
<style>
|
||||
html {
|
||||
line-height: 1.7;
|
||||
font-family: Georgia, serif;
|
||||
font-size: 20px;
|
||||
color: #1a1a1a;
|
||||
background-color: #fdfdfd;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto;
|
||||
max-width: 40em;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
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: #1a1a1a;
|
||||
}
|
||||
a:visited {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
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: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
|
||||
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;
|
||||
}
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
span.underline{text-decoration: underline;}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,112 @@
|
|||
<meta name="date" content="2006-07-17" />
|
||||
<title>Pandoc Test Suite</title>
|
||||
<style type="text/css">
|
||||
html {
|
||||
line-height: 1.7;
|
||||
font-family: Georgia, serif;
|
||||
font-size: 20px;
|
||||
color: #1a1a1a;
|
||||
background-color: #fdfdfd;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto;
|
||||
max-width: 40em;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
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: #1a1a1a;
|
||||
}
|
||||
a:visited {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
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: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
|
||||
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;
|
||||
}
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
span.underline{text-decoration: underline;}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,112 @@
|
|||
<meta name="dcterms.date" content="2006-07-17" />
|
||||
<title>Pandoc Test Suite</title>
|
||||
<style>
|
||||
html {
|
||||
line-height: 1.7;
|
||||
font-family: Georgia, serif;
|
||||
font-size: 20px;
|
||||
color: #1a1a1a;
|
||||
background-color: #fdfdfd;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto;
|
||||
max-width: 40em;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
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: #1a1a1a;
|
||||
}
|
||||
a:visited {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
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: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
|
||||
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;
|
||||
}
|
||||
code{white-space: pre-wrap;}
|
||||
span.smallcaps{font-variant: small-caps;}
|
||||
span.underline{text-decoration: underline;}
|
||||
|
|
|
|||
Loading…
Reference in a new issue