/* GitHub-inspired dev UI portfolio. Default theme follows OS via prefers-color-scheme; manual override via set by app.js + persisted in localStorage. */ :root { /* light theme tokens (Primer) */ --color-bg: #ffffff; --color-surface: #f6f8fa; --color-card-bg: #ffffff; --color-border: #d1d9e0; --color-border-muted:#d8dee4; --color-text: #1f2328; --color-muted: #59636e; --color-accent: #0969da; --color-accent-bg: #ddf4ff; --color-success: #1a7f37; --color-warning: #9a6700; --color-attention: #bf8700; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --text-h1: 2rem; /* 32px */ --text-h2: 1.25rem; /* 20px */ --text-card-title:1rem; /* 16px */ --text-body: 0.875rem; /* 14px */ --text-meta: 0.75rem; /* 12px */ --radius: 6px; --radius-pill: 2em; --max-width: 1280px; } /* dark theme — applied when OS prefers dark AND no explicit data-theme="light" override, or when explicit data-theme="dark" override is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0d1117; --color-surface: #161b22; --color-card-bg: #161b22; --color-border: #30363d; --color-border-muted:#21262d; --color-text: #e6edf3; --color-muted: #8d96a0; --color-accent: #4493f8; --color-accent-bg: rgba(56,139,253,0.15); --color-success: #3fb950; --color-warning: #d29922; --color-attention: #ffa657; } } :root[data-theme="dark"] { --color-bg: #0d1117; --color-surface: #161b22; --color-card-bg: #161b22; --color-border: #30363d; --color-border-muted:#21262d; --color-text: #e6edf3; --color-muted: #8d96a0; --color-accent: #4493f8; --color-accent-bg: rgba(56,139,253,0.15); --color-success: #3fb950; --color-warning: #d29922; --color-attention: #ffa657; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; } main { max-width: var(--max-width); margin: 0 auto; padding: 2rem clamp(1rem, 0.5rem + 1.5vw, 2rem) 4rem; } /* masthead */ .masthead { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border-muted); margin-bottom: 2rem; } .brand { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600; color: var(--color-text); } .brand:hover { text-decoration: none; } .masthead-left { display: flex; align-items: center; gap: 1.25rem; min-width: 0; } .left-links { display: flex; gap: 1rem; font-size: var(--text-body); } .left-links a { color: var(--color-text); display: inline-flex; align-items: center; gap: 0.3rem; } .left-links a::before { content: "★"; color: var(--color-attention); font-size: 0.85em; line-height: 1; } .left-links a:hover { color: var(--color-accent); text-decoration: none; } .masthead-right { display: flex; align-items: center; gap: 1.25rem; } .masthead .links { display: flex; gap: 1.25rem; font-size: var(--text-body); } .masthead .links a { color: var(--color-text); } .masthead .links a:hover { color: var(--color-accent); text-decoration: none; } .theme-toggle { appearance: none; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-muted); cursor: pointer; padding: 0.4rem 0.55rem; display: inline-flex; align-items: center; font: inherit; transition: background-color 80ms ease-out, color 80ms ease-out, border-color 80ms ease-out; } .theme-toggle:hover { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-light { display: none; } .theme-toggle .icon-dark { display: block; } :root[data-theme="dark"] .theme-toggle .icon-light, :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-light { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: none; } } :root[data-theme="dark"] .theme-toggle .icon-light { display: block; } :root[data-theme="dark"] .theme-toggle .icon-dark { display: none; } :root[data-theme="light"] .theme-toggle .icon-light { display: none; } :root[data-theme="light"] .theme-toggle .icon-dark { display: block; } /* intro */ .intro { margin-bottom: 2.5rem; } .intro h1 { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-h1); line-height: 1.2; margin: 0; max-width: 56ch; color: var(--color-text); } hr.rule { display: none; } /* project sections */ .projects { margin-bottom: 3rem; } .project-section + .project-section { margin-top: 2.5rem; } .section-label { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border-muted); } .section-label h2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-h2); margin: 0; color: var(--color-text); } .section-label .count { font-family: var(--font-sans); font-size: var(--text-meta); font-weight: 500; color: var(--color-muted); background: var(--color-surface); border: 1px solid var(--color-border-muted); border-radius: var(--radius-pill); padding: 0.05rem 0.55rem; line-height: 1.4; } .project-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } .project-card-wrap { display: contents; } .project-card { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; transition: border-color 80ms ease-out; } .project-card:hover { border-color: var(--color-accent); } .card-title { font-family: var(--font-sans); font-size: var(--text-card-title); font-weight: 600; margin: 0; line-height: 1.3; display: flex; align-items: center; gap: 0.4rem; } .card-title a { color: var(--color-accent); } /* All card SVGs get explicit dimensions. Without these, SVGs without intrinsic width/height stretch to fill flex/grid containers, which is why icons were appearing huge on wide cards (e.g. Featured: 2 cards in a 2-col grid). */ .project-card svg { width: 16px; height: 16px; flex-shrink: 0; } .card-title svg.repo-icon { color: var(--color-muted); } .card-link svg.external-link { width: 12px; height: 12px; } .card-tagline { margin: 0; color: var(--color-muted); font-size: var(--text-body); line-height: 1.45; } .card-meta { font-family: var(--font-sans); font-size: var(--text-meta); color: var(--color-muted); margin: 0; display: none; gap: 1rem; flex-wrap: wrap; align-items: center; } .project-card.has-live-data .card-meta { display: flex; } .meta-lang { display: inline-flex; align-items: center; gap: 0.35rem; } .meta-lang .lang-dot { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--color-muted); border: 1px solid rgba(128,128,128,0.15); } .card-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; } .tag { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500; color: var(--color-accent); background: var(--color-accent-bg); border-radius: var(--radius-pill); padding: 0.05rem 0.6rem; line-height: 1.6; } .card-link { margin-top: auto; font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-muted); display: inline-flex; align-items: center; gap: 0.3rem; } .card-link:hover { color: var(--color-accent); text-decoration: none; } .footer { font-family: var(--font-sans); font-size: var(--text-meta); color: var(--color-muted); text-align: center; padding-top: 2rem; margin-top: 3rem; border-top: 1px solid var(--color-border-muted); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } } /* language color dots — common GitHub linguist colors */ .lang-JavaScript .lang-dot { background: #f1e05a; } .lang-TypeScript .lang-dot { background: #3178c6; } .lang-Python .lang-dot { background: #3572A5; } .lang-HTML .lang-dot { background: #e34c26; } .lang-CSS .lang-dot { background: #663399; } .lang-Shell .lang-dot { background: #89e051; } .lang-Nunjucks .lang-dot { background: #3d8137; } .lang-Go .lang-dot { background: #00ADD8; } .lang-Rust .lang-dot { background: #dea584; } .lang-Ruby .lang-dot { background: #701516; } .lang-Java .lang-dot { background: #b07219; } .lang-Kotlin .lang-dot { background: #A97BFF; } .lang-Swift .lang-dot { background: #F05138; } .lang-Dart .lang-dot { background: #00B4AB; } .lang-C .lang-dot { background: #555555; } .lang-Cpp .lang-dot { background: #f34b7d; }