Style style changes
This commit is contained in:
parent
672862aede
commit
818225cb1e
2
setup.rb
2
setup.rb
|
@ -38,7 +38,7 @@ for i in 1..3
|
||||||
start = ending = false
|
start = ending = false
|
||||||
page.children.each do |e|
|
page.children.each do |e|
|
||||||
if e.name == 'h3'
|
if e.name == 'h3'
|
||||||
e.name = 'h1'
|
e.name = 'h1'
|
||||||
start = true
|
start = true
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
514
style.css
514
style.css
|
@ -19,7 +19,7 @@
|
||||||
There are some elements in here for HTML5 output of Pandoc, but I have not
|
There are some elements in here for HTML5 output of Pandoc, but I have not
|
||||||
gotten around to testing that yet.
|
gotten around to testing that yet.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* NOTES:
|
/* NOTES:
|
||||||
|
|
||||||
Stuff tried and failed:
|
Stuff tried and failed:
|
||||||
|
@ -32,191 +32,179 @@
|
||||||
print than for screen causes horizontal lines to disappear in math when using
|
print than for screen causes horizontal lines to disappear in math when using
|
||||||
MathJax under Safari.
|
MathJax under Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* ---- Front Matter ---- */
|
/* ---- Front Matter ---- */
|
||||||
|
|
||||||
/* Pandoc header DIV. Contains .title, .author and .date. Comes before div#TOC.
|
/* Pandoc header DIV. Contains .title, .author and .date. Comes before div#TOC.
|
||||||
Only appears if one of those three are in the document.
|
Only appears if one of those three are in the document.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
div#header, header
|
div#header,
|
||||||
{
|
header {
|
||||||
/* Put border on bottom. Separates it from TOC or body that comes after it. */
|
/* Put border on bottom. Separates it from TOC or body that comes after it. */
|
||||||
border-bottom: 1px solid #aaa;
|
border-bottom: 1px solid #aaa;
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title /* Pandoc title header (h1.title) */
|
.title {
|
||||||
{
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author, .date /* Pandoc author(s) and date headers (h2.author and h3.date) */
|
.author,
|
||||||
{
|
.date {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Pandoc table of contents DIV when using the --toc option.
|
/* Pandoc table of contents DIV when using the --toc option.
|
||||||
NOTE: this doesn't support Pandoc's --id-prefix option for #TOC and #header.
|
NOTE: this doesn't support Pandoc's --id-prefix option for #TOC and #header.
|
||||||
Probably would need to use div[id$='TOC'] and div[id$='header'] as selectors.
|
Probably would need to use div[id$='TOC'] and div[id$='header'] as selectors.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
div#TOC, nav#TOC
|
div#TOC,
|
||||||
{
|
nav#TOC {
|
||||||
/* Put border on bottom to separate it from body. */
|
/* Put border on bottom to separate it from body. */
|
||||||
border-bottom: 1px solid #aaa;
|
border-bottom: 1px solid #aaa;
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media print
|
@media print {
|
||||||
{
|
div#TOC,
|
||||||
div#TOC, nav#TOC
|
nav#TOC {
|
||||||
{
|
|
||||||
/* Don't display TOC in print */
|
/* Don't display TOC in print */
|
||||||
display: none;
|
display: none;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* ---- Headers and sections ---- */
|
/* ---- Headers and sections ---- */
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6
|
h1,
|
||||||
{
|
h2,
|
||||||
font-family: "Helvetica Neue", Helvetica, "Liberation Sans", Calibri, Arial, sans-serif; /* Sans-serif headers */
|
h3,
|
||||||
|
h4,
|
||||||
/* font-family: "Liberation Serif", "Georgia", "Times New Roman", serif; /* Serif headers */
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: 'Helvetica Neue', Helvetica, 'Liberation Sans', Calibri, Arial,
|
||||||
|
sans-serif;
|
||||||
|
/* Sans-serif headers */
|
||||||
|
|
||||||
|
/*font-family: 'Liberation Serif', 'Georgia', 'Times New Roman', serif;*/
|
||||||
|
/* Serif headers */
|
||||||
|
|
||||||
page-break-after: avoid; /* Firefox, Chrome, and Safari do not support the property value "avoid" */
|
page-break-after: avoid; /* Firefox, Chrome, and Safari do not support the property value "avoid" */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Pandoc with --section-divs option */
|
/* Pandoc with --section-divs option */
|
||||||
|
|
||||||
div div, section section /* Nested sections */
|
div div,
|
||||||
{
|
section section {
|
||||||
margin-left: 2em; /* This will increasingly indent nested header sections */
|
margin-left: 2em; /* This will increasingly indent nested header sections */
|
||||||
}
|
}
|
||||||
|
|
||||||
p {}
|
p {
|
||||||
|
}
|
||||||
blockquote
|
|
||||||
{
|
blockquote {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
li /* All list items */
|
li {
|
||||||
{
|
}
|
||||||
}
|
|
||||||
|
li > p {
|
||||||
li > p /* Loosely spaced list item */
|
|
||||||
{
|
|
||||||
margin-top: 1em; /* IE: lack of space above a <li> when the item is inside a <p> */
|
margin-top: 1em; /* IE: lack of space above a <li> when the item is inside a <p> */
|
||||||
}
|
}
|
||||||
|
|
||||||
ul /* Whole unordered list */
|
ul {
|
||||||
{
|
}
|
||||||
}
|
|
||||||
|
ul li {
|
||||||
ul li /* Unordered list item */
|
}
|
||||||
{
|
|
||||||
}
|
ol {
|
||||||
|
}
|
||||||
ol /* Whole ordered list */
|
|
||||||
{
|
ol li {
|
||||||
}
|
}
|
||||||
|
|
||||||
ol li /* Ordered list item */
|
hr {
|
||||||
{
|
}
|
||||||
}
|
|
||||||
|
|
||||||
hr {}
|
|
||||||
|
|
||||||
/* ---- Some span elements --- */
|
/* ---- Some span elements --- */
|
||||||
|
|
||||||
sub /* Subscripts. Pandoc: H~2~O */
|
sub {
|
||||||
{
|
}
|
||||||
}
|
|
||||||
|
sup {
|
||||||
sup /* Superscripts. Pandoc: The 2^nd^ try. */
|
}
|
||||||
{
|
|
||||||
}
|
em {
|
||||||
|
}
|
||||||
em /* Emphasis. Markdown: *emphasis* or _emphasis_ */
|
|
||||||
{
|
em > em {
|
||||||
}
|
|
||||||
|
|
||||||
em > em /* Emphasis within emphasis: *This is all *emphasized* except that* */
|
|
||||||
{
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
strong /* Markdown **strong** or __strong__ */
|
strong {
|
||||||
{
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* ---- Links (anchors) ---- */
|
/* ---- Links (anchors) ---- */
|
||||||
|
|
||||||
a /* All links */
|
a {
|
||||||
{
|
|
||||||
/* Keep links clean. On screen, they are colored; in print, they do nothing anyway. */
|
/* Keep links clean. On screen, they are colored; in print, they do nothing anyway. */
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen
|
@media screen {
|
||||||
{
|
a:hover {
|
||||||
a:hover
|
|
||||||
{
|
|
||||||
/* On hover, we indicate a bit more that it is a link. */
|
/* On hover, we indicate a bit more that it is a link. */
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
@media print
|
|
||||||
{
|
@media print {
|
||||||
a {
|
a {
|
||||||
/* In print, a colored link is useless, so un-style it. */
|
/* In print, a colored link is useless, so un-style it. */
|
||||||
color: black;
|
color: black;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
a[href^="http://"]:after, a[href^="https://"]:after
|
a[href^='http://']:after,
|
||||||
{
|
a[href^='https://']:after {
|
||||||
/* However, links that go somewhere else, might be useful to the reader,
|
/* However, links that go somewhere else, might be useful to the reader,
|
||||||
so for http and https links, print the URL after what was the link
|
so for http and https links, print the URL after what was the link
|
||||||
text in parens
|
text in parens
|
||||||
*/
|
*/
|
||||||
content: " (" attr(href) ") ";
|
content: ' (' attr(href) ') ';
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* ---- Images ---- */
|
/* ---- Images ---- */
|
||||||
|
|
||||||
img
|
img {
|
||||||
{
|
|
||||||
/* Let it be inline left/right where it wants to be, but verticality make
|
/* Let it be inline left/right where it wants to be, but verticality make
|
||||||
it in the middle to look nicer, but opinions differ, and if in a multi-line
|
it in the middle to look nicer, but opinions differ, and if in a multi-line
|
||||||
paragraph, it might not be so great.
|
paragraph, it might not be so great.
|
||||||
*/
|
*/
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.figure /* Pandoc figure-style image */
|
div.figure {
|
||||||
{
|
|
||||||
/* Center the image and caption */
|
/* Center the image and caption */
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
p.caption /* Pandoc figure-style caption within div.figure */
|
p.caption {
|
||||||
{
|
|
||||||
/* Inherits div.figure props by default */
|
/* Inherits div.figure props by default */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- Code blocks and spans ---- */
|
/* ---- Code blocks and spans ---- */
|
||||||
|
|
||||||
pre, code
|
pre,
|
||||||
{
|
code {
|
||||||
background-color: #fdf7ee;
|
background-color: #fdf7ee;
|
||||||
/* BEGIN word wrap */
|
/* BEGIN word wrap */
|
||||||
/* Need all the following to word wrap instead of scroll box */
|
/* Need all the following to word wrap instead of scroll box */
|
||||||
|
@ -227,124 +215,113 @@ pre, code
|
||||||
white-space: -o-pre-wrap; /* Opera 7 */
|
white-space: -o-pre-wrap; /* Opera 7 */
|
||||||
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
||||||
/* END word wrap */
|
/* END word wrap */
|
||||||
}
|
}
|
||||||
|
|
||||||
pre /* Code blocks */
|
pre {
|
||||||
{
|
|
||||||
/* Distinguish pre blocks from other text by more than the font with a background tint. */
|
/* Distinguish pre blocks from other text by more than the font with a background tint. */
|
||||||
padding: 0.5em; /* Since we have a background color */
|
padding: 0.5em; /* Since we have a background color */
|
||||||
border-radius: 5px; /* Softens it */
|
border-radius: 5px; /* Softens it */
|
||||||
/* Give it a some definition */
|
/* Give it a some definition */
|
||||||
border: 1px solid #aaa;
|
border: 1px solid #aaa;
|
||||||
/* Set it off left and right, seems to look a bit nicer when we have a background */
|
/* Set it off left and right, seems to look a bit nicer when we have a background */
|
||||||
margin-left: 0.5em;
|
margin-left: 0.5em;
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen
|
@media screen {
|
||||||
{
|
pre {
|
||||||
pre
|
|
||||||
{
|
|
||||||
/* On screen, use an auto scroll box for long lines, unless word-wrap is enabled */
|
/* On screen, use an auto scroll box for long lines, unless word-wrap is enabled */
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
/* Dotted looks better on screen and solid seems to print better. */
|
/* Dotted looks better on screen and solid seems to print better. */
|
||||||
border: 1px dotted #777;
|
border: 1px dotted #777;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
code /* All inline code spans */
|
|
||||||
{
|
code {
|
||||||
}
|
}
|
||||||
|
|
||||||
p > code, li > code /* Code spans in paragraphs and tight lists */
|
p > code,
|
||||||
{
|
li > code {
|
||||||
/* Pad a little from adjacent text */
|
/* Pad a little from adjacent text */
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
padding-right: 2px;
|
padding-right: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li > p code /* Code span in a loose list */
|
li > p code {
|
||||||
{
|
|
||||||
/* We have room for some more background color above and below */
|
/* We have room for some more background color above and below */
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- Math ---- */
|
/* ---- Math ---- */
|
||||||
|
|
||||||
span.math /* Pandoc inline math default and --jsmath inline math */
|
span.math {
|
||||||
{
|
|
||||||
/* Tried font-style:italic here, and it messed up MathJax rendering in some browsers. Maybe don't mess with at all. */
|
/* Tried font-style:italic here, and it messed up MathJax rendering in some browsers. Maybe don't mess with at all. */
|
||||||
}
|
}
|
||||||
|
|
||||||
div.math /* Pandoc --jsmath display math */
|
div.math {
|
||||||
{
|
}
|
||||||
}
|
|
||||||
|
span.LaTeX {
|
||||||
span.LaTeX /* Pandoc --latexmathml math */
|
}
|
||||||
{
|
|
||||||
}
|
eq {
|
||||||
|
}
|
||||||
eq /* Pandoc --gladtex math */
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---- Tables ---- */
|
/* ---- Tables ---- */
|
||||||
|
|
||||||
/* A clean textbook-like style with horizontal lines above and below and under
|
/* A clean textbook-like style with horizontal lines above and below and under
|
||||||
the header. Rows highlight on hover to help scanning the table on screen.
|
the header. Rows highlight on hover to help scanning the table on screen.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
table
|
table {
|
||||||
{
|
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border-spacing: 0; /* IE 6 */
|
border-spacing: 0; /* IE 6 */
|
||||||
|
|
||||||
border-bottom: 2pt solid #000;
|
border-bottom: 2pt solid #000;
|
||||||
border-top: 2pt solid #000; /* The caption on top will not have a bottom-border */
|
border-top: 2pt solid #000; /* The caption on top will not have a bottom-border */
|
||||||
|
|
||||||
/* Center */
|
/* Center */
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead /* Entire table header */
|
thead {
|
||||||
{
|
|
||||||
border-bottom: 1pt solid #000;
|
border-bottom: 1pt solid #000;
|
||||||
background-color: #eee; /* Does this BG print well? */
|
background-color: #eee; /* Does this BG print well? */
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.header /* Each header row */
|
tr.header {
|
||||||
{
|
}
|
||||||
}
|
|
||||||
|
tbody {
|
||||||
tbody /* Entire table body */
|
}
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Table body rows */
|
/* Table body rows */
|
||||||
|
|
||||||
tr {
|
tr {
|
||||||
}
|
}
|
||||||
tr.odd:hover, tr.even:hover /* Use .odd and .even classes to avoid styling rows in other tables */
|
tr.odd:hover,
|
||||||
{
|
tr.even:hover {
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Odd and even rows */
|
/* Odd and even rows */
|
||||||
tr.odd {}
|
tr.odd {
|
||||||
tr.even {}
|
}
|
||||||
|
tr.even {
|
||||||
td, th /* Table cells and table header cells */
|
}
|
||||||
{
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
vertical-align: top; /* Word */
|
vertical-align: top; /* Word */
|
||||||
vertical-align: baseline; /* Others */
|
vertical-align: baseline; /* Others */
|
||||||
padding-left: 0.5em;
|
padding-left: 0.5em;
|
||||||
padding-right: 0.5em;
|
padding-right: 0.5em;
|
||||||
padding-top: 0.2em;
|
padding-top: 0.2em;
|
||||||
padding-bottom: 0.2em;
|
padding-bottom: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Removes padding on left and right of table for a tight look. Good if thead has no background color*/
|
/* Removes padding on left and right of table for a tight look. Good if thead has no background color*/
|
||||||
/*
|
/*
|
||||||
tr td:last-child, tr th:last-child
|
tr td:last-child, tr th:last-child
|
||||||
|
@ -356,18 +333,15 @@ tr td:first-child, tr th:first-child
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
th /* Table header cells */
|
th {
|
||||||
{
|
font-weight: bold;
|
||||||
font-weight: bold;
|
}
|
||||||
}
|
|
||||||
|
tfoot {
|
||||||
tfoot /* Table footer (what appears here if caption is on top?) */
|
}
|
||||||
{
|
|
||||||
}
|
caption {
|
||||||
|
|
||||||
caption /* This is for a table caption tag, not the p.caption Pandoc uses in a div.figure */
|
|
||||||
{
|
|
||||||
caption-side: top;
|
caption-side: top;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
|
@ -375,76 +349,68 @@ caption /* This is for a table caption tag, not the p.caption Pandoc uses in a d
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 0.3em; /* Good for when on top */
|
margin-bottom: 0.3em; /* Good for when on top */
|
||||||
padding-bottom: 0.2em;
|
padding-bottom: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- Definition lists ---- */
|
/* ---- Definition lists ---- */
|
||||||
|
|
||||||
dl /* The whole list */
|
dl {
|
||||||
{
|
|
||||||
border-top: 2pt solid black;
|
border-top: 2pt solid black;
|
||||||
padding-top: 0.5em;
|
padding-top: 0.5em;
|
||||||
border-bottom: 2pt solid black;
|
border-bottom: 2pt solid black;
|
||||||
}
|
}
|
||||||
|
|
||||||
dt /* Definition term */
|
dt {
|
||||||
{
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
dd+dt /* 2nd or greater term in the list */
|
dd + dt {
|
||||||
{
|
|
||||||
border-top: 1pt solid black;
|
border-top: 1pt solid black;
|
||||||
padding-top: 0.5em;
|
padding-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
dd /* A definition */
|
dd {
|
||||||
{
|
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
dd+dd /* 2nd or greater definition of a term */
|
dd + dd {
|
||||||
{
|
|
||||||
border-top: 1px solid black; /* To separate multiple definitions */
|
border-top: 1px solid black; /* To separate multiple definitions */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- Footnotes ---- */
|
/* ---- Footnotes ---- */
|
||||||
|
|
||||||
a.footnote, a.footnoteRef { /* Pandoc, MultiMarkdown footnote links */
|
a.footnote,
|
||||||
font-size: small;
|
a.footnoteRef {
|
||||||
|
/* Pandoc, MultiMarkdown footnote links */
|
||||||
|
font-size: small;
|
||||||
vertical-align: text-top;
|
vertical-align: text-top;
|
||||||
}
|
}
|
||||||
|
|
||||||
a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown, ?? footnote back links */
|
a[href^='#fnref'],
|
||||||
{
|
a.reversefootnote {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media print
|
@media print {
|
||||||
{
|
a[href^='#fnref'],
|
||||||
a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown */
|
a.reversefootnote {
|
||||||
{
|
|
||||||
/* Don't display these at all in print since the arrow is only something to click on */
|
/* Don't display these at all in print since the arrow is only something to click on */
|
||||||
display: none;
|
display: none;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
div.footnotes /* Pandoc footnotes div at end of the document */
|
|
||||||
{
|
div.footnotes {
|
||||||
}
|
}
|
||||||
|
|
||||||
div.footnotes li[id^="fn"] /* A footnote item within that div */
|
div.footnotes li[id^='fn'] {
|
||||||
{
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* You can class stuff as "noprint" to not print.
|
/* You can class stuff as "noprint" to not print.
|
||||||
Useful since you can't set this media conditional inside an HTML element's
|
Useful since you can't set this media conditional inside an HTML element's
|
||||||
style attribute (I think), and you don't want to make another stylesheet that
|
style attribute (I think), and you don't want to make another stylesheet that
|
||||||
imports this one and adds a class just to do this.
|
imports this one and adds a class just to do this.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@media print
|
@media print {
|
||||||
{
|
.noprint {
|
||||||
.noprint
|
display: none;
|
||||||
{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue