fenrispunk/static/style/theme.css

/* General ---------------------------------------------------------------- */

/* Default light theme */
:root, :root.dark {
    /* Font declarations */
    --sans-font: Noto Sans, Helvetica, sans-serif;
    --mono-font: Noto Mono, Courier, monospace;

    /* Effect transitions */
    --link-trans: color 0.5s, background 0.5s, ease-in-out;
    --img-trans: opacity 0.5s ease-in-out;


    /* Palette */
    --orange: #aaaaff;
    --dark-orange: #ca8aff;
    --light-gray: #c8c8c8;     /* (HS)L: 200/255 */
    --gray: #808080;           /* (HS)L: 128/255 */
    --gray-240: #f0f0f0;       /* (HS)L: 240/255 */
    --gray-100: #646464;       /* (HS)L: 100/255 */
    --gray-50: #000000;        /* (HS)L: 50/255 */
    --green: #00ff00;
    --green-desat: #40ff5c;



    /* Sections */
    --tr-even-row-color: #323264;
    --table-column-border-color: #0077cc;
    --bg-color: var(--gray-50);
    --text-color: var(--light-gray);
    --heading-color: var(--light-gray);
    --link-color: var(--orange);
    --link-hover-color: var(--light-gray);
    --link-visited-color: var(--dark-orange);
    --nav-link-color: var(--light-gray);
    --nav-link-hover-color: var(--orange);
    --main-title-link-color: var(--link-color);
    --main-title-link-hover-color: var(--link-hover-color);
    --toc-title-color: var(--gray);
    --toc-bg-color: var(--gray-35);
    --toc-link-color: var(--link-color);
    --toc-link-hover-color: var(--link-hover-color);

    /* Syntax highlighting */
    --code-border-color: var(--light-gray);
    --code-bg-color: var(--gray-240);
    --code-text-color: var(--gray);
    --code-error-color: #c60901;
    --code-datatype-color: var(--gray-50);
    --code-string-color: var(--orange);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: var(--sans-font);
    font-size: 62.5%;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
    word-wrap: break-word;
}
h1 {
    margin: 4rem 0 2rem;
    font-size: 2.8rem;
}
h2 {
    margin: 3rem 0 1.5rem;
    font-size: 2.4rem;
}
h3 {
    margin: 3rem 0 1.5rem;
    font-size: 2.2rem;
}

a {
    font-weight: 500;
    color: var(--link-color);
    text-decoration: underline;
}
    a:hover {
        color: var(--link-hover-color);
        transition: var(--link-trans);
    }
    a:visited { color: var(--link-visited-color); }


pre {
    border: 1px solid var(--green-desat);
}
code {
    font-family: var(--mono-font);
}
blockquote {
    background: #328;
    color: #CCC;
    font-family: serif;
}

table {
    width: 100%;
}
tr:nth-child(even) {
    background-color: var(--tr-even-row-color);
}
tr th {
    border-bottom: 1px solid var(--table-column-border-color);
}
tr td {
    border-bottom: 1px dotted var(--table-column-border-color);
}

dd {
    margin-left: 40px;
}


/* Sections --------------------------------------------------------------- */

.header {
    margin: 5rem auto;
}

    .header-title {
        text-align: center;
        margin: 0 auto 1.6rem;
        font-size: 3.8rem;
    }
    .header-title__link, .header-title__link:hover {
        background: none;
        color: var(--heading-color);
        text-decoration: underline;
    }


.nav {
    margin: 0 auto;
}
    .nav__link {
        font-size: 2rem;
        font-weight: 400;
        color: var(--nav-link-color);
        text-decoration: underline;
    }
    .nav__link:hover {
        color: var(--nav-link-hover-color);
    }


