@use "lib/_var";

body {
    background-color: var(--background-color);
    font-family: var(--font-body);
    color: var(--text-color);
}

main {
    margin: 20px;
}

header {
    display: grid;
    grid-template-columns: 1fr 15rem;
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 
        "nav nav"
        "title title"
        "title title";
    row-gap: 40px;
    margin-bottom: 5vh;

    div.title {
        grid-area: title;

        h1 {
            font-family: var(--font-heading);
            font-weight: 300;
            font-size: 6rem;
            line-height: 1;
            letter-spacing: -0.08em;
        }

        p.description {
            margin: 0.5em 0;
            opacity: 80%;
        }
    }
}

h2 {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 350;
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin: 0.5em 0;
}

ul.post-list {
    display: grid;
    grid-template-columns: 15rem 1fr;
    row-gap: 0.8rem;
    column-gap: 4rem;
    align-items: last baseline;

    li {
        display: contents;

        div.post-meta {
            span {
                text-wrap-mode: nowrap;
                text-transform: uppercase;
                display: block
            }

            span.published-date {
                font-family: var(--font-code);
                font-variant-numeric: tabular-nums;
            }

            span.description {
                font-family: var(--font-code);
            }

        }

        a {
            display: block;
            font-family: var(--font-heading);
            color: var(--text-color);
            font-size: 1.5rem;
        }
    }
}

@media (max-width: 600px) {
    header {
        grid-template-columns: 1fr;
        grid-template-rows: auto;

        div.title h1 {
            font-size: 4rem;
        }
    }

    h2 {
        font-size: 2rem;
    }

    ul.post-list {
        li {
            display: block;

            div.post-meta {
                opacity: 65%;
                overflow: hidden;
                text-overflow: ellipsis;

                span {
                    display: inline;
                    font-size: 0.8rem;
                }

                span.published-date::after {
                    content: ' · '
                }
            }
            
            a {
                font-size: 1.25rem;
            }
        }
        
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}