assets/css/component/contentinfo.css

#contentinfo {
    display: grid;
    grid-template-columns: 6fr 4fr;
    font-size: var(--small);
    gap: var(--medskip);
}


#colophon {
    grid-column: 1;
}

#colophon > div {
    display: flex;
    margin-top: 1ex;
    gap: 1rem;
}

#qr {
    padding-top: 4pt;
}

#contribute {
    grid-column: 2;
    border-radius: 1ex;
    background-color: var(--g18s);
    padding: 1.4rem 1.4rem 1rem;
    height: fit-content;
    line-height: 1.618;
}

#contrib-menu li {
    margin: 1ex 1ex 1ex 0;
}

#contrib-menu a {
    display: inline-block;
    border: none;
    border-radius: 1ex;
    background: var(--ac);
    padding: 4pt 9pt 3pt 7pt;
    width: 100%;
    text-align: center;
    color: var(--bg);
}

#contrib-menu a:hover,
#contrib-menu a:focus {
    --anm: none;
    opacity: 0.86;
    color: var(--bg);
}

#has-contrib-menu {
    padding: .4rem 0;
}

#contentinfo ol {
    position: relative;
    margin-bottom: 0;
    padding-left: 2.5rem;
    list-style: none;
    counter-reset: li;
}

#contentinfo ol li {
    margin-bottom: 1ex;
    padding-bottom: 1ex;
}

#contentinfo ol li::before {
    display: inline-block;
    position: absolute;
    left: 0;
    border-radius: 2rem;
    background: var(--g18s);
    padding: 4pt 7pt;
    color: var(--mid);
    font: 0.7em monospace;
    content: counter(li);
    counter-increment: li;
}

#contentinfo ol li.see-more::before {
    content: '>';
}

#related a {
    position: relative;
    top: 0.25ex;
}

#has-timeline {
    grid-column-start: 2;
    grid-row-start: 1;
}

#has-timeline summary {
    display: flex;
}

#has-timeline ol {
    margin: 1ex 0 0 1rem;
    border-left: 2.5pt solid var(--g18s);
    padding: 1ex 0 0 1rem;
}

#has-timeline ol li::before {
    left: -8pt;
    border: 4pt solid var(--bg);
    background: var(--mid);
    padding: 0;
    content: '\a0';
    height: 6pt;
    width: 6pt;
}

#has-timeline .has-aria-label-top {
    margin: 5pt 0;
}

#has-timeline .emoji--stage {
    position: absolute;
    left: -8pt;
}

@media screen and (max-width: 640px) {

    #contentinfo {
        display: block;
    }

    #contentinfo > * {
        margin-bottom: var(--bigskip) ;
    }

}