/* ============================================================ app.css — consolidated site stylesheet Tokens, base reset, shared components (navbar/footer), and per-page styles previously inlined in . Fonts live in fonts.css. ============================================================ */ /* ===== Design tokens + base reset ===== */ /* ===== Neo-brutalist design tokens ===== Neutrals swap between dark (default) & light. Accent colors stay fixed. */ :root { --bg:#0d0d12; --surface:#16161d; --surface2:#1a1a22; --border:#23232c; --navborder:#2a2a34; --ink:#f4f4f5; --muted:#a6a6b2; --faint:#5a5a66; --red:#ff4d3d; --blue:#3d6bff; --yellow:#ffd23d; --green:#3dffa0; --font-display:'Bricolage Grotesque', sans-serif; --font-sans:'Space Grotesk', sans-serif; --font-mono:'IBM Plex Mono', monospace; } [data-theme="light"] { --bg:#fff7f0; --surface:#ffffff; --surface2:#fdf2e9; --border:#eaded2; --navborder:#e2d4c5; --ink:#171514; --muted:#5a534f; --faint:#a08e80; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; } /* page load fade-in */ @keyframes pageFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } body { animation: pageFadeIn .25s ease-out both; } /* ===== Navbar ===== */ /* ===== Neo-brutalist navbar ===== */ .nb-shell { max-width:1180px; margin:0 auto; padding:0 32px; } .nb-nav { display:flex; align-items:center; justify-content:space-between; padding:24px 0; position:relative; } .nb-brand { font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--ink); text-decoration:none; letter-spacing:-.02em; } .nb-pill { display:flex; align-items:center; gap:8px; font-size:15px; background:var(--surface); border:1px solid var(--navborder); border-radius:40px; padding:6px 8px; } .nb-link { padding:7px 14px; color:var(--muted); border-radius:30px; text-decoration:none; font-weight:500; font-family:var(--font-sans); transition:color .2s, background .2s; } .nb-link:hover { color:var(--ink); } .nb-link.active { background:var(--red); color:#fff; font-weight:600; } .nb-toggle { width:34px; height:34px; background:var(--yellow); color:#0d0d12; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; border:none; font-size:15px; line-height:1; flex:none; } .nb-burger { width:34px; height:34px; background:var(--surface2); border:1px solid var(--navborder); color:var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; line-height:1; flex:none; } .nb-mobile-ctrls { display:none; } .nb-mobile { position:absolute; top:74px; right:0; left:0; background:var(--surface); border:1px solid var(--navborder); border-radius:20px; padding:10px; z-index:60; box-shadow:0 12px 30px rgba(0,0,0,.35); } .nb-mobile a { display:block; padding:12px 16px; color:var(--muted); text-decoration:none; font-weight:600; font-family:var(--font-sans); border-radius:12px; } .nb-mobile a:hover { color:var(--ink); } .nb-mobile a.active { background:var(--red); color:#fff; } @media (max-width:760px) { .nb-desktop-links { display:none; } .nb-mobile-ctrls { display:flex; } .nb-shell { padding:0 20px; } .nb-brand { font-size:20px; } } /* ===== Footer ===== */ /* ===== Neo-brutalist footer ===== */ .ft-shell { max-width:1180px; margin:0 auto; padding:0 32px; } .ft-bar { padding:24px 0; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:13px; color:var(--faint); flex-wrap:wrap; gap:10px; } .ft-bar a { color:var(--faint); text-decoration:none; transition:color .2s; } .ft-bar a:hover { color:var(--red); } .ft-links { display:flex; gap:16px; } .ft-top { position:fixed; bottom:22px; right:20px; z-index:50; width:42px; height:42px; border-radius:12px; background:var(--red); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:4px 4px 0 #7a1a12; font-size:18px; line-height:1; } @media (max-width:760px) { .ft-shell { padding:0 20px; } } /* ===== Home ===== */ /* ===== Home (neo-brutalist) ===== */ .hm-shell { max-width:1180px; margin:0 auto; padding:0 32px; } .sec { padding:8px 0 52px; } .sec-h { font-family:var(--font-display); font-size:32px; font-weight:700; letter-spacing:-.01em; margin:0 0 24px; color:var(--ink); } .sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; } .sec-more { font-weight:600; color:var(--blue); font-size:15px; text-decoration:none; white-space:nowrap; } /* hero */ .hero { padding:52px 0 64px; display:grid; grid-template-columns:1.2fr .8fr; gap:44px; align-items:center; } .badge { display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--navborder); color:var(--green); font-family:var(--font-mono); font-weight:500; font-size:13px; padding:8px 16px; border-radius:30px; margin-bottom:24px; } .badge .pdot { width:8px; height:8px; background:var(--green); border-radius:50%; } .hero-title { font-family:var(--font-display); font-size:76px; line-height:.94; font-weight:800; letter-spacing:-.025em; margin:0 0 24px; color:var(--ink); } .hero-lead { font-size:18px; line-height:1.6; color:var(--muted); max-width:460px; margin:0 0 32px; } .btn-row { display:flex; gap:14px; margin-bottom:34px; flex-wrap:wrap; } .btn-primary { background:var(--red); color:#fff; font-weight:700; padding:15px 28px; border-radius:40px; font-size:15px; box-shadow:5px 5px 0 #7a1a12; text-decoration:none; transition:transform .15s, box-shadow .15s; } .btn-primary:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 #7a1a12; } .btn-ghost { border:1.5px solid var(--navborder); color:var(--ink); font-weight:600; padding:15px 28px; border-radius:40px; font-size:15px; text-decoration:none; } .btn-ghost:hover { border-color:var(--red); color:var(--red); } .tags { display:flex; gap:10px; flex-wrap:wrap; } .tag { font-weight:600; font-size:13px; padding:8px 15px; border-radius:30px; } .tag-red { background:color-mix(in srgb,var(--red) 16%,transparent); color:var(--red); } .tag-blue { background:color-mix(in srgb,var(--blue) 18%,transparent); color:var(--blue); } .tag-yellow { background:color-mix(in srgb,var(--yellow) 24%,transparent); color:var(--yellow); } .tag-green { background:color-mix(in srgb,var(--green) 18%,transparent); color:var(--green); } /* hero photo */ .photo-wrap { position:relative; } .photo-deco1 { position:absolute; inset:-14px -14px auto auto; width:96px; height:96px; background:var(--yellow); border-radius:50%; z-index:0; } .photo-deco2 { position:absolute; left:-18px; bottom:38px; width:58px; height:58px; background:var(--blue); border-radius:16px; transform:rotate(12deg); z-index:0; } .photo-card { position:relative; z-index:1; aspect-ratio:1/1; border:2px solid var(--navborder); border-radius:26px; overflow:hidden; background:repeating-linear-gradient(135deg,var(--surface2),var(--surface2) 12px,var(--bg) 12px,var(--bg) 24px); display:flex; align-items:flex-end; justify-content:center; box-shadow:8px 8px 0 var(--red); } .photo-card.clickable { cursor:pointer; } .photo-card > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .photo-initials { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:64px; font-weight:800; color:var(--faint); } .photo-socials { position:relative; z-index:2; padding:16px; display:flex; gap:10px; } .soc { width:36px; height:36px; background:var(--bg); border:1.5px solid var(--navborder); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--ink); text-decoration:none; font-family:var(--font-mono); } .soc:hover { border-color:var(--red); color:var(--red); } /* about + stats */ .about-card { background:var(--surface); border:1px solid var(--border); border-radius:28px; padding:44px; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; } .about-h { font-family:var(--font-display); font-size:32px; font-weight:700; letter-spacing:-.01em; margin:0 0 14px; color:var(--ink); } .about-p { color:var(--muted); font-size:16px; line-height:1.7; margin:0 0 10px; } .stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .stat { border-radius:18px; padding:22px; } .stat .num { font-family:var(--font-display); font-size:40px; font-weight:800; line-height:1; } .stat .lab { font-size:14px; margin-top:4px; } .stat-red { background:var(--red); color:#fff; } .stat-red .lab { opacity:.9; } .stat-blue { background:var(--blue); color:#fff; } .stat-blue .lab { opacity:.9; } .stat-yellow { background:var(--yellow); color:#0d0d12; } .stat-yellow .lab { opacity:.8; } .stat-plain { background:var(--bg); border:1px solid var(--navborder); color:var(--ink); } .stat-plain .lab { color:var(--muted); } /* experience */ .exp-list { display:flex; flex-direction:column; gap:14px; } .exp-row { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:22px 26px; display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; } .exp-dot { width:14px; height:14px; border-radius:50%; background:var(--red); } .exp-row:nth-child(4n+2) .exp-dot { background:var(--blue); } .exp-row:nth-child(4n+3) .exp-dot { background:var(--yellow); } .exp-row:nth-child(4n+4) .exp-dot { background:var(--green); } .exp-role { font-weight:600; font-size:18px; color:var(--ink); } .exp-desc { color:var(--muted); font-size:15px; margin-top:3px; } .exp-lead { margin:0; } .exp-points { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; } .exp-points li { position:relative; padding-left:18px; line-height:1.5; } .exp-points li::before { content:"▸"; position:absolute; left:0; top:0; color:var(--red); font-size:13px; } .exp-period { font-family:var(--font-mono); font-weight:500; font-size:14px; color:var(--faint); white-space:nowrap; } .exp-period.current { color:var(--blue); } .exp-tech { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; } .exp-tech span { background:var(--surface2); border:1px solid var(--border); color:var(--muted); font-size:12px; font-family:var(--font-mono); padding:3px 9px; border-radius:20px; } /* projects */ .proj-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .proj-card { background:var(--surface); border:1px solid var(--border); border-radius:22px; overflow:hidden; transition:transform .15s; box-shadow:6px 6px 0 var(--red); } .proj-card:hover { transform:translate(-2px,-2px); } .proj-card:nth-child(3n+2) { box-shadow:6px 6px 0 var(--blue); } .proj-card:nth-child(3n+3) { box-shadow:6px 6px 0 var(--green); } .proj-shot { aspect-ratio:16/10; background:repeating-linear-gradient(135deg,var(--surface2),var(--surface2) 12px,var(--bg) 12px,var(--bg) 24px); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; color:var(--faint); overflow:hidden; } .proj-shot img { width:100%; height:100%; object-fit:cover; } .proj-body { padding:22px; } .proj-title { font-weight:600; font-size:19px; color:var(--ink); } .proj-desc { color:var(--muted); font-size:14px; margin:5px 0 12px; } .proj-tags { display:flex; gap:6px; flex-wrap:wrap; } .proj-tags span { font-size:12px; font-weight:600; padding:5px 11px; border-radius:20px; background:var(--surface2); border:1px solid var(--border); color:var(--muted); } .proj-links { display:flex; gap:14px; margin-top:14px; } .proj-links a { font-family:var(--font-mono); font-size:12px; color:var(--faint); text-decoration:none; } .proj-links a:hover { color:var(--red); } /* blog */ .blog-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; } .blog-card { background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--red); border-radius:18px; padding:24px; display:block; text-decoration:none; transition:transform .15s; } .blog-card:hover { transform:translateY(-3px); } .blog-card:nth-child(3n+2) { border-top-color:var(--blue); } .blog-card:nth-child(3n+3) { border-top-color:var(--yellow); } .blog-date { font-family:var(--font-mono); font-size:12px; margin-bottom:10px; color:var(--red); text-transform:uppercase; } .blog-card:nth-child(3n+2) .blog-date { color:var(--blue); } .blog-card:nth-child(3n+3) .blog-date { color:var(--yellow); } .blog-title { font-weight:600; font-size:17px; line-height:1.3; color:var(--ink); } /* contact */ .contact-card { background:linear-gradient(120deg,var(--red),var(--blue)); color:#fff; border-radius:28px; padding:44px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; } .contact-h { font-family:var(--font-display); font-size:44px; font-weight:800; line-height:1; margin:0 0 10px; } .contact-sub { font-size:16px; opacity:.92; margin:0; line-height:1.6; } .cf { display:flex; flex-direction:column; gap:10px; } .cf-row { display:flex; gap:10px; } .cf input, .cf textarea { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:14px; font-family:inherit; outline:none; } .cf input { flex:1; border-radius:30px; padding:13px 18px; min-width:0; } .cf textarea { border-radius:18px; padding:13px 18px; height:88px; resize:none; } .cf input::placeholder, .cf textarea::placeholder { color:rgba(255,255,255,.7); } .cf-btn { background:#0d0d12; color:#fff; font-weight:700; padding:14px; border-radius:30px; text-align:center; font-size:15px; cursor:pointer; border:none; } .cf-btn:disabled { opacity:.6; cursor:not-allowed; } .cf-note { background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4); border-radius:16px; padding:14px 18px; font-size:14px; font-weight:500; } /* lightbox */ .lb { position:fixed; inset:0; background:rgba(5,5,8,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:60; cursor:zoom-out; padding:24px; } .lb img { width:min(520px,86vw); border-radius:20px; border:2px solid var(--navborder); box-shadow:0 25px 60px rgba(0,0,0,.6); } @media (max-width:860px) { .hero, .about-card, .contact-card, .proj-grid { grid-template-columns:1fr; } .blog-grid { grid-template-columns:1fr; } .hero-title { font-size:52px; } .about-card, .contact-card { padding:32px; } .photo-wrap { max-width:360px; margin:0 auto; } .contact-h { font-size:34px; } } @media (max-width:760px) { .hm-shell { padding:0 20px; } } @media (max-width:520px) { .hero-title { font-size:42px; } .cf-row { flex-direction:column; } .exp-row { grid-template-columns:auto 1fr; } .exp-period { grid-column:2; } } /* ===== Projects ===== */ /* ===== Projects (neo-brutalist) ===== */ .pp-shell { max-width:1180px; margin:0 auto; padding:0 32px; } .pp-head { padding:56px 0 40px; } .pp-eyebrow { font-family:var(--font-mono); font-size:13px; color:var(--red); letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; } .pp-title { font-family:var(--font-display); font-size:64px; line-height:.96; font-weight:800; letter-spacing:-.025em; margin:0 0 18px; color:var(--ink); } .pp-lead { font-size:18px; color:var(--muted); max-width:520px; margin:0; line-height:1.6; } .pp-filters { display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; } .pp-chip { background:var(--surface); border:1px solid var(--navborder); color:var(--muted); font-weight:600; font-size:14px; font-family:var(--font-mono); padding:9px 18px; border-radius:30px; cursor:pointer; transition:all .15s; } .pp-chip:hover { color:var(--ink); border-color:var(--faint); } .pp-chip.pp-chip-on { background:var(--red); border-color:var(--red); color:#fff; } .pp-grid { padding:8px 0 40px; display:grid; grid-template-columns:1fr 1fr; gap:22px; } .pp-card { background:var(--surface); border:1px solid var(--border); border-radius:22px; overflow:hidden; transition:transform .15s; box-shadow:6px 6px 0 var(--red); } .pp-card:hover { transform:translate(-2px,-2px); } .pp-card:nth-child(3n+2) { box-shadow:6px 6px 0 var(--blue); } .pp-card:nth-child(3n+3) { box-shadow:6px 6px 0 var(--green); } .pp-shot { aspect-ratio:16/9; background:repeating-linear-gradient(135deg,var(--surface2),var(--surface2) 12px,var(--bg) 12px,var(--bg) 24px); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; color:var(--faint); position:relative; overflow:hidden; } .pp-shot img { width:100%; height:100%; object-fit:cover; } .pp-badge { position:absolute; top:14px; left:14px; background:color-mix(in srgb,var(--yellow) 22%,transparent); color:var(--yellow); font-size:11px; font-weight:600; padding:5px 11px; border-radius:20px; z-index:1; } .pp-body { padding:24px; } .pp-title-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; } .pp-name { font-weight:600; font-size:21px; color:var(--ink); } .pp-year { font-family:var(--font-mono); font-size:12px; color:var(--faint); white-space:nowrap; } .pp-desc { color:var(--muted); font-size:15px; margin:7px 0 14px; line-height:1.55; } .pp-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; } .pp-tag { font-family:var(--font-mono); font-size:12px; padding:4px 10px; border-radius:20px; background:var(--surface2); border:1px solid var(--border); color:var(--muted); cursor:pointer; transition:all .15s; } .pp-tag:hover { color:var(--ink); } .pp-tag.pp-tag-on { background:color-mix(in srgb,var(--red) 16%,transparent); border-color:var(--red); color:var(--red); } .pp-links { display:flex; gap:16px; padding-top:12px; border-top:1px solid var(--border); } .pp-links a { font-family:var(--font-mono); font-size:13px; color:var(--faint); text-decoration:none; } .pp-links a:hover { color:var(--red); } .pp-empty { text-align:center; padding:64px 0; color:var(--faint); } .pp-empty button { background:none; border:none; color:var(--blue); cursor:pointer; font-size:14px; } @media (max-width:860px) { .pp-grid { grid-template-columns:1fr; } .pp-title { font-size:46px; } } @media (max-width:760px) { .pp-shell { padding:0 20px; } } @media (max-width:520px) { .pp-title { font-size:38px; } } /* ===== Blog list ===== */ /* ===== Blog list (neo-brutalist) ===== */ .bl-shell { max-width:1180px; margin:0 auto; padding:0 32px; } .bl-head { padding:56px 0 36px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; } .bl-eyebrow { font-family:var(--font-mono); font-size:13px; color:var(--blue); letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; } .bl-title { font-family:var(--font-display); font-size:64px; line-height:.96; font-weight:800; letter-spacing:-.025em; margin:0; color:var(--ink); } .bl-rss { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:13px; color:var(--faint); text-decoration:none; border:1px solid var(--navborder); padding:8px 14px; border-radius:24px; } .bl-rss:hover { color:var(--red); border-color:var(--red); } .bl-featured { display:block; text-decoration:none; margin-bottom:36px; } .bl-fc { background:var(--surface); border:1px solid var(--border); border-radius:24px; overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr; box-shadow:7px 7px 0 var(--red); transition:transform .15s; } .bl-featured:hover .bl-fc { transform:translate(-2px,-2px); } .bl-fc-body { padding:40px; } .bl-badge { display:inline-block; background:color-mix(in srgb,var(--red) 18%,transparent); color:var(--red); font-size:12px; font-weight:600; padding:5px 12px; border-radius:20px; } .bl-fc-title { font-family:var(--font-display); font-size:34px; font-weight:700; line-height:1.05; margin:18px 0 14px; color:var(--ink); } .bl-fc-excerpt { color:var(--muted); font-size:16px; line-height:1.7; margin:0 0 22px; } .bl-meta { display:flex; gap:14px; flex-wrap:wrap; font-family:var(--font-mono); font-size:13px; color:var(--faint); } .bl-meta .tag { color:var(--green); } .bl-fc-cover { background:repeating-linear-gradient(135deg,var(--surface2),var(--surface2) 14px,var(--bg) 14px,var(--bg) 28px); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; color:var(--faint); min-height:240px; overflow:hidden; } .bl-fc-cover img { width:100%; height:100%; object-fit:cover; } .bl-grid { padding-bottom:64px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; } .bl-card { background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--red); border-radius:18px; padding:26px; display:flex; flex-direction:column; gap:12px; min-height:200px; text-decoration:none; transition:transform .15s; } .bl-card:hover { transform:translateY(-3px); } .bl-card:nth-child(3n+2) { border-top-color:var(--blue); } .bl-card:nth-child(3n+3) { border-top-color:var(--yellow); } .bl-card-date { font-family:var(--font-mono); font-size:12px; color:var(--red); text-transform:uppercase; } .bl-card:nth-child(3n+2) .bl-card-date { color:var(--blue); } .bl-card:nth-child(3n+3) .bl-card-date { color:var(--yellow); } .bl-card-title { font-weight:600; font-size:19px; line-height:1.25; color:var(--ink); } .bl-card-excerpt { color:var(--muted); font-size:14px; line-height:1.55; flex:1; } .bl-card-tag { font-family:var(--font-mono); font-size:12px; color:var(--faint); } .bl-empty { text-align:center; padding:80px 0; color:var(--faint); } @media (max-width:860px) { .bl-fc { grid-template-columns:1fr; } .bl-fc-cover { min-height:180px; order:-1; } .bl-grid { grid-template-columns:1fr; } .bl-title { font-size:46px; } } @media (max-width:760px) { .bl-shell { padding:0 20px; } } @media (max-width:520px) { .bl-title { font-size:38px; } .bl-fc-body { padding:28px; } } /* ===== Blog detail ===== */ /* ===== Blog detail (neo-brutalist) ===== */ .bd-shell { max-width:1180px; margin:0 auto; padding:0 32px; } .bd-head { padding:48px 0 30px; max-width:760px; } .bd-back { font-family:var(--font-mono); font-size:13px; color:var(--muted); text-decoration:none; } .bd-back:hover { color:var(--red); } .bd-tags { display:flex; gap:10px; margin:24px 0 18px; flex-wrap:wrap; } .bd-tag { font-size:12px; font-weight:600; padding:5px 12px; border-radius:20px; background:color-mix(in srgb,var(--green) 18%,transparent); color:var(--green); } .bd-tags .bd-tag:nth-child(3n+2) { background:color-mix(in srgb,var(--blue) 18%,transparent); color:var(--blue); } .bd-tags .bd-tag:nth-child(3n+3) { background:color-mix(in srgb,var(--red) 18%,transparent); color:var(--red); } .bd-title { font-family:var(--font-display); font-size:52px; line-height:1.02; font-weight:800; letter-spacing:-.02em; margin:0 0 18px; color:var(--ink); } .bd-excerpt { font-size:19px; line-height:1.6; color:var(--muted); border-left:3px solid var(--red); padding-left:18px; margin:0 0 22px; } .bd-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-family:var(--font-mono); font-size:13px; color:var(--faint); } .bd-avatar { width:34px; height:34px; border-radius:50%; background:var(--surface2); border:1px solid var(--navborder); display:flex; align-items:center; justify-content:center; color:var(--ink); font-weight:600; } .bd-share { display:flex; align-items:center; gap:10px; margin-top:22px; flex-wrap:wrap; } .bd-share-l { font-family:var(--font-mono); font-size:12px; color:var(--faint); } .bd-share-b { font-family:var(--font-mono); font-size:12px; color:var(--muted); text-decoration:none; border:1px solid var(--navborder); padding:6px 13px; border-radius:20px; background:none; cursor:pointer; transition:all .15s; } .bd-share-b:hover { color:var(--ink); border-color:var(--faint); } .bd-cover { aspect-ratio:21/9; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:repeating-linear-gradient(135deg,var(--surface2),var(--surface2) 14px,var(--bg) 14px,var(--bg) 28px); margin-bottom:48px; } .bd-cover img { width:100%; height:100%; object-fit:cover; } .bd-grid { display:grid; grid-template-columns:1fr 240px; gap:56px; align-items:start; padding-bottom:48px; } /* TOC aside */ .bd-toc { position:sticky; top:24px; display:flex; flex-direction:column; gap:24px; } .bd-toc-label { font-family:var(--font-mono); font-size:12px; color:var(--faint); letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; } .bd-toc-nav { display:flex; flex-direction:column; gap:10px; font-size:14px; border-left:1px solid var(--border); padding-left:18px; } .bd-toc-nav a { color:var(--muted); text-decoration:none; transition:color .15s; line-height:1.4; } .bd-toc-nav a:hover { color:var(--ink); } .bd-toc-nav a.on { color:var(--red); font-weight:600; } .bd-toc-nav a.lvl3 { padding-left:12px; font-size:13px; } .bd-sub { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; } .bd-sub-t { font-weight:600; font-size:15px; margin-bottom:6px; color:var(--ink); } .bd-sub-d { color:var(--muted); font-size:13px; line-height:1.5; margin-bottom:14px; } .bd-sub-btn { display:block; background:var(--blue); color:#fff; text-align:center; font-weight:600; font-size:13px; padding:10px; border-radius:24px; text-decoration:none; } /* article (rendered markdown) */ .article { max-width:720px; font-size:17.5px; line-height:1.8; color:var(--ink); } .article > *:first-child { margin-top:0; } .article p { margin:0 0 22px; color:var(--muted); } .article h1 { font-family:var(--font-display); font-size:34px; font-weight:800; margin:36px 0 16px; color:var(--ink); letter-spacing:-.01em; scroll-margin-top:80px; } .article h2 { font-family:var(--font-display); font-size:28px; font-weight:700; margin:40px 0 16px; color:var(--ink); letter-spacing:-.01em; scroll-margin-top:80px; } .article h3 { font-family:var(--font-display); font-size:22px; font-weight:700; margin:32px 0 12px; color:var(--ink); scroll-margin-top:80px; } .article a { color:var(--blue); text-decoration:underline; text-underline-offset:2px; } .article ul, .article ol { margin:0 0 22px; padding-left:24px; color:var(--muted); } .article li { margin:6px 0; } .article li::marker { color:var(--faint); } .article img { max-width:100%; border-radius:14px; border:1px solid var(--border); margin:12px 0; } .article hr { border:none; border-top:1px solid var(--border); margin:36px 0; } .article strong { color:var(--ink); font-weight:700; } .article blockquote { border-left:3px solid var(--red); margin:28px 0; padding:4px 0 4px 22px; font-family:var(--font-display); font-size:22px; line-height:1.5; color:var(--ink); } .article blockquote p { color:var(--ink); } .article table { width:100%; border-collapse:collapse; margin:0 0 24px; font-size:15px; } .article th, .article td { border:1px solid var(--border); padding:10px 14px; text-align:left; color:var(--muted); } .article th { color:var(--ink); background:var(--surface); } .article :not(pre) > code { background:var(--surface) !important; border:1px solid var(--border); border-radius:6px; padding:2px 7px; font-family:var(--font-mono); font-size:.86em; color:var(--red) !important; } .article pre { background:#0a0a0e !important; border:1px solid var(--border); border-radius:14px; padding:22px 24px; overflow-x:auto; margin:0 0 28px; position:relative; } .article pre code { background:transparent !important; font-family:var(--font-mono); font-size:14px; line-height:1.7; padding:0; color:#e4e4e7; } /* related */ .bd-related { border-top:1px solid var(--border); padding:40px 0 64px; } .bd-related-h { font-family:var(--font-mono); font-size:13px; color:var(--blue); letter-spacing:.1em; text-transform:uppercase; margin-bottom:22px; } .bd-rel-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; } .bd-rel-card { background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--red); border-radius:16px; padding:20px; text-decoration:none; transition:transform .15s; } .bd-rel-card:hover { transform:translateY(-3px); } .bd-rel-card:nth-child(3n+2) { border-top-color:var(--blue); } .bd-rel-card:nth-child(3n+3) { border-top-color:var(--yellow); } .bd-rel-title { font-weight:600; font-size:16px; line-height:1.3; color:var(--ink); margin-bottom:8px; } .bd-rel-excerpt { color:var(--muted); font-size:13px; line-height:1.5; } @media (max-width:900px) { .bd-grid { grid-template-columns:1fr; } .bd-toc { display:none; } .bd-title { font-size:40px; } .bd-rel-grid { grid-template-columns:1fr; } } @media (max-width:760px) { .bd-shell { padding:0 20px; } } @media (max-width:520px) { .bd-title { font-size:32px; } .article { font-size:16.5px; } } /* ===== hljs override ===== */.hljs { background:transparent !important; padding:0 !important; } /* ===== highlight.js github-dark theme (self-hosted) ===== */ pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! Theme: GitHub Dark Description: Dark theme as seen on github.com Author: github.com Maintainer: @Hirse Updated: 2021-05-15 Outdated base version: https://github.com/primer/github-syntax-dark Current colors taken from GitHub's CSS */.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}