You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
726 lines
23 KiB
CSS
726 lines
23 KiB
CSS
/* 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 <pre><code> */
|
|
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 <th>). */
|
|
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 <hr> 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:
|
|
*
|
|
* <h2 id="hello">Hello, CSS! <a href="#hello"></a></h1>
|
|
*
|
|
* Note the space between the </a> 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;
|
|
}
|
|
}
|