158 lines
2.3 KiB
CSS
158 lines
2.3 KiB
CSS
/* Article-style layout. Center everything and give it a maximum width */
|
|
|
|
body {
|
|
max-width: 1200px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Choose more pretty colors than vanilla HTML */
|
|
|
|
body {
|
|
background-color: rgb(255, 253, 246);
|
|
color: #55423e;
|
|
}
|
|
|
|
/* Set up typography */
|
|
|
|
body,
|
|
pre,
|
|
code {
|
|
font-family: 'RecVar', sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
:root {
|
|
--recursive-mono: 0.0;
|
|
--recursive-casl: 1.0;
|
|
--recursive-wght: 400;
|
|
--recursive-slnt: -2.0;
|
|
--recursive-crsv: 0.5;
|
|
}
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
font-variation-settings:
|
|
"MONO" var(--recursive-mono),
|
|
"CASL" var(--recursive-casl),
|
|
"wght" var(--recursive-wght),
|
|
"slnt" var(--recursive-slnt),
|
|
"CRSV" var(--recursive-crsv);
|
|
}
|
|
|
|
h1 {
|
|
--recursive-slnt: 0.0;
|
|
--recursive-casl: 0.0;
|
|
--recursive-wght: 900;
|
|
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
h2 {
|
|
--recursive-slnt: 0.0;
|
|
--recursive-casl: 0.5;
|
|
--recursive-wght: 800;
|
|
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h3 {
|
|
--recursive-slnt: 0.0;
|
|
--recursive-casl: 0.5;
|
|
--recursive-wght: 700;
|
|
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
--recursive-mono: 1.0;
|
|
--recursive-casl: 0.0;
|
|
--recursive-slnt: 0.0;
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
--recursive-wght: 700;
|
|
}
|
|
|
|
i,
|
|
em {
|
|
--recursive-slnt: -16.0;
|
|
}
|
|
|
|
/* Lay out elements a bit more compactly */
|
|
|
|
p,
|
|
pre {
|
|
margin: 6px 0;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin: 12px 0;
|
|
}
|
|
|
|
/* Lay out elements a little less compactly (actually just have some blank space past the end) */
|
|
|
|
body {
|
|
padding-bottom: 10rem;
|
|
}
|
|
|
|
/* Make code examples a little prettier by giving them visual separation from the rest of the page */
|
|
|
|
pre {
|
|
padding: 8px 12px;
|
|
margin: 12px 0;
|
|
background-color: rgba(0, 0, 0, 5%);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Also don't let images get out of hand */
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Fix the default blue and ugly purple links normally have */
|
|
|
|
a {
|
|
color: #004ec8;
|
|
}
|
|
|
|
a:visited {
|
|
color: #6c2380;
|
|
}
|
|
|
|
/* Make blockquotes a bit prettier */
|
|
|
|
blockquote {
|
|
margin: 0;
|
|
padding: 2px 12px;
|
|
border-left: 4px solid rgba(0, 0, 0, 15%);
|
|
}
|
|
|
|
/* And tables. */
|
|
|
|
table {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
table,
|
|
th,
|
|
td {
|
|
border: 1px solid rgba(0, 0, 0, 30%);
|
|
border-collapse: collapse;
|
|
padding: 4px 10px;
|
|
}
|
|
|
|
th {
|
|
background-color: rgba(0, 0, 0, 5%);
|
|
|
|
--recursive-wght: 700;
|
|
--recursive-casl: 0.5;
|
|
}
|