/* ============================================================================
FELIPE E. HARKER — RESUME STYLESHEET
----------------------------------------------------------------------------
Every visual rule for the page lives in this one file. There is no CSS
framework, no preprocessor, no build step and no JavaScript: what you read
here is what the browser gets, and `index.html` is the only document that
consumes it.
THE DESIGN, IN ONE PARAGRAPH
The same quiet, modern document the other two sites are set in. A neutral
sans (Inter) carries every heading and every line of prose; a monospace
(IBM Plex Mono) is reserved for recorded values — dates, places, a phone
number, an address — where the reader benefits from seeing at a glance that
something is a literal fact rather than a sentence about one. Structure is
carried by hairline rules and generous whitespace, not by heavy black bars,
boxes, or drop shadows. Weight is used sparingly: nothing here is set bolder
than 600. One deep red is the only accent, and it means "this is
interactive" — nothing else.
WHERE THE CONTENT LIVES
`index.html` is the source of truth for the resume. `resume.md` in the
repository root is a reference copy of the same text and is not read by
anything at runtime; when the two disagree, the HTML is right.
HOW THIS FILE IS ORGANISED
1. Design tokens ............ every colour, font, size and spacing value
2. Document skeleton ........ page frame, resets, base elements
3. Masthead ................. name and contact line at the top
4. Contents ................. the section index under the masthead
5. Section headings ......... "Education", "Experience", …
6. Rules .................... the horizontal dividers
7. Body copy ................ paragraphs, lists, labels
8. Entries .................. a school, a job, a project
9. Skills ................... the label/value definition grid
10. References ............... the list of referees at the foot
11. Colophon ................. page footer
12. Responsive ............... narrow-screen overrides
13. Print .................... what the page becomes on paper
To restyle the whole page, change a token in section 1 rather than editing
the rules below — nearly every rule is expressed in terms of those tokens.
========================================================================= */
/* ============================================================================
1. DESIGN TOKENS
Change these, not the rules further down. The values are shared with
hark_ornithology and alexandria_scripting; a divergence here is a divergence
in the design language, not a local tweak.
========================================================================= */
:root {
/* -- Colour: surfaces ----------------------------------------------------
Beyond the page itself there is one barely-there warm tint, used behind
small inline objects. It is never used to shade a region of the page — a
section is set off by whitespace and one hairline, not by a panel. */
--color-bg: #ffffff; /* page background */
--color-surface-hover: #f4f2ef; /* inline code, neutral tags */
/* -- Colour: text --------------------------------------------------------
Three steps, in descending emphasis. Anything that is not prose — a
dateline, a location, an eyebrow label — sits on one of the lower two,
which is most of what keeps the page feeling light. */
--color-text: #1c1a19; /* headings and entry titles */
--color-text-soft: #4a4643; /* secondary prose: bullets, descriptions */
--color-text-mute: #7a746e; /* tertiary: dates, places, labels */
/* -- Colour: accent ------------------------------------------------------
A single deep red, and the only thing allowed to use it is something you
can click: an email address, a phone number, a link. The hover step is
derived from it, so setting --color-accent alone re-accents the page. */
--color-accent: #7c1405;
--color-accent-hover: color-mix(in srgb, var(--color-accent) 72%, #000000);
--color-selection: #ffe0d9; /* ::selection highlight */
/* -- Colour: rules -------------------------------------------------------
Structure is hairlines, not bars. Both weights are 1px; they differ only
in contrast, and even the "strong" one is a light grey. A divider should
tell you where a section ends, not draw attention to itself doing it. */
--color-rule: #eae7e3; /* between entries within a section */
--color-rule-strong: #d5d0ca; /* between major sections */
/* -- Type ----------------------------------------------------------------
Both families are loaded from Google Fonts by the in index.html.
The fallbacks apply if that request fails. Change a family here AND in
that — one without the other silently falls back. */
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Helvetica, Arial, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* -- Type weights --------------------------------------------------------
Three weights, and no bold. 600 is the heaviest thing on the page; the
jump from 400 to 600 is enough to mark a heading when the type around it
is calm. Use --weight-medium for anything that needs to be *noticed*
without being a heading: an employer, a degree, a referee's name. */
--weight-regular: 400;
--weight-medium: 500;
--weight-strong: 600;
/* -- Type scale ----------------------------------------------------------
Sizes are smaller than a serif would need at the same apparent scale:
Inter has a large x-height, so it reads bigger per px. */
--size-title: 34px; /* the name at the top */
--size-section: 23px; /* section heading */
--size-subsection: 17px; /* entry title: a job, a degree */
--size-body: 16px; /* body paragraphs */
--size-table: 15px; /* bullets, list items, skill values */
--size-data: 13px; /* monospace data: dates, places, phone */
--size-caption: 13px; /* colophon, secondary notes */
--size-fine: 12px; /* referee titles */
--size-label: 11px; /* uppercase eyebrow labels */
/* -- Letter-spacing ------------------------------------------------------
Inter is drawn for interfaces and sets slightly loose at display sizes,
so large type is tightened and small caps-tracked type is opened up. */
--track-tight: -0.02em; /* the name and section headings */
--track-body: -0.006em; /* running prose */
--track-label: 0.08em; /* uppercase eyebrow labels */
/* -- Spacing -------------------------------------------------------------
A coarse scale; prefer these over bare pixel values. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 18px;
--space-5: 26px;
--space-6: 40px;
--space-7: 56px;
/* -- Radius --------------------------------------------------------------
Used only where an element is a drawn object or a control rather than a
run of text. Text stays square; rounding it would read as decoration. */
--radius-sm: 4px;
/* -- Measure -------------------------------------------------------------
--measure caps the document. It is narrower here than on the other two
sites: this page has no tables, no diagrams and no media to hold a wide
column open, and a resume read at 1000px is a resume read in fragments.
--measure-text caps running prose inside that column. */
--measure: 820px;
--measure-text: 70ch;
/* -- Page frame ----------------------------------------------------------
The headroom and footroom. Both sit outside the --space-* scale on
purpose: they are larger than any gap between elements, which is what
makes the document read as a page rather than as a scrolling feed. */
--doc-pad-top: 80px;
--doc-pad-bottom: 120px;
--doc-pad-x: 40px; /* gutter between content and window edge */
/* -- Motion --------------------------------------------------------------
One duration, one easing, everywhere. */
--transition: 140ms ease;
}
/* ============================================================================
2. DOCUMENT SKELETON
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth; /* the contents list jumps to sections */
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--size-body);
font-weight: var(--weight-regular);
line-height: 1.6;
letter-spacing: var(--track-body);
/* Kerning and default ligatures on; Inter's contextual alternates are left
off, since they change letterforms mid-word in ways that read as a bug. */
font-feature-settings: 'kern' 1, 'liga' 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--color-selection); }
/* Links carry the accent and a hairline underline that stays put on hover —
quieter at rest than a full-weight underline, still unmistakably a link. */
a {
color: var(--color-accent);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--transition);
}
a:hover { color: var(--color-accent-hover); }
a:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
code {
font-family: var(--font-mono);
font-size: 0.88em;
background: var(--color-surface-hover);
border-radius: var(--radius-sm);
padding: 1px 5px;
}
/* `.doc` is the single centred column the page sits inside. */
.doc {
max-width: var(--measure);
margin: 0 auto;
padding: var(--doc-pad-top) var(--doc-pad-x) var(--doc-pad-bottom);
}
/* Anchored sections stop below the point they would otherwise land, so a
heading is never flush against the top edge of the viewport. */
[id] { scroll-margin-top: var(--space-6); }
/* Honour a reader's request for reduced motion: nothing here is meaningful
animation, so it can all be switched off. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* ============================================================================
3. MASTHEAD
The name, and one line of contact details beneath it. Left-aligned rather
than centred: this page is a record, not a publication front page, and the
other sites left-align their record mastheads for the same reason.
========================================================================= */
/* Small tracked caps above the name. Set in the body face rather than the
monospace: mono caps at this size read as a system message, not a label. */
.kicker {
font-size: var(--size-label);
font-weight: var(--weight-medium);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--color-text-mute);
margin: 0 0 var(--space-4);
}
.title {
font-size: var(--size-title);
font-weight: var(--weight-strong);
line-height: 1.15;
letter-spacing: var(--track-tight);
margin: 0 0 var(--space-4);
}
/* Address, phone and email: three recorded values, so the line is set in the
data face. It wraps to as many lines as the width allows rather than
scrolling or truncating — every item on it is something to be read off. */
.contact {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-1) var(--space-3);
font-family: var(--font-mono);
font-size: var(--size-data);
color: var(--color-text-mute);
margin: 0 0 var(--space-6);
}
/* The hairline between contact items. It is a rendered separator rather than
a character in the markup, so a copied line of contact details does not
come with pipes in it. */
.contact-sep {
color: var(--color-rule-strong);
user-select: none;
}
/* ============================================================================
4. CONTENTS
A plain index of the sections below. There are no numerals: the list order
is the document order, which is all a numeral was telling the reader.
========================================================================= */
.toc-label {
font-size: var(--size-label);
font-weight: var(--weight-medium);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--color-text-mute);
margin: 0 0 var(--space-3);
}
/* The index is short enough here — five entries of one word each — to sit on
one line, which the longer indexes on the other two sites cannot do. It
still wraps rather than scrolling. */
.toc {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
margin: 0;
padding: 0;
font-size: var(--size-table);
}
.toc a {
display: block;
padding: var(--space-1) 0;
text-decoration: none;
color: var(--color-text-soft);
transition: color var(--transition);
}
.toc a:hover { color: var(--color-accent); }
/* ============================================================================
5. SECTION HEADINGS
Plain labels — "Education", "Experience". Nothing is numbered: the headings
and the contents list carry the same names, which is enough to navigate by.
========================================================================= */
.section-heading {
font-size: var(--size-section);
font-weight: var(--weight-strong);
line-height: 1.25;
letter-spacing: var(--track-tight);
margin: 0 0 var(--space-4);
}
/* Whatever follows a section heading gets its gap from the heading's own
bottom margin, so elements carrying a top margin of their own drop it here
rather than doubling up. */
.section-heading + .entry,
.section-heading + .list,
.section-heading + .body-text,
.section-heading + .skills,
.section-heading + .reference-list { margin-top: 0; }
/* Each section opens with a hairline. The generous top margin, not the rule's
weight, is what separates one section from the next. */
.section {
margin-top: var(--space-7);
padding-top: var(--space-5);
border-top: 1px solid var(--color-rule-strong);
}
/* ============================================================================
6. RULES
Both weights are hairlines; they differ in contrast, not thickness.
========================================================================= */
/* Major division — under the masthead. */
.rule {
border: none;
border-top: 1px solid var(--color-rule-strong);
margin: 0 0 var(--space-6);
}
/* ============================================================================
7. BODY COPY
========================================================================= */
.body-text {
font-size: var(--size-body);
line-height: 1.7;
color: var(--color-text-soft);
max-width: var(--measure-text);
margin: 0 0 var(--space-4);
}
.list {
font-size: var(--size-table);
line-height: 1.7;
color: var(--color-text-soft);
max-width: var(--measure-text);
margin: var(--space-3) 0 0;
padding-left: var(--space-4);
}
.list li { margin-bottom: var(--space-2); }
.list li:last-child { margin-bottom: 0; }
/* An uppercase tracked eyebrow above a block of content. */
.label {
font-size: var(--size-label);
font-weight: var(--weight-medium);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--color-text-mute);
margin: 0 0 var(--space-3);
}
/* ============================================================================
8. ENTRIES
One school, one job, or one project. Every entry has the same parts in the
same order — a title, the organisation, a line of recorded values (place and
dates), and optionally a list of what was done — so that a reader scanning
the left edge finds the same kind of thing at the same offset every time.
========================================================================= */
/* Entries within a section are separated by a hairline and whitespace. The
last one drops both, so a section does not end on a rule sitting a few
pixels above the section rule that follows it. */
.entry {
padding-bottom: var(--space-5);
margin-bottom: var(--space-5);
border-bottom: 1px solid var(--color-rule);
}
.entry:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
/* The role or the degree: the line a reader is looking for. It is the heaviest
thing in the entry, one step under a section heading in size. */
.entry-title {
font-size: var(--size-subsection);
font-weight: var(--weight-strong);
line-height: 1.35;
margin: 0 0 var(--space-1);
}
/* The employer or institution. Medium weight: it needs to be noticed without
competing with the title above it. */
.entry-org {
font-size: var(--size-table);
font-weight: var(--weight-medium);
color: var(--color-text-soft);
margin: 0 0 var(--space-2);
}
/* Place and dates — two recorded values, so the line is set in the data face,
the same as the contact line in the masthead. Tabular figures keep the date
ranges of stacked entries in vertical register. */
.entry-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-1) var(--space-3);
font-family: var(--font-mono);
font-size: var(--size-data);
font-variant-numeric: tabular-nums;
color: var(--color-text-mute);
margin: 0;
}
/* ============================================================================
9. SKILLS
A definition grid: an uppercase label in the left column, its values in the
right. The same shape the checklist pages on hark_ornithology use for
protocol and effort, and for the same reason — the labels are a fixed short
vocabulary, and stacking them above their values would double the height of
the block to no gain.
========================================================================= */
.skills {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--space-3) var(--space-5);
margin: 0;
}
.skills dt {
text-transform: uppercase;
letter-spacing: var(--track-label);
font-size: var(--size-label);
font-weight: var(--weight-medium);
color: var(--color-text-mute);
align-self: baseline;
}
/* The values are prose, not data — they are the names of tools and languages
as they are written, not literals read off a record — so they stay in the
body face. */
.skills dd {
margin: 0;
font-size: var(--size-table);
line-height: 1.6;
color: var(--color-text-soft);
}
/* ============================================================================
10. REFERENCES
A plain list: a name, the titles it holds, and an address to reach it at.
Nothing here is numbered and nothing above points at it with a marker.
========================================================================= */
.reference-list {
list-style: none;
margin: 0;
padding: 0;
font-size: var(--size-table);
}
/* Each entry is its own row, separated by a hairline, so a long run of titles
never runs into the next name. */
.reference-list li {
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-rule);
line-height: 1.65;
}
.reference-list li:first-child { padding-top: 0; }
.reference-list li:last-child { border-bottom: none; }
/* The name is the entry's heading, so it carries the medium weight. */
.reference-list .name {
display: block;
font-weight: var(--weight-medium);
color: var(--color-text);
}
/* Titles sit under the name on their own line: side by side, a name and three
post-nominals compete and neither is read. */
.reference-list .desc {
display: block;
color: var(--color-text-mute);
font-size: var(--size-fine);
margin-top: var(--space-1);
}
/* An address is a recorded value and a link at once: the data face carries the
first, the accent the second. */
.reference-list a {
display: inline-block;
margin-top: var(--space-1);
font-family: var(--font-mono);
font-size: var(--size-data);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--transition), color var(--transition);
}
.reference-list a:hover { border-bottom-color: var(--color-accent); }
/* ============================================================================
11. COLOPHON
========================================================================= */
.colophon {
margin-top: var(--space-7);
padding-top: var(--space-4);
border-top: 1px solid var(--color-rule-strong);
font-size: var(--size-caption);
line-height: 1.6;
color: var(--color-text-mute);
}
/* ============================================================================
12. RESPONSIVE
One breakpoint. Below it: tighter page padding, smaller display type, and
the skills grid collapses to a single column.
========================================================================= */
@media (max-width: 640px) {
/* Display type steps down by redefining the tokens, so every rule that
already reads from them follows without being restated here. Only rules
with no token behind them need a line of their own below. */
:root {
--size-title: 27px;
--size-section: 20px;
--size-subsection: 16px;
--doc-pad-top: 44px;
--doc-pad-bottom: 80px;
--doc-pad-x: 24px;
}
.doc { padding: var(--doc-pad-top) var(--doc-pad-x) var(--doc-pad-bottom); }
/* Stack label above values instead of side by side. */
.skills { grid-template-columns: 1fr; gap: var(--space-1); }
.skills dt { margin-top: var(--space-4); }
.skills dt:first-child { margin-top: 0; }
/* On a phone the contact line has no room for three items abreast, so it
becomes one item per line and the separators are dropped rather than left
stranded at the ends of rows. */
.contact { flex-direction: column; gap: var(--space-1); }
.contact .contact-sep { display: none; }
}
/* ============================================================================
13. PRINT
A resume gets printed, and this page is the source of truth for it, so the
printed sheet is a supported output rather than an accident. What changes:
the page frame gives way to the paper's own margin, the contents list goes
(it jumps to what is already in the reader's hand), the accent goes with it,
the three text steps collapse toward black because grey prints as a weak
wash, and no entry is allowed to break across a sheet.
========================================================================= */
@media print {
:root {
--size-title: 24px;
--size-section: 15px;
--size-subsection: 12.5px;
--size-body: 10.5px;
--size-table: 10px;
--size-data: 9px;
--size-caption: 9px;
--size-fine: 9px;
--size-label: 8.5px;
--space-5: 14px;
--space-6: 18px;
--space-7: 20px;
--doc-pad-top: 0;
--doc-pad-bottom: 0;
--doc-pad-x: 0;
--color-text-soft: #2a2725;
--color-text-mute: #4a4643;
}
@page { margin: 14mm; }
body { background: #ffffff; }
.doc { max-width: none; padding: 0; }
/* Navigation and the colophon are screen furniture; paper has neither. */
.toc-label, .toc, .colophon { display: none; }
/* Links print as plain text. Every link on this page is an address whose own
text is the address, so there is nothing to spell out after it. */
a { color: inherit; text-decoration: none; }
.reference-list a { border-bottom: none; }
/* Nothing is orphaned across a sheet: an entry keeps its bullets, and a
heading keeps whatever follows it. */
.entry, .reference-list li { break-inside: avoid; }
.section-heading { break-after: avoid; }
}