#overview {
    --overview--odd-month-border-color: var(--color--secondary);
    --overview--even-month-border-color: rgb(from var(--overview--odd-month-border-color) r g b / 0.7);
    --overview--today-border-color: var(--color--accent);
    --overview--with-article-color: var(--color--primary);
    --overview--padding: var(--size--half);
    --overview--day-width: var(--size--1);
    --overview--day-border-radius: calc(var(--overview--day-width) / 2);

    max-width: var(--reponsive-main-text-max-width);
    overflow-x: auto;
    
    ul {
        list-style-type: none;
        display: grid;
        grid-template-columns: repeat(53, var(--overview--day-width));
        grid-template-rows: repeat(7, var(--overview--day-width));
        grid-auto-flow: column;
        gap: 1px;
        padding: var(--overview--padding);

        li {
            border: 1px solid var(--overview--odd-month-border-color);
            border-radius: var(--overview--day-border-radius);
            width: var(--overview--day-width);
            height: var(--overview--day-width);
            padding: 0;
            margin: 0;

            &[data-previous-year] {
                border: none;
            }

            &[data-date*="-02-"], &[data-date*="-04-"],
            &[data-date*="-06-"], &[data-date*="-08-"],
            &[data-date*="-10-"], &[data-date*="-12-"] {
                border-color: var(--overview--even-month-border-color);
            }

            &[data-today] {
                border-color: var(--overview--today-border-color);
                border-width: 2px;
            }

            &:has(a) {
                background-color: var(--overview--with-article-color);
                a {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }

        li[data-today] ~ li {
            opacity: 0.5;
        }
    }
}

#previous-posts {
    ul {
        li {
            a {
                &:target {
                    color: var(--color--primary)
                }
            }
        }
    }
}