Style style changes
This commit is contained in:
parent
672862aede
commit
818225cb1e
348
style.css
348
style.css
|
|
@ -39,184 +39,172 @@
|
|||
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. */
|
||||
border-bottom: 1px solid #aaa;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.title /* Pandoc title header (h1.title) */
|
||||
{
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.author, .date /* Pandoc author(s) and date headers (h2.author and h3.date) */
|
||||
{
|
||||
.author,
|
||||
.date {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pandoc table of contents DIV when using the --toc option.
|
||||
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.
|
||||
*/
|
||||
|
||||
div#TOC, nav#TOC
|
||||
{
|
||||
div#TOC,
|
||||
nav#TOC {
|
||||
/* Put border on bottom to separate it from body. */
|
||||
border-bottom: 1px solid #aaa;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media print
|
||||
{
|
||||
div#TOC, nav#TOC
|
||||
{
|
||||
@media print {
|
||||
div#TOC,
|
||||
nav#TOC {
|
||||
/* Don't display TOC in print */
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Headers and sections ---- */
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
{
|
||||
font-family: "Helvetica Neue", Helvetica, "Liberation Sans", Calibri, Arial, sans-serif; /* Sans-serif headers */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
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 */
|
||||
/*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" */
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
}
|
||||
|
||||
p {}
|
||||
p {
|
||||
}
|
||||
|
||||
blockquote
|
||||
{
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
li /* All list items */
|
||||
{
|
||||
}
|
||||
li {
|
||||
}
|
||||
|
||||
li > p /* Loosely spaced list item */
|
||||
{
|
||||
li > 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 /* Unordered list item */
|
||||
{
|
||||
}
|
||||
ul li {
|
||||
}
|
||||
|
||||
ol /* Whole ordered list */
|
||||
{
|
||||
}
|
||||
ol {
|
||||
}
|
||||
|
||||
ol li /* Ordered list item */
|
||||
{
|
||||
}
|
||||
ol li {
|
||||
}
|
||||
|
||||
hr {}
|
||||
hr {
|
||||
}
|
||||
|
||||
/* ---- Some span elements --- */
|
||||
|
||||
sub /* Subscripts. Pandoc: H~2~O */
|
||||
{
|
||||
}
|
||||
sub {
|
||||
}
|
||||
|
||||
sup /* Superscripts. Pandoc: The 2^nd^ try. */
|
||||
{
|
||||
}
|
||||
sup {
|
||||
}
|
||||
|
||||
em /* Emphasis. Markdown: *emphasis* or _emphasis_ */
|
||||
{
|
||||
}
|
||||
em {
|
||||
}
|
||||
|
||||
em > em /* Emphasis within emphasis: *This is all *emphasized* except that* */
|
||||
{
|
||||
em > em {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
strong /* Markdown **strong** or __strong__ */
|
||||
{
|
||||
}
|
||||
strong {
|
||||
}
|
||||
|
||||
/* ---- Links (anchors) ---- */
|
||||
|
||||
a /* All links */
|
||||
{
|
||||
a {
|
||||
/* Keep links clean. On screen, they are colored; in print, they do nothing anyway. */
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen
|
||||
{
|
||||
a:hover
|
||||
{
|
||||
@media screen {
|
||||
a:hover {
|
||||
/* On hover, we indicate a bit more that it is a link. */
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media print
|
||||
{
|
||||
a {
|
||||
@media print {
|
||||
a {
|
||||
/* In print, a colored link is useless, so un-style it. */
|
||||
color: black;
|
||||
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,
|
||||
so for http and https links, print the URL after what was the link
|
||||
text in parens
|
||||
*/
|
||||
content: " (" attr(href) ") ";
|
||||
content: ' (' attr(href) ') ';
|
||||
font-size: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Images ---- */
|
||||
|
||||
img
|
||||
{
|
||||
img {
|
||||
/* 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
|
||||
paragraph, it might not be so great.
|
||||
*/
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
div.figure /* Pandoc figure-style image */
|
||||
{
|
||||
div.figure {
|
||||
/* Center the image and caption */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
p.caption /* Pandoc figure-style caption within div.figure */
|
||||
{
|
||||
p.caption {
|
||||
/* Inherits div.figure props by default */
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Code blocks and spans ---- */
|
||||
|
||||
pre, code
|
||||
{
|
||||
pre,
|
||||
code {
|
||||
background-color: #fdf7ee;
|
||||
/* BEGIN word wrap */
|
||||
/* Need all the following to word wrap instead of scroll box */
|
||||
|
|
@ -227,67 +215,58 @@ pre, code
|
|||
white-space: -o-pre-wrap; /* Opera 7 */
|
||||
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
||||
/* END word wrap */
|
||||
}
|
||||
}
|
||||
|
||||
pre /* Code blocks */
|
||||
{
|
||||
pre {
|
||||
/* Distinguish pre blocks from other text by more than the font with a background tint. */
|
||||
padding: 0.5em; /* Since we have a background color */
|
||||
border-radius: 5px; /* Softens it */
|
||||
/* Give it a some definition */
|
||||
border: 1px solid #aaa;
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen
|
||||
{
|
||||
pre
|
||||
{
|
||||
@media screen {
|
||||
pre {
|
||||
/* On screen, use an auto scroll box for long lines, unless word-wrap is enabled */
|
||||
white-space: pre;
|
||||
overflow: auto;
|
||||
/* Dotted looks better on screen and solid seems to print better. */
|
||||
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 */
|
||||
padding-left: 2px;
|
||||
padding-left: 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 */
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- 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. */
|
||||
}
|
||||
}
|
||||
|
||||
div.math /* Pandoc --jsmath display math */
|
||||
{
|
||||
}
|
||||
div.math {
|
||||
}
|
||||
|
||||
span.LaTeX /* Pandoc --latexmathml math */
|
||||
{
|
||||
}
|
||||
span.LaTeX {
|
||||
}
|
||||
|
||||
eq /* Pandoc --gladtex math */
|
||||
{
|
||||
}
|
||||
eq {
|
||||
}
|
||||
|
||||
/* ---- Tables ---- */
|
||||
|
||||
|
|
@ -295,8 +274,7 @@ eq /* Pandoc --gladtex math */
|
|||
the header. Rows highlight on hover to help scanning the table on screen.
|
||||
*/
|
||||
|
||||
table
|
||||
{
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; /* IE 6 */
|
||||
|
||||
|
|
@ -306,44 +284,43 @@ table
|
|||
/* Center */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
thead /* Entire table header */
|
||||
{
|
||||
thead {
|
||||
border-bottom: 1pt solid #000;
|
||||
background-color: #eee; /* Does this BG print well? */
|
||||
}
|
||||
}
|
||||
|
||||
tr.header /* Each header row */
|
||||
{
|
||||
}
|
||||
tr.header {
|
||||
}
|
||||
|
||||
tbody /* Entire table body */
|
||||
{
|
||||
}
|
||||
tbody {
|
||||
}
|
||||
|
||||
/* Table body rows */
|
||||
|
||||
tr {
|
||||
}
|
||||
tr.odd:hover, tr.even:hover /* Use .odd and .even classes to avoid styling rows in other tables */
|
||||
{
|
||||
tr {
|
||||
}
|
||||
tr.odd:hover,
|
||||
tr.even:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
/* Odd and even rows */
|
||||
tr.odd {}
|
||||
tr.even {}
|
||||
tr.odd {
|
||||
}
|
||||
tr.even {
|
||||
}
|
||||
|
||||
td, th /* Table cells and table header cells */
|
||||
{
|
||||
td,
|
||||
th {
|
||||
vertical-align: top; /* Word */
|
||||
vertical-align: baseline; /* Others */
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
padding-top: 0.2em;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
padding-top: 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*/
|
||||
/*
|
||||
|
|
@ -357,17 +334,14 @@ tr td:first-child, tr th:first-child
|
|||
}
|
||||
*/
|
||||
|
||||
th /* Table header cells */
|
||||
{
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
tfoot /* Table footer (what appears here if caption is on top?) */
|
||||
{
|
||||
}
|
||||
tfoot {
|
||||
}
|
||||
|
||||
caption /* This is for a table caption tag, not the p.caption Pandoc uses in a div.figure */
|
||||
{
|
||||
caption {
|
||||
caption-side: top;
|
||||
border: none;
|
||||
font-size: 0.9em;
|
||||
|
|
@ -375,65 +349,59 @@ caption /* This is for a table caption tag, not the p.caption Pandoc uses in a d
|
|||
text-align: center;
|
||||
margin-bottom: 0.3em; /* Good for when on top */
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Definition lists ---- */
|
||||
|
||||
dl /* The whole list */
|
||||
{
|
||||
dl {
|
||||
border-top: 2pt solid black;
|
||||
padding-top: 0.5em;
|
||||
border-bottom: 2pt solid black;
|
||||
}
|
||||
}
|
||||
|
||||
dt /* Definition term */
|
||||
{
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
dd+dt /* 2nd or greater term in the list */
|
||||
{
|
||||
dd + dt {
|
||||
border-top: 1pt solid black;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
dd /* A definition */
|
||||
{
|
||||
dd {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
dd+dd /* 2nd or greater definition of a term */
|
||||
{
|
||||
dd + dd {
|
||||
border-top: 1px solid black; /* To separate multiple definitions */
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Footnotes ---- */
|
||||
|
||||
a.footnote, a.footnoteRef { /* Pandoc, MultiMarkdown footnote links */
|
||||
a.footnote,
|
||||
a.footnoteRef {
|
||||
/* Pandoc, MultiMarkdown footnote links */
|
||||
font-size: small;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown, ?? footnote back links */
|
||||
{
|
||||
}
|
||||
a[href^='#fnref'],
|
||||
a.reversefootnote {
|
||||
}
|
||||
|
||||
@media print
|
||||
{
|
||||
a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown */
|
||||
{
|
||||
@media print {
|
||||
a[href^='#fnref'],
|
||||
a.reversefootnote {
|
||||
/* Don't display these at all in print since the arrow is only something to click on */
|
||||
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.
|
||||
Useful since you can't set this media conditional inside an HTML element's
|
||||
|
|
@ -441,10 +409,8 @@ div.footnotes li[id^="fn"] /* A footnote item within that div */
|
|||
imports this one and adds a class just to do this.
|
||||
*/
|
||||
|
||||
@media print
|
||||
{
|
||||
.noprint
|
||||
{
|
||||
display:none;
|
||||
}
|
||||
@media print {
|
||||
.noprint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue