/* ========================================================================== siyuliang.com — shared stylesheet ========================================================================== HOW TO CUSTOMIZE: - Colors: edit the values in :root below. That's it — every page updates. - Fonts: change the font-family names in :root, and update the matching tag in each page's if you pick different Google Fonts. - Page width: change --content-width. ========================================================================== */ :root{ /* ---- colors (edit these to re-theme the whole site) ---- */ --bg: #EDE6D6; /* page background (beige) */ --paper: #F6F1E6; /* card / panel background, slightly lighter */ --ink: #22271F; /* main text color */ --ink-soft: #6B6455; /* secondary / muted text */ --accent: #2C3A5E; /* links, highlights — navy */ --accent-tint:#DCE0EA; /* pale accent background, for tags/badges */ --line: #D7CDB6; /* borders / dividers */ /* ---- fonts ---- */ --font-display: 'Newsreader', serif; /* headings */ --font-body: 'IBM Plex Sans', sans-serif; /* body text */ --font-mono: 'JetBrains Mono', monospace; /* labels, nav, dates */ /* ---- layout ---- */ --content-width: 900px; } *{ box-sizing: border-box; } body{ margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.65; } .wrap{ max-width: var(--content-width); margin: 0 auto; padding: 0 24px; } /* ---- header / masthead (same on every page) ---- */ header{ padding: 46px 0 22px; text-align: center; } .kicker{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; } h1{ font-family: var(--font-display); font-weight: 600; font-size: 42px; margin: 0 0 6px; } .role{ font-size: 14.5px; color: var(--ink-soft); margin: 0; } nav{ display: flex; justify-content: center; gap: 22px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12.5px; flex-wrap: wrap; } .nav-links{ display: flex; gap: 20px; flex-wrap: wrap; } nav a{ color: var(--ink); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; } nav a:hover, nav a.active{ border-color: var(--accent); color: var(--accent); } /* ---- generic sections ---- */ section{ padding: 30px 0; border-bottom: 1px solid var(--line); } section:last-of-type{ border-bottom: none; } h2.label{ font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 16px; } h2.section-title{ font-family: var(--font-display); font-size: 24px; font-weight: 600; margin: 0 0 18px; } h3.sublabel{ font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 16px; color: var(--ink); margin: 28px 0 8px; } p.lede{ font-family: var(--font-display); font-size: 19.5px; line-height: 1.6; margin: 0 0 16px; } .profile-side{ float: right; width: 220px; margin: 4px 0 16px 28px; } .headshot{ width: 100%; height: 220px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; margin-bottom: 12px; } .profile-links{ list-style: none; padding: 0; margin: 0; font-family: var(--font-mono); font-size: 12px; } .profile-links li{ border-top: 1px solid var(--line); } .profile-links li:first-child{ border-top: none; } .profile-links a{ display: block; padding: 8px 2px; color: var(--ink); text-decoration: none; } .profile-links a:hover{ color: var(--accent); } @media (max-width: 600px){ .profile-side{ float: none; width: 100%; margin: 0 0 20px; } .headshot{ height: 200px; } } p{ font-size: 15px; color: #39392E; margin: 0 0 14px; } .bio p{ max-width: 64ch; } a.inline{ color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-tint); text-underline-offset: 2px; } /* ---- tags ---- */ .tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; justify-content: center; } .tag{ font-family: var(--font-mono); font-size: 11px; background: #D8C6AE; color: #3E2F22; padding: 4px 10px; border-radius: 3px; } /* ---- publication list item (used on Home + Publications) ---- */ .pub{ display: grid; grid-template-columns: 58px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); } .pub:first-of-type{ border-top: none; } .pub .year{ font-family: var(--font-mono); font-size: 12px; color: var(--accent); padding-top: 2px; } .pub .title{ font-family: var(--font-display); font-size: 16.5px; font-weight: 500; margin: 0 0 3px; } .pub .title em{ display: inline-block; margin-top: 3px; font-size: 14.5px; } .pub .venue{ font-size: 12.5px; color: var(--ink-soft); margin: 0 0 6px; } .pub .abstract{ font-size: 13.5px; color: #4A4A3E; margin: 6px 0 0; } .pub .links{ margin-top: 8px; display: flex; gap: 14px; font-family: var(--font-mono); font-size: 11.5px; } /* ---- expandable abstract ---- */ .pub details{ margin-top: 8px; } .pub summary{ font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); cursor: pointer; list-style: none; display: inline-block; } .pub summary::-webkit-details-marker{ display: none; } .pub summary::before{ content: "+ "; } .pub details[open] summary::before{ content: "\2212 "; } .pub details p{ font-size: 13.5px; color: #4A4A3E; margin: 10px 0 0; max-width: none; } /* ---- CV-style entries (used on CV + Teaching pages) ---- */ .entry{ padding: 16px 0; border-top: 1px solid var(--line); } .entry:first-of-type{ border-top: none; } .entry-head{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .entry-title{ font-family: var(--font-display); font-size: 16.5px; font-weight: 500; margin: 0; } .entry-date{ font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; } .entry-org{ font-size: 13px; color: var(--ink-soft); margin: 3px 0 6px; } .entry-desc{ font-size: 13.5px; color: #4A4A3E; margin: 0; } .btn{ display: inline-block; font-family: var(--font-mono); font-size: 11px; padding: 4px 11px; border: 1px solid var(--ink); border-radius: 3px; color: var(--ink); text-decoration: none; margin-top: 8px; } .btn:hover{ background: var(--ink); color: var(--paper); } /* ---- LA guide list ---- */ .guide-list{ list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 32px; } .guide-list li{ font-size: 14.5px; padding: 7px 0; break-inside: avoid; } .guide-list a{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); } .guide-list a:hover{ color: var(--accent); border-color: var(--accent); } .guide-list .hearts{ color: #A6382C; letter-spacing: -1px; margin-left: 2px; } @media (max-width: 600px){ .guide-list{ columns: 1; } } /* ---- contact list ---- */ .contact-list{ list-style: none; padding: 0; margin: 0; } .contact-list li{ padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; display: flex; gap: 10px; } .contact-list li:first-child{ border-top: none; } .contact-list .k{ font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--ink-soft); min-width: 90px; padding-top: 2px; } /* ---- footer (same on every page) ---- */ footer{ padding: 26px 0 60px; font-size: 12.5px; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; } footer a{ color: var(--accent); } .social-icons{ display: flex; gap: 12px; align-items: center; } .social-icons a{ color: var(--ink); display: flex; opacity: .8; } .social-icons a:hover{ color: var(--accent); opacity: 1; } .social-icons svg{ width: 16px; height: 16px; } .footer-right{ display: flex; align-items: center; gap: 16px; } /* ---- mobile ---- */ @media (max-width: 600px){ h1{ font-size: 32px; } .pub{ grid-template-columns: 1fr; gap: 4px; } .entry-head{ flex-direction: column; gap: 2px; } }