Fix hero mobile overflow, densify UMAP demo, redesign homepage highlights

content/_index.md

@@ -2,24 +2,92 @@
 title = "scverse"
 description = "Foundational tools for single-cell omics data analysis"
 
+# Hero
+[hero]
+
+text = """\
+Scverse is an open-source, community-governed ecosystem of packages for single-cell and spatial omics. Shared data structures like AnnData, MuData, and SpatialData let tools such as Scanpy, scvi-tools, and Squidpy compose into a single powerful analysis."""
+
+[[hero.points]]
+icon = "bi-mortarboard"
+title = "For researchers"
+text = "Well-documented, actively maintained tools that interoperate out of the box."
+link = "/learn"
+
+[[hero.points]]
+icon = "bi-code-slash"
+title = "For developers"
+text = "Shared data structures and conventions, so your package fits the ecosystem from day one."
+link = "/join"
+
+[[hero.points]]
+icon = "bi-bank"
+title = "For institutions"
+text = "A community-governed foundation ensuring the long-term maintenance of critical infrastructure."
+link = "/about/mission"
+
+# Features
+[features]
+
+[[features.items]]
+icon = "bi-book"
+title = "Documentation"
+text = "Extensive documentation covering installation, usage, and API references for every core package."
+
+[[features.items]]
+icon = "bi-tags"
+title = "Stable releases"
+text = "Semantic versioning and changelogs for every release."
+
+[[features.items]]
+icon = "bi-unlock"
+title = "Open source"
+text = "Freely licensed and hosted on GitHub — use it, modify it, fork it."
+
+[[features.items]]
+icon = "bi-check2-circle"
+title = "Continuously tested"
+text = "Every change runs through CI before release."
+
+[[features.items]]
+icon = "bi-plug"
+title = "Interoperable"
+text = "Shared data structures mean output from one tool works as input to the next."
+
+[[features.items]]
+icon = "bi-people"
+title = "Community governed"
+text = "Roadmap and priorities are set by the community and core developers, not a single company."
+
+# Core packages
+[packages]
+
+text = """\
+scverse develops a set of interoperable packages spanning every step of single-cell and spatial omics analysis, from data structures to modeling."""
+
+# Events
+[events]
+
+text = """\
+scverse hosts hackathons, workshops, and an annual conference to bring the community together throughout the year."""
 
 # Mission
 [mission]
 
 text = """\
-Scverse is a consortium of foundational tools (mostly in Python) for omics data in life sciences. It has been founded to ensure the long-term maintenance of these core tools."""
+Scverse builds the community that sustains foundational tools for omics data in the life sciences."""
 
 # Ecosystem
 [ecosystem]
 
 text = """\
