/* ========================================================================== STYLESHEET — colours, fonts, and layout for index.html HOW TO CHANGE THE LOOK, in order of how often you will want to: 1. COLOURS. Six ready-made schemes are defined below. Pick one by editing the single word in index.html, line 7: Options: teal | midnight | harbor | forest | plum | graphite | sand 2. FONT. See the --font line in the :root block below; three alternatives are written out as comments right underneath it. Swap one in. 3. ANYTHING ELSE. Every colour is a variable (the --things). Change the value once at the top and it updates everywhere it is used. ========================================================================== */ /* ---------- THE FONT AND THE PAGE (light) SURFACE ------------------------- */ :root { /* ACTIVE FONT — Optima, a humanist sans-serif. To change it, comment this line out and uncomment one below. */ --font: "Optima", "Gill Sans", "Trebuchet MS", sans-serif; /* --font: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; modern book serif */ /* --font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; classic academic serif */ /* --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; clean sans-serif */ /* The page surface. Slightly warm white, dark grey text. */ --paper: #fbfaf8; --ink: #1f2328; --muted: #66707c; --rule: #e2e0da; --divider: rgba(0,0,0,.06); --sidebar-w: 368px; /* width of the left banner: sized so the longest affiliation line ("Center for Studies in Economics and Finance,") fits on one line. If you make that line longer, widen this (or shorten the text). */ /* HOW WIDE THE TEXT COLUMN IS ALLOWED TO GET. Raise it to use more of a wide screen, lower it for shorter, easier-to-read lines. Somewhere between 800px and 1200px is sensible. */ --content-w: 1020px; } /* ---------- COLOUR SCHEMES ------------------------------------------------ Each block sets the banner colours and the accent used for headings, links, and highlights. Only the one named in index.html is applied. -------------------------------------------------------------------------- --side-bg banner background --side-ink banner text --side-dim banner secondary text (your role, icons) --side-strong banner text on hover --side-active highlight for the current section, and the CV link --accent the short bar under each heading; small highlights --link colour of links in the main column -------------------------------------------------------------------------- */ /* teal — dark teal banner and text, amber used only as decoration (active). #0d4b4d is a darker shade of the #116466 you gave me; it is both the banner background and the colour of every piece of coloured text on the page (paper titles, links, course names, the small uppercase labels). The amber #c2700a is now purely decorative: the short bar under each heading, the affiliation bullets, the teaching score, and the hover state on a title. To go back to the original lighter teal, put #116466 in --side-bg below. */ html[data-palette="teal"] { --side-bg:#0d4b4d; --side-ink:#eef4f3; --side-dim:#c6dedc; --side-strong:#fff; --side-active:#f7ce96; --side-rule: rgba(255,255,255,.20); --accent:#c2700a; --link:#0d4b4d; } /* midnight — deep blue banner, teal accent */ html[data-palette="midnight"] { --side-bg:#202a3c; --side-ink:#eef1f6; --side-dim:#98a3b5; --side-strong:#fff; --side-active:#8fbcd9; --side-rule: rgba(255,255,255,.20); --accent:#2a6f8f; --link:#256179; } /* harbor — soft slate-blue banner, warm amber accent */ html[data-palette="harbor"] { --side-bg:#33465c; --side-ink:#eef2f6; --side-dim:#a3b1c1; --side-strong:#fff; --side-active:#f0b775; --side-rule: rgba(255,255,255,.20); --accent:#b06f2a; --link:#96601f; } /* forest — dark green banner, deep olive accent */ html[data-palette="forest"] { --side-bg:#1f3a30; --side-ink:#eef1e9; --side-dim:#a5b5a8; --side-strong:#fff; --side-active:#c2d6a8; --side-rule: rgba(255,255,255,.20); --accent:#3f6b4a; --link:#38603f; } /* plum — aubergine banner, dusty rose accent */ html[data-palette="plum"] { --side-bg:#3a2740; --side-ink:#f2edf3; --side-dim:#b6a5bb; --side-strong:#fff; --side-active:#d9a8c4; --side-rule: rgba(255,255,255,.20); --accent:#8a4f74; --link:#7a4566; } /* graphite — neutral dark grey banner, blue accent */ html[data-palette="graphite"] { --side-bg:#2b2f36; --side-ink:#edeef0; --side-dim:#a6acb5; --side-strong:#fff; --side-active:#9dc4e0; --side-rule: rgba(255,255,255,.20); --accent:#3a6ea5; --link:#325e8c; } /* sand — pale banner with dark text; a lighter, quieter look */ html[data-palette="sand"] { --side-bg:#e8e2d6; --side-ink:#2b2620; --side-dim:#7a7062; --side-strong:#000; --side-active:#9b5b28; --side-rule: rgba(0,0,0,.16); --accent:#9b5b28; --link:#8a4f21; } /* ========================================================================== From here down is layout. You rarely need to touch it, but every rule is labelled so you can find things if you want to nudge a size or a spacing. ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--paper); color: var(--ink); font-size: 17.5px; /* overall text size of the page */ line-height: 1.66; /* spacing between lines */ } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------- LEFT BANNER --------------------------------------------------- */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--side-bg); color: var(--side-ink); padding: 44px 32px 28px; display: flex; flex-direction: column; overflow: hidden; /* the banner never scrolls on its own */ border-right: 1px solid var(--divider); } /* The banner is a fixed, full-height column, so it must fit the window without scrolling. On a short window the portrait — the flexible element — shrinks to absorb the deficit, so the menu underneath always stays visible. */ .sidebar img.me { width: 304px; height: 365px; /* spans the banner's full inner width */ flex: 0 1 auto; /* may shrink when the window is short */ min-height: 140px; /* ...but never below a recognizable portrait */ object-fit: cover; object-position: 50% 40%; /* which part of the photo to keep when cropping */ border-radius: 14px; border: 1px solid rgba(255,255,255,.28); box-shadow: 0 6px 18px rgba(0,0,0,.3); } .sidebar .name { margin-top: 20px; font-size: 24px; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; } .sidebar .name a { color: var(--side-ink); } .sidebar .name a:hover { text-decoration: none; } .sidebar .role { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--side-dim); } /* the section menu */ .sidebar nav { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--side-rule); } .sidebar nav a { display: block; color: var(--side-ink); font-size: 16px; padding: 6px 0; border-left: 2px solid transparent; } .sidebar nav a:hover { color: var(--side-strong); text-decoration: none; padding-left: 6px; transition: padding .15s; } .sidebar nav a.active { color: var(--side-active); border-left: 2px solid var(--side-active); padding-left: 12px; } /* CV link and the row of icons under your role */ .sidebar .idlinks { margin-top: 18px; display: flex; align-items: center; gap: 12px; } .sidebar .idlinks .cv { display: inline-flex; align-items: center; gap: 7px; color: var(--side-active); font-size: 12.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; } .sidebar .idlinks .cv:hover { color: var(--side-ink); text-decoration: none; } .sidebar .idlinks .sep { width: 1px; height: 15px; background: var(--side-rule); } .sidebar .idlinks .pic { display: inline-flex; align-items: center; justify-content: center; color: var(--side-dim); background: none; border: 0; padding: 0; cursor: pointer; } .sidebar .idlinks .pic:hover { color: var(--side-ink); } .sidebar .idlinks .cv:focus-visible, .sidebar .idlinks .pic:focus-visible { outline: 1px dotted var(--side-active); outline-offset: 3px; } .sidebar .idlinks svg { height: 16px; width: auto; display: block; } .sidebar .idlinks .ic-doc { height: 15px; } .sidebar .idlinks .ic-mail { height: 15px; } .sidebar .idlinks .ic-check { height: 13px; display: none; } /* Fixed slot so the envelope -> check swap cannot nudge the icons after it. */ .sidebar .idlinks .mailbtn { width: 18px; } .sidebar .idlinks .mailbtn.copied { color: var(--side-active); } .sidebar .idlinks .mailbtn.copied .ic-mail { display: none; } .sidebar .idlinks .mailbtn.copied .ic-check { display: block; } /* hidden message announcing the copy to screen readers */ .sidebar .idlinks .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------- RIGHT COLUMN -------------------------------------------------- */ .content { margin-left: var(--sidebar-w); padding: 72px 56px 72px; } .inner { max-width: var(--content-w); } /* set this at the top of the file */ /* Breathing room after the last section. This is not only cosmetic: the menu highlights whichever section has scrolled near the top of the window, so the final sections need enough space beneath them to actually get there. Without it the page runs out of scroll early and Teaching can never be highlighted. */ .inner { padding-bottom: 32vh; } section { scroll-margin-top: 34px; } /* the opening paragraph */ .lede { font-size: 18px; line-height: 1.5; margin: 4px 0 8px; } .lede strong { color: var(--link); } /* section headings and the short coloured bar under them */ h2 { font-size: 24px; font-weight: 600; margin: 48px 0 6px; color: var(--link); } .h-rule { width: 46px; height: 3px; background: var(--accent); border: none; margin: 0 0 22px; } p + p { margin-top: 14px; } /* ---------- AFFILIATIONS, NOTES, AND CONTACT ------------------------------ */ /* the short list of affiliations under the opening paragraph */ .affil { list-style: none; margin: 16px 0 4px; padding: 0; } .affil li { font-size: 16px; line-height: 1.5; color: var(--muted); padding-left: 15px; position: relative; margin-top: 5px; } .affil li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } /* small grey note under a heading, e.g. "available upon request" */ .note { font-size: 15px; color: var(--muted); margin: -8px 0 20px; font-style: italic; } /* postal address block */ .contact { font-style: normal; font-size: 16.5px; line-height: 1.7; color: var(--muted); } .contact a { color: var(--link); } /* ---------- PAPERS -------------------------------------------------------- */ .paper { margin-bottom: 26px; } .paper .title { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--link); } .paper .title a { color: inherit; } .paper .title a:hover { color: var(--accent); text-decoration: none; } .paper .authors { font-size: 15.5px; color: var(--muted); margin-top: 2px; } .paper .authors a { color: inherit; } .paper .venue { font-size: 15px; margin-top: 2px; } .paper .venue .v { font-style: italic; color: var(--ink); } .paper .venue .y { color: var(--muted); } .paper .plinks { font-size: 14.5px; margin-top: 5px; letter-spacing: .01em; } .paper .plinks a { color: var(--link); margin-right: 2px; } .paper .plinks .sl { color: var(--rule); margin: 0 6px; } /* extra lines under a paper: Presented at / Awards / Media / Data */ .paper .extra { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin-top: 4px; } .paper .extra a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--rule); } .paper .extra a:hover { color: var(--link); text-decoration-color: currentColor; } .paper .extra .lbl { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--link); margin-right: 5px; } /* policy writing list */ .plist { list-style: none; margin: 0; padding: 0; } .plist li { margin-bottom: 14px; font-size: 17px; line-height: 1.45; } .plist .src { display: block; font-size: 14.5px; color: var(--muted); margin-top: 1px; } /* the click-to-open "Summary" / "Description" blocks */ .brief { margin: 6px 0 2px; } .brief summary { cursor: pointer; color: var(--muted); width: fit-content; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .brief summary::marker { color: var(--ink); } /* the little triangle */ .brief summary::-webkit-details-marker { color: var(--ink); } /* same, older Safari */ .brief summary:hover { text-decoration: underline; text-underline-offset: 3px; } .brief p { margin-top: 9px; font-size: 15px; line-height: 1.55; color: var(--muted); text-align: justify; hyphens: auto; padding-left: 14px; border-left: 2px solid var(--rule); } /* ---------- TEACHING ------------------------------------------------------ */ .course { margin-bottom: 24px; } .course .cname { font-size: 18.5px; font-weight: 600; color: var(--link); } .course .role2 { color: var(--muted); font-size: 15.5px; margin-top: 2px; } .course .score { color: var(--accent); font-weight: 700; } /* ---------- SOFTWARE ------------------------------------------------------ */ .pkg { margin-bottom: 26px; } .pkg .pname { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 16.5px; font-weight: 700; } .pkg .pname a { color: var(--link); } .pkg .pname a:hover { color: var(--accent); text-decoration: none; } .pkg .lang { color: var(--muted); font-size: 14.5px; } .pkg .desc { font-size: 16px; margin-top: 3px; } .pkg .badges { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pkg .badges img { height: 20px; display: block; } /* ---------- SMALL SCREENS AND SHORT WINDOWS ------------------------------- */ /* On a very short window even the shrunk portrait cannot buy enough room, and the menu links at the bottom would be cut off. Give the banner a scrollbar back in that corner — a scrollbar beats unreachable links. */ @media (min-width: 901px) and (max-height: 700px) { .sidebar { overflow-y: auto; } } /* Phones and narrow windows: the banner stops being a fixed column and simply sits above the content, with the menu laid out in a row. */ @media (max-width: 900px) { .sidebar { position: static; width: auto; padding: 36px 28px 28px; border-right: none; border-bottom: 1px solid var(--divider); } .sidebar nav { margin-top: 22px; } .sidebar nav a { display: inline-block; margin-right: 18px; border-left: none; } .sidebar nav a.active { border-left: none; padding-left: 0; border-bottom: 2px solid var(--side-active); } .content { margin-left: 0; padding: 40px 28px; } }