docs/_static/css/footer.css

/* Footer sits in the content column (grid col 2) of .page, below the
   main row. Padding matches .main so it lines up with the article. */
.footer {
    grid-column: 2;
    margin-top: 0.5em;
    padding: 1em 24px 16px;
    border-top: 1px solid var(--border);
}

/* Mobile: single-column grid, so the footer is in column 1. */
@media (max-width: 1024px) {
    .footer {
        grid-column: 1;
        padding: 1em 16px 16px;
    }
}

.footer-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-text {
    color: var(--text-muted);
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 0.7em;
}

/* Middot between items, attached to each item except the last so a
   wrapped row never starts with an orphan separator. */
.footer-text > span:not(:last-child)::after {
    content: "·";
    margin-left: 0.7em;
    color: var(--text-muted);
    opacity: 0.7;
}

.footer-text a,
.footer-text a:visited {
    color: var(--text-muted);
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 3px;
}

.footer-text a:hover {
    color: var(--accent);
    text-decoration-color: currentColor;
}

/* Easter egg: the © symbol links to the 404 page. No underline. */
.footer-text a.footer-egg,
.footer-text a.footer-egg:visited {
    color: inherit;
    text-decoration: none;
}

/* PyPI + RSS icon links, grouped at the right of the footer row. */
.footer-icons {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.footer-pypi,
.footer-pypi:visited,
.footer-github,
.footer-github:visited,
.footer-rss,
.footer-rss:visited {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.15s ease, color 0.15s ease;
}

/* FontAwesome glyphs, sized to roughly match the RSS icon. The python
   logo's ink is shorter than the others, so nudge it up to match. */
.footer-github {
    font-size: 1.3em;
}

.footer-pypi {
    font-size: 1.4em;
}

.footer-rss {
    font-size: 0.9em;
}

.footer-pypi:hover,
.footer-github:hover,
.footer-rss:hover {
    color: var(--accent);
    opacity: 1;
}

.footer-text a.footer-egg:hover {
    color: var(--accent);
}

/* RSS glyph from a single svg file, colored via mask so it follows
   currentColor (muted, accent on hover). Shared with the blog banner. */
.rss-icon {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: url(../images/rss.svg) center / contain no-repeat;
    mask: url(../images/rss.svg) center / contain no-repeat;
}

.footer-rss .rss-icon {
    width: 1.4em;
    height: 1.4em;
}