/* ========================================================================== volkandemir.net — classic academic stylesheet Light theme is the default; [data-theme="dark"] on switches to dark. Edit colors in the two :root blocks below; everything else uses variables. ========================================================================== */ :root { color-scheme: light; --bg: #fbfaf7; /* page background */ --bg-alt: #f2f0ea; /* subtle boxes: notes, code, legend */ --text: #1c1c1c; /* body text */ --text-muted: #5b5b56; /* secondary text: dates, captions */ --link: #14507a; /* links — the single accent color */ --link-visited: #4a4a78; --border: #ddd9d0; /* hairlines */ --border-strong: #b9b4a8; /* roadmap category colors (validated for this background) */ --cat-analysis: #2a78d6; --cat-algebra: #eb6834; --cat-geometry: #1baf7a; --cat-methods: #eda100; --cat-physics: #e87ba4; } :root[data-theme="dark"] { color-scheme: dark; --bg: #16181a; --bg-alt: #1f2224; --text: #d8d6d0; --text-muted: #9a988f; --link: #7fb3d9; --link-visited: #a9a9d0; --border: #33363a; --border-strong: #4a4e53; --cat-analysis: #3987e5; --cat-algebra: #d95926; --cat-geometry: #199e70; --cat-methods: #c98500; --cat-physics: #d55181; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.0625rem; line-height: 1.65; } /* ---- layout ---- */ .container { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; } .container.wide { max-width: 72rem; } /* roadmap page uses the wide container */ /* ---- header / nav ---- */ header.site-header { border-bottom: 1px solid var(--border); padding: 1.1rem 0 0.9rem; } .site-header .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.4rem; } .site-title { font-size: 1.2rem; font-weight: bold; margin-right: auto; white-space: nowrap; } .site-title a { color: var(--text); text-decoration: none; } nav.site-nav { display: flex; flex-wrap: wrap; gap: 0.15rem 1.05rem; align-items: baseline; } nav.site-nav a { color: var(--link); text-decoration: none; font-size: 0.97rem; } nav.site-nav a:hover { text-decoration: underline; } nav.site-nav a[aria-current="page"] { color: var(--text); border-bottom: 2px solid var(--border-strong); } #theme-toggle { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; padding: 0.1rem 0.45rem; line-height: 1.4; } #theme-toggle:hover { border-color: var(--border-strong); color: var(--text); } /* ---- main content ---- */ main { padding: 2.2rem 0 3rem; } h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 1rem; } h2 { font-size: 1.3rem; margin: 2.2rem 0 0.8rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border); } h3 { font-size: 1.08rem; margin: 1.6rem 0 0.4rem; } p { margin: 0 0 1rem; } a { color: var(--link); } a:visited { color: var(--link-visited); } hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; } ul, ol { padding-left: 1.4rem; } li { margin-bottom: 0.35rem; } blockquote { margin: 1.2rem 0; padding: 0.2rem 1.1rem; border-left: 3px solid var(--border-strong); color: var(--text-muted); } .muted, .date { color: var(--text-muted); } .date { font-size: 0.92rem; } /* dated entry rows (news, events, research, talks) */ .entry { margin-bottom: 1.4rem; } .entry .entry-title { font-weight: bold; } .entry .entry-meta { color: var(--text-muted); font-size: 0.92rem; margin: 0.1rem 0 0.3rem; } .entry p:last-child { margin-bottom: 0; } dl.news { margin: 0; } dl.news dt { float: left; clear: left; width: 6.2rem; color: var(--text-muted); font-size: 0.92rem; padding-top: 0.12rem; } dl.news dd { margin: 0 0 0.55rem 7.2rem; } /* ---- figures / photos ---- */ figure { margin: 1.4rem 0; } figure img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 3px; } figcaption { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.4rem; } /* ---- code (for blog posts) ---- */ code, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.88em; } code { background: var(--bg-alt); padding: 0.08em 0.35em; border-radius: 3px; } pre { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 4px; padding: 0.9rem 1.1rem; overflow-x: auto; line-height: 1.5; } pre code { background: none; padding: 0; } /* ---- note box ---- */ .note { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 4px; padding: 0.8rem 1.1rem; font-size: 0.95rem; margin: 1.2rem 0; } /* ---- bookshelf ---- */ .book-list { list-style: none; padding-left: 0; } .book-list li { margin-bottom: 0.5rem; padding-left: 1.1rem; text-indent: -1.1rem; } .book-list .author { color: var(--text-muted); } /* ---- blog index ---- */ .post-list { list-style: none; padding-left: 0; } .post-list li { margin-bottom: 0.9rem; } .post-list .date { display: inline-block; min-width: 6.4rem; } /* ---- roadmap ---- */ .roadmap-tabs { display: flex; gap: 0.6rem; margin: 1.2rem 0; flex-wrap: wrap; } .roadmap-tabs button { font: inherit; font-size: 0.95rem; background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.35rem 0.9rem; cursor: pointer; } .roadmap-tabs button[aria-selected="true"] { background: var(--bg); border-color: var(--border-strong); font-weight: bold; } .roadmap-toolbar { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.6rem; flex-wrap: wrap; } .roadmap-toolbar button { font: inherit; font-size: 0.85rem; background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.15rem 0.6rem; cursor: pointer; } .roadmap-toolbar .hint { color: var(--text-muted); font-size: 0.85rem; margin-left: 0.4rem; } .roadmap-viewport { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: var(--bg); cursor: grab; touch-action: none; } .roadmap-viewport:active { cursor: grabbing; } .roadmap-viewport svg { display: block; } .roadmap-viewport .rm-box { stroke-width: 1.3; } .roadmap-viewport .rm-label { fill: var(--text); font-size: 12.5px; font-family: Georgia, serif; } .roadmap-viewport .rm-edge { fill: none; stroke-width: 1.4; opacity: 0.55; } .roadmap-viewport .rm-click { cursor: pointer; } .roadmap-viewport .rm-click:hover .rm-box { stroke-width: 2.4; } .roadmap-viewport .rm-click .rm-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--border-strong); } .roadmap-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 0.8rem; font-size: 0.9rem; color: var(--text-muted); } .roadmap-legend .swatch { display: inline-block; width: 14px; height: 9px; border-radius: 2px; margin-right: 0.35rem; } /* ---- roadmap reading guide (sections below the map) ---- */ .topic-guide { max-width: 60rem; } .topic-section { padding: 0.2rem 0.9rem; margin: 0 -0.9rem; border-radius: 6px; scroll-margin-top: 5.5rem; } .topic-section.flash { animation: topic-flash 1.6s ease-out; } @keyframes topic-flash { 0%, 35% { background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--border-strong); } 100% { background: transparent; box-shadow: none; } } .topic-section h3 { display: flex; align-items: center; gap: 0.5rem; } .topic-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; } .topic-section ol { margin: 0.3rem 0 0.8rem; } .topic-section .book-note { color: var(--text-muted); font-size: 0.92rem; } /* ---- footer ---- */ footer.site-footer { border-top: 1px solid var(--border); padding: 1.2rem 0 2rem; color: var(--text-muted); font-size: 0.92rem; } footer.site-footer a { color: var(--link); } /* ---- print (CV page etc.) ---- */ @media print { header.site-header, footer.site-footer, #theme-toggle, .no-print { display: none; } body { background: #fff; color: #000; } main { padding: 0; } a { color: #000; text-decoration: none; } } @media (max-width: 640px) { body { font-size: 1rem; } dl.news dt { float: none; width: auto; } dl.news dd { margin-left: 0; margin-bottom: 0.8rem; } }