From 7c409f3e7b4252ecb224611faeebf19ef9a03cd9 Mon Sep 17 00:00:00 2001 From: Lukas Heumos Date: Fri, 11 Sep 2026 12:45:03 +0200 Subject: [PATCH 1/3] Rewrite the join page around what someone wants to do The page was six social links and three email addresses, while the nav's Join button and the homepage developer card both point at it. It now leads with four routes in: asking a question, contributing code, adding a package to the ecosystem, and turning up to the community meeting. The links behind them already existed elsewhere on the site. Social links move to a compact row and the per-service hover colours go with the old cards. --- assets/main.scss | 164 ++++++++++++++++++++++++++++++++--------- content/join/_index.md | 124 ++++++++++++++++++++++++------- layouts/join/list.html | 70 ++++++++++++------ 3 files changed, 273 insertions(+), 85 deletions(-) diff --git a/assets/main.scss b/assets/main.scss index 59f80f20..311c6151 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -21,12 +21,6 @@ $scirpypurple: #da347f; $scviyellow: #fbb822; $scversedeepblue: #262fb5; // the darker end of the Join button gradient -$github-black: #171b21; -$discourse-yellow: #f7f0b1; -$youtube-red: #e03021; -$zulip-blue: #62a3f0; -$bluesky-blue: #0a7aff; - $overline: #e0e0e0; $linkunderline: #aaaaaa; $backtickbg: #f9f9f9; @@ -127,37 +121,141 @@ $eco-hues: } } -#join-content .card { - h5 { +#join-content { + .join-lead { + font-size: 1.1rem; + color: $tiletext2; + margin: 0 0 2rem; + } + + .join-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; + + @media (max-width: 50rem) { + grid-template-columns: 1fr; + } + } + + .join-card { + display: flex; + flex-direction: column; + padding: 1.5rem; + background-color: $tilebg4; + border: 1px solid $overline; + border-radius: $card-radius; + transition: all 200ms ease-in-out; + + &:hover { + border-color: $tilebg2; + box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.06); + transform: translateY(-2px); + } + } + + .join-card-icon { + display: grid; + place-items: center; + width: 2.75rem; + height: 2.75rem; + margin-bottom: 1rem; + font-size: 1.25rem; + border-radius: 50%; + background-color: $tilebg; + color: $tiletext; + } + + @each $hue in $eco-hues { + .join-card[data-hue="#{index($eco-hues, $hue) - 1}"] .join-card-icon { + background-color: rgba($hue, 0.18); + color: darken($hue, 12%); + } + } + + .join-card h2.join-card-title { + font-size: 1.1rem; font-weight: 700; + color: $tiletext; + margin: 0 0 0.35rem; } - transition: all 200ms ease-in-out; - color: $navtext; - &:hover { - background: #78cbd9 !important; - transform: scale(1.02); + + .join-card-text { + font-size: 0.95rem; + line-height: 1.55; + color: $tiletext2; + margin: 0; } -} -#join-content .card#github:hover { - background-color: $github-black !important; - color: white !important; -} -#join-content .card#discourse:hover { - background-color: $discourse-yellow !important; - color: black !important; -} -#join-content .card#zulip:hover { - background-color: $zulip-blue !important; - color: white !important; -} -#join-content .card#bluesky:hover { - background-color: $bluesky-blue !important; - color: white !important; -} -#join-content .card#youtube:hover { - background-color: $youtube-red !important; - color: white !important; + .join-card-links { + display: flex; + flex-wrap: wrap; + gap: 0.4rem 1.25rem; + list-style: none; + margin: auto 0 0; + padding: 1.25rem 0 0; + + a { + font-size: 0.95rem; + font-weight: 500; + color: $tiletext; + text-decoration-color: $tilebg2; + text-underline-offset: 0.2em; + + &:hover { + text-decoration-color: currentColor; + } + } + } + + &.post-content h2.join-section-title { + font-size: 1.1rem; + font-weight: 700; + color: $tiletext; + margin: 3rem 0 1rem; + } + + .join-email { + list-style: none; + margin: 0; + padding: 0; + line-height: 2; + color: $tiletext2; + font-size: 0.95rem; + } + + .join-follow { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + list-style: none; + margin: 0; + padding: 0; + + a { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0.9rem; + font-size: 0.95rem; + font-weight: 500; + color: $tiletext; + text-decoration: none; + background-color: $tilebg4; + border: 1px solid $overline; + border-radius: 2rem; + transition: all 200ms ease-in-out; + + &:hover { + border-color: $tilebg2; + background-color: $tilebg; + } + } + } + + ul:not([class]) { + line-height: 1.9; + } } h1 { diff --git a/content/join/_index.md b/content/join/_index.md index e9fb4ae8..1c8e278f 100644 --- a/content/join/_index.md +++ b/content/join/_index.md @@ -1,52 +1,120 @@ +++ title = "Join scverse" -description = "How to reach the scverse community on GitHub, Zulip, Discourse and social media, and who to e-mail about what." +description = "How to get help with scverse, contribute code, add a package to the ecosystem, and meet the people who maintain it." -[[resources]] +lead = "Everything here is open to anyone. Pick whichever matches what you want to do." + +[[paths]] + id = "ask" + icon = "bi-chat-dots" + title = "Ask a question" + text = "Usage questions about analysis and the packages go to the forum. Development discussion and day-to-day chat happen on Zulip." + + [[paths.links]] + label = "Discourse forum" + url = "https://discourse.scverse.org/" + + [[paths.links]] + label = "Zulip chat" + url = "https://scverse.zulipchat.com/" + +[[paths]] + id = "contribute" + icon = "bi-code-slash" + title = "Contribute code" + text = "Every core package takes pull requests. Issues tagged good first issue are scoped for a first contribution, and two core team members supporting your work is what makes you a contributor." + + [[paths.links]] + label = "Good first issues" + url = "https://github.com/search?q=org%3Ascverse+is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22&type=issues" + + [[paths.links]] + label = "Contributing guide" + url = "https://scanpy.scverse.org/en/stable/dev/index.html" + + [[paths.links]] + label = "How roles work" + url = "/about/roles#contributors" + + [[paths.links]] + label = "Code of conduct" + url = "/about/code_of_conduct" + +[[paths]] + id = "package" + icon = "bi-box-seam" + title = "Add your package" + text = "Packages built on AnnData, MuData or SpatialData can join the ecosystem listing. The registry repository holds the inclusion criteria and the submission form, and the project template sets a new package up the way the ecosystem expects." + + [[paths.links]] + label = "Inclusion criteria and submission" + url = "https://github.com/scverse/ecosystem-packages" + + [[paths.links]] + label = "Project template" + url = "https://github.com/scverse/cookiecutter-scverse" + + [[paths.links]] + label = "Browse the ecosystem" + url = "/packages/#ecosystem" + +[[paths]] + id = "meet" + icon = "bi-people" + title = "Meet the community" + text = "The open community meeting runs every two weeks on Tuesday at 6pm CET and anyone can join. It has an open agenda, so you can add a topic before or during the call. Hackathons and the annual conference are the other way in." + + [[paths.links]] + label = "Community meeting document" + url = "https://hackmd.io/VfVLKb3ETGKN2j_7tn8ZJQ?view" + + [[paths.links]] + label = "Community calendar" + url = "/community-calendar" + + [[paths.links]] + label = "Events and hackathons" + url = "/events" + +[follow] + title = "Follow along" + +[[follow.items]] id = "github" icon = "bi-github" title = "GitHub" - text = "Follow our organisation on GitHub" link = "https://github.com/scverse" -[[resources]] - id = "zulip" - icon = "i-zulip" - title = "Zulip" - text = "Chat with us on Zulip" - link = "https://scverse.zulipchat.com/" - -[[resources]] +[[follow.items]] id = "bluesky" icon = "i-bluesky" title = "Bluesky" - text = "Follow us on Bluesky" link = "https://bsky.app/profile/scverse.bsky.social" -[[resources]] +[[follow.items]] id = "linkedin" icon = "bi-linkedin" title = "LinkedIn" - text = "Follow us on LinkedIn" link = "https://www.linkedin.com/company/scverse" -[[resources]] - id = "discourse" - icon = "i-discourse" - title = "Discourse" - text = "Ask questions on Discourse" - link = "https://discourse.scverse.org/" - -[[resources]] +[[follow.items]] id = "youtube" icon = "bi-youtube" title = "YouTube" - text = "Subscribe to our YouTube channel" link = "https://www.youtube.com/channel/UCpsvsIAW3R5OdftJKKuLNMA" -+++ -You can also reach us by e-mail for certain matters: +[email] + title = "Email" -- [core@scverse.org](mailto:core@scverse.org): [core team](/about/roles#core-team) -- [conference2026@scverse.org](mailto:conference2026@scverse.org): for matters regarding the [next conference](/conference2026) -- [steering-council@scverse.org](mailto:steering-council@scverse.org): [steering council](/about/roles#steering-council) (e.g. for questions about sponsorships) +[[email.items]] + address = "core@scverse.org" + text = "the [core team](/about/roles#core-team)" + +[[email.items]] + address = "steering-council@scverse.org" + text = "the [steering council](/about/roles#steering-council), including sponsorship questions" + +[[email.items]] + address = "conference2026@scverse.org" + text = "the [next conference](/conference2026)" ++++ diff --git a/layouts/join/list.html b/layouts/join/list.html index 2c6690a3..92e4ac8a 100644 --- a/layouts/join/list.html +++ b/layouts/join/list.html @@ -2,32 +2,54 @@

