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
54 changes: 32 additions & 22 deletions _includes/footer.html
Original file line number Diff line number Diff line change
@@ -1,26 +1,36 @@
<!-- Shared EpiAware footer. Single source of truth; rendered on the ecosystem
site and the separate tutorials site (via submodule). -->
<footer class="footer mt-auto py-4" style="border-top: 1px solid var(--bs-border-color); margin-top: 3rem; background: var(--bs-body-bg);">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<span class="text-muted">EpiAware — a composable Julia ecosystem for infectious disease modelling.</span>
</div>
<div class="col-md-6">
<ul class="nav justify-content-center justify-content-md-end">
<li class="nav-item"><a class="nav-link" href="https://epiaware.org/packages/index.html">Packages</a></li>
<li class="nav-item"><a class="nav-link" href="https://epiaware.org/get-involved.html">Get involved</a></li>
<li class="nav-item"><a class="nav-link" href="https://epiaware.org/funding.html">Funding</a></li>
<li class="nav-item">
<a class="nav-link px-2" href="https://community.epinowcast.org/"
aria-label="epinowcast community forum"><i class="bi bi-discord"></i></a>
</li>
<li class="nav-item">
<a class="nav-link px-2" href="https://github.com/EpiAware"
aria-label="EpiAware on GitHub"><i class="bi bi-github"></i></a>
</li>
</ul>
</div>
site and the separate tutorials site (via submodule).

Uses Quarto's own .nav-footer/.nav-footer-left/-center/-right classes
(not a generic Bootstrap .row/.col grid) so the built-in styling —
muted link colour, hairline top border, spacing — applies, and so
Quarto's per-page repo-actions injection (Edit this page/Report an
issue, from repo-actions in _quarto.yml) lands inside
.nav-footer-center next to the other links instead of appending a
second, differently-styled footer row. -->
<footer class="footer">
<div class="nav-footer">
<div class="nav-footer-left">
EpiAware — a composable Julia ecosystem for infectious disease modelling.
</div>
<div class="nav-footer-center">
<ul class="footer-items list-unstyled">
<li class="nav-item"><a class="nav-link" href="https://epiaware.org/packages/index.html">Packages</a></li>
<li class="nav-item"><a class="nav-link" href="https://epiaware.org/get-involved.html">Get involved</a></li>
<li class="nav-item"><a class="nav-link" href="https://epiaware.org/funding.html">Funding</a></li>
</ul>
</div>
<div class="nav-footer-right">
<ul class="footer-items list-unstyled">
<li class="nav-item compact">
<a class="nav-link" href="https://community.epinowcast.org/"
aria-label="epinowcast community forum"><i class="bi bi-discourse"></i></a>
</li>
<li class="nav-item compact">
<a class="nav-link" href="https://github.com/EpiAware"
aria-label="EpiAware on GitHub"><i class="bi bi-github"></i></a>
</li>
</ul>
</div>
</div>
</footer>
44 changes: 35 additions & 9 deletions _includes/navbar.html
Original file line number Diff line number Diff line change
@@ -1,19 +1,40 @@
<!-- Shared EpiAware navbar. Single source of truth for the ecosystem site
chrome; the separate tutorials site renders this same partial via a
submodule so the bar is never duplicated. -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="position: sticky; top: 0; z-index: 1030;">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center" href="https://epiaware.org">
<img src="/assets/img/logo.svg" alt="EpiAware" width="28" height="28" class="me-2">
EpiAware
</a>
submodule so the bar is never duplicated.

format.html.include-before-body injects into Quarto's Pandoc template
slot, which sits *inside* <main>, not as a sibling of it — so this
can't be Quarto's usual header#quarto-header.fixed-top: an ancestor
(<main>) has its own CSS transform, and a transformed ancestor becomes
the containing block for position:fixed descendants, which pinned the
"fixed" bar partway down the page instead of the viewport top and let
it overlap the title. position:sticky avoids that: it needs no
special containing block and still stays in normal document flow, so
no header/body offset bookkeeping is needed either.

navbar-dark with no bg-dark: the theme (theme-light.scss/
theme-dark.scss $navbar-bg/$navbar-fg) supplies the actual colours
per light/dark mode; a hardcoded bg-dark forced a dark bar even in
light mode. -->
<nav class="navbar navbar-expand-lg navbar-dark"
style="position: sticky; top: 0; z-index: 1030;">
<div class="navbar-container container-fluid">
<div class="navbar-brand-container">
<a class="navbar-brand" href="https://epiaware.org">
<img src="/assets/img/logo.svg" alt="EpiAware" class="navbar-logo">
<span class="navbar-title">EpiAware</span>
</a>
</div>
<!-- Quarto's search JS (site_libs/quarto-search/quarto-search.js)
hydrates any element with id="quarto-search" by id lookup, so this
hand-placed div works the same as Quarto's own navbar-generated
markup. Each site emits its own site_libs/quarto-search assets and
search.json (from website.search: true in its own _quarto.yml), so
this is deliberately per-site: the box searches whichever site it
is rendered on. -->
is rendered on. It renders as the compact search icon rather than
an inline text box because website.search.location is set to
navbar (see _quarto.yml) — without that, Quarto's default is a
sidebar textbox, which looks broken jammed into a navbar. -->
<div id="quarto-search" class="" title="Search"></div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#epi-nav" aria-controls="epi-nav"
Expand Down Expand Up @@ -69,7 +90,7 @@
<li class="nav-item me-2">
<a class="nav-link" href="https://community.epinowcast.org/"
aria-label="epinowcast community forum">
<i class="bi bi-discord"></i>
<i class="bi bi-discourse"></i>
</a>
</li>
<li class="nav-item">
Expand All @@ -79,6 +100,11 @@
</a>
</li>
</ul>
<div class="quarto-navbar-tools">
<a href="" class="quarto-color-scheme-toggle quarto-navigation-tool px-1"
onclick="window.quartoToggleColorScheme(); return false;"
title="Toggle dark mode"><i class="bi"></i></a>
</div>
</div>
</div>
</nav>
Expand Down
25 changes: 16 additions & 9 deletions _quarto.yml
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,22 @@ website:
# site renders the same partials via a git submodule, so both sites
# share one navbar and footer definition.
#
# `search: true` here is still required even with no navbar/sidebar
# config: it is what makes Quarto emit search.json and the
# site_libs/quarto-search/* assets and JS. The shared navbar partial
# then supplies its own `<div id="quarto-search">` markup, which
# quarto-search.js hydrates by id regardless of where it lives in the
# DOM. Each site sets this independently, so search stays per-site:
# this site searches epiaware.org content, the tutorials site (once it
# sets the same flag) searches its own content.
search: true
# `search` here is still required even with no navbar/sidebar config: it
# is what makes Quarto emit search.json and the site_libs/quarto-search/*
# assets and JS. The shared navbar partial then supplies its own
# `<div id="quarto-search">` markup, which quarto-search.js hydrates by
# id regardless of where it lives in the DOM. Each site sets this
# independently, so search stays per-site: this site searches
# epiaware.org content, the tutorials site (once it sets the same flag)
# searches its own content.
#
# location/type must be set explicitly: with no website.navbar config to
# infer them from, Quarto's defaults are a sidebar search (location:
# sidebar, type: textbox), which renders as a permanently-open text
# field — broken when jammed into a navbar rather than a sidebar.
search:
location: navbar
type: overlay

format:
html:
Expand Down
Loading