/* ========================================================================== joweber.com — public About page -------------------------------------------------------------------------- NOTE ON THE FILENAME: the version suffix is a cache buster and must be bumped on every change, with the in index.html and datenschutz.html updated in the same commit. Cloudflare caches .css and .js at the edge under its own TTL; an in-place overwrite kept serving the previous file for hours, which once put an updated page next to a stylesheet that did not know its classes yet. -------------------------------------------------------------------------- Same visual handwriting as the CV site (warm stone paper, amber accent, serif reading column, hairline rules) — the token values are copied from namejo-cv/static/css/tokens.css, but this file is standalone on purpose: nothing here imports from that project. Fonts are system stacks only. The Content-Security-Policy on this vhost is `default-src 'none'` with no font-src, so there is nothing to load from a third party — and nothing to wait for before the text paints. ========================================================================== */ :root { --bg: #fafaf9; --bg-secondary: #f5f5f4; --text: #1c1917; --text-secondary: #57534e; --text-tertiary: #78716c; --accent: #b45309; --accent-border: rgba(180, 83, 9, 0.2); --border: #d6d3d1; --border-light: #e7e5e4; --font-serif: Georgia, 'Times New Roman', 'Nimbus Roman', serif; --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif; --measure: 62ch; } /* The page follows the visitor's system setting. There is no theme switch: one screen of text does not need a preference to remember. */ @media (prefers-color-scheme: dark) { :root { --bg: #0c0a09; --bg-secondary: #1c1917; --text: #e7e5e3; --text-secondary: #a8a29e; --text-tertiary: #78716c; --accent: #f59e0b; --accent-border: rgba(245, 158, 11, 0.25); --border: #44403c; --border-light: #292524; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.7; color: var(--text); background-color: var(--bg); font-feature-settings: 'kern' 1, 'liga' 1; font-kerning: normal; text-rendering: optimizeLegibility; hyphens: auto; } /* -------------------------------------------------------------------------- Language switching Exactly one version is visible at any time. The rules below key off the data-lang attribute that app.js sets on ; the document ships with data-lang="de", so with JavaScript disabled the German version shows and the English one stays hidden. Never both, never neither. Note the selectors name .subtitle and .prose explicitly rather than any [lang] descendant — the two switch buttons carry lang attributes of their own and must stay visible in both states. -------------------------------------------------------------------------- */ html[data-lang="de"] .subtitle[lang="en"], html[data-lang="de"] .prose[lang="en"], html[data-lang="de"] .i18n[lang="en"], html[data-lang="en"] .subtitle[lang="de"], html[data-lang="en"] .prose[lang="de"], html[data-lang="en"] .i18n[lang="de"] { display: none; } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .page { max-width: var(--measure); margin: 0 auto; padding: clamp(2.5rem, 9vw, 6rem) clamp(1.25rem, 5vw, 2rem) 4rem; } .topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 6vw, 3.5rem); font-family: var(--font-sans); font-size: 0.8125rem; } .topnav a { color: var(--text-tertiary); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .topnav a:hover { color: var(--text); } /* The current page is marked by aria-current, which the script never touches -- it is baked into each document. Styling reads that attribute rather than a duplicate class. */ .topnav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent-border); } .navsep { margin: 0 0.4rem; color: var(--border); } .langbar { display: inline-flex; align-items: center; gap: 0.5rem; } .langbtn { background: none; border: 0; padding: 0.25rem 0.125rem; font: inherit; color: var(--text-tertiary); cursor: pointer; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .langbtn:hover { color: var(--text); } /* aria-pressed is the state app.js maintains, so the styling reads from it instead of a parallel class — one source of truth. */ .langbtn[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent-border); } .langbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .langsep { color: var(--border); } .masthead { margin-bottom: clamp(1.75rem, 5vw, 2.5rem); } h1 { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; } .subtitle { margin-top: 0.5rem; font-family: var(--font-sans); font-size: 0.9375rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); } .prose p + p { margin-top: 1.25rem; } .prose strong { font-weight: 700; color: var(--text); } .rule { border: 0; border-top: 1px solid var(--border-light); margin: clamp(2.25rem, 7vw, 3.25rem) 0 clamp(1.5rem, 4vw, 2rem); } /* -------------------------------------------------------------------------- Profile links -------------------------------------------------------------------------- */ .links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; } .link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-sans); font-size: 0.9375rem; color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 2px; transition: color 0.15s ease, border-color 0.15s ease; } .link:hover { color: var(--accent); border-bottom-color: var(--accent); } .link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; } .glyph { width: 1.0625rem; height: 1.0625rem; flex: none; fill: currentColor; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .foot { margin-top: clamp(2.5rem, 8vw, 4rem); padding-top: 1.25rem; border-top: 1px solid var(--border-light); font-family: var(--font-sans); font-size: 0.8125rem; color: var(--text-tertiary); } .foot a { color: var(--text-tertiary); text-decoration: none; border-bottom: 1px solid transparent; } .foot a:hover { color: var(--accent); border-bottom-color: var(--accent-border); } .footsep { margin: 0 0.5rem; color: var(--border); } /* -------------------------------------------------------------------------- Consent banner Anchored to the bottom rather than covering the page: the content stays readable while the question is open. Nothing is measured until a button here is pressed, so there is no reason to hold the page hostage. -------------------------------------------------------------------------- */ .consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--bg-secondary); border-top: 1px solid var(--border); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08); } .consent[hidden] { display: none; } .consent-inner { max-width: var(--measure); margin: 0 auto; padding: 1rem clamp(1.25rem, 5vw, 2rem) 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; justify-content: space-between; font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.5; color: var(--text-secondary); } .consent-inner p { flex: 1 1 22rem; margin: 0; } .consent-inner a { color: var(--accent); } .consent-actions { display: flex; gap: 0.625rem; flex: none; } /* Both buttons share this class and nothing overrides it. Accept must not look more inviting than decline -- same size, same weight, same colour. */ .cbtn { font: inherit; padding: 0.5rem 1.125rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .cbtn:hover { color: var(--accent); border-color: var(--accent); } .cbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* -------------------------------------------------------------------------- Privacy notice -------------------------------------------------------------------------- */ .legal h2 { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.02em; margin: 2rem 0 0.625rem; } .legal h2:first-child { margin-top: 0; } .legal p { margin-top: 0.625rem; } /* .prose sets a top margin on every adjacent pair; after a heading that reads as a gap the heading already provides. */ .legal h2 + p { margin-top: 0; } .legal code { font-family: var(--font-mono, ui-monospace, 'JetBrains Mono', Consolas, monospace); font-size: 0.9em; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 3px; padding: 0.05em 0.35em; } .legal a { color: var(--accent); } .stand { margin-top: 2.25rem; font-family: var(--font-sans); font-size: 0.8125rem; color: var(--text-tertiary); } /* -------------------------------------------------------------------------- Teams line and project list -------------------------------------------------------------------------- */ .teams { margin-top: 1.125rem; font-family: var(--font-sans); font-size: 0.875rem; color: var(--text-tertiary); } .teams a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--border); } .teams a:hover { color: var(--accent); border-bottom-color: var(--accent); } .projects { list-style: none; margin: 0; padding: 0; } .project + .project { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--border-light); } .project-name { font-family: var(--font-mono, ui-monospace, 'JetBrains Mono', Consolas, monospace); font-size: 1rem; font-weight: 600; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); } /* Repo names are monospace because that is what they are -- identifiers. A project that is not a repository gets normal type, so the list does not imply a `git clone` that does not exist. */ .project-title { font-family: var(--font-sans); font-size: 1.0625rem; letter-spacing: -0.01em; } .project-name:hover { color: var(--accent); border-bottom-color: var(--accent); } .project p { margin-top: 0.5rem; } .project-meta { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--text-tertiary); } .allrepos { margin-top: clamp(2rem, 6vw, 3rem); font-family: var(--font-sans); font-size: 0.875rem; } .allrepos a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-border); } .allrepos a:hover { border-bottom-color: var(--accent); }