treehouse/static/css/main.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: #333;
}

/* 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 {
    min-width: 70%;
    margin-left: 12px;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 5%);
}

/* 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;
}

/* The tree indents shouldn't be too spaced out */

.tree ul {
    padding-left: 24px;
}

/* Make the tree have + and - instead of the default details/summary arrow */

.tree details>summary {
    list-style: none;
    cursor: pointer;
}

.tree li {
    list-style: none;
}

/* Also, lone paragraphs should have a bullet point beside to give you a bit of a visual anchor */
.tree li.leaf>p:first-child::before,
/* Lone paragraphs include <pre> elements */
.tree li.leaf>pre:first-child::before {
    content: '·';
    opacity: 0.5;

    display: inline-block;
    height: 0;

    margin-left: -1.5rem;
    width: 1.5rem;

    --recursive-mono: 1.0;
    font-size: 14px;
}

/* Dirty hack to make pres render the way I want this to */
.tree li.leaf>pre:first-child::before {
    transform: translateX(-8px);
}

pre {
    transform: translateX(8px);
    border-radius: 6px;
}

.tree details::before {
    content: '+';
    opacity: 0.5;

    display: inline-block;
    margin-left: -1em;

    margin-left: -1.5rem;
    width: 1.5rem;

    vertical-align: middle;

    --recursive-mono: 1.0;
}

.tree details[open]::before {
    content: '-';
}

.tree details>*:first-child,
.tree li.leaf>*:first-child {
    display: inline-block;
}