FAQ | This is a LIVE service | Changelog

GitLab has been upgraded to 14.4. See what's new in the Changelog.

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

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