feat: typography, scroll-reveal, and HTML cleanup#75
Merged
Conversation
Typography - Add Cormorant Garamond (display) + Jost (body) via Google Fonts with print-media async loading and noscript fallback - Apply --font-display to all headings; body uses --font-primary (Jost) with system-ui fallback chain - Hero title: switch to Cormorant Garamond, adjust weight (800→600), tighten line-height (1.15) and letter-spacing for serif rendering Hero depth - Add SVG fractalNoise grain overlay on .s-intro::after for subtle texture (opacity 0.035, mix-blend-mode: overlay) Markup cleanup (index.html) - Remove dead rellax class + data-rellax-speed attribute (library never loaded) - Fix malformed HTML: misplaced </p> outside its container div - Extract all inline styles to CSS classes: - .s-intro__social-icons (hero profile icon row) - .s-intro__icon / --orcid / --github / --scholar - .s-intro__cta-btn (Featured Research button) - .s-about__news-icon (newspaper icon in news header) - .s-featured-wrapper and children (replaces 30-line !important style block) - Remove <style> block with 7 !important overrides from index.html Scroll-reveal - CSS: [data-animate-block] children start opacity:0 translateY(24px), transition to visible when .is-inview is added; stagger delays for 2nd/3rd/4th children; prefers-reduced-motion guard disables all - JS (utils.js): IntersectionObserver wires .is-inview on scroll entry, threshold 0.12; graceful fallback if IO unavailable Accessibility - Add aria-label to all hero social icon links - Add prefers-reduced-motion guards for hero fadeInUp animations
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e1fb39c937
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
Reveal animated blocks when IntersectionObserver is unavailable so home content does not stay hidden. Skip iframe embeds when cloning featured research cards to avoid loading YouTube players on the homepage.
10 tasks
VatsalSy
added a commit
that referenced
this pull request
Jun 29, 2026
…ypography-hero feat: typography, scroll-reveal, and HTML cleanup
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
A frontend audit + improvements pass on comphy-lab.org.
Typography — the biggest visible change
Added Cormorant Garamond (display/headings) + Jost (body) via Google Fonts with async loading and noscript fallback. Both loaded with
media="print" onload="this.media='all'"to avoid render-blocking.--font-displayapplied to allh1–h6globally--font-primaryis now Jost with system-ui fallbackBefore: system-ui everywhere — invisible, not a design decision
After: Cormorant Garamond headings with Jost body — editorial precision that matches the scientific character of the lab
Hero depth
Film-grain texture overlay on
.s-intro::aftervia inline SVGfractalNoise(opacity 0.035,mix-blend-mode: overlay). Adds subtle depth to the hero background without any new image asset.HTML cleanup (
index.html)rellaxclass +data-rellax-speedattribute (Rellax library was never loaded)</p>tag was sitting outside its container</div>.s-intro__social-icons,.s-intro__iconvariants (hero profile icons).s-intro__cta-btn(Featured Research CTA button).s-about__news-icon(newspaper icon in news header).s-featured-wrapperand children — replaces a 30-line<style>block with 7!importantrulesScroll-reveal animations
Elements with
[data-animate-el]inside[data-animate-block]now animate in on scroll:opacity: 0; transform: translateY(24px)→ visible, with stagger delays for child 2/3/4utils.jsadds.is-inviewat threshold 0.12; graceful fallback if IO unavailableprefers-reduced-motionguard disables all transitions + herofadeInUpanimationsAccessibility
aria-labelto all three hero social icon links (ORCID, GitHub, Scholar)prefers-reduced-motionguards on hero entry animationsTests
All 48 tests pass. Clean Jekyll build.