305 lines
8.1 KiB
CSS
305 lines
8.1 KiB
CSS
/* vita.css — /about.html.
|
|
*
|
|
* The vita is a record surface. Where Now answers "what is moving right
|
|
* now" with a status chip per item, the vita answers "what is on file"
|
|
* and carries no temporality beyond the dates themselves — so it borrows
|
|
* item-card.css's card rhythm and now.css's section headings, but drops
|
|
* the badge column entirely. Entries here have no state to report.
|
|
*
|
|
* The one affordance this page has that the CV PDF cannot: every artifact
|
|
* is one click away. Link chips are therefore the only element given any
|
|
* interaction polish; everything else stays deliberately quiet so the
|
|
* chips read as the page's active surface.
|
|
*/
|
|
|
|
/* ============================================================
|
|
INTRO PROSE
|
|
Body content from about.md — the pointers and the four research
|
|
threads — set above the generated sections. Mirrors .now-intro
|
|
so the two data-driven pages open in the same register.
|
|
============================================================ */
|
|
|
|
.vita-intro {
|
|
margin: 0 0 3rem;
|
|
font-family: var(--font-serif);
|
|
font-size: 1rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.vita-intro h2 {
|
|
font-family: var(--font-serif);
|
|
font-size: 1.15rem;
|
|
font-variant: all-small-caps;
|
|
font-feature-settings: "smcp" 1;
|
|
letter-spacing: 0.09em;
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
margin: 2rem 0 0.6rem;
|
|
}
|
|
|
|
.vita-intro p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
SECTIONS
|
|
Identical treatment to .now-section — same size, tracking, and
|
|
ink — because the two pages are siblings and a reader moving
|
|
between them should not have to re-learn the hierarchy.
|
|
============================================================ */
|
|
|
|
.vita-section {
|
|
margin-bottom: 2.75rem;
|
|
}
|
|
|
|
.vita-section-heading {
|
|
font-family: var(--font-serif);
|
|
font-size: 1.15rem;
|
|
font-variant: all-small-caps;
|
|
font-feature-settings: "smcp" 1;
|
|
letter-spacing: 0.09em;
|
|
color: var(--text-muted);
|
|
text-transform: none;
|
|
font-weight: 400;
|
|
margin: 0 0 0.85rem 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
ENTRIES
|
|
.vita-card composes on .item-card, which is a flex row sized
|
|
for a badge column. The vita emits no badge, so the single
|
|
.item-card-main child simply takes the full width.
|
|
============================================================ */
|
|
|
|
.vita-list {
|
|
margin: 0;
|
|
}
|
|
|
|
.vita-entry-title {
|
|
font-family: var(--font-serif);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
line-height: 1.35;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Degree, role, position. Serif italic — the scholarly convention
|
|
for a title held, and it separates the role from the institution
|
|
above it without another weight or size step. */
|
|
.vita-role {
|
|
font-family: var(--font-serif);
|
|
font-size: 0.95rem;
|
|
font-style: italic;
|
|
color: var(--text-muted);
|
|
margin: 0.15rem 0 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.vita-gpa {
|
|
font-style: normal;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* Author lists run long and are reference material rather than
|
|
reading material — sans, small, muted, tight. */
|
|
.vita-authors {
|
|
font-family: var(--font-sans);
|
|
font-size: 0.82rem;
|
|
color: var(--text-muted);
|
|
margin: 0.2rem 0 0;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
/* Venue: journal, conference, or publication state. Italic serif is
|
|
the citation convention and distinguishes it from the author line
|
|
directly above without adding a color step. */
|
|
.vita-venue {
|
|
font-family: var(--font-serif);
|
|
font-size: 0.92rem;
|
|
font-style: italic;
|
|
color: var(--text-muted);
|
|
margin: 0.2rem 0 0;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
/* Dates and location. Matches .item-card-date's register exactly —
|
|
tabular numerals so date columns stay optically aligned down the
|
|
list even though they are inline here. */
|
|
.vita-meta {
|
|
font-family: var(--font-sans);
|
|
font-size: 0.72rem;
|
|
color: var(--text-faint);
|
|
margin: 0.25rem 0 0;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.vita-sep {
|
|
user-select: none;
|
|
}
|
|
|
|
.vita-location {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
a.vita-location {
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--border);
|
|
text-decoration-thickness: 0.08em;
|
|
text-underline-offset: 0.2em;
|
|
transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
|
|
}
|
|
|
|
a.vita-location:hover {
|
|
color: var(--text-muted);
|
|
text-decoration-color: var(--border-muted);
|
|
}
|
|
|
|
/* Presentation state ("Presented", "Accepted"). Sits on the meta
|
|
line rather than in a badge column, so it is set as small-caps
|
|
text with a leading separator instead of a bordered chip — a
|
|
frame here would compete with the link chips below it. */
|
|
.vita-status {
|
|
font-family: var(--font-sans);
|
|
font-variant: all-small-caps;
|
|
letter-spacing: 0.07em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.vita-status::before {
|
|
content: " · ";
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* Preamble / note lines — the CV's connective prose. Same register
|
|
as .item-card-abstract.is-full, unclamped. */
|
|
.vita-note {
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-size-small);
|
|
color: var(--text-muted);
|
|
margin: 0.4rem 0 0;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.vita-bullets {
|
|
margin: 0.4rem 0 0;
|
|
padding-left: 1.05rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.vita-bullets li {
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-size-small);
|
|
color: var(--text-muted);
|
|
line-height: 1.55;
|
|
margin: 0.3rem 0 0;
|
|
position: relative;
|
|
}
|
|
|
|
/* Hairline dash rather than a bullet glyph: the entries are claims,
|
|
not an enumerated sequence, and a disc would assert more structure
|
|
than the content has. */
|
|
.vita-bullets li::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -1.05rem;
|
|
top: 0.72em;
|
|
width: 0.5rem;
|
|
height: 1px;
|
|
background: var(--border-muted);
|
|
}
|
|
|
|
/* ============================================================
|
|
LINK CHIPS
|
|
The page's one interactive surface, and the reason a vita on the
|
|
web beats a vita on paper. Geometry is lifted from .now-status so
|
|
the chip shape is already familiar from /current; the difference
|
|
is that these are links and therefore respond.
|
|
============================================================ */
|
|
|
|
.vita-links {
|
|
margin: 0.5rem 0 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.vita-chip {
|
|
display: inline-block;
|
|
font-family: var(--font-sans);
|
|
font-size: 0.66rem;
|
|
font-variant: all-small-caps;
|
|
letter-spacing: 0.08em;
|
|
line-height: 1;
|
|
padding: 0.32em 0.55em 0.28em;
|
|
border: 1px solid var(--border);
|
|
border-radius: 2px;
|
|
color: var(--text-muted);
|
|
background: transparent;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
transition:
|
|
color var(--transition-fast),
|
|
border-color var(--transition-fast),
|
|
background-color var(--transition-fast);
|
|
}
|
|
|
|
.vita-chip:hover {
|
|
color: var(--text);
|
|
border-color: var(--text-muted);
|
|
background: var(--surface-raised, transparent);
|
|
}
|
|
|
|
.vita-chip:focus-visible {
|
|
outline: 2px solid var(--text-muted);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* The equal-contribution legend. Belongs to the section, not to any
|
|
one entry, so it is set below the list in the faintest register
|
|
the page uses. */
|
|
.vita-footnote {
|
|
font-family: var(--font-serif);
|
|
font-size: 0.85rem;
|
|
font-style: italic;
|
|
color: var(--text-faint);
|
|
margin: 0.9rem 0 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
MOBILE (≤540px)
|
|
item-card.css already stacks its header at this breakpoint. The
|
|
vita's entries are single-column by construction, so only the
|
|
type steps down.
|
|
============================================================ */
|
|
|
|
@media (max-width: 540px) {
|
|
.vita-entry-title {
|
|
font-size: 0.95rem;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.vita-role,
|
|
.vita-venue {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.vita-meta {
|
|
font-size: 0.68rem;
|
|
}
|
|
|
|
.vita-chip {
|
|
font-size: 0.62rem;
|
|
padding: 0.28em 0.45em 0.24em;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.vita-chip,
|
|
a.vita-location {
|
|
transition: none;
|
|
}
|
|
}
|