/* ------------------------------------------------------------------ toygar tanyel, personal site Layout and palette follow the academic-homepage convention that descends from jonbarron.github.io: an 800px measure, Lato, #1772d0 links turning #f09228 on hover, and date-left / one-line-right tables for everything that is a list of dated facts. The convention is the point. A reader in the field knows where to look without being taught. Three departures, each for a reason. Dark theme, because the toggle predates this redesign and people expect it now. It is the same two hues lifted until they hold contrast on a dark ground, not a second design. The marginal figures, kept from the previous site. They sit in the Research section in the same shape a Barron page gives a paper thumbnail: small square left, text right. Orange is the mark for whatever carries the decision. Bold only, no italics for emphasis. Italics are reserved for the two places the field actually uses them: a book title and a thesis title. ------------------------------------------------------------------ */ :root { color-scheme: light; --paper: #ffffff; --ink: #1c1c1c; --ink-2: #333333; /* body prose */ --ink-3: #666666; /* apparatus: dates, venues, author lists */ --ink-4: #8c8c8c; /* faintest: separators, captions */ --rule: #e6e6e6; --link: #1772d0; --link-hover: #f09228; --accent: #f09228; /* figures only: the marked part */ --band: rgba(240, 146, 40, 0.16); --tissue: rgba(28, 28, 28, 0.055); --dense: rgba(28, 28, 28, 0.11); --hairline: #d8d8d8; --measure: 800px; } /* Set by the toggle and remembered in localStorage. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #1a1c1e; --ink: #e6e6e4; --ink-2: #c6c8cb; --ink-3: #93989e; --ink-4: #767b81; --rule: #2c2f33; --link: #64a6e8; --link-hover: #f0a752; --accent: #f0a752; --band: rgba(240, 167, 82, 0.18); --tissue: rgba(230, 230, 228, 0.07); --dense: rgba(230, 230, 228, 0.14); --hairline: #3a3e43; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 34px auto; padding: 0 18px; max-width: var(--measure); background: var(--paper); color: var(--ink); font-family: "Lato", Verdana, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.6; font-style: normal; -webkit-font-smoothing: antialiased; } p { margin: 0.55em 0; } a { color: var(--link); text-decoration: none; } a:hover, a:focus { color: var(--link-hover); } a:focus-visible { outline: 2px solid var(--link-hover); outline-offset: 2px; border-radius: 1px; } /* ---------- language ---------- Both languages ship in the markup and the toggle picks one. English unless asked otherwise, since the rest of the site is in English. Both selectors are descendant selectors on purpose. The toggle sets the attribute on , and a bare [data-lang="tr"] rule would match the root itself and hide the entire document. */ :root:not([data-lang="tr"]) [data-lang="tr"] { display: none; } :root[data-lang="tr"] [data-lang="en"] { display: none; } /* ---------- headings ---------- */ h2 { margin: 40px 0 10px; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: 0.005em; padding: 0; border: 0; scroll-margin-top: 24px; } h3 { margin: 24px 0 6px; font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: 0.005em; } /* ---------- hero ---------- */ /* The portrait floats rather than sitting in a grid column. A grid leaves a tall empty cell under a 200px photo next to three paragraphs of prose; a float lets the paragraphs close back over the full measure once they clear it, which is what jonbarron.info does and why its hero reads as one block instead of two. The photo therefore comes first in source order, which also gives the mobile stack the right order with no reordering rule. */ .hero { margin-bottom: 4px; } .hero::after { content: ""; display: table; clear: both; } .hero-text { min-width: 0; } .hero-photo-wrap { float: right; width: 200px; margin: 4px 0 16px 30px; } .hero-photo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 22%; border-radius: 50%; } .name { margin: 0; padding: 0; font-size: 29px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; } .affil { margin: 7px 0 0; font-size: 14px; color: var(--ink-3); } .contactemail { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); } .contactemail a { color: var(--ink-3); } .contactemail a:hover, .contactemail a:focus { color: var(--link-hover); } .contactemail .at { color: var(--ink-4); letter-spacing: 0.04em; padding: 0 1px; } .summary { margin: 14px 0 0; font-size: 15px; line-height: 1.62; color: var(--ink-2); } .summary + .summary { margin-top: 0.75em; } .seealso { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); } /* ---------- link row ---------- Words, not icons. The tradition reads Email / CV / Scholar / GitHub, and a row of brand marks reads as a portfolio instead. */ .links-row { margin: 14px 0 0; font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 9px; } .links-row .sep { color: var(--ink-4); user-select: none; } /* The CV has no file behind it yet. Rather than link nowhere, say so: an unlinked word with the reason on hover. Swap the for an when the PDF lands and this rule stops applying. */ .links-row .pending { color: var(--ink-4); cursor: help; border-bottom: 1px dotted var(--ink-4); } /* ---------- dated tables ---------- News, awards, service, positions: all the same shape, because they are all the same kind of fact. Date in a fixed left column, one sentence on the right. */ .dated { width: 100%; border-collapse: collapse; margin: 6px 0 0; } .dated td { padding: 5px 14px 5px 0; vertical-align: top; border: 0; overflow-wrap: anywhere; } /* Fixed and wrapping, not nowrap: "Sep 2023 - Jan 2025" under nowrap forces the column wider and knocks every other section's date column out of alignment with it. */ .dated td:first-child { width: 112px; padding-right: 16px; font-weight: 700; font-size: 14px; line-height: 1.45; } .dated .what { font-weight: 700; } .dated .where { color: var(--ink-3); } .dated .note { display: block; color: var(--ink-3); font-size: 14px; margin-top: 1px; } /* ---------- open questions ---------- Set off from the prose, because they are the standing kind. */ .questions { list-style: none; margin: 12px 0 0; padding: 0 0 0 15px; border-left: 2px solid var(--rule); color: var(--ink-2); } .questions li { margin: 0 0 7px; line-height: 1.5; } .questions li:last-child { margin-bottom: 0; } /* ---------- research ---------- A paper thumbnail's shape, holding a diagram instead. */ .research-item { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 22px; align-items: start; margin: 20px 0 0; } .research-item h3 { margin-top: 0; } .research-item p { margin: 2px 0 0; color: var(--ink-2); } .fig { margin: 0; } .fig svg { display: block; width: 100%; height: auto; overflow: visible; } .fig-caption { margin-top: 5px; font-size: 11px; letter-spacing: 0.05em; text-transform: lowercase; color: var(--ink-4); text-align: center; } .fig-hair { stroke: var(--hairline); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; } .fig-line { stroke: var(--ink-2); stroke-width: 1.2; fill: none; vector-effect: non-scaling-stroke; } .fig-soft { stroke: var(--ink-3); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; opacity: 0.6; } .fig-dot { fill: var(--ink-3); } .fig-tissue { fill: var(--tissue); } .fig-dense { fill: var(--dense); } .fig-box { stroke: var(--ink-2); stroke-width: 1.1; fill: none; vector-effect: non-scaling-stroke; } .fig-iso { stroke: var(--accent); fill: none; vector-effect: non-scaling-stroke; } .fig-mark-line { stroke: var(--accent); stroke-width: 1.3; fill: none; vector-effect: non-scaling-stroke; } .fig-mark-dot { fill: var(--accent); } .fig-mark-dash { stroke: var(--accent); stroke-width: 1.1; fill: none; stroke-dasharray: 2.5 2.5; vector-effect: non-scaling-stroke; } .fig-mark-hollow { fill: none; stroke: var(--accent); stroke-width: 1.3; vector-effect: non-scaling-stroke; } /* ---------- publications ---------- Numbered, because a numbered list is countable, and on an academic page the count is information. */ .section-note { margin: 0 0 4px; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; } .section-note b { color: var(--ink); } .section-note a { color: var(--link); } .pubs { margin: 8px 0 0; padding-left: 24px; } .pubs > li { margin-bottom: 15px; line-height: 1.45; overflow-wrap: anywhere; } .pubs > li::marker { color: var(--ink-4); } .pub-title { margin: 0 0 2px; font-size: 15px; font-weight: 700; line-height: 1.36; } .pub-title a { color: var(--ink); } .pub-title a:hover, .pub-title a:focus { color: var(--link-hover); } .authors { margin: 0; font-size: 14px; color: var(--ink-3); } /* The one convention that has to survive scanning: which of these names is his. */ .me { font-weight: 700; font-style: normal; color: var(--ink); } .venue { font-weight: 700; font-style: normal; } .links { margin: 3px 0 0; font-size: 13px; } .links .sep { color: var(--ink-4); } /* The escape hatch under a selected list: quieter than the list, and far enough below it not to read as a sixth entry. */ .pubs-more { margin: 16px 0 0; font-size: 13px; color: var(--ink-3); } .tag { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); } /* ---------- notes list ---------- */ .notes { list-style: none; margin: 8px 0 0; padding: 0; } .notes li { padding: 7px 0; border-bottom: 1px solid var(--rule); } .notes li:last-child { border-bottom: 0; } .note-date { display: block; font-size: 12px; color: var(--ink-4); letter-spacing: 0.02em; } /* Blue, unlike a paper title. A paper entry carries its own row of doi / arXiv links underneath, so the title can afford to be dark; a note has nothing else on the row to say it is clickable. */ .note-title { font-size: 15px; font-weight: 700; color: var(--link); } .note-title:hover, .note-title:focus { color: var(--link-hover); } .note-dek { margin: 1px 0 0; font-size: 14px; color: var(--ink-3); } /* ---------- section nav ---------- Fixed to the right margin on wide screens, where there is dead space either side of an 800px column anyway. Hidden below that, since a long page on a phone is a scroll, not a map. The labels are always on. Revealing them on hover, as the pages this borrows from do, leaves a column of six unlabelled dots that tells the reader nothing and has to be probed one at a time. A table of contents that cannot be read is not one, so the dots keep their colour states and the words simply stay. */ .side-nav { position: fixed; top: 50%; right: 22px; transform: translateY(-50%); z-index: 5; display: none; } .side-nav ul { list-style: none; margin: 0; padding: 0; } .side-nav li + li { margin-top: 9px; } .side-nav a { display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: 0.02em; color: var(--ink-4); } .side-nav .dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink-4); flex: none; } .side-nav .label { white-space: nowrap; } .side-nav a.is-active { color: var(--link); font-weight: 700; } .side-nav a.is-active .dot { background: var(--link); border-color: var(--link); } .side-nav a:hover { color: var(--link-hover); } .side-nav a:hover .dot { border-color: var(--link-hover); } /* Raised from 1120px: the widest label, "Publications", needs about 95px with its dot, and below this the nav would crowd the column. */ @media (min-width: 1180px) { .side-nav { display: block; } } /* ---------- nav / toggles ---------- Used by the notes pages as a breadcrumb, and on the front page to carry the theme toggle. */ .nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; font-size: 14px; margin: 0 0 4px; } .nav-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; } .toggle { appearance: none; background: none; border: 0; padding: 2px; margin: 0; cursor: pointer; color: var(--ink-4); font: inherit; font-size: 12px; letter-spacing: 0.06em; line-height: 1; display: inline-flex; align-items: center; } .toggle:hover, .toggle:focus-visible { color: var(--link-hover); } .toggle:focus-visible { outline: 2px solid var(--link-hover); outline-offset: 2px; border-radius: 2px; } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: block; } :root[data-theme="dark"] .theme-toggle .sun { display: block; } :root[data-theme="dark"] .theme-toggle .moon { display: none; } .lang-toggle .to-tr { display: inline; } .lang-toggle .to-en { display: none; } :root[data-lang="tr"] .lang-toggle .to-tr { display: none; } :root[data-lang="tr"] .lang-toggle .to-en { display: inline; } .masthead-rule { border: 0; border-top: 1px solid var(--rule); margin: 18px 0 0; } /* ---------- article pages ---------- */ .page { max-width: var(--measure); margin: 0 auto; } .page--narrow { max-width: 620px; } .article { padding-top: 4px; } .article-title { margin: 22px 0 0; font-size: 27px; font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; text-wrap: balance; } .article-body { margin-top: 22px; } .article-body p { margin: 0 0 1.15em; color: var(--ink-2); line-height: 1.68; } .article-body p:last-child { margin-bottom: 0; } .article-body em { color: var(--ink); font-weight: 700; font-style: normal; } .footnote { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.7; color: var(--ink-4); } /* ---------- footer ---------- */ .foot { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; } .foot a { color: var(--ink-4); } .foot a:hover, .foot a:focus { color: var(--link-hover); } .credit { color: var(--ink-4); } /* ---------- motion ---------- Everything uses `backwards`, never `forwards`: the resting state of every element is its natural one, so a browser that skips the animation shows the finished drawing rather than nothing. */ @media (prefers-reduced-motion: no-preference) { .fig.in-view .fig-draw { animation: draw 1100ms cubic-bezier(0.32, 0.06, 0.2, 1) backwards; } .fig.in-view .fig-mid { animation: settle 700ms ease 620ms backwards; } .fig.in-view .fig-late { animation: settle 700ms ease 980ms backwards; } @keyframes draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } } @keyframes settle { from { opacity: 0; } to { opacity: 1; } } } /* ---------- narrow ---------- */ @media (max-width: 720px) { body { margin: 20px auto; } .hero-photo-wrap { float: none; width: 132px; margin: 0 0 14px; } .research-item { grid-template-columns: minmax(0, 1fr); gap: 10px; } .fig { max-width: 128px; } /* Stack the date above its line, so neither column is squeezed. */ .dated td { display: block; width: 100% !important; padding: 3px 0; white-space: normal; } .dated td:first-child { font-size: 12px; font-weight: 700; color: var(--ink-4); padding-bottom: 0; } .dated tr + tr td:first-child { padding-top: 10px; } .foot { flex-direction: column; } } @media (max-width: 460px) { .name { font-size: 25px; } h2 { font-size: 17px; } .pubs { padding-left: 20px; } }