/* ========================================================================== rajatpaliwal.com — minimal essay site Layout: single centered column, serif type, hairline-separated link rows. Colors live entirely in the palette blocks below. Swap one line in the attribute to re-skin the whole site. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Palettes Each palette declares a light set (-l) and a dark set (-d). The resolver in section 2 picks one based on system preference + toggle. -------------------------------------------------------------------------- */ :root, [data-palette="ivory"] { --bg-l:#f0eee6; --surface-l:#faf9f5; --text-l:#1f1e1d; --muted-l:#5e5d59; --border-l:#d1cfc5; --accent-l:#9c4221; --mark-l:#e8e6dc; --bg-d:#1f1e1d; --surface-d:#2a2927; --text-d:#f0eee6; --muted-d:#b0aea5; --border-d:#474743; --accent-d:#e8a87c; --mark-d:#3d3d3a; } [data-palette="ink"] { --bg-l:#fafafa; --surface-l:#ffffff; --text-l:#111111; --muted-l:#5c5c5c; --border-l:#dcdcdc; --accent-l:#1a56db; --mark-l:#eeeeee; --bg-d:#0d0d0d; --surface-d:#171717; --text-d:#ededed; --muted-d:#a1a1a1; --border-d:#2e2e2e; --accent-d:#7ea6ff; --mark-d:#262626; } [data-palette="sand"] { --bg-l:#f7f3ec; --surface-l:#fdfbf7; --text-l:#2b241d; --muted-l:#6b5f52; --border-l:#ded4c5; --accent-l:#a8471a; --mark-l:#efe7d8; --bg-d:#1c1814; --surface-d:#262119; --text-d:#f2ebe0; --muted-d:#b5a894; --border-d:#453c30; --accent-d:#e89b6c; --mark-d:#332c22; } [data-palette="mist"] { --bg-l:#f4f6f8; --surface-l:#ffffff; --text-l:#1b2430; --muted-l:#566070; --border-l:#d5dbe3; --accent-l:#2749c9; --mark-l:#e6ebf2; --bg-d:#121820; --surface-d:#1b232e; --text-d:#e9edf2; --muted-d:#9aa6b5; --border-d:#2d3845; --accent-d:#89aaff; --mark-d:#233040; } [data-palette="sage"] { --bg-l:#f1f4ef; --surface-l:#fbfcfa; --text-l:#1d2420; --muted-l:#556055; --border-l:#d3dbd0; --accent-l:#2f6b4f; --mark-l:#e3eade; --bg-d:#141813; --surface-d:#1d231c; --text-d:#e9efe6; --muted-d:#9dab99; --border-d:#2d372b; --accent-d:#7fc3a0; --mark-d:#232c21; } [data-palette="oxblood"] { --bg-l:#f7f2f0; --surface-l:#fdfaf9; --text-l:#241b1b; --muted-l:#665352; --border-l:#e0d2cf; --accent-l:#8c2b2b; --mark-l:#efe1de; --bg-d:#1a1414; --surface-d:#241c1c; --text-d:#f2e9e7; --muted-d:#b3a19f; --border-d:#3d2f2f; --accent-d:#e08f8f; --mark-d:#2e2323; } [data-palette="midnight"] { --bg-l:#eef1f5; --surface-l:#ffffff; --text-l:#121821; --muted-l:#4f5966; --border-l:#cfd6df; --accent-l:#0f4c9e; --mark-l:#dde4ee; --bg-d:#0f1216; --surface-d:#171b21; --text-d:#e6e9ee; --muted-d:#98a1ad; --border-d:#262c34; --accent-d:#6ea8fe; --mark-d:#1f252d; } [data-palette="cream"] { --bg-l:#fcf8f0; --surface-l:#fffdf9; --text-l:#16243d; --muted-l:#4b5a75; --border-l:#e3dbc9; --accent-l:#1f3a8a; --mark-l:#f2e9d6; --bg-d:#151a24; --surface-d:#1e242f; --text-d:#f5efe2; --muted-d:#a8b0c0; --border-d:#2f3743; --accent-d:#f0c987; --mark-d:#262d3a; } /* -------------------------------------------------------------------------- 2. Resolver — maps the active palette's light/dark set onto live tokens -------------------------------------------------------------------------- */ :root { --bg:var(--bg-l); --surface:var(--surface-l); --text:var(--text-l); --muted:var(--muted-l); --border:var(--border-l); --accent:var(--accent-l); --mark:var(--mark-l); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:var(--bg-d); --surface:var(--surface-d); --text:var(--text-d); --muted:var(--muted-d); --border:var(--border-d); --accent:var(--accent-d); --mark:var(--mark-d); color-scheme: dark; } } :root[data-theme="dark"] { --bg:var(--bg-d); --surface:var(--surface-d); --text:var(--text-d); --muted:var(--muted-d); --border:var(--border-d); --accent:var(--accent-d); --mark:var(--mark-d); color-scheme: dark; } /* -------------------------------------------------------------------------- 3. Type scale & base -------------------------------------------------------------------------- */ :root { --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --measure: 34rem; /* index column */ --measure-prose: 38rem; /* essay column */ --step: 1.25rem; /* body size */ } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0 1.25rem; background: var(--bg); color: var(--text); font-family: var(--font-serif); font-size: var(--step); line-height: 1.6; font-weight: 400; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; transition: background-color .2s linear, color .2s linear; } ::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); } img { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } .shell { max-width: var(--measure); margin: 0 auto; padding: 4.5rem 0 6rem; } .shell.prose-shell { max-width: var(--measure-prose); } /* -------------------------------------------------------------------------- 4. Masthead -------------------------------------------------------------------------- */ .masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; } .masthead h1, .masthead .wordmark { font-size: 1.6em; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 0; } .masthead nav { display: flex; align-items: center; gap: 1.1rem; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .masthead nav a:hover { color: var(--text); } /* theme toggle */ .toggle { appearance: none; width: 2.35rem; height: 1.2rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); position: relative; cursor: pointer; flex: none; transition: background-color .2s, border-color .2s; } .toggle::after { content: ""; position: absolute; top: 50%; left: 2px; width: .85rem; height: .85rem; transform: translateY(-50%); border-radius: 50%; background: var(--accent); transition: transform .2s ease; } .toggle[aria-pressed="true"]::after { transform: translate(1.1rem, -50%); } .toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } /* -------------------------------------------------------------------------- 5. Bio -------------------------------------------------------------------------- */ .bio { margin: 0 0 3.25rem; } .bio p { margin: 0 0 1em; } .bio p:last-child { margin-bottom: 0; } .bio details > summary { display: inline; cursor: pointer; color: var(--muted); border-bottom: 1px solid var(--border); list-style: none; } .bio details > summary::-webkit-details-marker { display: none; } .bio details > summary:hover { color: var(--text); } .bio details[open] > summary { display: none; } .bio details .more { margin-top: 1em; } /* -------------------------------------------------------------------------- 6. Sections of link rows -------------------------------------------------------------------------- */ .section { margin-bottom: 3rem; } .eyebrow { font-size: .8em; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.1rem; } .rows { border-top: 1px solid var(--border); } .row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; padding: .85rem 0; border-bottom: 1px solid var(--border); transition: color .15s; } .row:hover { color: var(--accent); } .row .title { text-wrap: balance; } .row .title em { font-style: italic; } .row .meta { flex: none; font-size: .8em; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; } .row:hover .meta { color: var(--accent); } .row .out { font-size: .75em; vertical-align: .35em; color: var(--muted); margin-left: .25em; } /* -------------------------------------------------------------------------- 7. Essay pages -------------------------------------------------------------------------- */ .backlink { font-size: .8em; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .backlink:hover { color: var(--text); } .essay-head { margin: 2.5rem 0 2.75rem; } .essay-head h1 { font-size: 2.4em; font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 .35em; text-wrap: balance; } .essay-head .dateline { color: var(--muted); font-size: .9em; margin: 0; } .prose { font-size: 1.05em; } .prose > p { margin: 0 0 1.3em; } .prose > p:first-of-type::first-line { letter-spacing: .01em; } .prose h2 { font-size: 1.5em; font-weight: 600; line-height: 1.25; margin: 2.4em 0 .6em; text-wrap: balance; } .prose h3 { font-size: 1.15em; font-weight: 600; margin: 2em 0 .5em; } .prose a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .prose a:hover { border-bottom-color: var(--accent); } .prose blockquote { margin: 1.8em 0; padding-left: 1.1em; border-left: 2px solid var(--border); color: var(--muted); font-style: italic; } .prose mark { background: var(--mark); color: inherit; padding: 0 .15em; } .prose hr { border: 0; height: auto; margin: 2.5em 0; text-align: center; } .prose hr::after { content: "⁂"; color: var(--muted); } .prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.3em; } .prose li { margin-bottom: .4em; } .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--mark); padding: .1em .35em; border-radius: 3px; } .footnotes { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: .9em; color: var(--muted); } .footnotes ol { padding-left: 1.2em; margin: 0; } /* footnote references */ .prose sup { line-height: 0; font-size: .72em; } .prose sup a { color: var(--accent); border: 0; padding: 0 .1em; font-variant-numeric: tabular-nums; } .prose sup a:hover { background: var(--mark); } .footnotes li { margin-bottom: .5em; } .footnotes a { color: var(--accent); border-bottom: 0; } :target { scroll-margin-top: 2rem; } /* -------------------------------------------------------------------------- 7b. Prev / next between essays -------------------------------------------------------------------------- */ .essay-nav { display: flex; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .essay-nav a { flex: 1 1 0; min-width: 0; display: block; line-height: 1.35; transition: color .15s; } .essay-nav a:hover { color: var(--accent); } .essay-nav .next { text-align: right; margin-left: auto; } .essay-nav .dir { display: block; font-size: .7em; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3em; } /* -------------------------------------------------------------------------- 8. Footer -------------------------------------------------------------------------- */ .site-footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; justify-content: space-between; font-size: .85em; color: var(--muted); } .site-footer a { border-bottom: 1px solid var(--border); } .site-footer a:hover { color: var(--text); } /* -------------------------------------------------------------------------- 9. Responsive -------------------------------------------------------------------------- */ @media (max-width: 640px) { :root { --step: 1.15rem; } .shell { padding: 2.5rem 0 4rem; } .masthead { flex-wrap: wrap; } .essay-head h1 { font-size: 1.9em; } .row { flex-direction: column; gap: .2rem; } .row .meta { font-size: .78em; } .essay-nav { flex-direction: column; gap: 1.5rem; } .essay-nav .next { text-align: left; } }