/* ============================================================ Amr Farahat โ€” minimal terminal theme Plain monospace text, no animations, no effects. ============================================================ */ :root { --bg: #0d1117; --text: #c9d1d9; --bright: #e6edf3; --muted: #8b949e; --accent: #7ee787; --border: #21262d; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* light mode โ€” activated via data-theme="light" on */ html[data-theme="light"] { --bg: #fafbfc; --text: #24292f; --bright: #0d1117; --muted: #57606a; --accent: #1a7f37; --border: #d0d7de; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: auto; } body { background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; } .wrap { max-width: 820px; margin: 0 auto; padding: 0 20px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } strong { color: var(--bright); } /* ---------- header ---------- */ .site-header { border-bottom: 1px solid var(--border); padding: 14px 0; } .header-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; justify-content: center; } .logo { color: var(--bright); font-weight: 700; white-space: nowrap; } .nav { display: flex; flex-wrap: wrap; gap: 4px 18px; } .nav a { color: var(--muted); } .nav a:hover { color: var(--accent); } .theme-toggle { font-family: inherit; font-size: inherit; color: var(--muted); background: none; border: 1px solid var(--border); padding: 0 8px; cursor: pointer; line-height: 1.6; white-space: nowrap; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } /* ---------- sections ---------- */ section { padding: 40px 0 8px; } h2 { font-size: 15px; font-weight: 700; color: var(--bright); margin-bottom: 22px; } .prompt { color: var(--accent); } .entry { margin-bottom: 26px; padding-left: 16px; border-left: 2px solid var(--border); } /* project figure: floats right of the text on desktop */ .entry .fig { float: right; margin: 0 0 12px 20px; max-width: 220px; } .entry .fig img { display: block; width: 100%; height: auto; max-height: 160px; object-fit: contain; border: 1px solid var(--border); } .entry::after { content: ""; display: block; clear: both; } .entry h3 { font-size: 15px; font-weight: 700; color: var(--bright); margin-bottom: 2px; } .meta { color: var(--muted); margin-bottom: 6px; } /* ---------- about ---------- */ #about { padding-top: 56px; } .about-row { display: flex; gap: 32px; align-items: flex-start; } .portrait { flex-shrink: 0; margin: 0; } .portrait img { display: block; width: 180px; height: 180px; object-fit: cover; border: 1px solid var(--border); } .whoami { font-family: inherit; white-space: pre-wrap; font-size: 17px; font-weight: 700; color: var(--bright); margin-bottom: 14px; } .summary { max-width: 62ch; margin-bottom: 18px; } .contact { list-style: none; } .contact li { display: flex; gap: 12px; align-items: baseline; } .contact .icon { width: 13px; height: 13px; fill: currentColor; margin-right: 6px; vertical-align: -1px; } .key { display: inline-block; min-width: 84px; color: var(--muted); } .key::after { content: ":"; } /* ---------- skills tags ---------- */ .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .tags li { border: 1px solid var(--border); padding: 1px 10px; color: var(--muted); font-size: 13px; } /* ---------- project links ---------- */ .links { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 18px; } .links a::before { content: "โ†’ "; color: var(--muted); } /* ---------- publications ---------- */ .pubs { padding-left: 28px; } .pubs li { margin-bottom: 16px; } .pubs a { display: inline-block; word-break: break-all; } /* ---------- qualifications ---------- */ .quals { list-style: none; } .quals li { padding-left: 18px; position: relative; margin-bottom: 10px; } .quals li::before { content: "ยท"; position: absolute; left: 4px; color: var(--muted); } .muted { color: var(--muted); } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--border); margin-top: 56px; padding: 18px 0 28px; color: var(--muted); font-size: 13px; } /* ---------- mobile ---------- */ @media (max-width: 600px) { body { font-size: 14px; } .header-row { justify-content: center; text-align: center; } .nav { justify-content: center; } .about-row { flex-direction: column-reverse; gap: 20px; } .portrait { align-self: center; text-align: center; } .portrait img { width: 140px; height: 140px; } /* project figures go full-width above the text */ .entry .fig { float: none; margin: 0 0 12px; max-width: none; } .contact li { flex-direction: row; flex-wrap: wrap; gap: 2px 12px; } .key { min-width: 76px; } }