/* ASIDE */ /* Put content to the left or right of the page as an "aside". This is an * alternative to footnotes. */ aside { hyphens: auto; /* Hyphenate, as this text is quite narrow. */ } aside { position: absolute; left: /*padx*/-15em; width: 14em; text-align: right; font-size: .9em; } /* Alternative: place on the right. aside { position: absolute; right: -15em; width: 14em; } */ @media (max-width: 83em) { /* Place inline if it won't fit on the screen. */ aside { position: static; width: auto; text-align: left; background-color: #f7f7f7; padding: .4em 2em; border: 1px solid /*bordercolor*/#aaa; hyphens: none; } } /* Optional: place the page further to the right, so that there's more space for * the aside. * Adjust the media query above to max-width: 63em .page { left: 10em; } */ /* FONTS */ /* I like the Libre Baskerville typeface, which is a nice Serif font. * * https://github.com/impallari/Libre-Baskerville * https://web.archive.org/web/20150918205958/http://www.impallari.com/projects/update/86 * https://fonts.google.com/specimen/Libre+Baskerville * * A copy is in the "fonts" dir. */ @font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400; font-display: fallback; src: local('Libre Baskerville'), local('LibreBaskerville-Regular'), url(/fonts/libre-baskerville.woff2) format('woff2'), url(./fonts/libre-baskerville.woff2) format('woff2'); } @font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 700; font-display: fallback; src: local('Libre Baskerville Bold'), local('LibreBaskerville-Bold'), url(/fonts/libre-baskerville-bold.woff2) format('woff2'), url(./fonts/libre-baskerville-bold.woff2) format('woff2'); } @font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 400; font-display: fallback; src: local('Libre Baskerville Italic'), local('LibreBaskerville-Italic'), url(/fonts/libre-baskerville-italic.woff2) format('woff2'), url(./fonts/libre-baskerville-italic.woff2) format('woff2'); } html { font: 16px/180% 'Libre Baskerville', 'DejaVu Serif', 'Bitstream Vera Serif', 'Georgia', serif; /* Possible sans-serif alternative; note you may want to adjust the * line-height and font-size if you want the fonts. Different values work * better for different fonts. * font: 18px/160% Calibri, 'DejaVu Sans Serif', sans-serif; */ text-size-adjust: none; /* Disables text adjustment algorithm on some mobile browsers, this is */ -webkit-text-size-adjust: none; /* intended for sites that are not designed for mobile viewing. */ } @media (max-width: /*bodywidth*/54em) { /* Use smaller fonts and line-height on smaller screens. */ html { font-size: 14px; line-height: 160%; } } @media (max-width: /*bodywidth*/26em) { html { font-size: 12px; line-height: 150%; } } pre, code { font-family: 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Consolas', monospace; } pre { font-size: 14px; /* Smaller text to fit more. */ line-height: 130%; /* Idem. */ } h1, h2, h3, h4, h5, h6 { /* Enable ligatures, works well with Libre Baskerville, which adds * (old-fashioned but handsome) ligatures on "st", "ct", and "sp". * * You'll need to add "&subset=all" if you're using it from Google Fonts: * https://fonts.googleapis.com/css?family=Libre+Baskerville&subset=all */ font-variant-ligatures: common-ligatures discretionary-ligatures; font-feature-settings: 'liga' on, 'dlig' on; } /* DEFAULTS */ * { box-sizing: border-box; /* Element width/height includes the border. */ } *:target { background-color: #ff6; /* Highlight elements in URL fragment, e.g. #some-header, or #footnote-1. */ } html { background-color: #eee; /* Neutral background to contrast with the page. */ color: /*textcolor*/#252525; /* Slightly less "harsh" black; looks subtly better. */ tab-size: 4; /* Tab size of 4 is probably more common in editors etc. */ -moz-tab-size: 4; /* Still needed as of Jan 2019 :-( https://bugzil.la/737785 */ } html, body { margin: 0; /* No extra margin; shows up in some cases (e.g. when printing). */ } .center, .page { max-width: /*bodywidth*/54rem; /* Don't make it too wide, as that makes it harder to read. */ margin: .5rem auto; /* Add some extra space at top/bottom, and centre it. */ position: relative; /* So that absolute/relative positioning is relative to the page, which is almost always what's desired. */ } .page { padding: /*pady*/1rem /*padx*/4rem; /* Small padding on top, larger on sides. */ background-color: /*bgcolor*/#fff; /* White background to override the html one */ /* A slightly grey or yellowish tint also works well, and gives a warmer feel. * Some suggestions: #fbfbf7, #fffff7 */ /* Remove this and the box-shadow for an even background colour. */ box-shadow: 0 0 6px rgba(0,0,0,.2); /* Box-shadow effect looks quite handsome here. */ } @media (max-width: /*bodywidth*/54em) { .page, .center { max-width: 100%; /* Full-width page. */ padding: 0 1rem; /* Modest amount of padding to prevent wasting screen space. */ } } /* PRINTING */ @page { margin: 0; /* Don't add extra margin to pages, .page already has it. */ /* Also hides URL and such that most browsers add. */ } @media print { /* Reset some stuff for printing. */ body { background-color: #fff; } .page, .center { box-shadow: none; padding: 0 1cm; margin: 0; max-width: none; } .page:first-child, .center:first-child { padding-top: 5mm; } } .page-a4, .page.page-a4 { /* A4 paper used in most places */ width: 21cm; height: 29.7cm; } .page-letter, .page.page-letter { /* Standard U.S. letter */ width: 8.5in; height: 11in; } /* LINKS */ a, a code, /* Otherwise it would just stay black text; common enough to include here. */ .link { color: #00f; /* Make sure colour is the same in all browsers. */ text-decoration: none; /* Underlining can look "busy"; the colour on its own should be enough. */ transition: color .2s; /* Animate the change in colour effect on hover; subtle but noticeable. */ } a:hover, .link:hover { text-decoration: underline; /* Provide some feedback by underlining and changing colour. */ color: #6491ff; /* Light blue */ } a:hover code { color: #6491ff; /* Also change colour of code on hover. */ } form { /* Make sure forms don't affect visual layout. */ display: inline; margin: 0; padding: 0; } .link { background: transparent; /* Reset basic appearance. */ border: none; outline: none; margin: 0; padding: 0; cursor: pointer; font: inherit; line-height: 1rem; display: inline; -moz-user-select: inherit; /* Otherwise text isn't selectable. */ -webkit-appearance: none; } /* HEADERS */ /* The intention is that there is only one h1 on a page: at the top. If you use * h1 different, then you may want to add a border like in the h2. */ h1 { text-align: center; padding: .5em 0; /* More than default. */ font-size: 1.7em; /* Default of 2em is pretty large. */ } h2 { border-bottom: 1px solid /*textcolor*/#252525; /* Underline to stand out more. */ padding-bottom: .2em; /* Border not too close to the text. */ font-size: 1.5em; /* Default of 1.8em is pretty large. */ } h3 { font-size: 1.3em; /* Default of 1.6em is pretty large. */ } h4 { font-size: 1.1em; /* Slightly larger than default of 1em. */ } h5, h6 { font-size: 1em; /* Don't make h5 and h6 smaller than base font. */ } /* BLOCKQUOTE */ blockquote { font-style: italic; /* Quotations are usually typeset in italics. */ } /* IMAGES */ img { max-width: 100%; /* Make sure it's never larger than the page. */ } figure { text-align: center; /* Centre images and associated captions (if any). */ margin: 1rem 0; /* Don't need 40px of margin on either side. */ } figure.border { border: 1px solid /*bordercolor*/#aaa; /* Add border. */ padding: 5px; /* Slight gap between image and border. */ margin: -5px; /* Put the border in the margin, so the padding doesn't shrink the image. */ } @media (min-width: /*bodywidth*/54em) { /* Only if the screen is wide enough. */ figure.full { /* Make sure this is after .border so that adding both works. */ margin-left: /*padx*/-4rem; width: calc(100% + /*padx*/8rem); } figure.full.border { border-left: none; /* Remove side borders on .full */ border-right: none; } } /* CODE */ code, pre, kbd, samp { background-color: #f5f5f5; /* Make it stand out a bit more. */ color: #000; /* Override the softer black, as we're now using a grey background. */ } pre { overflow: auto; /* Add scrollbars if the content is too high or wide. */ max-height: 500px; /* Scroll content larger than this. */ padding: .5em 1em; /* Don't put the text right on the edge. */ border-radius: 2px; /* Looks better with subtly rounded corner. */ border-top: 1px solid #d5d5d5; /* Looks better. */ border-bottom: 1px solid #d5d5d5; /* Looks better. */ } @media (min-width: /*bodywidth*/54em) { /* Only if the screen is wide enough. */ pre.full { margin-left: /*padx*/-4rem; width: calc(100% + /*padx*/8rem); } } code, kbd, samp { padding: 1px 2px; /* Make sure the text isn't right on the edge of the background. */ } pre > code { /* Reset the above styling on
*/
padding: 0;
box-shadow: none;
border: none;
}
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
background-color: transparent; /* Don't include grey background in headers, looks ugly. */
box-shadow: none;
color: inherit;
}
/* TABLES */
table {
border-collapse: collapse; /* No space between borders. */
width: 100%;
}
table + table {
margin-top: 2em; /* Add margin for subsequent tables. */
}
@media (min-width: /*bodywidth*/54em) { /* Only if the screen is wide enough. */
table.full {
margin-left: /*padx*/-3.5rem;
width: calc(100% + /*padx*/7rem);
}
}
caption {
font-weight: bold; /* Make caption stand out more. */
}
tr {
border-bottom: 1px solid #ddd; /* Divide rows with a border. */
}
table > tr:last-child, tbody tr:last-child, tfoot tr:last-child {
border-bottom: none; /* No border on the last row. */
}
tfoot tr:first-child {
border-top: 1px solid #ddd; /* Continue border on first tfoot row; removed with tbody tr:last-child. */
}
td, th {
padding: .2em .5em; /* Whitespace on top/bottom to make it less dense. */
/* And to the side to prevent cells from touching. */
hyphens: none; /* Disable hyphenation by default, as it tends to wreak havoc with cell width calculations. */
}
td.left, th.left { /* Left aligned table cells (mainly for ). */
text-align: left;
}
td.right, th.right { /* Right aligned table cells. */
text-align: right;
}
table td.right {
font-feature-settings: 'tnum' on; /* Use tabular numbers for alignment. */
font-variant-numeric: tabular-nums;
font-family: sans-serif; /* Libre Baskerville has no aligned numbers :-( */
}
/* SUPER- AND SUBSCRIPT */
sup, sub { /* Make sure the line height isn't affected. */
height: 0;
line-height: 1;
vertical-align: baseline;
position: relative;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
/* HORIZONTAL RULER */
/* Make the
element look better by replacing it with some text (usually
* decorative characters such as fleurons or an asterism. */
hr {
border: none; /* Remove default border. */
text-align: center; /* Centre the characters. */
font-size: 60px; /* Make it larger; what looks good depends a bit on which character you choose. */
color: /*textcolor*/#252525; /* Standard text colour; it's grey by default. */
opacity: .9; /* But make it slightly less dark than regular text. */
}
hr:before {
/* Two fleurons with touching edges.
content: "☙❧";
letter-spacing: -4px;
*/
/* As SVG, because too many browsers suck at rendering fonts well. This is
* the same as the above two rules (as they *should* render). */
content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMC4yIDkuMiIgaGVpZ2h0PSIzNC44IiB3aWR0aD0iMTE0LjMiPjxwYXRoIGQ9Ik0xMy4yIDBxMS4xIDAgMS4zIDEuMiAwIDEtLjcgMS4yLTEuOC40LTIgLjggMi42LjMgMy4yIDMuMWguMmwuMi44LS40LjFxLS4yIDEuOC0xLjggMS45LTEgMC0xLjMtMSAwLS44LjItLjguMi40LjguNC44IDAgMS0uOFExMSA2LjEgMTEgMy43cS0xLjQgMC0yLjEgMSAxLjQuNyAxLjQgMS44LS4xIDIuNS0zLjYgMi43US41IDkuMiAwIDUuNXEwLS42LjctLjcuNSAwIC42LjV2LjJsLS4xLjRxMCAxIDEuMSAxIDEgMCAxLS43UTQgMS4yIDcgMXEyIC4xIDIgMS43di4xcTAgLjQtLjQgMS41IDEtLjggMi0xIC42IDAgLjYtLjQuOC0xIDEuNi0xLjMuNi0uNC42LS44bC0uMi0uNHEtLjItLjMgMC0uNHptLTEuNiAzLjd2LjFxMCAxLjQgMi4zIDIuMi0uMy0yLTIuMy0yLjN6Ii8+PHBhdGggZD0iTTE3IDBxLTEgMC0xLjMgMS4yIDAgMSAuOCAxLjIgMS44LjQgMiAuOC0yLjcuMy0zLjIgMy4xSDE1bC0uMi44LjUuMXEuMiAxLjggMS44IDEuOSAxIDAgMS4yLTEgMC0uOC0uMi0uOC0uMS40LS43LjQtLjkgMC0xLS44IDIuNy0uOCAyLjgtMy4yIDEuNCAwIDIgMS0xLjMuNy0xLjMgMS44IDAgMi41IDMuNSAyLjcgNi40IDAgNi44LTMuNyAwLS42LS42LS43LS42IDAtLjcuNXYuMmwuMi40cTAgMS0xLjIgMS0uOSAwLTEtLjctLjYtNS0zLjctNS4yLTIgLjEtMiAxLjd2LjFxMCAuNC40IDEuNS0xLS44LTItMS0uNiAwLS42LS40LS43LTEtMS41LTEuMy0uNi0uNC0uNi0uOGwuMi0uNHEuMi0uMyAwLS40em0xLjcgMy43di4xcTAgMS40LTIuNCAyLjIuMy0yIDIuNC0yLjN6Ii8+PC9zdmc+);
/* Alternative: separate with a space:
content: "☙ ❧";
*/
/* Or separate with letter-spacing and padding:
letter-spacing: 1em;
padding-left: 1em;
*/
/* Or asterism:
content: "⁂";
*/
/* Many possibilities
content: "* * *";
content: "· · ·";
*/
}
/* BLOCKQUOTE */
/* Put decorational quotation marks around blockquote elements. */
blockquote {
font-style: italic; /* Quotations are usually typeset in italics. */
position: relative; /* So that position: absolute is relative to this. */
}
blockquote:before /*, blockquote:after */ {
position: absolute; /* Don't interfere with regular layout. */
color: #dbdbdb; /* Just decorational, so don't stand out too much. */
font-size: 5em;
}
blockquote:before {
content: "“";
left: -.6em;
top: .25em;
}
/* Optional: place a mark after the quote, too. I personally don't like it as
* often times the last line won't end at the line, and there just seems to be a
* "dangling" quotation mark there.
*
* Note: add blockquote:after to the first selector above too.
*/
/*
blockquote:after {
content: "„"; /* Use the German-style opening quote as it's easier to align, and it should look the same. *
right: -.6em;
bottom: .25em;
}
*/
/* FORMS */
/* Simple form layouts.
*
* Use the "vertical" class to make the labels sit above the input fields:
*
* Label
* [ ]
*
* [x] Checkbox
*
* [Submit]
*
*
* Use the "horizontal" class if you want a more "horizontal" layout:
*
* Label [ ]
*
* Another [ ]
*
* [x] Checkbox
*
* [Submit]
*
* You need to explicitly add one of the layout classes to make it easier to use
* forms as simple UI elements.
*/
/* GENERIC STYLES */
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
input[type="range"],
input[type="number"],
textarea,
select {
font: 1em/100% sans-serif; /* Use sans-serif font with the default font size. */
}
textarea,
button:not(.link),
select,
input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]) {
padding: .6em; /* Chrome adds almost no padding. */
border: 1px solid #bbb;
border-radius: 3px;
}
textarea {
width: 100%; /* Use entire width of container. */
height: 10rem; /* A reasonable default height for most purposes. */
line-height: 130%; /* Reduce line-height since we set a sans-serif font. */
}
button:not(.link), input[type="submit"]:not(.link) {
color: #000; /* Bit more contrast. */
cursor: pointer; /* Clearer it's clickable. */
margin-left: .5em; /* Bit of margin generally looks better. */
padding: .6em 1.5em; /* More padding for left/right. */
background-color: #f6f5f4; /* Background gets reset when border is set; defaults from Firefox. */
background: linear-gradient(#f6f5f4, #edebe9);
border: .5px outset #e9e9e9; /* More or less the same as the Firefox border. */
border-radius: 3px;
border-top-color: #ccc;
border-left-color: #ccc;
}
select {
background-color: inherit; /* No need for just selects to be grey. */
}
input:not(.link):focus,
button:not(.link):focus,
textarea:focus,
select:focus { /* Firefox removes this once you start styling */
outline: 1px solid #00f;
box-shadow: 0 0 .2em #00f;
color: #000; /* Increase contrast a bit. */
cursor: pointer; /* Clearer that you can click this. */
}
button:not(.link):hover, /* Bit darker on hover. */
input[type="submit"]:not(.link):hover {
background-color: #f0f0f0;
background: linear-gradient(#f0f0f0, #d0cecc);
}
button:not(.link):active, /* Reverse when active/clicking. */
input[type="submit"]:not(.link):active {
background-color: #d0cecc;
background: linear-gradient(#d0cecc, #f0f0f0);
border-style: inset;
}
form > strong, fieldset > strong { /* Header. */
display: inline-block;
margin-top: .5em;
}
form span {
margin-left: .2em; /* Help text or error; so it doesn't sit flush with the input. */
}
fieldset {
border: 1px solid /*bordercolor*/#aaa; /* More modern-looking border instead of inset or 2px. */
}
/* VERTICAL FORM */
/* TODO: optgroup? */
/* https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css */
.vertical input[type="text"],
.vertical input[type="search"],
.vertical input[type="tel"],
.vertical input[type="url"],
.vertical input[type="email"],
.vertical input[type="password"],
.vertical input[type="date"],
.vertical input[type="month"],
.vertical input[type="week"],
.vertical input[type="time"],
.vertical input[type="datetime-local"],
.vertical input[type="range"],
.vertical input[type="number"],
.vertical textarea,
.vertical select {
display: block; /* One input per line. */
min-width: 20rem; /* Roughly half the page. */
}
.vertical input[type="number"] {
min-width: 10rem; /* Numbers don't need to be so wide. */
width: 10rem;
}
.vertical label {
display: block; /* One label per line. */
margin-top: .5em; /* Clear from the previous input. */
}
/* HORIZONTAL FORM */
form.horizontal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
form.horizontal label {
width: 30%;
}
form.horizontal > div {
width: 65%;
margin-bottom: 1em;
}
form.horizontal input[type=submit],
form.horizontal button[type=submit] {
margin-left: 35%; /* Align submit buttons with inputs. */
}
form.horizontal span { /* Help text, put below the input. */
display: block;
margin-left: .2em;
}
/* PERMALINK MARKERS */
/* Style permalink markers in headers. h2-h6 headers. The HTML is assumed to
* look like:
*
* Hello, CSS!
*
* Note the space between the and text matters, otherwise it will look bad
* in text browsers.
*/
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-size: .7em; /* Doesn't need to be so large. */
line-height: 0; /* Don't affect line-height of header. */
color: #999; /* Use subdued colour, don't need to stand out too much. */
}
h1 a:after, h2 a:after, h3 a:after, h4 a:after, h5 a:after, h6 a:after {
content: "¶"; /* So it won't get copy/pasted. */
/* Alternative:
content: "🔗";
content: "§";
content: "[link]";
*/
}
/* Alternative: put it before the element, in the page margin. Not done for h1
* as that's centre-aligned by default, so it looks weird. */
/*
h2, h3, h4, h5, h6 {
position: relative;
}
h2 a, h3 a, h4 a, h5 a, h6 a {
position: absolute;
left: -1em;
font-size: .8em;
line-height: 1.6em;
}
*/
/* POSTSCRIPT */
/* A "postscript" is useful for adding things after the main text, such as a
* footnotes section, feedback section, etc.
*
* It doesn't need to be at the end of the document, and also fits well at the
* end of a chapter.
*/
.postscript {
margin-top: 3em; /* Clear a bit from regular content. */
border-top: 1px solid /*bordercolor*/#aaa; /* Border to separate. */
font-size: .9em; /* Slightly smaller text. */
position: relative; /* So we can place the header. */
}
.postscript + .postscript {
margin-top: 2em; /* Less margin for subsequent footnotes. */
}
.postscript > strong {
font-style: normal; /* Override the italics. */
position: absolute; /* Move to the to align with the border. */
top: -1em;
left: 1em;
background-color: /*bgcolor*/#fff; /* Add background colour and padding to hide the border. */
padding: 0 .5em;
}
.postscript > p {
margin: 1em 2em /* Make margin same as list. */
}
/* Make the border take up the page padding if the screen is wide enough. */
@media (min-width: /*bodywidth*/54rem) {
.postscript {
margin-left: /*padx*/-4em; /* Put the div in the margin too, so the border is wider. */
width: calc(100% + /*padx*/8em);
padding: 0 /*padx*/4em; /* Add page margin. */
}
.postscript > strong {
left: /*padx*/6em;
}
}