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

content/_index.md

@@ -2,6 +2,41 @@
 title = "scverse"
 description = "Foundational tools for single-cell omics data analysis"
 
+# Hero
+[hero]
+
+text = """\
+scverse is an open-source, community-governed ecosystem of interoperable Python packages for single-cell and spatial omics analysis — from data structures like AnnData to analysis frameworks like Scanpy, scvi-tools, and Squidpy, all sharing common data formats so you can move between them in one 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"
+
+# Core packages
+[packages]
+
+text = """\
+scverse maintains a set of interoperable core 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]

layouts/index.html

@@ -56,85 +56,98 @@
                     <div class="command-status" id="status-cmd2"></div>
                     <div class="executing-animation" id="exec-anim-2"></div>
                   </div>
+                  <div class="command-input" id="cmd3">
+                    <button
+                      class="command-icon"
+                      id="run-cmd3"
+                      type="button"
+                      tabindex="0"
+                      aria-label="Run sc.pl.trajectory(data, basis='umap')"
+                    >
+                      <svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z"
+                        />
+                      </svg>
+                    </button>
+                    <div class="command-text">sc.pl.trajectory(data, basis='umap')</div>
+                    <div class="command-status" id="status-cmd3"></div>
+                    <div class="executing-animation" id="exec-anim-3"></div>
+                  </div>
                 </div>
 
                 <div id="visualization" class="visualization" aria-hidden="true"></div>
               </div>
             </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>
-                {{ end }}
-                <a href="/events">
-                  <div class="more">See all scverse events</div>
+          <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>
-          {{ end }}
-
-          {{ partial "main/packages" . }}
 
+              <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="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="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="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="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>
 
-          <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="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
@@ -136,6 +139,36 @@
               </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://x.com/scverse_team" target="_blank" rel="noopener" aria-label="scverse on X">
+              <i class="i-xcom" 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 .points }}
+        <a class="hero-point" href="{{ .link }}">
+          <div class="hero-point-icon"><i class="bi {{ .icon }}" aria-hidden="true"></i></div>
+          <div class="hero-point-title">{{ .title }}</div>
+          <p class="hero-point-text">{{ .text }}</p>
+        </a>
+      {{ end }}
+    </div>
+  {{ end }}
 </div>