Skip to content

Add conference 2025 to the events page + landing refresh #187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gtca merged 10 commits into from
Nov 17, 2025
Merged

Add conference 2025 to the events page + landing refresh #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a4841b6
Media kit page draft
gtca Mar 25, 2025
27801db
Merge branch 'main' into mediakit
gtca Nov 11, 2025
97da82a
Add media kit link to the footer
gtca Nov 12, 2025
fc50072
Add more examples and clean up package logos
gtca Nov 12, 2025
19a6763
Add example logo usage
gtca Nov 12, 2025
a6ff98e
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Nov 13, 2025
53fa693
Refresh the landing page
gtca Nov 15, 2025
7885891
Add an event page for conference 2025
gtca Nov 16, 2025
1ec9cec
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Nov 16, 2025
62cb6fb
Merge branch 'main' into events-conference-2025
gtca Nov 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
269 changes: 225 additions & 44 deletions assets/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ $footertextmuted: #aaaaaa;

$postlinktext: #333333;

$maxwidth: 800px;
$maxwidth: 1200px;
$maxwidthcover: 1200px;
$maxwidthwide: 1400px;
$contentwidth: 80%;
$contentwidthwide: 92%;
Expand Down Expand Up @@ -130,29 +131,34 @@ $additionalInfoColor: #666666;
}

// Cover buttons
.btn-github:hover {
border-color: $github-black;
background-color: $github-black;
#badges .btn {
background-color: $tilebg;
border: none;
}
.btn-discourse:hover {
background-color: $discourse-yellow;
color: black;

#badges .btn-github:hover {
background-color: $github-black !important;
color: white !important;
}
.btn-zulip:hover {
border-color: $zulip-blue;
background-color: $zulip-blue;
#badges .btn-discourse:hover {
background-color: $discourse-yellow !important;
color: black !important;
}
.btn-twitter:hover {
border-color: $twitter-blue;
background-color: $twitter-blue;
#badges .btn-zulip:hover {
background-color: $zulip-blue !important;
color: white !important;
}
.btn-bluesky:hover {
border-color: $bluesky-blue;
background-color: $bluesky-blue;
#badges .btn-twitter:hover {
background-color: $twitter-blue !important;
color: white !important;
}
.btn-youtube:hover {
border-color: $youtube-red;
background-color: $youtube-red;
#badges .btn-bluesky:hover {
background-color: $bluesky-blue !important;
color: white !important;
}
#badges .btn-youtube:hover {
background-color: $youtube-red !important;
color: white !important;
}

