/* lorenzo.optlyx.com — plain old-school homepage. No framework, no build step. Edit by hand. */ /* EB Garamond, self-hosted (variable, weights 400–800). Served from /fonts so the page makes no request to Google on every visit — faster, and no third-party transfer to justify under the GDPR. */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/ebgaramond-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/ebgaramond-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400 800; font-display: swap; src: url('/fonts/ebgaramond-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400 800; font-display: swap; src: url('/fonts/ebgaramond-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --ink: #1a1a1a; --muted: #666; --link: #0645ad; --link-visited: #0b0080; --rule: #e2e2e2; --bg: #ffffff; } /* Terminal palette. Only the variables change — the layout, the measure and the words are the same page. Set on by a tiny inline script so it never flashes white first. */ html.hacker { --ink: #c9ffd4; --muted: #5f9e6b; --link: #7ee787; --link-visited: #58c26a; --rule: #1e3d26; --bg: #0a0e0a; } html.hacker body { font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: 15.5px; line-height: 1.7; } html.hacker h1, html.hacker h2, html.hacker h3 { font-weight: 700; } html.hacker h1 { font-size: 27px; } html.hacker h2 { font-size: 19px; } html.hacker .photo { filter: grayscale(1) contrast(1.15) brightness(.92); } html.hacker code, html.hacker .empty { background: #10180f; } html.hacker .empty { border-color: var(--rule); } html.hacker a:hover { background: #10240f; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); /* EB Garamond runs small on the body — 19px here reads like 17px Georgia. */ font-family: 'EB Garamond', Georgia, "Times New Roman", Times, serif; font-size: 19px; line-height: 1.62; margin: 0; padding: 0 20px 80px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .wrap { max-width: 720px; margin: 0 auto; } a { color: var(--link); text-decoration: none; } a:visited { color: var(--link-visited); } a:hover { text-decoration: underline; } /* ---- top bar ---- */ .topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 28px 0 0; } .topbar nav a { margin-right: 14px; } .topbar nav a.here { color: var(--ink); font-weight: bold; } /* The two switches. Added by site.js, so they never show up dead when JavaScript is off. Deliberately small: they are tools, not navigation. */ .tools { margin-left: auto; } .switch { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 12.5px; color: var(--muted); background: none; border: 1px solid var(--rule); border-radius: 0; padding: 2px 7px; margin-left: 6px; cursor: pointer; line-height: 1.5; } .switch:hover { color: var(--ink); border-color: var(--muted); } .switch[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); } /* Markdown view */ .mdview { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.72; white-space: pre-wrap; word-wrap: break-word; margin: 26px 0 0; padding: 22px 24px; border: 1px solid var(--rule); background: #fbfbfa; color: var(--ink); } html.hacker .mdview { background: #10180f; } .mdbar { margin: 12px 0 0; } hr { border: 0; border-top: 1px solid var(--rule); margin: 22px 0 28px; } /* ---- header block ---- */ .photo { float: left; width: 165px; margin: 4px 22px 12px 0; border: 1px solid var(--rule); } h1 { font-size: 36px; font-weight: 500; margin: 0 0 2px; letter-spacing: -.005em; } .tagline { color: var(--muted); font-size: 17px; margin: 0 0 16px; font-style: italic; } h2 { font-size: 23px; font-weight: 500; margin: 40px 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--rule); clear: both; } h3 { font-size: 19px; margin: 22px 0 4px; } /* Hand-drawn 16x16 pixel icons, inline next to a few headings. Sized in em so they follow the type, never taller than a capital. */ .mc { width: .82em; height: .82em; vertical-align: -.02em; margin-right: .12em; image-rendering: pixelated; } p { margin: 0 0 14px; } ul { padding-left: 22px; margin: 0 0 14px; } li { margin-bottom: 7px; } .dim, .date { color: var(--muted); } .date { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 13px; } /* ---- entry lists (posts, talks, cv rows) ---- */ .entries { list-style: none; padding: 0; } .entries li { margin-bottom: 14px; } .entries .meta { display: block; } .entries .sub { display: block; margin-top: 2px; color: var(--muted); font-size: 17px; } /* the 404 hole */ .void { display: block; margin: 30px 0 26px; max-width: 100%; height: auto; } /* ---- advancements ---- One unlocked thing per row: icon, what it was called, when, what it was. Framed, because the frame is the joke — but hairline, so it stays a homepage and not a game UI. */ .advancements { list-style: none; padding: 0; margin: 18px 0 0; } .adv { display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; gap: 2px 10px; margin: 0 0 8px; padding: 11px 14px; border: 1px solid var(--rule); } /* Sits next to the title, not floating in the middle of a two-line row. */ .adv .mc { grid-row: span 2; align-self: start; margin: 2px 0 0; width: 20px; height: 20px; } .adv-title { font-weight: bold; } .adv-when { justify-self: end; white-space: nowrap; } .adv-what { grid-column: 2 / -1; color: #333; } html.hacker .adv-what { color: var(--muted); } @media (max-width: 480px) { .adv { grid-template-columns: 24px 1fr; } .adv-when { grid-column: 2; justify-self: start; } .adv-what { grid-column: 1 / -1; margin-top: 4px; } } .cv-row { margin-bottom: 20px; } .cv-row .role { font-weight: bold; } .cv-row .where { } .cv-row .when { float: right; } .cv-row .what { color: #333; margin: 3px 0 0; } .cv-row::after { content: ""; display: block; clear: both; } /* a plain line of measured numbers — no cards, no badges */ .stats { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 13.5px; line-height: 1.9; color: var(--muted); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 0; margin: 0 0 20px; } /* empty-state block: a page with nothing on it should still look designed */ .empty { margin: 26px 0 0; padding: 26px 28px; border: 1px solid var(--rule); border-radius: 3px; background: #fbfbfa; } .empty p:last-child { margin-bottom: 0; } blockquote { margin: 0 0 14px; padding-left: 16px; border-left: 3px solid var(--rule); color: #333; font-style: italic; } code { font-family: Menlo, Consolas, monospace; font-size: .88em; background: #f5f5f5; padding: 1px 4px; } footer { margin-top: 54px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 16px; color: var(--muted); } @media print { body { font-size: 12pt; padding: 0; } .topbar, footer { display: none; } a { color: var(--ink); } } @media (max-width: 560px) { body { font-size: 18px; } .photo { width: 120px; margin-right: 16px; } h1 { font-size: 25px; } }