Fix hero mobile overflow, densify UMAP demo, redesign homepage highlights - #298
Merged
Conversation
…he homepage highlight sections The conference-announcement chip lacked min-width: 0 on its flex items, so it couldn't shrink below its unwrapped text width and overflowed the viewport on narrow screens. The interactive UMAP demo used too few, too-tightly-packed points and generic chart-library colors, so it read as a sparse placeholder rather than real data. It now uses more points and the same brand hues as the package tiles below it. The Ecosystem/Mission/Team/References sections were four identical stacked text blocks. They're now a single 2x2 card grid with an icon per topic, consistent with the card styling used elsewhere on the site.
✅ Deploy Preview for jade-cajeta-1bcca0 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…gn highlight card links The demo previously only showed a static point cloud. It now draws a curved, arrowed trajectory graph over the cluster centroids that forks into two fates near the end, evoking a CellRank/PAGA fate map instead of a bare scatter plot. The "more" links in the homepage highlight cards followed the paragraph text, so cards with shorter text had their link sitting higher than cards with longer text. They're now pinned to the bottom of each card.
…ten spacing under it The previous trajectory graph drew one curved edge per cluster transition, which looked like a PAGA abstraction rather than a real velocity field. It's now a bundle of parallel arrowed streamlines per transition, fanned out at the source cluster and converging at the target, matching the many-small-arrows look of scVelo/CellRank plots. #interactive-demo-section's margin-bottom was 15%, stacking on top of the next section's own top margin and leaving a large gap before "Next event". Reduced to a fixed 3rem.
…elo plot They were tinted per-cluster, which read as decorative rather than data. Real velocity/fate plots draw the flow field in black over the colored cell scatter, so the lines and arrowheads are now black, with more arrows per line for the same dense look.
…catters Real UMAP clusters are dense, overlapping, tapered blobs, not evenly spread circles. Roughly tripled the point count per cluster and replaced the isotropic Gaussian placement with an elongated axis per cluster (with a narrower cross-axis), so clusters read as solid shapes closer to the CellRank/scVelo reference instead of a loose scatter.
…ering them randomly Clusters were placed independently across the box, so most pairs ended up far apart relative to their own size, with long thin streamline bridges between distant islands. Centers are now placed along a winding, rightward-biased walk (with the last two branching off the end), so neighbouring clusters touch and the whole thing reads as one connected embedding, closer to a real CellRank plot. Bumped counts and blob size to match the larger spacing.
Clusters were touching but not overlapping, and still looked thin compared to real scRNA-seq embeddings where neighbouring clusters often blend into each other. Point counts per cluster are up significantly, and the spacing between chain steps is now smaller than the cluster blob radius, so neighbours visibly overlap instead of just meeting at an edge.
The biased random walk building the cluster chain tended to drift toward one side of the box, leaving the middle empty and the shape crammed into a corner. The chain's bounding box is now re-centered on the container after layout. Also doubled point counts again (now ~3,000 total) for a denser, more solid-looking scatter.
…the box Point counts per cluster are doubled again (~6,000 total). Also grew the cluster blob size and per-dot size, since the box still had a lot of empty space with clusters that stayed small even as they got denser.
The trajectory overlay was tacked onto sc.pl.umap(), but a UMAP call doesn't produce a velocity field. Added a third fake command line, scv.pl.velocity_embedding_stream(data, basis='umap'), matching the real scVelo function that plots this. sc.pl.umap() now only (re)plots the scatter; the streamlines are drawn by the new command, independently clickable, and still auto-play once on load and after resize so a visitor who never clicks anything still sees all three steps.
scv.pl.velocity_embedding_stream() calls out a specific ecosystem package that isn't part of scverse core, which reads oddly on the homepage hero. Renamed to the package-agnostic pl.trajectory(), keeping the same three-step demo structure without endorsing one tool.
…ards, and clean up the hero chrome The hero previously only had a one-line tagline with no explanation of what scverse actually is or who it's for. Added an nf-core-style explanatory paragraph plus three audience value props (researchers, developers, institutions) right under the title. Added Core packages and Events cards to the highlight grid, growing it from a 2x2 to an auto-fitting 3-column grid (2 rows of 3 on desktop). Removed the row of social platform buttons from the hero: they duplicate the same links already in the footer and were adding clutter with no unique content. Expanded the conference announcement chip with the event's location and reduced its margin, so it carries more information without floating in as much empty space.
… trajectory command name The homepage capped content at 1200px/80% while other pages already had a "wide" variant (1400px/92%); switched the hero, chip, and section widths to that wide variant so the page uses more of a large monitor instead of leaving big unused margins on either side. Removed the "Next event" article and the full core-packages tile grid from the homepage now that the highlight grid has its own Core packages and Events cards linking to the same destinations. Deleted the now-unused main/packages.html partial and its dead CSS. Pinned the highlight grid to a fixed 3-column layout instead of auto-fit, which was squeezing in a 4th column on wide viewports and breaking the intended 3+3 layout of the 6 cards. Renamed the third demo command from pl.trajectory(...) to sc.pl.trajectory(...): the bare pl. prefix didn't correspond to anything import scanpy as sc actually imports.
The lede paragraph was capped at 42rem and the value props at 18rem each, so both looked stranded in a narrow column on the left of the now-wide hero with a lot of unused space beside them, and the paragraph wrapped into more lines than it needed to. Widened both to 58rem, and gave each "For X" value prop an icon to match the visual weight of the rest of the page instead of being bare text.
…dd real hero CTAs Centered the whole hero block (title, tagline, lede, value props) instead of leaving it left-aligned while the rest of the page reads as centered. Replaced the thin conference-announcement pill with a full-width dark banner card: a real date block, title, one-line description, and a proper "Register now" button, instead of a single line of text with an arrow. Added "Get started" and "View on GitHub" buttons to the hero, giving visitors an actual next action instead of only prose.
They were still capped at 58rem while the conference banner and demo box above and below them spanned the full width, so the hero read as narrower than the rest of the page. Removed the cap so all three match.
…e props The conference banner was taller and wider than it needed to be, creating an abrupt jump against the narrower centered title right below it. Reduced its padding and inset it to 92% width. Shortened the hero lede paragraph to one tighter sentence. Removed the "Get started"/"View on GitHub" buttons, which felt arbitrary next to the rest of the hero. Made each "For X" value prop a link instead (researchers -> /learn, developers -> /join, institutions -> /about/mission), so they carry the same navigational purpose without extra buttons competing for attention.
GitHub, Discourse, Zulip, Bluesky, X, and YouTube as small icon-only links, reusing the existing bootstrap-icons and custom .i-* icon assets (no new SVGs needed) rather than duplicating the old hero button row we removed earlier. Hidden between 992px and ~1180px: Bootstrap's own collapse breakpoint is 992px, which isn't wide enough to also fit this row, and it was overflowing the nav and clipping the Join button in that range. The footer still lists all of these regardless of width.
They only revealed they were clickable on hover. Added the same "\232A" arrow glyph used by .more links elsewhere on the page, so the affordance is visible without hovering.
The arrow was too subtle to notice, and an arrow isn't this site's own convention for links anyway. Switched to the same underline style every other inline text link on the page already uses, which is both more visible and more consistent.
Contributor
|
Hey, In mobile, the UMAP showcase is buggy, while the UMAP vignette is on my screen it is slower, and sometimes it clips, parts are in white. |
Member
Author
|
Still iterating a lot so I should just mark this as a draft for now. But this is very useful feedback @josenimo ! Thank you! |
Zethson
marked this pull request as draft
September 3, 2026 15:28
…/slowness on narrow screens Events/Packages/About were plain links with a CSS :hover-revealed submenu and no dropdown-toggle wiring, so on touch devices (no hover) tapping them navigated straight to the section's landing page before the submenu could ever show. Added the missing data-bs-toggle="dropdown" so Bootstrap intercepts the tap and opens the submenu instead, on both touch and desktop click. The demo's layout constants (chain step size, cluster blob size) and per-cluster point counts were tuned for the desktop-sized box and used as fixed pixel values, so on a much narrower mobile box they clipped against the edges and left visible white gaps. Both now scale down with the box's actual width, and the point count is thinned more aggressively (squared falloff) since a small box also needs far fewer DOM nodes to render smoothly.
…ount The velocity-field overlay, connected chain cluster layout, and elongated blobs had grown into more complexity than the demo needed. Reverted generateUMAP, drawTrajectory, and the third command line back to the original two-command (import + sc.pl.umap) version with independently scattered round clusters, and dropped the now-unused .trajectory-* CSS. Kept the point count doubled from the original values, which also happens to give the clusters enough density to still read as real data.
#interactive-demo-section is a <section>, so it inherited the generic section rule's margin-top: 5%, which stacked on top of #cover-top-section's own bottom padding and left a much bigger gap here than between any other two sections on the page.
Signed-off-by: Lukas Heumos <lukas.heumos@posteo.net>
Signed-off-by: Lukas Heumos <lukas.heumos@posteo.net>
…gger type Took the same "bigger font + a strong color" idea nf-core uses for its three hero boxes, but with scverse's own per-package hue palette instead of copying nf-core's green: each point gets a tinted icon circle and a colored, larger, bolder title (using the same $eco-hues already used for the highlight-card icons further down the page), rather than plain black text under a gray icon.
…value props, tighten header spacing New lightweight section between the demo and the highlight card grid: a short lede plus a 2x3 grid of icon + title + one-line description (Documentation, Stable releases, Open source, Continuously tested, Interoperable, Community governed) — no card borders or shadows, so it stays visually distinct from the boxed cards below it. The hero value props used a different eco-hue per point, which read as arbitrary; all three now use the same blue accent. Reduced #cover-top-section's top margin so the gap between the nav and the conference banner isn't as large.
…d of a colon-led fragment
…ng instead of getting lost as whitespace Removed the redundant intro paragraph (already said in the hero lede). Replaced it with an uppercase section heading matching the site's existing heading style, and gave the section a tinted background band so it reads as its own section between the demo box and the highlight card grid instead of disappearing as plain whitespace.
Zethson
marked this pull request as ready for review
September 7, 2026 19:24
Member
Author
|
@timtreis @josenimo @gtca @muskanhashim any feedback? |
Contributor
|
fantastic work @Zethson , I check both with laptop browser and mobile, and both work really well. |
Contributor
|
@Zethson this is gorgeous! Thank you for working on this. I think now we can discuss any little refinements we could add to further beautify it. If there's support for these, I'd be happy to implement:
I'll think of more soon and add as I go but this is what I have for now! Looks amazing, Lukas! |
Member
|
I like them too! They were misaligned but I fixed it:
However I don’t like us associating with the Nazi’s platform on our front page, does the “X” have to be there? |
Member
Author
No it doesn't and I had thought about bringing up that we leave Twitter on zulip. Then I felt like meh, don't want to start a big discussion haha. Let's remove Twitter from the icons and let's discuss the topic internally. @muskanhashim great feedback, thanks! I'd say we can follow up with a refinement. I'd merge this very soon to not delay the first big improvement. |
muskanhashim
approved these changes
Sep 8, 2026
Member
|
Done. I left it on the Join page pending discussion. |
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
4 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
Hero
Conference banner
New feature grid
Interactive demo
import scanpy as sc/sc.pl.umap(...)) with independently scattered clusters, point count doubled from the original values.Layout
min-width: 0).Bugs
data-bs-toggle="dropdown".Note: this does not add a homepage stats/credibility strip — that's covered separately by #259.