two-col-list.css

/**
 * This whole thing is a bit of a mess
 */

.tlf.two-col-list-1 {
    --padding_main: 0.7rem;
    --color_project_tile: #EAE7EE;
    --color_primary: #500092;
    --color_primary_dark: #200070;


    --color_contrast: #FCDA30;
    --color_contrast_dark: #EAC020;
}


.tlf.two-col-list-1 {
    display: flex;
}

.tlf.two-col-list-1 div {
    flex: 50%;
}

.tlf.two-col-list-1 div > div {
    min-height: 50%;
    padding: calc( var(--padding_main) / 2);
}

.tlf.two-col-list-1 hr {
    background: transparent;
    border-color: var(--color_contrast);
}

.tlf.two-col-list-1 .on {
    background: var(--color_project_tile);
}



.tlf.two-col-list-1 .off {
    background: transparent;
}



.tlf.two-col-list-1 a.a1 {
    cursor:pointer;
    text-decoration-color: var(--color_contrast);
    color: var(--color_primary_dark);
}

.tlf.two-col-list-1 a.a1:hover, a.a1:active {
    text-decoration-color: var(--color_primary_dark);
    color: var(--color_contrast);
}


.tlf.two-col-list-1 a.a2{
    cursor:pointer;
    color: var(--color_contrast_dark);
    text-decoration-color: var(--color_primary_dark);
}

.tlf.two-col-list-1 a.a2:hover, .tlf.two-col-list-1 a.a2:active {
    color: var(--color_primary_dark);
    text-decoration-color: var(--color_contrast_dark);
}