treehouse/static/css/tree.css

/*** Variables ***/

:root {
    --tree-indent-width: 3.2rem;
    --transition-duration: 0.15s;
    --button-bar-icon-size: 2.8rem;
}

/*** Breadcrumbs ***/

.breadcrumbs {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    height: min-content;

    margin: 0;
    padding: 0;

    align-items: center;

    opacity: 70%;
}

.breadcrumb::before {
    content: "";
    display: inline-block;

    background-image: var(--icon-breadcrumb);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 70%;

    width: 3.6rem;
    height: 1.7rem;

    vertical-align: text-bottom;
}

.breadcrumb a {
    --recursive-mono: 1;
    --recursive-wght: 500;
    --recursive-casl: 0;

    color: var(--text-color);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumbs > .root-breadcrumb {
    display: none; /* only when main logo is hidden */
    margin-right: -0.8rem;

    & a,
    & svg {
        display: block;
    }

    & .logo {
        /* NOTE: px used for pixel perfection */
        width: 48px;
        height: 48px;
        padding: 0.8rem;
        color: var(--text-color);
    }
}

@media (max-width: 450px) {
    .breadcrumbs > .root-breadcrumb {
        display: block;
    }
}

/*** Tree ***/

.tree {
    --tree-indent-guide-dim: transparent;
    --tree-indent-guide-highlighted: transparent;
}

.tree:has(.branch-container:hover) {
    --tree-indent-guide-dim: transparent;
    --tree-indent-guide-highlighted: var(--border-1);
}

@media (hover: none) {
    .tree {
        --tree-indent-guide-dim: var(--border-1);
        --tree-indent-guide-highlighted: var(--border-1);
    }
}

/* Use an indent level appropriate for the viewport. */
.tree ul {
    --tree-responsive-indent-width: clamp(
        0.8rem,
        2vw,
        var(--tree-indent-width)
    );

    /* Draw indent guides. */
    padding-left: calc(var(--tree-responsive-indent-width) / 2);
    margin-left: calc(var(--tree-responsive-indent-width) / 2);
    border-left: 0.1rem solid var(--tree-indent-guide-dim);

    transition: border-left-color var(--transition-duration);
}

.tree details:has(.branch-container:hover) > ul {
    border-left-color: var(--tree-indent-guide-highlighted);
}

/* Top level should not have an indent or a border. */
.tree > ul {
    padding-left: 0;
    border-left: none;
}

.tree details {
    /* Disable the rightwards chevron in <details> elements */
    & > summary {
        list-style: none;
        cursor: pointer;

        &::-webkit-details-marker {
            display: none;
        }
    }
}

/* Child branches */
.tree li {
    /* <li> elements should not have any bullet points or whatever */
    list-style: none;

    /* Stretch branch content to the full width of the page */
    & > div,
    & > details {
        width: 100%;
    }

    /* Add an underline for leaf branches */
    & > div {
        box-sizing: border-box;

        margin-bottom: -0.1rem;
        border-bottom: 0.1rem solid transparent;
        transition: border-bottom-color var(--transition-duration);

        &:hover {
            border-bottom-color: var(--border-1);
        }
    }

    & > div,
    & > details > summary {
        /* Child elements are laid out horizontally in a flexbox. */
        display: flex;
        align-items: center;
    }
}

/* <summary> is used for the visual content of branches with children. It's the large horizontal bar
    and notably *excludes* children. */
.tree details > summary {
    /* Slightly round for elegance */
    border-radius: 0.8rem;

    /* Give it a shaded background on hover */
    background-color: transparent;
    transition: background-color var(--transition-duration);

    &:hover {
        background-color: var(--shaded-background);
    }
}

/* For media without hover functionality, draw a bottom border everywhere as a visual anchor for where to tap */
@media (hover: none) {
    .tree li > div:first-child,
    .tree li > details > summary:first-child {
        border-bottom: 0.1rem solid var(--border-1);
    }

    .tree details > summary {
        /* In that case summaries shall not be rounded. */
        border-radius: 0;
    }
}

/* The following three elements - bp, bc, and bb - are there in all branches, regardless of their parent. */

/* bp - bullet point */
th-bp {
    display: block;
    width: var(--tree-indent-width);
    height: 2.8rem;

    background-image: var(--icon-leaf);
    background-repeat: no-repeat;
    background-position: 50% 50%;

    /* Prevent shrinkage when viewport is too low */
    flex-shrink: 0;
}

/* Change image of th-bp if it has children and/or is collapsible */
.tree details[open] > summary > th-bp {
    background-image: var(--icon-collapse);
}

.tree details:not([open]) > summary > th-bp {
    background-image: var(--icon-expand);
}

/* bc - branch content */
th-bc {
    display: block;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;

    /* Lines that are too long get very hard to read. */
    width: 100%;
    max-width: 72em;

    /* Bit of a hack to make <pre>s in <th-bc> have scrollbars proper. */
    &:has(pre, th-literate-program) {
        overflow: hidden;
    }
}

/* Display a chevron hinting that the collapsed branch has more content in its children. */
.tree details:not([open])>summary>th-bc>:last-child,
/* NOTE: Linked branches have a slightly different structure (extra <noscript> tag) and therefore
   :last-child does not work. */
.tree li[data-th-link]>details:not([open])>summary>th-bc>:nth-last-child(2) {
    &::after {
        content: "\00A0";
        display: inline-block;

        background-image: var(--icon-more);
        background-repeat: no-repeat;
        background-position: 50% 50%;

        width: 1.6rem;
        height: 1.2em;

        vertical-align: text-bottom;
        margin-left: 0.5em;

        margin-right: -2.25rem;
    }
}

/* Display a [draft] pill for branches that are drafts. */
.tree li.draft {
    & > details > summary > th-bc::before,
    & > div > th-bc::before {
        content: "draft";

        display: block;
        width: min-content;

        background-color: #058ef0;
        color: #ffffff;
        padding: 0.4rem 1.2rem;
        margin-bottom: 0.4rem;
        border-radius: 100rem;
    }
}

/* bb - button bar */
th-bb {
    height: 100%;
    margin: 0.4rem;

    /* Should be displayed on the top of the branch rather than in the middle. */
    align-self: start;
    flex-grow: 1;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;

    /* Keep the button bar invisible by default. */
    opacity: 0%;
    transition: opacity var(--transition-duration);
}

/* When the parent is hovered over, display the button bar. */
.tree *:hover > th-bb {
    opacity: 100%;
}

/* For media without hover functionality, th-bb should always be visible. */
@media (hover: none) {
    :root {
        --button-bar-icon-size: 3.6rem;
    }

    .tree th-bb {
        opacity: 100%;

        /* Replace margin with button size to make it easier to click. */
        margin: 0;

        & a.icon {
            width: 3.6rem;
            height: 3.6rem;
        }
    }
}

/* Style branch dates to be smaller and less noticable. */
th-bb .branch-date {
    opacity: 50%;
    font-size: 0.8em;
}

/* Hide branch dates on very small displays. No clue how to fix this just yet. */
@media (max-width: 600px) {
    th-bb .branch-date {
        display: none;
    }
}

/* Icons (used in the button bar) */
.tree {
    & .icon {
        background-repeat: no-repeat;
        background-position: 50% 50%;
        opacity: 35%;

        width: var(--button-bar-icon-size);
        height: var(--button-bar-icon-size);
    }

    & .icon-permalink {
        background-image: var(--icon-permalink);
    }

    & .icon-go {
        background-image: var(--icon-go);
    }
}

/* Style the loading text to not be too attention grabbing. */
.tree .link-loading {
    padding-left: 1.75em;
    opacity: 50%;
}

/* Highlight branch selected by # or ? in URL.
    The latter is not supported by CSS so we use some auxiliary JavaScript to add a .target class
    to the element highlighted by ?. */
.tree :target,
.tree .target {
    & > details > summary,
    & > div {
        background-color: var(--shaded-background);
        background: linear-gradient(
            to right,
            transparent 12.5%,
            var(--shaded-background),
            transparent,
            var(--shaded-background),
            transparent,
            var(--shaded-background) 87.5%
        );
        background-size: 800% 100%;
        background-position-x: 100%;
        animation: hey-listen 2s linear;
    }
}

@keyframes hey-listen {
    0% {
        background-position-x: 0%;
    }

    100% {
        background-position-x: 100%;
    }
}

/* <noscript> navigation links */
.tree .navigate {
    padding-left: 1.75em;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    opacity: 80%;
}

/* branch-quote class for "air quote branches"; used to separate a subtree from a parent tree
   stylistically such that it's interpretable as a form of block quote. */
ul.branch-quote {
    --vertical-margin: 0.8rem;
    --padding: 0.8rem;

    margin-top: var(--vertical-margin);
    margin-bottom: var(--vertical-margin);
    padding-top: var(--padding);
    padding-bottom: var(--padding);
    padding-right: var(--padding);
    border: 0.1rem solid var(--border-1);
    border-radius: 0.8rem;

    position: relative;

    &::before {
        --recursive-wght: 900;
        --recursive-casl: 0;

        content: "“";
        position: absolute;
        right: 1.6rem;
        top: 0.1rem;
        font-size: 4.8rem;
        opacity: 50%;

        transition: opacity var(--transition-duration);
    }

    &:hover::before {
        opacity: 0%;
    }
}