docs/buttondown.css

   1 /*  CSS sourced for GROMACS from https://gist.github.com/ryangray/1882525
   2     No usage restrictions are asserted there.
   3 */
   4 /*
   5     Buttondown
   6     A Markdown/MultiMarkdown/Pandoc HTML output CSS stylesheet
   7     Author: Ryan Gray
   8     Date: 15 Feb 2011
   9     Revised: 21 Feb 2012
  10
  11     General style is clean, with minimal re-definition of the defaults or
  12     overrides of user font settings. The body text and header styles are
  13     left alone except title, author and date classes are centered. A Pandoc TOC
  14     is not printed, URLs are printed after hyperlinks in parentheses.
  15     Block quotes are italicized. Tables are lightly styled with lines above
  16     and below the table and below the header with a boldface header. Code
  17     blocks are line wrapped.
  18
  19     All elements that Pandoc and MultiMarkdown use should be listed here, even
  20     if the style is empty so you can easily add styling to anything.
  21
  22     There are some elements in here for HTML5 output of Pandoc, but I have not
  23     gotten around to testing that yet.
  24 */
  25
  26 /* NOTES:
  27
  28     Stuff tried and failed:
  29
  30     It seems that specifying font-family:serif in Safari will always use
  31     Times New Roman rather than the user's preferences setting.
  32
  33     Making the font size different or a fixed value for print in case the screen
  34     font size is making the print font too big: Making font-size different for
  35     print than for screen causes horizontal lines to disappear in math when using
  36     MathJax under Safari.
  37 */
  38
  39 /* ---- Front Matter ---- */
  40
  41 /* Pandoc header DIV. Contains .title, .author and .date. Comes before div#TOC.
  42    Only appears if one of those three are in the document.
  43 */
  44
  45 div#header, header
  46     {
  47     /* Put border on bottom. Separates it from TOC or body that comes after it. */
  48     border-bottom: 1px solid #aaa;
  49     margin-bottom: 0.5em;
  50     }
  51
  52 .title /* Pandoc title header (h1.title) */
  53     {
  54     text-align: center;
  55     }
  56
  57 .author, .date /* Pandoc author(s) and date headers (h2.author and h3.date) */
  58     {
  59     text-align: center;
  60     }
  61
  62 /* Pandoc table of contents DIV when using the --toc option.
  63    NOTE: this doesn't support Pandoc's --id-prefix option for #TOC and #header.
  64    Probably would need to use div[id$='TOC'] and div[id$='header'] as selectors.
  65 */
  66
  67 div#TOC, nav#TOC
  68     {
  69     /* Put border on bottom to separate it from body. */
  70     border-bottom: 1px solid #aaa;
  71     margin-bottom: 0.5em;
  72     }
  73
  74 @media print
  75     {
  76     div#TOC, nav#TOC
  77         {
  78         /* Don't display TOC in print */
  79         display: none;
  80         }
  81     }
  82
  83 /* ---- Headers and sections ---- */
  84
  85 h1, h2, h3, h4, h5, h6
  86 {
  87     font-family: "Helvetica Neue", Helvetica, "Liberation Sans", Calibri, Arial, sans-serif; /* Sans-serif headers */
  88
  89     /* font-family: "Liberation Serif", "Georgia", "Times New Roman", serif; /* Serif headers */
  90
  91     page-break-after: avoid; /* Firefox, Chrome, and Safari do not support the property value "avoid" */
  92 }
  93
  94 /* Pandoc with --section-divs option */
  95
  96 div div, section section /* Nested sections */
  97     {
  98     margin-left: 2em; /* This will increasingly indent nested header sections */
  99     }
 100
 101 p {}
 102
 103 blockquote
 104     {
 105     font-style: italic;
 106     }
 107
 108 li /* All list items */
 109     {
 110     }
 111
 112 li > p /* Loosely spaced list item */
 113     {
 114     margin-top: 1em; /* IE: lack of space above a <li> when the item is inside a <p> */
 115     }
 116
 117 ul /* Whole unordered list */
 118     {
 119     }
 120
 121 ul li /* Unordered list item */
 122     {
 123     }
 124
 125 ol /* Whole ordered list */
 126     {
 127     }
 128
 129 ol li /* Ordered list item */
 130     {
 131     }
 132
 133 hr {}
 134
 135 /* ---- Some span elements --- */
 136
 137 sub /* Subscripts. Pandoc: H~2~O */
 138     {
 139     }
 140
 141 sup /* Superscripts. Pandoc: The 2^nd^ try. */
 142     {
 143     }
 144
 145 em /* Emphasis. Markdown: *emphasis* or _emphasis_ */
 146     {
 147     }
 148
 149 em > em /* Emphasis within emphasis: *This is all *emphasized* except that* */
 150     {
 151     font-style: normal;
 152     }
 153
 154 strong /* Markdown **strong** or __strong__ */
 155     {
 156     }
 157
 158 /* ---- Links (anchors) ---- */
 159
 160 a /* All links */
 161     {
 162     /* Keep links clean. On screen, they are colored; in print, they do nothing anyway. */
 163     text-decoration: none;
 164     }
 165
 166 @media screen
 167     {
 168     a:hover
 169         {
 170         /* On hover, we indicate a bit more that it is a link. */
 171         text-decoration: underline;
 172         }
 173     }
 174
 175 @media print
 176     {
 177     a   {
 178         /* In print, a colored link is useless, so un-style it. */
 179         color: black;
 180         background: transparent;
 181         }
 182
 183     a[href^="http://"]:after, a[href^="https://"]:after
 184         {
 185         /* However, links that go somewhere else, might be useful to the reader,
 186            so for http and https links, print the URL after what was the link
 187            text in parens
 188         */
 189         content: " (" attr(href) ") ";
 190         font-size: 90%;
 191         }
 192     }
 193
 194 /* ---- Images ---- */
 195
 196 img
 197     {
 198     /* Let it be inline left/right where it wants to be, but verticality make
 199        it in the middle to look nicer, but opinions differ, and if in a multi-line
 200        paragraph, it might not be so great.
 201     */
 202     vertical-align: middle;
 203     }
 204
 205 div.figure /* Pandoc figure-style image */
 206     {
 207     /* Center the image and caption */
 208     margin-left: auto;
 209     margin-right: auto;
 210     text-align: center;
 211     font-style: italic;
 212     }
 213
 214 p.caption /* Pandoc figure-style caption within div.figure */
 215     {
 216     /* Inherits div.figure props by default */
 217     }
 218
 219 /* ---- Code blocks and spans ---- */
 220
 221 pre, code
 222     {
 223     background-color: #fdf7ee;
 224     /* BEGIN word wrap */
 225     /* Need all the following to word wrap instead of scroll box */
 226     /* This will override the overflow:auto if present */
 227     white-space: pre-wrap; /* css-3 */
 228     white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
 229     white-space: -pre-wrap; /* Opera 4-6 */
 230     white-space: -o-pre-wrap; /* Opera 7 */
 231     word-wrap: break-word; /* Internet Explorer 5.5+ */
 232     /* END word wrap */
 233     }
 234
 235 pre /* Code blocks */
 236     {
 237     /* Distinguish pre blocks from other text by more than the font with a background tint. */
 238     padding: 0.5em; /* Since we have a background color */
 239     border-radius: 5px; /* Softens it */
 240     /* Give it a some definition */
 241     border: 1px solid #aaa;
 242     /* Set it off left and right, seems to look a bit nicer when we have a background */
 243     margin-left:  0.5em;
 244     margin-right: 0.5em;
 245     }
 246
 247 @media screen
 248     {
 249     pre
 250         {
 251         /* On screen, use an auto scroll box for long lines, unless word-wrap is enabled */
 252         white-space: pre;
 253         overflow: auto;
 254         /* Dotted looks better on screen and solid seems to print better. */
 255         border: 1px dotted #777;
 256         }
 257     }
 258
 259 code /* All inline code spans */
 260     {
 261     }
 262
 263 p > code, li > code /* Code spans in paragraphs and tight lists */
 264     {
 265     /* Pad a little from adjacent text */
 266     padding-left:  2px;
 267     padding-right: 2px;
 268     }
 269
 270 li > p code /* Code span in a loose list */
 271     {
 272     /* We have room for some more background color above and below */
 273     padding: 2px;
 274     }
 275
 276 /* ---- Math ---- */
 277
 278 span.math /* Pandoc inline math default and --jsmath inline math */
 279     {
 280     /* Tried font-style:italic here, and it messed up MathJax rendering in some browsers. Maybe don't mess with at all. */
 281     }
 282
 283 div.math /* Pandoc --jsmath display math */
 284     {
 285     }
 286
 287 span.LaTeX /* Pandoc --latexmathml math */
 288     {
 289     }
 290
 291 eq /* Pandoc --gladtex math */
 292     {
 293     }
 294
 295 /* ---- Tables ---- */
 296
 297 /*  A clean textbook-like style with horizontal lines above and below and under
 298     the header. Rows highlight on hover to help scanning the table on screen.
 299 */
 300
 301 table
 302     {
 303     border-collapse: collapse;
 304     border-spacing: 0; /* IE 6 */
 305
 306     border-bottom: 2pt solid #000;
 307     border-top: 2pt solid #000; /* The caption on top will not have a bottom-border */
 308
 309     /* Center */
 310     margin-left: auto;
 311     margin-right: auto;
 312     }
 313
 314 thead /* Entire table header */
 315     {
 316     border-bottom: 1pt solid #000;
 317     background-color: #eee; /* Does this BG print well? */
 318     }
 319
 320 tr.header /* Each header row */
 321     {
 322     }
 323
 324 tbody /* Entire table  body */
 325     {
 326     }
 327
 328 /* Table body rows */
 329
 330 tr  {
 331     }
 332 tr.odd:hover, tr.even:hover /* Use .odd and .even classes to avoid styling rows in other tables */
 333     {
 334     background-color: #eee;
 335     }
 336
 337 /* Odd and even rows */
 338 tr.odd {}
 339 tr.even {}
 340
 341 td, th /* Table cells and table header cells */
 342     {
 343     vertical-align: top; /* Word */
 344     vertical-align: baseline; /* Others */
 345     padding-left:   0.5em;
 346     padding-right:  0.5em;
 347     padding-top:    0.2em;
 348     padding-bottom: 0.2em;
 349     }
 350
 351 /* Removes padding on left and right of table for a tight look. Good if thead has no background color*/
 352 /*
 353 tr td:last-child, tr th:last-child
 354     {
 355     padding-right: 0;
 356     }
 357 tr td:first-child, tr th:first-child
 358     {
 359     padding-left: 0;
 360     }
 361 */
 362
 363 th /* Table header cells */
 364     {
 365     font-weight: bold;
 366     }
 367
 368 tfoot /* Table footer (what appears here if caption is on top?) */
 369     {
 370     }
 371
 372 caption /* This is for a table caption tag, not the p.caption Pandoc uses in a div.figure */
 373     {
 374     caption-side: top;
 375     border: none;
 376     font-size: 0.9em;
 377     font-style: italic;
 378     text-align: center;
 379     margin-bottom: 0.3em; /* Good for when on top */
 380     padding-bottom: 0.2em;
 381     }
 382
 383 /* ---- Definition lists ---- */
 384
 385 dl /* The whole list */
 386     {
 387     border-top: 2pt solid black;
 388     padding-top: 0.5em;
 389     border-bottom: 2pt solid black;
 390     }
 391
 392 dt /* Definition term */
 393     {
 394     font-weight: bold;
 395     }
 396
 397 dd+dt /* 2nd or greater term in the list */
 398     {
 399     border-top: 1pt solid black;
 400     padding-top: 0.5em;
 401     }
 402
 403 dd /* A definition */
 404     {
 405     margin-bottom: 0.5em;
 406     }
 407
 408 dd+dd /* 2nd or greater definition of a term */
 409     {
 410     border-top: 1px solid black; /* To separate multiple definitions */
 411     }
 412
 413 /* ---- Footnotes ---- */
 414
 415 a.footnote, a.footnoteRef { /* Pandoc, MultiMarkdown footnote links */
 416     font-size: small;
 417     vertical-align: text-top;
 418 }
 419
 420 a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown, ?? footnote back links */
 421     {
 422     }
 423
 424 @media print
 425     {
 426     a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown */
 427         {
 428         /* Don't display these at all in print since the arrow is only something to click on */
 429         display: none;
 430         }
 431     }
 432
 433 div.footnotes /* Pandoc footnotes div at end of the document */
 434     {
 435     }
 436
 437 div.footnotes li[id^="fn"] /* A footnote item within that div */
 438     {
 439     }
 440
 441 /* You can class stuff as "noprint" to not print.
 442    Useful since you can't set this media conditional inside an HTML element's
 443    style attribute (I think), and you don't want to make another stylesheet that
 444    imports this one and adds a class just to do this.
 445 */
 446
 447 @media print
 448     {
 449     .noprint
 450         {
 451         display:none;
 452         }
 453     }