/* ========================================================================= Jonathan Simkin — personal site Shared stylesheet. Plain CSS, no build step. Theme: technical foundation + editorial serif for long-form. Blue accent. Light + dark via [data-theme] on . ========================================================================= */ :root { --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --serif: "Newsreader", Georgia, "Times New Roman", serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --maxw: 1080px; --readw: 680px; } /* ---- Light (default) --------------------------------------------------- */ :root, [data-theme="light"] { --bg: #ffffff; --bg-sub: #f7f7f8; --bg-card: #ffffff; --ink: #16171a; --ink-soft: #565a63; --ink-faint: #8b8f98; --line: #ececef; --line-strong: #d9dadf; --accent: #1f4ed8; --accent-hover: #1a42b8; --accent-tint: #eef1fd; --code-bg: #f6f7f9; --code-ink: #1f2430; --selection: #d7e0fb; } /* ---- Dark -------------------------------------------------------------- */ [data-theme="dark"] { --bg: #0d0e11; --bg-sub: #15171b; --bg-card: #131419; --ink: #e9eaee; --ink-soft: #a3a7b2; --ink-faint: #6c707b; --line: #23252b; --line-strong: #30333a; --accent: #6a8bf7; --accent-hover: #88a1f9; --accent-tint: #1a2236; --code-bg: #16181d; --code-ink: #cdd2dd; --selection: #243056; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .3s ease, color .3s ease; } ::selection { background: var(--selection); } a { color: var(--accent); text-decoration: none; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0; white-space: nowrap; } .phd { color: var(--ink-faint); font-weight: 400; } /* ========================================================================= Header ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .site-header__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; justify-content: space-between; } .brand { display: inline-flex; align-items: baseline; gap: 9px; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; } .brand__mono { font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--accent); border: 1px solid var(--line-strong); border-radius: 5px; padding: 2px 6px; letter-spacing: 0.02em; } .brand__name { font-size: 15px; } .nav { display: flex; align-items: center; gap: 6px; } .nav a { color: var(--ink-soft); font-size: 14.5px; padding: 8px 12px; border-radius: 7px; transition: color .15s, background .15s; } .nav a:hover { color: var(--ink); background: var(--bg-sub); } .nav a.is-active { color: var(--ink); } .nav a.is-active::after { content: ""; display: block; height: 2px; margin-top: 5px; background: var(--accent); border-radius: 2px; } /* Theme toggle */ .theme-toggle { margin-left: 6px; width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 15px; line-height: 1; transition: color .15s, border-color .15s, background .15s; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink-faint); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ========================================================================= Buttons / links ========================================================================= */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 15px; font-weight: 500; padding: 11px 18px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, transform .15s; } .btn .arr { transition: transform .15s; } .btn:hover .arr { transform: translateX(3px); } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-hover); } [data-theme="dark"] .btn--primary { color: #0c1020; } .btn--ghost { color: var(--ink); border-color: var(--line-strong); } .btn--ghost:hover { border-color: var(--ink); } .textlink { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); transition: border-color .15s; } .textlink:hover { border-bottom-color: var(--accent); } /* ========================================================================= Home — masthead ========================================================================= */ .masthead { padding-top: 88px; padding-bottom: 40px; } .masthead__grid { display: flex; align-items: center; justify-content: space-between; gap: 48px; } .masthead__text { min-width: 0; } .masthead__photo { width: 156px; height: 156px; flex-shrink: 0; object-fit: cover; border-radius: 18px; border: 1px solid var(--line-strong); } .masthead__eyebrow { margin-bottom: 22px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .masthead__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .masthead h1 { font-family: var(--sans); font-weight: 600; font-size: clamp(2.9rem, 7vw, 5.1rem); line-height: 1.0; letter-spacing: -0.035em; margin: 0 0 20px; } .masthead__role { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--ink-soft); text-transform: uppercase; } .home-lead { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.42; letter-spacing: -0.01em; max-width: 760px; margin: 0 0 26px; color: var(--ink); } .home-intro { font-family: var(--serif); font-size: 1.15rem; line-height: 1.7; color: var(--ink-soft); max-width: 660px; margin: 0 0 40px; } .home-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; } /* Pillars */ .pillars { list-style: none; margin: 64px 0 0; padding: 0; border-top: 1px solid var(--line-strong); } .pillars__cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 20px 0 4px; } .pillars__row { display: grid; grid-template-columns: 52px minmax(220px, 300px) 1fr; gap: 24px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); } .pillars__n { font-family: var(--mono); font-size: 13px; color: var(--accent); } .pillars__k { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-tint); border-radius: 999px; padding: 3px 9px; font-weight: 500; white-space: nowrap; } .pillars__v { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; max-width: 460px; } /* ========================================================================= Footer ========================================================================= */ .site-footer { margin-top: 100px; border-top: 1px solid var(--line); background: var(--bg-sub); } .site-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 44px 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; } .site-footer__name { font-weight: 600; letter-spacing: -0.01em; } .site-footer__meta { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); margin-top: 4px; } .social { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; flex-wrap: wrap; } .social a { display: flex; flex-direction: column; gap: 3px; color: var(--ink); } .social__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); } .social__v { font-size: 14px; color: var(--ink-soft); transition: color .15s; } .social a:hover .social__v { color: var(--accent); } /* ========================================================================= Page header (CV / Writing) ========================================================================= */ .page-head { padding-top: 72px; padding-bottom: 8px; } .page-head h1 { font-family: var(--sans); font-weight: 600; font-size: clamp(2.2rem, 4.6vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.04; margin: 14px 0 0; } .page-head__sub { font-family: var(--serif); font-size: 1.2rem; color: var(--ink-soft); max-width: 620px; margin: 18px 0 0; line-height: 1.6; } /* ========================================================================= CV ========================================================================= */ .cv { padding-bottom: 40px; } .cv-section { display: grid; grid-template-columns: 200px 1fr; gap: 40px; padding: 40px 0; border-top: 1px solid var(--line); } .cv-section__label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); padding-top: 4px; } .cv-section__body { min-width: 0; } .cv-summary { font-family: var(--serif); font-size: 1.18rem; line-height: 1.66; color: var(--ink); margin: 0; max-width: 640px; } .skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; } .skill-group h3 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px; font-weight: 500; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font-size: 13.5px; color: var(--ink-soft); background: var(--bg-sub); border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; } .role { margin-bottom: 34px; } .role:last-child { margin-bottom: 0; } .role__head { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; flex-wrap: wrap; } .role__title { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .role__org { color: var(--accent); } .role__when { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; } .role__where { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); margin: 3px 0 12px; } .role ul { margin: 0; padding-left: 18px; } .role li { color: var(--ink-soft); margin-bottom: 7px; line-height: 1.55; } .role li::marker { color: var(--ink-faint); } .proj { padding: 20px 0; border-bottom: 1px solid var(--line); } .proj:first-child { padding-top: 0; } .proj:last-child { border-bottom: 0; } .proj h3 { margin: 0 0 6px; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; } .proj p { margin: 0 0 8px; color: var(--ink-soft); line-height: 1.55; } .proj__stack { display: flex; gap: 8px; flex-wrap: wrap; } .proj__stack span { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); } .pub { padding: 16px 0; border-bottom: 1px solid var(--line); } .pub:last-child { border-bottom: 0; } .pub p { margin: 0; color: var(--ink-soft); line-height: 1.55; font-size: 0.98rem; } .pub__title { color: var(--ink); font-weight: 500; } .pub__venue { font-style: italic; } .edu { margin-bottom: 18px; } .edu:last-child { margin-bottom: 0; } .edu__deg { font-weight: 600; } .edu__org { color: var(--ink-soft); } .edu__when { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); } /* ========================================================================= Writing index ========================================================================= */ .post-list { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--line-strong); } .post-card a { display: grid; grid-template-columns: 132px 1fr 28px; gap: 28px; align-items: baseline; padding: 30px 6px; border-bottom: 1px solid var(--line); color: var(--ink); transition: padding .18s ease, background .18s ease; } .post-card a:hover { padding-left: 18px; background: var(--bg-sub); } .post-card__date { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); padding-top: 5px; } .post-card__title { display: block; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 8px; } .post-card__desc { display: block; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; max-width: 560px; } .post-card__tag { font-family: var(--mono); font-size: 11px; color: var(--accent); margin-top: 10px; display: inline-block; letter-spacing: .03em; } .post-card__arr { font-size: 20px; color: var(--ink-faint); justify-self: end; align-self: center; transition: color .18s, transform .18s; } .post-card a:hover .post-card__arr { color: var(--accent); transform: translateX(4px); } /* Publications (writing page) — compact, secondary to posts */ .pubs { margin-top: 72px; } .pubs__cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 6px; } .publist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); } .publist__row a { display: grid; grid-template-columns: 132px 1fr 28px; gap: 28px; align-items: baseline; padding: 15px 6px; border-bottom: 1px solid var(--line); color: var(--ink); transition: background .15s ease; } .publist__row a:hover { background: var(--bg-sub); } .publist__year { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); } .publist__main { min-width: 0; } .publist__title { font-size: 1.02rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; } .publist__venue { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; margin-left: 8px; } .publist__arr { font-size: 15px; color: var(--ink-faint); justify-self: end; transition: color .15s; } .publist__row a:hover .publist__arr { color: var(--accent); } .pubs__more { font-size: 14px; color: var(--ink-soft); margin: 16px 0 0; } /* ========================================================================= Article (blog post) ========================================================================= */ .article { max-width: var(--readw); margin: 0 auto; padding: 0 32px; } .article-head { padding: 64px 0 32px; border-bottom: 1px solid var(--line); margin-bottom: 40px; } .article-head__meta { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); display: flex; gap: 16px; flex-wrap: wrap; white-space: nowrap; } .article-head h1 { font-family: var(--sans); font-weight: 600; font-size: clamp(2.1rem, 4.4vw, 3rem); letter-spacing: -0.03em; line-height: 1.08; margin: 18px 0 16px; } .article-head__standfirst { font-family: var(--serif); font-size: 1.3rem; line-height: 1.5; color: var(--ink-soft); margin: 0; } .prose { font-family: var(--serif); font-size: 1.21rem; line-height: 1.75; color: var(--ink); } .prose p { margin: 0 0 1.45em; } .prose h2 { font-family: var(--sans); font-size: 1.55rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 2.2em 0 0.7em; color: var(--ink); } .prose h3 { font-family: var(--sans); font-size: 1.2rem; font-weight: 600; margin: 1.8em 0 0.5em; } .prose a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .prose strong { font-weight: 600; } .prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.45em; } .prose li { margin-bottom: 0.5em; } .prose blockquote { margin: 1.6em 0; padding-left: 22px; border-left: 2px solid var(--accent); color: var(--ink-soft); font-style: italic; } .prose code { font-family: var(--mono); font-size: 0.83em; background: var(--code-bg); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--code-ink); } .code-block { font-family: var(--mono); font-size: 13.5px; line-height: 1.65; background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; overflow-x: auto; margin: 1.8em 0; color: var(--code-ink); } .code-block .c-cap { display: block; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; } .code-block code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; } .tok-kw { color: var(--accent); } .tok-fn { color: #9a4dd6; } [data-theme="dark"] .tok-fn { color: #c08af0; } .tok-str { color: #1a8a4a; } [data-theme="dark"] .tok-str { color: #6fcf97; } .tok-com { color: var(--ink-faint); font-style: italic; } .tok-num { color: #b3431f; } [data-theme="dark"] .tok-num { color: #e8975f; } .article-foot { max-width: var(--readw); margin: 56px auto 0; padding: 32px 32px 0; border-top: 1px solid var(--line); } .article-foot a { font-size: 15px; } /* ========================================================================= Demo widget (precision / recall) ========================================================================= */ .widget { font-family: var(--sans); background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: 14px; padding: 24px; margin: 2.4em 0; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } [data-theme="dark"] .widget { box-shadow: none; } .widget__cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 4px; } .widget__title { font-size: 1.05rem; font-weight: 600; margin: 0 0 18px; letter-spacing: -0.01em; } .widget__canvas-wrap { position: relative; } .widget canvas { display: block; width: 100%; height: auto; } .widget__sliderrow { display: flex; align-items: center; gap: 16px; margin: 18px 0 6px; } .widget__sliderrow label { font-size: 13px; color: var(--ink-soft); white-space: nowrap; font-family: var(--mono); } .widget input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 4px; background: var(--line-strong); outline: none; } .widget input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 3px solid var(--bg-card); box-shadow: 0 0 0 1px var(--accent); } .widget input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 3px solid var(--bg-card); } .widget__thr { font-family: var(--mono); font-size: 14px; color: var(--ink); width: 46px; text-align: right; font-weight: 500; } .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 18px; } .metric { background: var(--bg-card); padding: 14px 16px; } .metric__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); } .metric__v { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; } .metric--accent .metric__v { color: var(--accent); } .confusion { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; } .cell { border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; background: var(--bg-sub); } .cell__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); } .cell__v { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; } .cell--tp { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .cell--fp { border-color: color-mix(in srgb, #b3431f 40%, var(--line)); } .widget__note { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 16px 0 0; } /* ========================================================================= Responsive ========================================================================= */ @media (max-width: 760px) { body { font-size: 16px; } .wrap, .site-header__inner { padding-left: 22px; padding-right: 22px; } .masthead { padding-top: 56px; padding-bottom: 32px; } .masthead__grid { flex-direction: column-reverse; align-items: flex-start; gap: 28px; } .masthead__photo { width: 96px; height: 96px; border-radius: 14px; } .nav a { padding: 8px 9px; font-size: 14px; } .brand__name { display: none; } .pillars__row { grid-template-columns: 36px 1fr; gap: 8px 16px; } .pillars__v { grid-column: 1 / -1; padding-left: 52px; max-width: none; } .cv-section { grid-template-columns: 1fr; gap: 16px; } .cv-section__label { padding-top: 0; } .skills-grid { grid-template-columns: 1fr; } .role__head { flex-direction: column; } .post-card a { grid-template-columns: 1fr 24px; gap: 6px 16px; } .post-card__date { grid-column: 1 / -1; } .publist__row a { grid-template-columns: 1fr 24px; gap: 2px 16px; } .publist__year { grid-column: 1 / -1; } .publist__venue { margin-left: 0; display: block; margin-top: 2px; } .metrics { grid-template-columns: repeat(2, 1fr); } .article, .article-foot { padding-left: 22px; padding-right: 22px; } .prose { font-size: 1.13rem; } } @media print { .site-header, .site-footer, .theme-toggle { display: none; } body { font-size: 12pt; } }