forgefed/static/theme.css

/* Font links ------------------------------------------------------------- */

@font-face {
    font-family:"Open Sans";
    font-weight: 400;
    font-style: normal;
    src: local("Open Sans Regular"),
         url("/fonts/open-sans/open-sans-regular.woff2") format("woff2"),
         url("/fonts/open-sans/open-sans-regular.woff") format("woff");
}
@font-face {
    font-family:"Open Sans";
    font-weight: 400;
    font-style: italic;
    src: local("Open Sans Italic"),
         url("/fonts/open-sans/open-sans-italic.woff2") format("woff2"),
         url("/fonts/open-sans/open-sans-italic.woff") format("woff");
}
@font-face {
    font-family:"Open Sans";
    font-weight: 500;
    font-style: normal;
    src: local("Open Sans SemiBold"),
         url("/fonts/open-sans/open-sans-semibold.woff2") format("woff2"),
         url("/fonts/open-sans/open-sans-semibold.woff") format("woff");
}
@font-face {
    font-family:"Open Sans";
    font-weight: 500;
    font-style: italic;
    src: local("Open Sans SemiBold Italic"),
         url("/fonts/open-sans/open-sans-semibold-italic.woff2") format("woff2"),
         url("/fonts/open-sans/open-sans-semibold-italic.woff") format("woff");
}
@font-face {
    font-family:"Open Sans";
    font-weight: 600;
    font-style: normal;
    src: local("Open Sans Bold"),
         url("/fonts/open-sans/open-sans-bold.woff2") format("woff2"),
         url("/fonts/open-sans/open-sans-bold.woff") format("woff");
}
@font-face {
    font-family:"Open Sans";
    font-weight: 600;
    font-style: italic;
    src: local("Open Sans Bold Italic"),
         url("/fonts/open-sans/open-sans-bold-italic.woff2") format("woff2"),
         url("/fonts/open-sans/open-sans-bold-italic.woff") format("woff");
}

@font-face {
    font-family:"Hack";
    font-weight: 400;
    font-style: normal;
    src: local("Hack Regular"),
         url("/fonts/hack/hack-regular.woff2") format("woff2"),
         url("/fonts/hack/hack-regular.woff") format("woff");
}


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

/* Default light theme */
:root, :root.light {
    /* Font declarations */
    --sans-font: Open Sans, Noto Sans, Helvetica, sans-serif;
    --mono-font: Hack, 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: #ff851b;
    --dark-orange: #c27d42;
    --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: #323232;        /* (HS)L: 50/255 */

    /* Sections */
    --bg-color: #fff;
    --text-color: var(--gray-100);
    --heading-color: var(--gray-100);
    --link-color: var(--orange);
    --link-hover-color: var(--gray-50);
    --link-visited-color: var(--dark-orange);
    --nav-link-color: var(--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-240);
    --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: none;
}
    a:hover {
        color: var(--link-hover-color);
        transition: var(--link-trans);
    }
    a:visited { color: var(--link-visited-color); }

code {
    font-family: var(--mono-font);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

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


.nav {
    margin: 0 auto;
}
    .nav__link {
        font-size: 2rem;
        font-weight: 400;
        color: var(--nav-link-color);
        text-decoration: none;
    }
    .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);
    }


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


/* Misc ------------------------------------------------------------- */

#theme-selector:hover {
    cursor: pointer;
}

/* Dark theme ------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root {
        /* Palette */
        --orange: #ff851b;
        --dark-orange: #c27d42;
        --light-gray: #c8c8c8;     /* (HS)L: 200/255 */
        --gray: #808080;           /* (HS)L: 128/255 */
        --gray-50: #323232;        /* (HS)L: 50/255 */
        --gray-35: #232323;        /* (HS)L: 35/255 */

        /* Sections */
        --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: #ed9c55;               /* light orange */
        --code-bg-color: var(--gray-35);
        --code-text-color: #555;                    /* (HS)L: 85/255 */
        --code-error-color: #c60901;                /* red */
        --code-datatype-color: var(--gray);
        --code-string-color: #ed9c55;
    }
}


/* Repeat inside a .dark class to continue to support theme selection links in
 * the nav. The .dark and .light classes allow users to override the media
 * query-detected setting via the selection links if desired. */
:root.dark {
    /* Palette */
    --orange: #ff851b;
    --dark-orange: #c27d42;
    --light-gray: #c8c8c8;     /* (HS)L: 200/255 */
    --gray: #808080;           /* (HS)L: 128/255 */
    --gray-50: #323232;        /* (HS)L: 50/255 */
    --gray-35: #232323;        /* (HS)L: 35/255 */

    /* Sections */
    --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: #ed9c55;               /* light orange */
    --code-bg-color: var(--gray-35);
    --code-text-color: #555;                    /* (HS)L: 85/255 */
    --code-error-color: #c60901;                /* red */
    --code-datatype-color: var(--gray);
    --code-string-color: #ed9c55;
}