FAQ | This is a LIVE service | Changelog

Commit 7a8819e8 authored by Orion Henry's avatar Orion Henry Committed by Martin Kleppmann

Web article style files

parents
/* RESET ===================================== */
:root {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 16px;
-moz-osx--text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
font-smooth: auto;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, main, summary, time, mark, audio, video {
border: 0;
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
/* LOAD FONTS ================================ */
/* Merriweather Serif, for long form body text */
@font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 400;
src: local("Merriweather Regular"), local("Merriweather-Regular"), url("assets/merriweather/merriweather-v20-latin-regular.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
url("assets/merriweather/merriweather-v20-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 700;
src: local("Merriweather Bold"), local("Merriweather-Bold"), url("assets/merriweather/merriweather-v20-latin-700.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
url("assets/merriweather/merriweather-v20-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* Merriweather Sans, for asides, caption, nav */
@font-face {
font-family: "Merriweather Sans";
font-style: normal;
font-weight: 300;
src: local("Merriweather Sans Light"), local("MerriweatherSans-Light"), url("assets/merriweather/merriweather-sans-v10-latin-300.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
url("assets/merriweather/merriweather-sans-v10-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
font-family: "Merriweather Sans";
font-style: normal;
font-weight: 400;
src: local("Merriweather Sans"), local("MerriweatherSans-Regular"), url("assets/merriweather/merriweather-sans-v10-latin-regular.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
url("assets/merriweather/merriweather-sans-v10-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
font-family: "Merriweather Sans";
font-style: normal;
font-weight: 700;
src: local("Merriweather Sans Bold"), local("MerriweatherSans-Bold"), url("assets/merriweather/merriweather-sans-v10-latin-700.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
url("assets/merriweather/merriweather-sans-v10-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
font-family: "Merriweather Sans";
font-style: normal;
font-weight: 300;
src: local("Merriweather Sans Light"), local("MerriweatherSans-Light"), url("assets/merriweather/merriweather-sans-v10-latin-300.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
url("assets/merriweather/merriweather-sans-v10-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* Fira Mono, for code, numerical data ------- */
@font-face {
font-family: 'Fira Mono';
font-style: normal;
font-weight: 400;
src: local('Fira Mono Regular'), local('FiraMono-Regular'), url('assets/fira/fira-mono-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('assets/fira/fira-mono-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
font-family: 'Fira Mono';
font-style: normal;
font-weight: 500;
src: local('Fira Mono Medium'), local('FiraMono-Medium'), url('assets/fira/fira-mono-v7-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('assets/fira/fira-mono-v7-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* SET FONTS --------------------------------- */
/* Serif, long form text, default rem size */
body {
font-family: "Merriweather", serif;
}
/* Sans Serif, most other text */
aside, figcaption, nav, header>ul li, h1, h2, h3, h4, blockquote, figure table, .nav {
font-family: "Merriweather Sans", sans-serif;
font-weight: 400;
}
/* Monospace */
pre, code {
font-family: 'Fira Mono', monospace;
}
/* GENERAL STYLE ============================= */
body {
--aside-width: 12.5rem;
--column-gap: 2rem;
--padding: 1rem;
align-self: start;
background-color: #fcfcfc;
box-sizing: border-box;
display: grid;
grid-column-gap: 0;
grid-template-columns:
[viewport-start] minmax(0, 1fr)
[page-start] var(--column-gap)
[article-start text-start] minmax(auto, calc((var(--aside-width) * 3) + (var(--column-gap) * 2)))
[text-end] var(--column-gap)
[margin-start] var(--aside-width)
[margin-end article-end] var(--column-gap)
[page-end] minmax(0, 1fr)
[viewport-end];
padding: 0;
}
/* Link style -------------------------------- */
a {
background-image: url("assets/splat-underline-2-default.svg");
background-size: 100% 4px;
background-position: bottom;
background-repeat: no-repeat;
color: #000;
padding-bottom: .05rem;
text-decoration: none;
-webkit-tap-highlight-color:hsla(1, 76%, 51%, .4);
}
figcaption a, aside a {
padding-bottom: 0;
}
nav a {
background-image: none;
}
a:hover{
background-image: url("assets/splat-underline-2-hover.svg");
color: #D70A1B;
}
p.outro span a {
background-image: url("assets/splat-underline-1-default.svg");
padding-bottom: .1rem;
}
p.outro span a:hover{
background-image: url("assets/splat-underline-1-hover.svg");
}
::-moz-selection,
::selection{
background: hsla(1, 0%, 75%, 0.4);
text-shadow: none;
}
/* Headers ----------------------------------- */
h1 {
font-size: 2rem;
font-weight: 300;
line-height: 2.5rem;
margin-bottom: 1rem;
}
h2 {
font-size: 1.5rem;
line-height: 2rem;
margin-bottom: 1rem;
margin-top: 2rem;
}
h2#appendix {
background-image: url("assets/splat-separator-1.svg");
background-repeat: no-repeat;
background-position: top center;
background-size: 100% 5px;
margin-top: 5rem;
margin-right: calc(var(--aside-width) + var(--column-gap));
padding-right: 0;
padding-top: 4rem;
}
h3 {
font-size: 1.25rem;
line-height: 1.75rem;
margin: 2rem 0 1rem 0;
}
h4 {
margin: 2rem 0 1rem 0;
}
h1+h2, h2+h3 {
margin: -.5rem 0 1rem 0;
}
/* Text -------------------------------------- */
p, li {
-ms-hyphens: auto;
-webkit-hyphens: auto;
font-size: 1rem;
hyphens: auto;
line-height: 1.5rem;
margin: 0 0 1.5rem 0;
text-align: justify;
}
small, sup {
font-size: .8125em;
}
strong {
font-weight: 700;
}
em {
font-style: italic;
}
sup {
display: inline-block;
padding-left: .125rem;
padding-right: .125rem;
position: relative;
top: .125rem;
vertical-align: top;
line-height: .75rem;
}
sup a {
background: none;
text-decoration: underline;
}
sup a:hover {
background: none;
text-decoration: underline;
}
/* Outro <p>, in Header and Conclusion ------- */
p.outro {
margin-bottom: -1rem;
text-align: left;
}
p.outro a {
border: none;
-ms-hyphens: none;
-webkit-hyphens: none;
hyphens: none;
white-space: nowrap;
}
.splat {
background-image: url("assets/splat-span.svg");
background-position: bottom right;
background-repeat: no-repeat;
background-size: 1em;
}
/* The last splat */
p.outro span {
background-image: url("assets/splat-article-last.svg");
background-position: bottom right;
background-repeat: no-repeat;
display: inline-block;
height: 2.5rem;
padding-right: 1.3rem;
}
/* HEADER ==================================== */
body>header {
grid-column: article;
padding: var(--padding);
position: relative;
margin-top: var(--padding);
}
body>header>* {
padding-right: calc(var(--aside-width) + var(--column-gap));
}
/* byline ------------------------------------ */
header #byline {
margin-bottom: 1rem;
margin-top: -3.5rem;
}
header>#byline li {
list-style-type: none;
margin: 0;
padding: 0;
text-indent: inherit;
line-height: 1.5rem;
}
header>#byline li::before {
content:none;
margin: 0;
padding: 0;
}
header #byline li:first-of-type {
margin-bottom: -.125rem;
}
header #byline #logo img {
display: block;
margin-left: -3rem;
width: var(--aside-width);
}
/* NAV ======================================= */
/* Table of Contents ------------------------- */
body>nav {
background-color: #f2f2f2;
border-radius: calc(var(--padding)/4);
display: grid;
grid-column: page;
grid-template-columns: var(--column-gap) [article-start nav-start] minmax(auto, calc((var(--aside-width) * 3) + (var(--column-gap) * 2))) [nav-end] var(--column-gap) [margin-start] var(--aside-width) [article-end] var(--column-gap);
margin-top: calc(var(--padding) * 2);
padding: 0;
padding: var(--padding) 0 var(--padding) 0;
position: relative;
}
body>nav h2 {
grid-column: article;
margin-bottom: 0;
margin-top: 1rem;
}
body>nav>div {
grid-column: nav;
padding: var(--padding);
padding-bottom: 0;
}
body>nav>div:last-child {
padding: var(--padding);
}
body>nav>h2 {
padding: 0 var(--padding) 0 var(--padding);
}
body>nav>div h3 {
margin-top: 0;
}
body>nav li {
line-height: 1.5rem;
margin-bottom: 0;
-ms-hyphens: manual;
-webkit-hyphens: manual;
hyphens: manual;
text-align: left;
}
body>nav ul, body>nav ol {
margin-bottom: 0;
}
body>nav li ul {
margin-bottom: 0rem;
margin-top: 0rem;
}
/* ARTICLE =================================== */
body>article {
grid-column: article;
margin-bottom: 6rem;
padding:1rem;
position: relative;
}
body>article>* {
padding-right: calc(var(--aside-width) + var(--column-gap) + var(--padding));
}
body>article>section {
margin-bottom: 3rem;
padding-right: var(--padding);
}
/* Blockquotes ------------------------------- */
blockquote {
-ms-hyphens: none;
-webkit-hyphens: none;
border-left: .2rem solid #f2f2f2;
hyphens: none;
line-height: 1.5rem;
margin-bottom: 1rem;
padding: 1rem 0 1rem .8rem;
}
blockquote, blockquote>* {
-ms-hyphens: none;
-webkit-hyphens: none;
font-size: 1rem;
font-weight: 300;
hyphens: none;
line-height: 1.5rem;
}
blockquote footer {
font-weight: 400;
}
blockquote footer::before {
content: "– "
}
/* Lists ------------------------------------- */
/* unordered lists */
ul, ol {
list-style: none;
margin-bottom: 1.5rem;
margin-left: 1rem;
}
li {
line-height: 1.5rem;
margin-bottom: .5rem;
text-align: justify;
text-indent: -1em;
white-space: normal;
}
li::before {
content: "■";
font-family: 'Fira Mono', monospace;
font-weight: 500;
margin-right: .5rem;
}
li h3, li h4 {
display: inline;
font-size: inherit;
}
li ul {
margin-top: .5rem;
}
/* ordered lists */
ol {
counter-reset: orderedlist;
}
ol li {
counter-increment: orderedlist;
}
ol li::before {
content: counter(orderedlist);
}
/* FIGURES =================================== */
figure {
margin-bottom: var(--padding);
margin-right: calc(var(--padding)*-1);
padding-right: calc(var(--aside-width) + var(--column-gap) + var(--padding));
position: relative;
border-radius: calc(var(--padding)/4);
}
figure img, figure video {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 1px solid #f2f2f2;
box-sizing: border-box;
}
figcaption {
background-color: #f2f2f2;
margin-right: 0;
top: 0;
}
/* Code -------------------------------------- */
code {
background-color: #f2f2f2;
border-radius: calc(var(--padding)/4);
font-size: .8125rem;
padding: .125rem;
z-index: -1;
}
code span {
color: #7c7c7c;
font-style: italic;
}
figure>pre {
background-color: #020202;
border-radius: calc(var(--padding)/4);
box-sizing: border-box;
color: #f2f2f2;
display: block;
font-family: 'Fira Mono', monospace;
font-size: .8125rem;
line-height: 1.5rem;
max-width: 100%;
overflow: auto;
padding: var(--padding);
white-space: pre-wrap;
}
figure>pre code {
background: transparent;
}
figure>code::selection {
background-color: #D70A1B;
}
figcaption code, table code {
background-color: hsla(360, 100%, 0%, 0.05);
}
/* figure utility classes -------------------- */
figure .grid {
display: grid;
grid-column-gap: var(--padding);
grid-row-gap: var(--padding);
}
figure .grid>* {
display: block;
grid-column: auto;
width: auto;
}
figure .grid-columns-2 {
grid-template-columns: repeat(2, 1fr);
}
figure .grid-columns-3 {
grid-template-columns: repeat(3, 1fr);
}
figure .grid-columns-4 {
grid-template-columns: repeat(4, 1fr);
}
figure .grid-columns-5 {
grid-template-columns: repeat(5, 1fr);
}
figure .grid-columns-6 {
grid-template-columns: repeat(6, 1fr);
}
figure .grid {
padding-bottom: 1rem;
}
figure .grid:last-of-type {
padding-bottom: 0;
}
/* Tables ------------------------------------ */
figure table {
border: 1px solid #f2f2f2;
border-collapse: separate;
border-radius: calc(var(--padding)/4);
border-spacing: 0;
box-sizing: border-box;
text-align: left;
width: 100%;
}
figure table tr:nth-child(even) {
background-color: #fcfcfc;
}
figure table tr:nth-child(odd) {
background-color: #f2f2f2;
}
figure table th,
figure table td,
figure table td p
{
text-align: left;
}
figure table th {
font-weight: 700;
}
figure table th, figure table td {
border-right: 1px solid #f2f2f2;
font-family: 'Merriweather Sans', sans-serif;
font-size: .8125rem;
padding: 1rem !important;
width: auto;
}
figure table th:first-of-type, figure table td:first-of-type {
padding-left: 0;
}
figure table th:last-of-type, figure table td:last-of-type {
border-right: none;
padding-right: 0;
}
figure table p {