.main {
    font-size: 1.6rem;
    word-wrap: break-word;
}

    .main-title { font-size: 2.6rem; }

    .main-title a { color: var(--main-title-link-color); }
    .main-title a:hover { color: var(--main-title-link-hover-color); }

    .main p { margin: 1.5rem 0; }

    .main ol { margin: 0 0 0 2rem; }
    .main ol li { margin: 1rem 0; }

    .main ul {
        list-style: disc outside;
        margin: 0 0 0 2rem;
    }
    .main ul li { margin: 1rem 0; }
    .main ul li p { margin: 0; }
    .main ul li ul li { margin: 0 0 0 2.6rem; }


.toc {
    margin: 2rem 0 4rem;
    background: var(--toc-bg-color);
    border-radius: 0.5rem;
}

    .toc-title {
        margin: 0 0 1rem;
        font-size: 2rem;
        font-weight: 600;
        color: var(--toc-title-color);
    }

    .toc a {
        font-weight: 400;
        color: var(--toc-link-color);
    }
    .toc a:hover { color: var(--toc-link-hover-color); }

    .toc ul { list-style: none; }
    .toc ul li:before { content: unset; }
    .toc ul li ul li { margin: 0 0 0 1.2rem; }
    .toc ul li ul li ul li { margin: 0 0 0 2.6rem; }


.footer {
    margin: 4rem auto;
    font-size: 1.2rem;
}

    .footer p {
        margin: 1rem 0;
        text-align: center;
    }

    .footer a[rel="license"]:hover {
        background: none;
    }
    .footer a[rel="license"] img {
        margin: 1rem auto;
        border: 0;
        opacity: 0.8;
    }
    .footer a[rel="license"] img:hover {
        opacity: 1.0;
        transition: var(--img-trans);
    }

.logo {
    margin: 0px auto;
    display: block;
    max-height: 480px;
}

.todo {
    color: #ff9c00;
    border: 1px solid #ff9c00;
    padding: 0 5px;
}

.done {
    color: violet;
    border: 1px solid violet;
    padding: 0 5px;
}


/* Syntax highlighting ---------------------------------------------------- */

div.sourceCode {
    padding: 0 1rem;
    border-top: 1.2rem solid var(--code-border-color);
    border-radius: 0.5rem;
    background: var(--code-bg-color);
}
pre.sourceCode {
    padding: 2rem 0;
    background: var(--code-bg-color);
    overflow: auto;
}
.sourceLine, .sourceLine:hover {
    background: var(--code-bg-color);
    color: var(--code-text-color);
}
.sourceCode .er { color: var(--code-error-color); }
.sourceCode .dt { color: var(--code-datatype-color); }
.sourceCode .st { color: var(--code-string-color); }

/* Indentation adjustment hack */
code.sourceCode span[id^="cb"] { margin: 0 0 0 -4rem; }
code.sourceCode:first-child { margin: 0 0 0 4rem; }
code.sourceCode .dt { margin: 0 0 0 -2rem; }


/* Media queries ---------------------------------------------------------- */

@media (max-width: 689px) {
    .header, .main, .footer { padding: 0 2rem; }

    /* Scale header logo */
    .header-title__link img {
        max-width: 90%;
        position: relative;
        object-fit: cover;
        object-position: center;
    }

    /* Stack nav items */
    .nav { width: 18rem; }
    .nav__link { display: block; }

    /* TOC spans full width */
    .toc {
        margin: 0 -2rem;
        padding: 4rem 2rem;
    }
}


@media (min-width: 690px) {
    .header, .main, .footer { padding: 0 5rem; }

    /* Horizontal nav */
    .nav { text-align: center; }
    .nav__link {
        margin: 0 1rem;
        display: inline;
    }

    /* TOC is 45% of min-width */
    .toc {
        margin: 0;
        padding: 4rem;
        width: 31rem;
    }
}


@media (min-width: 960px) {
    /* Center sections, set fixed width */
    .header, .main, .footer {
        width: 95rem;
        margin-left: auto;
        margin-right: auto;
    }
}