/* || styles for index with subpages */

/* FILTER STYLES */

input {
    accent-color: var(--accent2);
}

/* INDEX AND ENTRIES STYLES */

.index-entries {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    width: 100%;
    justify-content: space-evenly;
}

.index-entries label {
    display: block;
    font-size: 1.25em;
    text-decoration: underline;
    margin: 0.25em 0;
}

.index-entries a {
    flex: auto;
    min-width: 15em;

    display: block;
    padding: 1em;

    background-color: var(--bg-lighter);

    color: var(--accent2);
    border: 2px dashed;

    text-decoration: none;
}

.index-entries time {
    display: block;
    text-align: right;
    background-color: var(--accent2);
    color: var(--bg-lighter);
}

/* on hover */
.index-entries a:hover label {
    text-decoration: underline wavy;
    cursor: pointer;
}

.index-entries a:hover {
    color: var(--accent1);
}

.index-entries a:hover time {
    background-color: var(--accent1);
}


/* CATEGORY TAGS */
/* the lil category tag on blog entry links, visibility controlled by filter checkboxes */
/* heavily inspired by https://ribo.zone/blog/ */

.index-entries a::after { /* the style */
    display: block;
    padding: 0.2em;

    font-size: small;
    text-align: right;
}

.index-entries a::after{ /* adds the entry's categories (classes) at the end*/
    content: attr(class);
}

body:has(#art:not(:checked)) .art, 
body:has(#personal:not(:checked)) .personal {  /* hides entries with deselected categories */
    display: none;                      
}