treehouse/static/css/page/index.css

h1.page-title {
    --recursive-wght: 900;
    font-size: 3.5rem;
}

@media (hover: none) {
    h1.page-title a {
        text-decoration: none;
    }
}

@media (max-width: 450px) {
    body {
        --top-min-spacing: 40px;
    }

    nav#nav-logo {
        display: block;

        & .logo {
            position: absolute;
            left: 0;
            top: 0;
            width: 75vw;
            height: 75vw;
            transform: translate(-25%, -20%);
            pointer-events: none;
            opacity: 15%;
        }
    }
}

#index\:treehouse {
    & > details > summary {
        padding-left: 1rem;

        & > th-bp {
            display: none;
        }
    }
}

main.tree > ul {
    /* Optical text offset to make the icons look less misaligned.
       This is adjusted per each hobby corner to fit the icons.
       
       Although the icons may be aligned in terms of bounds, optically they do not look
       very good next to the text, having awkward blank space to the right.
       
       This aims to improve the readability of that a bit without being too noticable. */
    --section-text-offset: 0em;
    --section-icon-align: -30%;

    & > li {
        & > details > summary {
            text-decoration: 4px underline var(--section-color);
            text-underline-offset: 4px;

            & > th-bc .hobby-icon {
                width: auto;
                height: 48px;

                margin-right: calc(0.2em + var(--section-text-offset));

                vertical-align: var(--section-icon-align);
            }
        }
    }
}

#index\:about {
    --section-color: #a7d5e0;
}

#index\:programming {
    --section-color: var(--liquidex-brand-red);
    --section-text-offset: -0.1em;
}

#index\:design {
    --section-color: var(--liquidex-brand-yellow);
}

#index\:music {
    --section-color: var(--liquidex-brand-green);
    --section-text-offset: -0.05em;
}

#index\:games {
    --section-color: var(--liquidex-brand-blue);
    --section-text-offset: 0.05em;
}

#index\:philosophy {
    --section-color: #c952f5;
}