/* ========================================================================== Patricio Ortiz Jauregui — personal site -------------------------------------------------------------------------- TWO THEMES. Switch by changing ONE attribute in the tag of each page: <- academic-minimal, serif, maroon links <- your original dashboard look, Lato, blue Every visual decision lives in the :root blocks below. Change a variable once here and it propagates to all three pages. Theme "li" tokens were extracted from https://lsn235711.github.io/css/style.css (STIX Two Text serif, #7f0000 links, 900px container). Theme "patricio" tokens came from your working_website.html (Lato, #428bca, #fafafa). ========================================================================== */ /* --- THEME A: academic-minimal (Shuangning / Shuangping Li flavour) ------- */ [data-theme="li"] { /* STIX Two Text has no Chinese glyphs, so the CJK serifs at the end of the stack catch 清华大学苏世民书院 and the name 孟晓晖. Listed per-platform (macOS, Windows, Linux) rather than downloading a CJK webfont, which would be several megabytes for two short strings. */ --font-body: 'STIX Two Text', Georgia, 'Times New Roman', 'Songti SC', 'SimSun', 'Noto Serif CJK SC', serif; --font-heading: 'STIX Two Text', Georgia, 'Times New Roman', 'Songti SC', 'SimSun', 'Noto Serif CJK SC', serif; --size-body: 17px; --line-body: 1.5; --size-h1: 30px; --size-h2: 21px; --size-small: 15px; --color-bg: #ffffff; --color-text: #1a1a1a; --color-muted: #6b6b6b; --color-rule: #dcdcdc; --color-link: #7f0000; --color-link-hov: #a85050; --container: 960px; /* text column width */ --photo-w: 240px; /* profile photo width — bigger = grows down-left */ --photo-offset: 75px; /* gap between photo and the right margin */ --card-bg: transparent; --card-border: none; --card-radius: 0; --card-shadow: none; --card-pad: 0; /* map shading — maroon family */ --map-tier1: #7f0000; /* lived / based there */ --map-tier2: #d08b81; /* worked on these markets */ --map-base: #ececec; /* everywhere else */ --map-stroke: #ffffff; } /* --- THEME B: your original dashboard look ------------------------------- */ [data-theme="patricio"] { /* CJK sans fallbacks at the end, same reasoning as theme "li" above. */ --font-body: Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; --font-heading: Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; --size-body: 17px; --line-body: 1.6; --size-h1: 32px; --size-h2: 20px; --size-small: 15px; --color-bg: #fafafa; --color-text: #333333; --color-muted: #666666; --color-rule: #dddddd; --color-link: #428bca; --color-link-hov: #2a6496; --container: 1040px; /* text column width */ --photo-w: 240px; /* profile photo width — bigger = grows down-left */ --photo-offset: 75px; /* gap between photo and the right margin */ --card-bg: #ffffff; --card-border: none; --card-radius: 8px; --card-shadow: 0 2px 4px rgba(0,0,0,0.1); --card-pad: 20px; /* map shading — blue family */ --map-tier1: #2a6496; --map-tier2: #9dc3e6; --map-base: #e8e8e8; --map-stroke: #ffffff; } /* ========================================================================== Base ========================================================================== */ * { box-sizing: border-box; } body { font-family: var(--font-body); font-size: var(--size-body); line-height: var(--line-body); color: var(--color-text); background: var(--color-bg); margin: 0; padding: 48px 24px 96px; } .container { max-width: var(--container); margin: 0 auto; } h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; } h1 { font-size: var(--size-h1); margin: 0 0 4px; } h2 { font-size: var(--size-h2); margin: 0 0 14px; } h3 { font-size: var(--size-body); margin: 0 0 8px; } p { margin: 0 0 14px; } ul { margin: 0 0 14px; padding-left: 22px; } li { margin-bottom: 6px; } a { color: var(--color-link); text-decoration: none; } a:hover, a:focus { color: var(--color-link-hov); text-decoration: none; } hr { border: none; border-top: 1px solid var(--color-rule); margin: 34px 0; } .muted { color: var(--color-muted); font-size: var(--size-small); } /* ========================================================================== Navigation -------------------------------------------------------------------------- Two nav styles. The "inline" one (Home / Research / Talks, bold, slash separated) is how the Li sites do it. The "tabs" one is how your dashboard does it. Both are styled below — pick which markup you use in the HTML. ========================================================================== */ /* Li-style: bold, slash-separated, rules above and below */ .nav-inline { border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); padding: 10px 0; margin-bottom: 34px; font-weight: 700; } .nav-inline a { margin: 0 2px; } .nav-inline .sep { color: var(--color-muted); margin: 0 6px; } .nav-inline a.active { color: var(--color-text); } /* Dashboard-style: underlined tabs */ .nav-tabs { border-bottom: 1px solid var(--color-rule); margin-bottom: 34px; display: flex; gap: 22px; } .nav-tabs a { padding: 10px 0; border-bottom: 2px solid transparent; } .nav-tabs a:hover, .nav-tabs a.active { color: var(--color-link-hov); border-bottom-color: var(--color-link-hov); } /* ========================================================================== Header / profile block ========================================================================== */ .profile { display: flex; gap: 30px; align-items: flex-start; /* photo top-aligns with the h1 */ margin-bottom: 26px; } /* Shuangning puts the photo on the RIGHT; Shuangping puts it on TOP. Add class "photo-right" or "photo-top" to .profile to switch. */ .profile.photo-right { flex-direction: row-reverse; } .profile.photo-top { flex-direction: column; align-items: flex-start; } /* --------------------------------------------------------------------------- THE PHOTO — two knobs, both in the theme blocks at the top of this file. Edit them there, not here, and all three pages follow. --photo-w how big. The photo is pinned to the TOP RIGHT (that's what photo-right + align-items:flex-start does), so increasing this grows it down and to the left. 150px is CV-thumbnail size; 215px is current; ~260px starts to dominate. --photo-offset how far in from the right margin. Raise it to pull the photo further toward the centre. --------------------------------------------------------------------------- */ .profile-photo { flex: 0 0 var(--photo-w); width: var(--photo-w); margin-right: var(--photo-offset); } .profile-photo img { width: 100%; height: auto; /* keeps your photo's own proportions */ display: block; border-radius: 2px; } /* OPTIONAL — force the photo to a fixed shape regardless of what you upload. Useful if your headshot is landscape but you want a portrait crop that lines up with the bottom of the text block. Uncomment to use; the image is cropped from the centre, never squashed. .profile-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; // nudge toward the top so heads aren't cut } */ .profile.photo-top .profile-photo { flex-basis: auto; width: 200px; margin-right: 0; } .profile-info { flex: 1 1 auto; min-width: 0; } .profile-info p { margin: 0 0 8px; } .role { font-size: var(--size-small); line-height: 1.45; margin-bottom: 10px !important; } .contact-line { font-size: var(--size-small); line-height: 1.55; } /* ========================================================================== Bio bullets on the Main page — tighter than a default list so a three-item group reads as one thought rather than three separate ones. ========================================================================== */ .bio-list { margin: -4px 0 16px; padding-left: 20px; } .bio-list li { margin-bottom: 4px; } .contact-links { margin-top: 10px; font-size: var(--size-small); } .contact-links .sep { color: var(--color-muted); margin: 0 5px; } /* ========================================================================== Writing section (papers + presentations) ========================================================================== */ .entry { margin-bottom: 20px; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: var(--card-pad); } .entry-title { font-weight: 700; } .entry-meta { color: var(--color-muted); font-size: var(--size-small); } .entry-desc { margin: 6px 0 8px; } /* Little coloured pills for PDF / Slides / Abstract links. Palette lifted from the Li stylesheet. */ .label { display: inline-block; padding: 2px 9px; margin-right: 6px; border-radius: 3px; font-size: 13px; line-height: 1.5; color: #fff !important; } .label:hover { opacity: 0.82; color: #fff !important; } .label-paper { background-color: #d08b81; } .label-slides { background-color: #898298; } .label-abstract { background-color: #e3a889; } .label-code { background-color: #9e6c79; } .label-data { background-color: #937788; } .label-video { background-color: #7f8da8; } /* ========================================================================== Map page ========================================================================== */ .map-wrap { background: var(--card-bg); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: var(--card-pad); margin-bottom: 18px; } #map-svg { width: 100%; height: auto; display: block; } .country { fill: var(--map-base); stroke: var(--map-stroke); stroke-width: 0.4px; } .country.tier1 { fill: var(--map-tier1); } .country.tier2 { fill: var(--map-tier2); } .city-dot { fill: var(--map-tier1); stroke: #fff; stroke-width: 0.9px; } /* Small on purpose: Hong Kong and Singapore are annotations on the map, not headlines competing with the shaded countries. */ .city-label { font-family: var(--font-body); font-size: 7px; fill: var(--color-muted); } .map-legend { display: flex; gap: 28px; flex-wrap: wrap; margin: 6px 0 18px; font-size: var(--size-small); } .map-legend .item { display: flex; align-items: center; gap: 8px; } .map-legend .swatch { width: 15px; height: 15px; border-radius: 2px; flex: 0 0 15px; } .map-legend .swatch.t1 { background: var(--map-tier1); } .map-legend .swatch.t2 { background: var(--map-tier2); } .map-tooltip { position: fixed; pointer-events: none; background: rgba(20,20,20,0.92); color: #fff; padding: 5px 9px; border-radius: 3px; font-size: 13px; font-family: var(--font-body); opacity: 0; transition: opacity 0.12s; z-index: 20; } /* ========================================================================== Pull quotes (Favorite quotes on Residual Noise) ========================================================================== */ .quote { position: relative; margin: 0 0 26px; padding-left: 30px; } /* Oversized opening quotation mark as the visual anchor, in the rule colour so it reads as ornament rather than text. Georgia's is nicely shaped even when the body font isn't. */ .quote::before { content: "\201C"; position: absolute; left: 0; top: -4px; font-family: Georgia, 'Times New Roman', serif; font-size: 42px; line-height: 1; color: var(--color-rule); } .quote p { margin: 0 0 8px; font-style: italic; } /* Attribution: upright, muted, em-dashed, and set apart from the quote so the two never read as one run of text. */ .quote footer { margin-top: 6px; color: var(--color-muted); font-size: var(--size-small); font-style: normal; } .quote footer::before { content: "— "; } /* ========================================================================== Spotify "now playing" ========================================================================== */ .np { display: inline-flex; align-items: center; gap: 12px; color: var(--color-text) !important; } .np:hover .np-title { color: var(--color-link); } .np-art { width: 46px; height: 46px; border-radius: 3px; display: block; flex: 0 0 46px; } .np-text { display: flex; flex-direction: column; line-height: 1.3; } .np-title { font-weight: 700; } .np-artist { color: var(--color-muted); font-size: var(--size-small); } .np-when { color: var(--color-muted); font-size: 12px; margin-top: 2px; } /* Three little bars that bounce while something is playing. */ .np-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; } .np-bars i { width: 3px; background: var(--color-link); animation: np-bounce 1s ease-in-out infinite; } .np-bars i:nth-child(1) { height: 6px; animation-delay: 0s; } .np-bars i:nth-child(2) { height: 13px; animation-delay: 0.18s; } .np-bars i:nth-child(3) { height: 9px; animation-delay: 0.36s; } @keyframes np-bounce { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } } /* Respect people who've asked their OS to stop animating things. */ @media (prefers-reduced-motion: reduce) { .np-bars i { animation: none; } } /* ========================================================================== Closing quote — last thing on the page, small and grey on purpose ========================================================================== */ /* Single-paragraph version (the Goethe quote at the foot of Residual Noise). >>> margin-top is the grey rule's distance from the Spotify block above it. Lower it to move the line up, raise it to push the line down. <<< */ .closing-quote { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: 12px; line-height: 1.55; font-style: italic; max-width: 640px; } .closing-quote .attribution { font-style: normal; white-space: nowrap; } /* Multi-line version (the two lines at the foot of Main). Same treatment, just holds more than one paragraph. */ .closing-note { margin-top: 52px; padding-top: 16px; border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: 12px; line-height: 1.6; max-width: 640px; } .closing-note p { margin: 0 0 5px; font-style: italic; } .closing-note p:last-child { margin-bottom: 0; } .closing-note .attribution { font-style: normal; white-space: nowrap; } /* ========================================================================== Footer ========================================================================== */ .site-footer { margin-top: 46px; padding-top: 16px; border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--size-small); } /* ========================================================================== Small screens ========================================================================== */ @media (max-width: 640px) { body { padding: 28px 16px 64px; } /* On a phone the side-by-side layout has nowhere to go, so the photo stacks above the text and the right-margin offset is meaningless. */ .profile, .profile.photo-right { flex-direction: column; } .profile-photo { width: 170px; flex-basis: auto; margin-right: 0; } .nav-tabs { gap: 14px; flex-wrap: wrap; } }