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 {
    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;
}