`;
`display: contents` drops that paragraph out of the layout so the cards are
the grid's own children. Not-generated cards are `
`s and arrive
unwrapped, which is why this has to be tolerant of both. */
.hg-deck > p { display: contents; }
.hg-card {
display: flex;
flex-direction: column;
gap: 0.32rem;
padding: 0.95rem 1.05rem;
border: 1px solid var(--bs-border-color, #e0e0e0);
border-radius: 0.6rem;
background: var(--bs-body-bg, #fff);
color: inherit;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease,
transform 0.15s ease;
}
a.hg-card:hover,
a.hg-card:focus-visible {
border-color: var(--bs-primary, #2c3e50);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.09);
transform: translateY(-2px);
text-decoration: none;
}
.hg-card-label {
font-family: var(--hg-display);
font-weight: 600;
font-size: 1.08rem;
line-height: 1.2;
}
.hg-card-blurb { font-size: 0.84rem; opacity: 0.68; line-height: 1.4; }
/* The affordance line: "Open →" on a card that leads somewhere, the command
to run on one that does not. Same slot either way, so the cards align. */
.hg-card-go {
margin-top: auto;
padding-top: 0.5rem;
font-family: var(--hg-mono);
font-size: 0.72rem;
letter-spacing: 0.02em;
opacity: 0.72;
}
a.hg-card .hg-card-go { color: var(--bs-primary, #2c3e50); font-weight: 500; }
a.hg-card:hover .hg-card-go { opacity: 1; }
.hg-card-go code {
font-size: inherit;
background: none;
padding: 0;
color: inherit;
}
/* Not yet generated: dashed and quiet, but still the same size — the gap in
the row is the point. */
.hg-card-missing {
border-style: dashed;
background: transparent;
}
.hg-card-missing .hg-card-label { opacity: 0.55; }
.hg-card-missing .hg-card-blurb { opacity: 0.42; }
/* Back to the unit. Lesson plans and lecture notes are not in the sidebar, so
Quarto gives them no breadcrumb — this link is the only way up from them. */
.hg-back {
display: inline-block;
margin: 0.2rem 0 1.2rem;
font-family: var(--hg-mono);
font-size: 0.78rem;
text-decoration: none;
opacity: 0.75;
}
.hg-back:hover { opacity: 1; text-decoration: underline; }
/* Previous and next unit, at the foot of a unit page. Neighbours stop at the
module edge, so a page may carry one link, both, or neither. */
.hg-nav {
display: flex;
gap: 1rem;
margin-top: 2.5rem;
padding-top: 1rem;
border-top: 1px solid var(--bs-border-color, #e6e6e6);
font-family: var(--hg-display);
font-size: 0.95rem;
}
/* Pandoc gathers the two links into one `
`; drop it out of the flex layout. */
.hg-nav > p { display: contents; }
/* `margin-left: auto` rather than `justify-content: space-between`, so a lone
next-link still sits right instead of sliding into the previous one's place. */
.hg-next { margin-left: auto; text-align: right; }
/* Reference blocks — the lesson plan's cross-references, and the two a lecture-notes
section closes with. These are links into the rest of the curriculum rather than
part of the teaching, so a quiet rule sets them off from the prose around them.
An outline, not a panel: the tinted, left-barred box this replaced made a short
list read as a widget bolted to the end of a section. `--bs-border-color` rather
than a fixed grey, so the line follows the theme into dark mode. */
div.hypergen-refs {
margin: 0.6rem 0 1rem;
padding: 0.45rem 0.7rem;
border: 1px solid var(--bs-border-color, #dcdcdc);
border-radius: 0.35rem;
}
/* An
by markup, a label by intent — so it must not read as a page title. */
div.hypergen-refs h1 {
font-family: var(--hg-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.62;
margin: 0 0 0.4rem;
padding: 0;
border: none;
}
/* No bullet: every item opens with a badge, which is a stronger marker than a disc
and sits where the disc would. */
div.hypergen-refs ul {
list-style: none;
margin: 0.3rem 0 0;
padding-left: 0;
}
div.hypergen-refs ul li {
margin: 0 0 0.35rem;
font-family: var(--hg-body);
font-size: 0.86rem;
line-height: 1.5;
}
div.hypergen-refs ul li:last-child { margin-bottom: 0; }
div.hypergen-refs p { margin: 0 0 0.35rem; font-size: 0.85rem; opacity: 0.75; }
div.hypergen-refs code { font-size: 0.95em; }
/* Lecture notes close each section with two of these blocks, distinguished by a
second class: `.hypergen-refs .outcomes` and `.hypergen-refs .concepts`. They need
no rules of their own — the block above styles every reference list the same way,
which is what keeps the plan page and the notes reading alike.
These were once a flex row of pills, one per item. With the key inside a badge
that made a pill within a pill, and — because the badge and the text were flex
items — the description wrapped in a narrow column beside the key rather than
reading as prose. */
/* A highlight box: the few things to carry away from a section. Authored in
lecture notes as `::: {.highlights}`. Loud enough to draw the eye back when
skimming, quiet enough not to compete with the prose it summarises. */
div.highlights {
margin: 1.4rem 0;
padding: 0.85rem 1.1rem 0.7rem;
border: 1px solid rgba(180, 83, 9, 0.35);
border-left: 4px solid #b45309;
border-radius: 0.4rem;
background: rgba(180, 83, 9, 0.06);
}
/* An by markup, a label by intent — see the note on div.hypergen-refs h1.
A markdown `#` here would become and break both
this rule and the page outline. */
div.highlights h1 {
font-family: var(--hg-display);
font-size: 1.02rem;
font-weight: 700;
letter-spacing: 0;
color: #92400e;
margin: 0 0 0.5rem;
padding: 0;
border: none;
}
div.highlights ul {
margin: 0;
padding-left: 1.2rem;
}
div.highlights ul li { margin: 0.25rem 0; }
div.highlights > p:last-child { margin-bottom: 0; }
/* Inline salience, for the phrase that carries a paragraph: `[text]{.hg-key}`.
A class rather than an inline style, so every note colours the same way and
dark mode can correct it in one place. */
.hg-key {
color: #b1361e;
font-weight: 600;
}
/* Margin notes carry the non-essential aside. Quarto places them; this only
makes them read as secondary to the main column. */
.column-margin {
font-size: 0.86rem;
line-height: 1.5;
}
.column-margin .callout { font-size: 0.95em; }
/* Keep embedded figures from overflowing. */
.quarto-figure img, figure img { max-width: 100%; height: auto; }
figcaption { font-size: 0.85rem; opacity: 0.8; }
/* --- dark mode ------------------------------------------------------------ */
.quarto-dark body {
-webkit-font-smoothing: subpixel-antialiased; /* light-on-dark looks thin otherwise */
}
.quarto-dark h1, .quarto-dark h2, .quarto-dark h3,
.quarto-dark h4, .quarto-dark h5, .quarto-dark h6 {
font-variation-settings: "SOFT" 20;
font-weight: 600;
}
.quarto-dark p > code,
.quarto-dark li > code,
.quarto-dark td > code { background: rgba(255, 255, 255, 0.10); }
.quarto-dark div.highlights {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.3);
border-left-color: #fbbf24;
}
.quarto-dark div.highlights h1 { color: #fcd34d; }
.quarto-dark .hg-key { color: #f0a58d; }
/* The light ochre is near-brown; on a dark ground it goes muddy and stops reading as
a heading at all. Set on the same element Quarto marks (`body.quarto-dark`), so it
overrides the `:root` value for everything inside. */
.quarto-dark { --hg-sidebar-heading: #e0b354; }
/* --- print ---------------------------------------------------------------- */
@media print {
body { font-size: 11pt; }
.sidebar, .navbar { display: none; }
a { text-decoration: none; }
}