@import url('fancy-code.css');
@import url('fonts/Jost/Jost.css');

@media (prefers-reduced-motion) {
    * {
        transition: none !important;
    }
}

:root {
    color-scheme: light dark;
}


html {
    font-family: sans-serif;

    color: light-dark(black, white);
    background: light-dark(#eee, #333);

    font-family: "Helvetica Neue", "Liberation Sans", Helvetica, sans-serif;
}

*:target {
    background: light-dark(#ffc, #330);
    padding: 8px;
    margin: -8px;
    border-radius: 8px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Futura", "Jost", "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;

    a {
        text-decoration: none;
    }

    a.toc-link::after {
        margin-left: 1ex;
        margin-top: .45em;
        font-size: 75%;
        display: inline-block;
        content: '#';
        opacity: 20%;
        text-decoration: none;
        transition: opacity 0.25s ease;
    }

    &:hover a.toc-link::after {
        opacity: 100%;
    }
}

.readmore {
    font-size: small;
    font-weight: light;
    font-style: italic;
}

blockquote {
    border: dashed light-dark(#333,#ccc) 1px;
    padding: 1ex 1em;
    font-style: italic;
    background: light-dark(#eee,#222);
}

body {
    display: grid;
    grid-template-areas:
        "header header"
        "categories categories"
        "content sidebar"
        "footer footer"
    ;
    grid-template-columns: 1fr calc(max(25%, 10em));
    grid-template-rows: min-content min-content 1fr min-content;
    background: light-dark(white, black);
    margin: 2em auto 1ex;
    padding-top: 1em;
    min-height: calc(100vh - 3em - 1ex);
    max-width: 1280px;
    border-radius: 2em;
}

a[href] {
    color: light-dark(#09c, #0cf);

    &::visited {
        color: light-dark(#079, #09c);
    }
}

header {
    grid-area: header;
    text-align: center;
    h1 { color: #777; }
}

main {
    grid-area: content;
    max-width: 100vw;
    padding: 0 1em;

    .posted {
        font-size: small;
        font-weight: light;
        font-style: italic;
    }

    ul.tags {
        list-style-type: none;
        display: inline;
        margin: 0;
        padding: 0;

        li {
            display: inline;
            margin: 0 0 0 1em;
            padding: 0;

            &::before {
                content: '#';
            }
        }
    }
}

#categories {
    grid-area: categories;
    text-align: center;

    margin: 1em 0;
    padding-bottom: 1em;
    border-bottom: dotted #777 1px;

    ul {
        display: flex;
        width: 100%;
        overflow: auto;
        list-style-type: none;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;

        li {
            display: block;
            margin: 0 1em;
            border-radius: 1ex;
            padding: 0;
            font-family: "Futura", "Jost", "Helvetica Neue", sans-serif;
            font-weight: 500;
            text-align: center;
            overflow: hidden;
            background: #ccf;

            &.home,
            &.home.here {
                flex-grow: 0;
                background: #335;
                color: white;
                a { color: white; }
            }

            &.here {
                color: black;
                background: #ccf;
                font-weight: 650;

            }

            a {
                color: black;
                text-decoration: none;
                display: block;
                width: calc(100% - 2em);
                padding: 1em;
                transition: background-color 0.25s ease;

                &:hover {
                    background: rgba(192,192,192,0.5);
                }
            }
        }
    }
}

#sidebar {
    grid-area: sidebar;

    section {
        margin-bottom: 1em;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        li {
            margin: 0 0 0 1em;
            padding: 0;
            text-indent: 1em hanging;
        }
    }

    ul.tags {
        li.clear::before {
            content: '☒\00a0';
        }

        li.checked::before {
            content: '☑︎\00a0';
        }

        li::before {
            content: '☐\00a0';
        }
    }

    .disclosure+.tags li.disclosure-toggle::before {
        content: '[';
        font-style: normal;
        color: rgba(0, 0, 0, 0.5);
        text-decoration: none;
    }

    .disclosure+.tags li.disclosure-toggle::after {
        content: ']';
        font-style: normal;
        color: rgba(0, 0, 0, 0.5);
        text-decoration: none;
    }

    .tags li.disclosure-toggle button {
        font-style: italic;
        text-decoration: underline;
        color: #900;
        border: none;
        padding: 0;
        margin: 0;
    }
}

footer {
    grid-area: footer;

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    li {
        display: inline;
        margin: 0 0 0 1ex;
    }
    li+li::before {
        content: '•';
        padding-right: 1ex;
    }
}

article {
    margin-bottom: 1em;

    nav.toc {
        float: right;
        font-size: small;
        padding: 1ex;
        margin: 0 0 1em 1em;
        border: solid light-dark(black, white) 1px;
        border-radius: 1ex;
        background: light-dark(#eee, #222);
    }
}