{{ .Title }}

-
- {{ range $item := .Params.resources }} -
-
-
- - {{/* Icon class travels with the entry, so a new channel is a content change. - It sits on its own span rather than on the heading: prettier collapses the space - a combined `class="card-title …"` would need. - */}} -
- {{ with $item.icon }} {{ end }}{{ $item.title }} -
-

- {{ $item.text }} -

-
-
-
+ {{ with .Params.lead }}

{{ . }}

{{ end }} + + +
+ {{ range $i, $path := .Params.paths }} +
+ +

{{ $path.title }}

+

{{ $path.text }}

+
    + {{ range $path.links }} +
  • + {{ .label }} +
    • + {{ end }} +
+
{{ end }}
-
-

- {{ .Content }} -

-
+ + {{ with .Params.follow }} +

{{ .title }}

+ + {{ end }} + + {{ with .Params.email }} +

{{ .title }}

+
    + {{ range .items }} +
  • + {{ .address }}: + {{ .text | markdownify }} +
    • + {{ end }} +
+ {{ end }}
{{ end }} From 7a7b7098cc851712a7c1abdd3bfe5fcd3f10bd48 Mon Sep 17 00:00:00 2001 From: Lukas Heumos Date: Fri, 11 Sep 2026 13:29:29 +0200 Subject: [PATCH 2/3] Keep the social channels as cards Restores the icon, description and per-service hover colour each channel had, and gives LinkedIn one too. --- assets/main.scss | 72 ++++++++++++++++++++++++------------------ content/join/_index.md | 28 ++++++++++++---- layouts/join/list.html | 23 ++++++++------ 3 files changed, 77 insertions(+), 46 deletions(-) diff --git a/assets/main.scss b/assets/main.scss index 311c6151..c2704dff 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -22,6 +22,12 @@ $scviyellow: #fbb822; $scversedeepblue: #262fb5; // the darker end of the Join button gradient $overline: #e0e0e0; +$github-black: #171b21; +$discourse-yellow: #f7f0b1; +$youtube-red: #e03021; +$zulip-blue: #62a3f0; +$bluesky-blue: #0a7aff; +$linkedin-blue: #0a66c2; $linkunderline: #aaaaaa; $backtickbg: #f9f9f9; @@ -122,12 +128,6 @@ $eco-hues: } #join-content { - .join-lead { - font-size: 1.1rem; - color: $tiletext2; - margin: 0 0 2rem; - } - .join-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -224,32 +224,44 @@ $eco-hues: font-size: 0.95rem; } - .join-follow { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; - list-style: none; - margin: 0; - padding: 0; + .card { + transition: all 200ms ease-in-out; + color: $navtext; - a { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 0.9rem; - font-size: 0.95rem; - font-weight: 500; - color: $tiletext; - text-decoration: none; - background-color: $tilebg4; - border: 1px solid $overline; - border-radius: 2rem; - transition: all 200ms ease-in-out; + h3.card-title { + margin: 0 0 0.35rem; + font-size: 1.1rem; + font-weight: 700; + } - &:hover { - border-color: $tilebg2; - background-color: $tilebg; - } + &:hover { + background: #78cbd9 !important; + transform: scale(1.02); + } + + &#github:hover { + background-color: $github-black !important; + color: white !important; + } + &#discourse:hover { + background-color: $discourse-yellow !important; + color: black !important; + } + &#zulip:hover { + background-color: $zulip-blue !important; + color: white !important; + } + &#bluesky:hover { + background-color: $bluesky-blue !important; + color: white !important; + } + &#linkedin:hover { + background-color: $linkedin-blue !important; + color: white !important; + } + &#youtube:hover { + background-color: $youtube-red !important; + color: white !important; } } diff --git a/content/join/_index.md b/content/join/_index.md index 1c8e278f..6b5f8898 100644 --- a/content/join/_index.md +++ b/content/join/_index.md @@ -2,13 +2,11 @@ title = "Join scverse" description = "How to get help with scverse, contribute code, add a package to the ecosystem, and meet the people who maintain it." -lead = "Everything here is open to anyone. Pick whichever matches what you want to do." - [[paths]] id = "ask" icon = "bi-chat-dots" title = "Ask a question" - text = "Usage questions about analysis and the packages go to the forum. Development discussion and day-to-day chat happen on Zulip." + text = "Usage questions go to the Discourse forum. Development discussion and day-to-day chat happen on Zulip." [[paths.links]] label = "Discourse forum" @@ -22,7 +20,7 @@ lead = "Everything here is open to anyone. Pick whichever matches what you want id = "contribute" icon = "bi-code-slash" title = "Contribute code" - text = "Every core package takes pull requests. Issues tagged good first issue are scoped for a first contribution, and two core team members supporting your work is what makes you a contributor." + text = "Every core package takes pull requests. Start from an issue tagged good first issue. Two core team members backing your work makes you a contributor." [[paths.links]] label = "Good first issues" @@ -44,7 +42,7 @@ lead = "Everything here is open to anyone. Pick whichever matches what you want id = "package" icon = "bi-box-seam" title = "Add your package" - text = "Packages built on AnnData, MuData or SpatialData can join the ecosystem listing. The registry repository holds the inclusion criteria and the submission form, and the project template sets a new package up the way the ecosystem expects." + text = "Packages built on AnnData, MuData or SpatialData can be listed in the ecosystem. The registry repository has the criteria and the submission form. The project template covers the testing, docs and packaging setup." [[paths.links]] label = "Inclusion criteria and submission" @@ -62,7 +60,7 @@ lead = "Everything here is open to anyone. Pick whichever matches what you want id = "meet" icon = "bi-people" title = "Meet the community" - text = "The open community meeting runs every two weeks on Tuesday at 6pm CET and anyone can join. It has an open agenda, so you can add a topic before or during the call. Hackathons and the annual conference are the other way in." + text = "The open community meeting runs every two weeks on Tuesday at 6pm CET, with an open agenda anyone can add to. Hackathons and the annual conference run through the year." [[paths.links]] label = "Community meeting document" @@ -83,24 +81,42 @@ lead = "Everything here is open to anyone. Pick whichever matches what you want id = "github" icon = "bi-github" title = "GitHub" + text = "Follow our organisation on GitHub" link = "https://github.com/scverse" +[[follow.items]] + id = "zulip" + icon = "i-zulip" + title = "Zulip" + text = "Chat with us on Zulip" + link = "https://scverse.zulipchat.com/" + +[[follow.items]] + id = "discourse" + icon = "i-discourse" + title = "Discourse" + text = "Ask questions on Discourse" + link = "https://discourse.scverse.org/" + [[follow.items]] id = "bluesky" icon = "i-bluesky" title = "Bluesky" + text = "Follow us on Bluesky" link = "https://bsky.app/profile/scverse.bsky.social" [[follow.items]] id = "linkedin" icon = "bi-linkedin" title = "LinkedIn" + text = "Follow us on LinkedIn" link = "https://www.linkedin.com/company/scverse" [[follow.items]] id = "youtube" icon = "bi-youtube" title = "YouTube" + text = "Subscribe to our YouTube channel" link = "https://www.youtube.com/channel/UCpsvsIAW3R5OdftJKKuLNMA" [email] diff --git a/layouts/join/list.html b/layouts/join/list.html index 92e4ac8a..1070f208 100644 --- a/layouts/join/list.html +++ b/layouts/join/list.html @@ -2,9 +2,6 @@

