Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 32 additions & 6 deletions arxiv/base/static/css/arxiv-header-footer.css
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@
margin: 0;
font-family: var(--arxiv-font-sans);
}
/* Neutralise host-page footer-link underline styling (e.g. browse arXiv.css's
`footer a:hover { border-bottom: 1px dotted }`) on all footer links. The funder
logo cards re-assert their own border at a higher specificity (below), so this
reset does not strip their bottom edge. */
.ds-site-footer a,
.ds-site-footer a:hover,
.ds-site-footer a:active {
Expand Down Expand Up @@ -125,19 +129,41 @@
justify-content: center;
flex-wrap: wrap;
}
.ds-funder-logo {
box-sizing: content-box;
display: block;
height: 40px;
width: auto;
flex-shrink: 0;
/* The white card lives on the link wrapper (one place), identical whether the logo is
content-sized (desktop) or fixed-width (mobile, below). Scoped to `.ds-site-footer a`
(specificity 0-2-1) so the full four-side border out-specifies the footer-link
underline reset above and any host-page `footer a` border styling — otherwise those
win on the bottom edge only, leaving a stray dotted/absent bottom border. */
.ds-site-footer a.ds-funder-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
border: 1px solid var(--arxiv-pill-border);
border-radius: 3px;
background: #fff;
transition: border-color 0.15s ease;
}
.ds-site-footer a.ds-funder-link:hover { border-color: var(--arxiv-link-blue); }
.ds-site-footer a.ds-funder-link:focus-visible {
outline: 2px solid var(--arxiv-link-blue);
outline-offset: 2px;
}
.ds-funder-logo {
display: block;
height: 48px;
width: auto;
flex-shrink: 0;
}
@media (max-width: 720px) {
/* Mobile/tablet: fixed-width cards so the wrapped logos align into a tidy centred
column (phones) / even row (tablets) instead of a ragged stack of different-width
boxes. Card styling is inherited from .ds-funder-link; only the width and logo
height change here. */
.ds-site-footer-funders { width: 100%; margin-top: 8px; }
.ds-site-footer-funders-logos { gap: 10px; }
.ds-site-footer a.ds-funder-link { width: 220px; max-width: 100%; padding: 10px 14px; }
.ds-funder-logo { height: 44px; max-width: 100%; }
}
@media print {
.ds-site-footer { display: none !important; }
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 9 additions & 2 deletions arxiv/base/templates/base/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,15 @@
<div class="ds-site-footer-funders" aria-label="Major funders">
<div class="ds-site-footer-funders-label">Major funding support from</div>
<div class="ds-site-footer-funders-logos">
<img class="ds-funder-logo" src="{{ url_for('base.static', filename='images/funders/simons-foundation.png') }}" alt="Simons Foundation">
<img class="ds-funder-logo" src="{{ url_for('base.static', filename='images/funders/schmidt-sciences.png') }}" alt="Schmidt Sciences">
<a class="ds-funder-link" href="https://www.simonsfoundation.org/" target="_blank" rel="noopener noreferrer">
<img class="ds-funder-logo" src="{{ url_for('base.static', filename='images/funders/simons-foundation.png') }}" alt="Simons Foundation">
</a>
<a class="ds-funder-link" href="https://www.sfi.org.bm/" target="_blank" rel="noopener noreferrer">
<img class="ds-funder-logo" src="{{ url_for('base.static', filename='images/funders/simons-foundation-international.png') }}" alt="Simons Foundation International">
</a>
<a class="ds-funder-link" href="https://www.schmidtsciences.org/" target="_blank" rel="noopener noreferrer">
<img class="ds-funder-logo" src="{{ url_for('base.static', filename='images/funders/schmidt-sciences.png') }}" alt="Schmidt Sciences">
</a>
</div>
</div>
</div>
Expand Down
38 changes: 31 additions & 7 deletions docs/shared-chrome.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,10 @@ Three pieces:
institutional mention (IP-matched) follows "member institutions".
2. **Footer nav** — About · Help · Contact · Subscribe · Copyright · Privacy ·
Accessibility · Operational Status, dot-separated.
3. **Funders column** — "Major funding support from" + Simons + Schmidt wordmark
logos, right-aligned; drops below the main column at narrow widths.
3. **Funders column** — "Major funding support from" + Simons Foundation, Simons
Foundation International, and Schmidt Sciences logos (in that order of support),
each linked to the funder's own site; right-aligned, drops below the main column
at narrow widths.

Markup contract:

Expand All @@ -85,26 +87,48 @@ Markup contract:
<div class="ds-site-footer-funders">
<div class="ds-site-footer-funders-label">Major funding support from</div>
<div class="ds-site-footer-funders-logos">
<img class="ds-funder-logo" src="…" alt="Simons Foundation">
<img class="ds-funder-logo" src="…" alt="Schmidt Sciences">
<a class="ds-funder-link" href="https://www.simonsfoundation.org/" target="_blank" rel="noopener noreferrer">
<img class="ds-funder-logo" src="…" alt="Simons Foundation"></a>
<a class="ds-funder-link" href="https://www.sfi.org.bm/" target="_blank" rel="noopener noreferrer">
<img class="ds-funder-logo" src="…" alt="Simons Foundation International"></a>
<a class="ds-funder-link" href="https://www.schmidtsciences.org/" target="_blank" rel="noopener noreferrer">
<img class="ds-funder-logo" src="…" alt="Schmidt Sciences"></a>
</div>
</div>
</div>
</footer>
```

**Asset SSOT / single consistent approach.** The funder images live in **only one
place** — arxiv-base `static/images/funders/*.png` — and every consumer references
them through the base-static root, never a local copy:

- Apps that run the base blueprint (**browse**, **auth**) `{% include "base/footer.html" %}`
and get the logos via `url_for('base.static', …)`. They hold no funder markup and no
funder asset, so a change here (e.g. adding a third funder) reaches them with **zero
per-app edits**.
- Vendored consumers that can't inherit (**search**, **submit**, **docs**, **status**)
copy this markup but point every logo at their configured base-static root
(`config.BASE_STATIC` / `c.config.base_static` / `config.extra.base_static`) — the only
per-repo difference is that root value. Prefer the config root over a hard-coded
`static.arxiv.org/static/base/<v>/…` path so a version bump is a one-line change.

Accessibility notes (the behavior contract travels with the pattern):

- Real `<footer>` landmark; nav has `aria-label="Site navigation"`.
- Dot separators carry `aria-hidden="true"` (screen readers otherwise announce
"middot" between every link).
- Funder logos carry real alt text (organization names).
- Funder logos carry real alt text (organization names) and each is wrapped in a
link to the funder's site (`target="_blank"` + `rel="noopener noreferrer"`) with a
visible keyboard-focus outline; the hover lift is disabled under
`prefers-reduced-motion`.
- External links (Operational Status) need `target="_blank"` +
`rel="noopener noreferrer"` + sr-only "(opens in new tab)".
- Type sizes in `rem` so user font-size overrides propagate.
- `.ds-funder-logo` uses `box-sizing: content-box` so `height: 40px` describes the
- `.ds-funder-logo` uses `box-sizing: content-box` so `height: 48px` describes the
image content height — with the global `border-box`, padding + border would
shrink the logo to ~30px (visibly small vs the approved layout).
shrink the logo (visibly small vs the approved layout). The row is 48px (not 40px)
so the text-dense three-line SFI lockup stays legible alongside the other two.

## Site header unit (`.ds-announcement` + `.ds-site-header`)

Expand Down
Loading