mirror of
https://github.com/johnkerl/miller.git
synced 2026-01-23 18:25:45 +00:00
191 lines
4.5 KiB
CSS
191 lines
4.5 KiB
CSS
/* General pattern/branding for Miller docs:
|
|
* o The first color is white; the second color is black; the third color is maroon. Code snippets have
|
|
* output in manila, with dark-manila command-lines.
|
|
* o As much as I love serif fonts like Palatino for their beauty (especially their artful italics),
|
|
* I use sans-serif for pragmatic visual throughput. (If this were a sales sheet rather than a tech
|
|
* guide, I'd use serifs.)
|
|
* o Corners on code blocks, images, etc. are all rounded.
|
|
* o Hovering over hyperlinks makes their background light grey for pre-click visual feedback.
|
|
*/
|
|
|
|
/* Top-of-page banner */
|
|
.md-header {
|
|
background-color: #800000;
|
|
}
|
|
.md-nav--primary .md-nav__title[for="__drawer"] {
|
|
color: #ffffff;
|
|
background-color: #800000;
|
|
padding: 3px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.md-footer {
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
/* Section headings in the navbar: bold them and stand them out a little */
|
|
.md-nav__item--nested > .md-nav__link {
|
|
color: inherit;
|
|
font-weight: bold;
|
|
margin: 3px;
|
|
padding: 3px;
|
|
/*border: 1px solid white;*/
|
|
}
|
|
.md-nav__link:hover {
|
|
/*border: 1px solid gray;*/
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
/* Code samples using <pre> (which is currently in use) */
|
|
/* For command-and-output situations (the most common) -- zero margin between.
|
|
* Example:
|
|
* mlr cat foo.csv <---- command line
|
|
* a,b,c <---- output line
|
|
* 1,2,3 <---- output line
|
|
* 4,5,6 <---- output line
|
|
* Command lines have bold font weight and darker background.
|
|
*
|
|
* Note the .pre-highlight-in-pair etc classes are written by the
|
|
* docs/genmd-filter script when it produces the docs/*.md files from their
|
|
* respective docs/*.md.in files.
|
|
*/
|
|
pre {
|
|
color: #000000;
|
|
font-size: 12px;
|
|
padding: 10px;
|
|
|
|
white-space: pre-wrap; /* css-3 */
|
|
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
|
white-space: -pre-wrap; /* Opera 4-6 */
|
|
white-space: -o-pre-wrap; /* Opera 7 */
|
|
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
|
}
|
|
.md-typeset code, .md-typeset kbd, .md-typeset pre {
|
|
color: #000000;
|
|
/*background-color: #e0e0e0;*/
|
|
background-color: #eae2cb;
|
|
/*background-color: #c5b690;*/
|
|
font-size: 12px;
|
|
direction: ltr;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
pre.pre-highlight-in-pair {
|
|
background-color: #c5b690;
|
|
font-weight: bold;
|
|
margin-bottom: 0px;
|
|
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
border-bottom-right-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
}
|
|
pre.pre-non-highlight-in-pair {
|
|
background-color: #eae2cb;
|
|
margin-top: 0px;
|
|
|
|
border-top-left-radius: 0px;
|
|
border-top-right-radius: 0px;
|
|
border-bottom-right-radius: 6px;
|
|
border-bottom-left-radius: 6px;
|
|
}
|
|
|
|
/* For command-only or output-only situations (less common) -- normal margins.
|
|
* Example:
|
|
* mlr cat foo.csv <---- command line
|
|
*/
|
|
pre.pre-highlight-non-pair {
|
|
background-color: #c5b690;
|
|
font-weight: bold;
|
|
margin-top: 2px;
|
|
margin-bottom: 16px;
|
|
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
border-bottom-left-radius: 6px;
|
|
}
|
|
|
|
/* Example:
|
|
* a,b,c <---- output line
|
|
* 1,2,3 <---- output line
|
|
* 4,5,6 <---- output line
|
|
*/
|
|
pre.pre-non-highlight-non-pair {
|
|
background-color: #eae2cb;
|
|
margin-top: 2px;
|
|
margin-bottom: 15px;
|
|
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
border-bottom-left-radius: 6px;
|
|
}
|
|
|
|
/* Section titles in content pages */
|
|
h1 {
|
|
font-weight: bold;
|
|
}
|
|
.md-typeset h1 {
|
|
font-weight: bold;
|
|
}
|
|
h1, h2, h3 {
|
|
color: #800000;
|
|
font-weight: bold;
|
|
border-radius: 6px;
|
|
padding: 6px;
|
|
background-color: #e0e0e0;
|
|
}
|
|
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
|
|
color: #800000;
|
|
font-weight: bold;
|
|
border-radius: 6px;
|
|
padding: 6px;
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
/* Hyperlinks in content pages */
|
|
a, a:before, a:focus, a:hover, a:visited {
|
|
color: #800000;
|
|
}
|
|
|
|
.md-typeset a {
|
|
color: #800000;
|
|
}
|
|
.md-typeset a:visited {
|
|
color: #800000;
|
|
}
|
|
.md-typeset a:hover {
|
|
background-color: #e0e0e0;
|
|
color: #800000;
|
|
}
|
|
|
|
/* Hyperlinks in navbar */
|
|
.md-nav__item,
|
|
.md-nav__item:focus,
|
|
.md-nav__item:hover,
|
|
.md-nav__link--active,
|
|
.md-nav__link--active,
|
|
.md-nav__link:focus,
|
|
.md-nav__link:hover
|
|
{
|
|
color: #800000;
|
|
}
|
|
.md-nav__item .md-nav__link--active {
|
|
color: #800000;
|
|
}
|
|
.md-nav--primary .md-nav__item--active > .md-nav__link {
|
|
color: #800000;
|
|
}
|
|
.md-nav__link[data-md-state="blur"] {
|
|
color: #800000;
|
|
}
|
|
nav a:hover {
|
|
border-radius: 3px;
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
/* Rounded corners for screenshots/images */
|
|
img {
|
|
border-radius: 6px;
|
|
}
|