@layer variables, base, darkmode;


/*
 * These are, well, variables. Put lots of them here, but
 * don't turn everything into a variable.
 */
@layer variables {
    :root {
        --text-color: #333333;
        --footer-background: #f0f0f0;
        --footer-border-color: #e0e0e0;
        --link-color: #0000e0;
        --link-hover-color: #0000ff;
        --link-subtle-color: #333333;
    }
}


/*
 * These styles are for the default appearance of elements.
 * There should be very few classes styled here, if any.
 */
@layer base {
    /* General */
    body {
        margin: 0;
        line-height: 1.5em;
        color: var(--text-color);
        font-family: helvetica, arial, sans-serif;
    }

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

    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 0;
        line-height: 1.2em;
        margin-top: 1em;
    }

    a:link, a:visited {
        color: var(--link-color);
        text-decoration: none;
    }

    a:hover, a:active {
        color: var(--link-hover-color);
        text-decoration: underline;
    }


    /* Single column layout */
    nav section, header section, main, footer section {
        max-width: 40em;
        margin-left: auto;
        margin-right: auto;
        padding: 0 0.5em;
    }


    /* Navigation panel */
    nav {
        background: #333333;
        border-bottom: thin solid #111111;
        line-height: 3em;
    }

    nav a {
        margin-right: 1em;
    }

    nav a:link, nav a:visited {
        color: #cccccc;
    }

    nav a:hover, nav a:active {
        color: #ffffff;
        text-decoration: none;
    }

    @media screen and (min-width: 600px) {
        nav .links {
            float: right;
        }
    }


    /* Footer */
    footer {
        background: var(--footer-background);
        border-top: thin solid var(--footer-border-color);
        margin-top: 2em;
        padding: 1em 0;
        box-shadow: 0 100vh 0 100vh var(--footer-background);
        text-align: center;
    }

    footer section p {
        font-size: 0.8em;
    }

    footer a {
        margin-right: 1em;
    }

    footer a:last-child {
        margin-right: 0;
    }


    /* Posts */
    article {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    article h2 a:link, article h2 a:visited,
    article h1 a:link, article h1 a:visited,
    .more:link, .more:visited {
        color: var(--link-subtle-color);
    }

    article h2 a:hover, article h2 a:active,
    article h1 a:hover, article h1 a:active,
    .more:hover, .more:active {
        color: #777777;
    }

    p.meta {
        margin-top: 0;
        font-size: 0.8em;
        color: #777777;
        font-style: italic;
    }

    p.summary {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }

    div .more {
        margin-top: 0;
        font-weight: bold;
    }


    /* RSS */
    .rss {
        padding: 0.3em 0.35em;
        border-radius: 0.25em;
        font-size: 0.75em;
        font-weight: bold;
    }

    .rss:link, .rss:visited, .rss:hover, .rss:active {
        color: #ffffff;
        text-decoration: none;
    }

    .rss:link, .rss:visited {
        background: #ff6600;
    }

    .rss:hover, .rss:active {
        background: #ff8822;
    }
}


/*
 * These styles are for overriding things when the user wants
 * dark mode.
 *
 * Fun fact: link-color is from the blue heart emoji.
 */
@layer darkmode {
    @media (prefers-color-scheme: dark) {
        :root {
            color-scheme: dark;

            --text-color: #dbdbdb;
            --footer-background: #1f2020;
            --footer-border-color: #393939;
            --link-color: #0eabf7;
            --link-hover-color: #5de9e3;
            --link-subtle-color: #d0d0d0;
        }
    }
}