/* Listing tweaks */
/* Hide listing images and author lines for a cleaner list */
.quarto-listing .listing-image,
.quarto-listing .listing-image img,
.quarto-listing .listing-image-container,
.quarto-listing .thumbnail,
.quarto-listing .thumbnail img,
.quarto-listing .listing-author {
display: none !important;
}
/* About page: justify long-form text */
.quarto-about-marquee .about-contents p,
.quarto-about-marquee .about-contents li {
text-align: justify;
}
/* Post content: justify paragraphs and lists */
#quarto-document-content p,
#quarto-document-content li {
text-align: justify;
}
/* Keep navbar visible on scroll */
.headroom,
.headroom--unpinned,
.headroom--pinned {
transform: translateY(0) !important;
}
/* Categories sidebar width */
@media (min-width: 992px) { /* Apply this rule only on desktop/tablet widths */
#quarto-margin-sidebar.sidebar { /* Target Quarto's right-side categories panel */
width: 320px; /* Set a fixed sidebar width to prevent wrapped category labels */
} /* End sidebar selector */
} /* End media query */
/* Remove listing preview/excerpt text */
.quarto-listing .listing-description {
display: none !important;
}
/* Place date under the post title (not right-aligned) */
.quarto-listing .quarto-post {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.quarto-listing .quarto-post > .body {
order: 1;
padding-right: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.quarto-listing .quarto-post > .metadata {
order: 2;
position: static;
margin-top: 0;
margin-bottom: 0.7rem;
padding-top: 0;
text-align: left;
white-space: normal;
}
.quarto-listing .listing-title {
margin-top: 0;
margin-bottom: 0;
}
/* Content links: match navbar primary tone */
main.content a,
main.content a:visited {
color: var(--bs-primary) !important;
}
/* TOC active + hover: match navbar primary tone (minimal override) */
nav#TOC .nav-link.active {
color: var(--bs-primary) !important;
border-left-color: var(--bs-primary) !important;
}
nav#TOC .nav-link:hover {
color: var(--bs-primary) !important;
}
/* Listing titles: match navbar primary tone */
.quarto-listing .listing-title a,
.quarto-listing .listing-title a:visited {
color: var(--bs-primary) !important;
}
/* Hide category chips under post titles (listing cards) */
.quarto-listing .listing-categories,
.quarto-listing .listing-category,
.quarto-listing .listing-category-badge,
.quarto-listing .quarto-category,
.quarto-listing .quarto-categories {
display: none !important;
}
/* Global content links: match navbar primary tone */
#quarto-document-content a,
#quarto-document-content a:visited {
color: var(--bs-primary) !important;
}
/* Numbered sections: match the heading colour instead of Quarto's grey */
.header-section-number {
color: inherit;
}
/* Trailing dot on section numbers, in headings and in the TOC (1. and 1.1.) */
.header-section-number::after {
content: ".";
}
/* Frozen posts carry plots rendered on a white ground. In dark mode they would
float as bare white rectangles, so give them a deliberate light card. */
body.quarto-dark .cell-output-display img,
body.quarto-dark figure > img {
background: #ffffff;
padding: 0.375rem;
border-radius: 4px;
}
/* The footer sits on the body colour, so without a rule the page just stops.
A hairline marks the floor without the weight of a filled band. */
.nav-footer {
border-top: 1px solid var(--bs-border-color);
margin-top: 4rem;
}
/* Quarto's content grid keeps a row of at least 60px under the content, which
is most of the distance between the last post and the footer. The row itself
is still there, it just no longer has a floor. */
#quarto-content.page-rows-contents {
grid-template-rows:
[content-top] minmax(max-content, 1fr)
[content-bottom] minmax(0, max-content)
[page-bottom];
}
/* The navbar started its links 40px in: 1em on the nav, another 1em on the
container, then 0.5rem on the link. The footer only had the first of those,
at 16px, so the two bars began at different places. Taking the navbar down
the footer sits at 24px and the navbar at 22px, both between Quarto's 40px
and the page edge. The two pixels are deliberate: the footer text is .825em
against the navbar's 1rem, and the smaller type reads as starting later. The negative margin cancels the link's own padding without
removing it, which would close the gap between Home and About. */
#quarto-header > nav .navbar-container {
padding-left: 0.375rem;
}
/* Quarto's own footer rule is footer.footer .nav-footer, which outranks a
bare .nav-footer, so the selector has to be matched to take effect. */
footer.footer .nav-footer {
padding-left: 1.5rem;
}
.navbar .navbar-nav {
margin-left: -0.5rem;
}
/* Brand marks in the footer. currentColor rather than the brand colours:
Netlify's teal reads 2.13:1 on white, under the 3:1 graphics threshold. */
.footer-icon {
width: 1em;
height: 1em;
vertical-align: -0.125em;
fill: currentColor;
}
/* Theme toggle.
Quarto ships bi-toggle-off and bi-toggle-on, a plain on/off switch that
never says what it switches. Moon means "go dark", sun means "go light":
the button shows what it does, not what is already on. The outline pair is
used rather than the filled one because the search icon beside it is drawn
as an outline too.
Colour comes from a mask over currentColor rather than a colour baked into
the image. Quarto already sets .quarto-navigation-tool to the same value it
gives the search icon, and that value differs per theme, so inheriting it
keeps the pair matched in both without hard-coding either.
Size follows the search icon at 20px; Quarto draws the toggle at 1rem, which
left the two visibly unequal. Opacity is lifted to 1 for the same reason:
Quarto fades navigation tools to .7 but leaves the search icon opaque. */
.navbar .quarto-color-scheme-toggle {
display: flex;
align-items: center;
opacity: 1;
}
/* Bootstrap sizes .bi to 1em, which at the tool's .875rem is 14px. The icon
below is 20px, and an inline-block that size sits its bottom edge on the
14px box's baseline, riding above the search icon beside it. Making .bi a
20px flex box centres the icon in it instead. */
.navbar .quarto-color-scheme-toggle .bi {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
line-height: 1;
}
.navbar .quarto-color-scheme-toggle .bi::before {
width: 20px;
height: 20px;
background-image: none;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml,') no-repeat center / 20px 20px;
mask: url('data:image/svg+xml,') no-repeat center / 20px 20px;
}
.navbar .quarto-color-scheme-toggle.alternate .bi::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* Search icon. Quarto draws it at 26px, well above the navbar text beside it.
Not 20px like the toggle, though: the two icons fill their boxes by
different amounts. Bootstrap draws moon and sun edge to edge in a 16 box,
while this magnifier occupies roughly 2 to 22 of a 24 box, about 83%. Set
to the same number it renders visibly smaller, so it takes about 20 / 0.83 to
match what the eye compares, nudged up a step from there by eye. */
.navbar #quarto-search.type-overlay .aa-Autocomplete svg.aa-SubmitIcon {
width: 25px;
height: 25px;
}