{{ .Title }}

- {{ with .Params.lead }}

{{ . }}

{{ end }} - -
{{ range $i, $path := .Params.paths }}
@@ -28,15 +25,21 @@

{{ $path.title }}

{{ with .Params.follow }}

{{ .title }}

-
    +
    {{ range .items }} -
  • - - {{ .title }} - -
    • +
    +
    +
    + +

    +  {{ .title }} +

    +

    {{ .text }}

    +
    +
    +
    {{ end }} -
+
{{ end }} {{ with .Params.email }} From bf66826a5f708eb06138e0d81f213900144eb4f5 Mon Sep 17 00:00:00 2001 From: Lukas Heumos Date: Fri, 11 Sep 2026 13:54:30 +0200 Subject: [PATCH 3/3] Give the email addresses the same card treatment as the rest of the page --- assets/main.scss | 31 ++++++++++++++++++++++++------- layouts/join/list.html | 18 ++++++++++++------ 2 files changed, 36 insertions(+), 13 deletions(-) diff --git a/assets/main.scss b/assets/main.scss index c2704dff..0a0b70b5 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -215,13 +215,30 @@ $eco-hues: margin: 3rem 0 1rem; } - .join-email { - list-style: none; - margin: 0; - padding: 0; - line-height: 2; - color: $tiletext2; - font-size: 0.95rem; + .join-email-card { + &:hover { + background: $tilebg4 !important; + transform: none; + } + + h3.card-title a { + font-family: "JetBrains Mono", Menlo, monospace; + font-size: 0.95rem; + font-weight: 600; + color: $tiletext; + text-decoration-color: $tilebg2; + text-underline-offset: 0.2em; + + &:hover { + text-decoration-color: currentColor; + } + } + + .card-text { + font-size: 0.95rem; + color: $tiletext2; + margin: 0; + } } .card { diff --git a/layouts/join/list.html b/layouts/join/list.html index 1070f208..cb62daee 100644 --- a/layouts/join/list.html +++ b/layouts/join/list.html @@ -44,14 +44,20 @@

{{ with .Params.email }}

{{ .title }}

-
    +
    {{ range .items }} -
  • - {{ .address }}: - {{ .text | markdownify }} -
    • +
    +
    +
    +

    + {{ .address }} +

    +

    {{ .text | markdownify }}

    +
    +
    +
    {{ end }} -
+
{{ end }}