// TODO: Should this be necessary?
Expand Down Expand Up @@ -369,24 +375,30 @@ body {
align-items: center;
align-self: center;
#cover {
max-width: $maxwidthwide;
width: $contentwidthwide;
max-width: $maxwidthcover;
width: 100%;
padding: 0 1rem;
@media (max-width: 50rem), (max-device-width: 40rem) {
max-width: $maxwidthwide;
width: $contentwidthwide;
max-width: $maxwidthcover;
width: 100%;
padding: 0 1rem;
}
#cover-heading {
margin-top: 10%;
#cover-top-section {
margin-top: 3rem;
padding: 2rem 0;
@media (max-width: 50rem), (max-device-width: 40rem) {
margin-top: 10%;
margin-top: 3rem;
padding: 2rem 0;
}
max-width: $maxwidthwide;
border-radius: 1rem;
background: linear-gradient(90deg, #f0f0f0, #f0f0f0);
padding: 6rem 4rem;
}
#cover-heading {
margin: 0;
padding: 0;
@media (max-width: 50rem), (max-device-width: 40rem) {
padding: 2rem 1rem;
margin: 0;
padding: 0;
}
max-width: $maxwidthcover;
#title {
#title-text {
#title-name {
Expand All @@ -395,8 +407,9 @@ body {
font-weight: 900;
letter-spacing: 0.2rem;
@media (max-width: 50rem), (max-device-width: 40rem) {
letter-spacing: 0.1rem;
font-size: 2rem;
letter-spacing: 0.15rem;
font-size: 3.5rem;
font-weight: 900;
}
}
#title-desc {
Expand All @@ -410,15 +423,11 @@ body {
}
}
}
#cover-image {
img {
}
}
#badges {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 4rem 0;
margin: 2rem 0;
@media (max-width: 50rem), (max-device-width: 40rem) {
margin: 1rem 0;
padding: 0;
Expand All @@ -428,14 +437,15 @@ body {
}

#chip-announcement {
margin: 3rem auto;
margin-bottom: -3rem;
@media (max-width: 40rem) {
margin: 0.5rem auto 0.5rem;
max-width: $maxwidthcover;
width: 100%;
@media (max-width: 50rem), (max-device-width: 40rem) {
width: 100%;
margin-bottom: 3rem;
margin: 0.25rem auto 0.25rem;
}
display: flex;
justify-content: center;
justify-content: flex-start;
&:hover {
cursor: pointer;
}
Expand All @@ -453,13 +463,25 @@ body {
transition: all 0.3s ease;
outline: 1px solid black;

@media (max-width: 50rem), (max-device-width: 40rem) {
border-radius: 1.5rem;
padding: 0.05rem 0.6rem 0.05rem 0;
font-size: 0.7rem;
}

.event-date {
background-color: black;
color: white;
padding: 0.5rem 1rem;
border-radius: 2rem;
margin: 0.1rem 1rem 0.1rem 0.2rem;
align-self: start;

@media (max-width: 50rem), (max-device-width: 40rem) {
padding: 0.35rem 0.7rem;
border-radius: 1.5rem;
margin: 0.05rem 0.7rem 0.05rem 0.1rem;
}
}

.event-text {
Expand Down Expand Up @@ -722,7 +744,7 @@ body {
padding: 2%;

div {
max-width: $maxwidth;
max-width: 1200px;
margin: 1rem auto;
color: $footertext;
text-align: left;
Expand Down Expand Up @@ -2187,3 +2209,162 @@ body {
}
}
}

// Interactive UMAP Visualization Styles
#interactive-demo-section {
margin-top: 8%;
margin-bottom: 5%;
}

.interactive-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
transform-style: preserve-3d;
perspective: 1500px;
}

.interactive-card {
background-color: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
overflow: hidden;
transition:
transform 0.6s ease-out,
box-shadow 0.3s ease;
will-change: transform;

&:hover {
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}
}

.demo-header {
background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
padding: 25px;
border-bottom: 1px solid #e0e0e0;
position: relative;
z-index: 100;
}

.command-input {
display: flex;
align-items: center;
background-color: #e8e8e8;
padding: 12px 18px;
border-radius: 10px;
margin-bottom: 12px;
position: relative;
overflow: hidden;
transition: background-color 0.3s ease;

&:last-child {
margin-bottom: 0;
}

&:hover {
background-color: #e0e0e0;
}
}

.command-icon {
width: 32px;
height: 32px;
background-color: #ccc;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 12px;
flex-shrink: 0;
cursor: pointer;
position: relative;
z-index: 10;
transition: all 0.3s ease;

&:hover {
background-color: #4285f4;
transform: scale(1.1);
}

svg {
width: 14px;
height: 14px;
fill: white;
}
}

.command-text {
font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
font-size: 15px;
color: #333;
flex-grow: 1;
pointer-events: none;
font-weight: 500;
}

.command-status {
position: absolute;
width: 0;
height: 100%;
left: 0;
top: 0;
background-color: rgba(52, 168, 83, 0.15);
transition: width 0.8s ease-out;
pointer-events: none;
}

.visualization {
height: 500px;
position: relative;
padding: 30px;
background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
overflow: hidden;
z-index: 1;

@media (max-width: 768px) {
height: 400px;
padding: 20px;
}
}

.dot {
position: absolute;
border-radius: 50%;
opacity: 0;
transform: scale(0);
transition:
transform 0.5s cubic-bezier(0.17, 0.67, 0.83, 0.67),
opacity 0.5s ease,
box-shadow 0.3s ease;
will-change: transform, opacity;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
cursor: pointer;
}

.animation-pulse {
animation: pulse 1.5s infinite;
}

@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}

.executing-animation {
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, #4285f4, #34a853);
transition: width 1s ease-in-out;
pointer-events: none;
}
18 changes: 15 additions & 3 deletions content/design/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ aliases = ["/brand/", "/logo/"]
primary_logos = """scverse® logo is a signature pair of letters **sc**, originally derived from 'single-cell', smoothly interwoven to create perseption of a third dimension.

Our logo is available in several formats for different use cases. Please use these official versions and follow our guidelines when representing our brand.

Our logo is protected as a registered trademark. For details and specifics, consult the [NumFOCUS trademark guidelines](https://numfocus.org/trademark-guidelines).
"""
trademark = """Our logo is protected as a registered trademark. For details and specifics, consult the [NumFOCUS trademark guidelines](https://numfocus.org/trademark-guidelines).
"""
logo_guidelines = "To maintain brand consistency, please follow these guidelines when using our logo."
do_guidelines = """
Expand Down Expand Up @@ -53,6 +53,15 @@ Our primary logo combines our icon with the full name. Use this version when int
text = "Download PNG"
url = "../img/logo/scverse_symbol.png"

[[trademarkedlogos]]
name = "Icon (® version)"
description = "Icon trademarked"
img = "../img/icons/scverse_bw_logo.svg"
details = "Use this version to indicate that scverse is a registered trademark in formal or legal contexts."
[[trademarkedlogos.links]]
text = "Download SVG"
url = "../img/icons/scverse_bw_logo.svg"

[[packageicons]]
name = "anndata"
description = "AnnData package icon"
Expand Down Expand Up @@ -116,6 +125,9 @@ Our primary logo combines our icon with the full name. Use this version when int
[[packageicons.links]]
text = "Download SVG"
url = "../img/icons/scirpy.svg"
[[packageicons.links]]
text = "Download SVG (w/ name)"
url = "../img/libs/scirpy_logo.svg"

[[packageicons]]
name = "squidpy"
Expand All @@ -134,4 +146,4 @@ Our primary logo combines our icon with the full name. Use this version when int
[[packageicons.links]]
text = "Download SVG"
url = "../img/icons/scvi-tools.svg"
+++
+++
Loading