-A broader ecosystem of packages builds on the scverse core packages. [These tools](/packages/#ecosystem) implement models and analytical approaches to tackle challenges in spatial omics, regulatory genomics, trajectory inference, visualization, and more."""
+A broader [ecosystem](/packages/#ecosystem) of packages builds on the scverse core, extending it with domain-specific models and analysis methods."""
 
 # Team
 [team]
 
 text = """\
-Scverse is a community project currently governed by the developers of the core packages. Please [reach out](/join) if you'd like to be involved!
+Scverse is a community project currently governed by a core team. Please [reach out](/join) if you'd like to be involved!
 """
 
 # People information is recorded in the people/_index.md file
@@ -29,7 +97,7 @@ Scverse is a community project currently governed by the developers of the core
 [references]
 
 text = """\
-scverse tools are used in research and industry projects across the globe and are cited in [thousands](https://scholar.google.ru/scholar?cites=14568046068402025757) of academic publications.
+scverse tools are used in research and industry across the globe.
 If they are useful in your work, please cite [the scverse paper](https://www.nature.com/articles/s41587-023-01733-8) along with the individual packages you used.
 """
 

layouts/index.html

@@ -63,78 +63,91 @@
             </div>
           </section>
 
-          {{ with first 1 (where (where .Site.RegularPages "Section" "events") "Date.Unix" ">" now.Unix).ByDate }}
-            <section id="next-event">
-              <div class="section-heading">Next event</div>
-              <div class="section-content">
-                {{ range . }}
-                  <a href="{{ with .Params.link }}{{ . }}{{ else }}{{ .RelPermalink }}{{ end }}">
-                    <article class="page-item">
-                      <div class="page-item-date">
-                        <span>{{ .Date.Format "January 02, 2006" }}</span>
-                      </div>
-                      <div class="page-item-content">
-                        <h2>{{ .Title }}</h2>
-                        <span>{{ .Description }}</span>
-                      </div>
-                    </article>
-                  </a>
+          {{ with .Params.features }}
+            <section id="feature-grid">
+              <div class="section-heading">What every core package provides</div>
+              <div id="feature-grid-items">
+                {{ range .items }}
+                  <div class="feature-item">
+                    <div class="feature-item-icon"><i class="bi {{ .icon }}" aria-hidden="true"></i></div>
+                    <div class="feature-item-body">
+                      <div class="feature-item-title">{{ .title }}</div>
+                      <p class="feature-item-text">{{ .text }}</p>
+                    </div>
+                  </div>
                 {{ end }}
-                <a href="/events">
-                  <div class="more">See all scverse events</div>
-                </a>
               </div>
             </section>
           {{ end }}
 
-          {{ partial "main/packages" . }}
 
+          <section id="about-highlights">
+            <div class="about-card-grid">
+              <div class="about-card" data-hue="5">
+                <div class="about-card-icon"><i class="bi bi-box-seam" aria-hidden="true"></i></div>
+                <h2 class="about-card-title">Core packages</h2>
+                <p class="about-card-text">
+                  {{ .Params.packages.text | markdownify }}
+                </p>
+                <a href="/packages/#core-packages">
+                  <div class="more">Browse the core packages</div>
+                </a>
+              </div>
 
-          <section id="ecosystem">
-            <div class="section-heading">Ecosystem</div>
-            <div class="section-content">
-              <p class="section-paragraph">
-                {{ .Params.ecosystem.text | markdownify }}
-              </p>
-              <a href="/packages/#ecosystem">
-                <div class="more">Continue to scverse ecosystem</div>
-              </a>
-            </div>
-          </section>
+              <div class="about-card" data-hue="3">
+                <div class="about-card-icon"><i class="bi bi-diagram-3" aria-hidden="true"></i></div>
+                <h2 class="about-card-title">Ecosystem</h2>
+                <p class="about-card-text">
+                  {{ .Params.ecosystem.text | markdownify }}
+                </p>
+                <a href="/packages/#ecosystem">
+                  <div class="more">Continue to scverse ecosystem</div>
+                </a>
+              </div>
 
-          <section id="mission">
-            <div class="section-heading">Mission</div>
-            <div class="section-content">
-              <p class="section-paragraph">
-                {{ .Params.mission.text | markdownify }}
-              </p>
-              <a href="/about">
-                <div class="more">Read more about scverse</div>
-              </a>
-            </div>
-          </section>
+              <div class="about-card" data-hue="7">
+                <div class="about-card-icon"><i class="bi bi-calendar-event" aria-hidden="true"></i></div>
+                <h2 class="about-card-title">Events</h2>
+                <p class="about-card-text">
+                  {{ .Params.events.text | markdownify }}
+                </p>
+                <a href="/events">
+                  <div class="more">See all scverse events</div>
+                </a>
+              </div>
 
-          <section id="team">
-            <div class="section-heading">Team</div>
-            <div class="section-content">
-              <p class="section-paragraph">
-                {{ .Params.team.text | markdownify }}
-              </p>
-              <a href="/people">
-                <div class="more">Learn more about scverse community</div>
-              </a>
-            </div>
-          </section>
+              <div class="about-card" data-hue="0">
+                <div class="about-card-icon"><i class="bi bi-compass" aria-hidden="true"></i></div>
+                <h2 class="about-card-title">Mission</h2>
+                <p class="about-card-text">
+                  {{ .Params.mission.text | markdownify }}
+                </p>
+                <a href="/about">
+                  <div class="more">Read more about scverse</div>
+                </a>
+              </div>
+
+              <div class="about-card" data-hue="2">
+                <div class="about-card-icon"><i class="bi bi-people" aria-hidden="true"></i></div>
+                <h2 class="about-card-title">Team</h2>
+                <p class="about-card-text">
+                  {{ .Params.team.text | markdownify }}
+                </p>
+                <a href="/people">
+                  <div class="more">Learn more about scverse community</div>
+                </a>
+              </div>
 
-          <section id="references">
-            <div class="section-heading">References</div>
-            <div class="section-content">
-              <p class="section-paragraph">
-                {{ .Params.references.text | markdownify }}
-              </p>
-              <a href="/packages/">
-                <div class="more">Find each package's publication</div>
-              </a>
+              <div class="about-card" data-hue="6">
+                <div class="about-card-icon"><i class="bi bi-journal-bookmark" aria-hidden="true"></i></div>
+                <h2 class="about-card-title">References</h2>
+                <p class="about-card-text">
+                  {{ .Params.references.text | markdownify }}
+                </p>
+                <a href="/packages/">
+                  <div class="more">Find each package's publication</div>
+                </a>
+              </div>
             </div>
           </section>
         </div>

layouts/partials/header.html

@@ -29,6 +29,7 @@
               href="/packages"
               id="packages-dropdown"
               role="button"
+              data-bs-toggle="dropdown"
               aria-expanded="false"
             >
               Packages
@@ -77,6 +78,7 @@
               href="/events"
               id="events-dropdown"
               role="button"
+              data-bs-toggle="dropdown"
               aria-expanded="false"
             >
               Events
@@ -107,6 +109,7 @@
               href="/about"
               id="about-dropdown"
               role="button"
+              data-bs-toggle="dropdown"
               aria-expanded="false"
             >
               About
@@ -139,6 +142,33 @@
               </li>
             </ul>
           </li>
+          <li class="nav-item nav-social">
+            <a href="https://github.com/scverse" target="_blank" rel="noopener" aria-label="scverse on GitHub">
+              <i class="bi bi-github" aria-hidden="true"></i>
+            </a>
+            <a href="https://discourse.scverse.org" target="_blank" rel="noopener" aria-label="scverse on Discourse">
+              <i class="i-discourse" aria-hidden="true"></i>
+            </a>
+            <a href="https://scverse.zulipchat.com" target="_blank" rel="noopener" aria-label="scverse on Zulip">
+              <i class="i-zulip" aria-hidden="true"></i>
+            </a>
+            <a
+              href="https://bsky.app/profile/scverse.bsky.social"
+              target="_blank"
+              rel="noopener"
+              aria-label="scverse on Bluesky"
+            >
+              <i class="i-bluesky" aria-hidden="true"></i>
+            </a>
+            <a
+              href="https://www.youtube.com/channel/UCpsvsIAW3R5OdftJKKuLNMA"
+              target="_blank"
+              rel="noopener"
+              aria-label="scverse on YouTube"
+            >
+              <i class="bi bi-youtube" aria-hidden="true"></i>
+            </a>
+          </li>
           <li class="nav-item">
             <button type="button" class="nav-link nav-search-button" id="search-open" aria-label="Search this site">
               <i class="bi bi-search" aria-hidden="true"></i>

layouts/partials/main/chip.html

@@ -1,7 +1,17 @@
-<div id="chip-announcement" class="row w-90 align-middle">
-  <div class="event-chip">
-    <div class="event-date">October 12 – 14</div>
-    <div class="event-text">scverse conference 2026: Register now! <span class="arrow">→</span></div>
-    <a href="/conference2026"></a>
-  </div>
+<div id="chip-announcement">
+  <a class="conference-banner" href="/conference2026">
+    <div class="conference-banner-date">
+      <span class="conference-banner-month">Oct</span>
+      <span class="conference-banner-day">12–14</span>
+      <span class="conference-banner-year">2026</span>
+    </div>
+    <div class="conference-banner-body">
+      <div class="conference-banner-title">scverse conference 2026</div>
+      <p class="conference-banner-desc">
+        Three days of talks, posters, and workshops for the single-cell and spatial omics community — Copenhagen,
+        Denmark.
+      </p>
+    </div>
+    <div class="conference-banner-cta">Register now <span class="arrow">→</span></div>
+  </a>
 </div>

layouts/partials/main/cover.html

@@ -5,20 +5,16 @@ <h1 id="title-name">{{ .Title }}</h1>
       <span id="title-desc">{{ .Description }}</span>
     </div>
   </div>
-  <div id="badges">
-    <a class="btn btn-light btn-github" href="https://github.com/scverse" target="_blank"> GitHub </a>
-    <a class="btn btn-light btn-discourse" href="https://discourse.scverse.org" target="_blank">Discourse</a>
-    <a class="btn btn-light btn-zulip" href="http://scverse.zulipchat.com" target="_blank"> Zulip </a>
-    <a class="btn btn-light btn-twitter" href="https://x.com/scverse_team" target="_blank"> 𝕏 </a>
-    <a class="btn btn-light btn-bluesky" href="https://bsky.app/profile/scverse.bsky.social" target="_blank">
-      Bluesky
-    </a>
-    <a
-      class="btn btn-light btn-youtube"
-      href="https://www.youtube.com/channel/UCpsvsIAW3R5OdftJKKuLNMA"
-      target="_blank"
-    >
-      YouTube
-    </a>
-  </div>
+  {{ with .Params.hero }}
+    <p id="hero-lede">{{ .text | markdownify }}</p>
+    <div id="hero-points">
+      {{ range $i, $p := .points }}
+        <a class="hero-point" href="{{ $p.link }}" data-hue="{{ $i }}">
+          <div class="hero-point-icon"><i class="bi {{ $p.icon }}" aria-hidden="true"></i></div>
+          <div class="hero-point-title">{{ $p.title }}</div>
+          <p class="hero-point-text">{{ $p.text }}</p>
+        </a>
+      {{ end }}
+    </div>
+  {{ end }}
 </div>