diff --git a/assets/main.scss b/assets/main.scss
index 5d3124d4..4c48a1cd 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -15,6 +15,10 @@ $scanpycerise: #de367b;
$scanpymandy: #e05559;
$mudatagreen: #4ab274;
$muonaquamarine: #6cf1a1;
+$spatialdatablue: #40a9ff;
+$squidpyviolet: #969dea;
+$scirpypurple: #da347f;
+$scviyellow: #fbb822;
$github-black: #171b21;
$twitter-blue: #469be5;
@@ -201,7 +205,7 @@ a .more {
}
}
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
background-color: $tilebg4;
}
}
@@ -367,20 +371,20 @@ body {
#cover {
max-width: $maxwidthwide;
width: $contentwidthwide;
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
max-width: $maxwidthwide;
width: $contentwidthwide;
}
#cover-heading {
margin-top: 10%;
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
margin-top: 10%;
}
max-width: $maxwidthwide;
border-radius: 1rem;
background: linear-gradient(90deg, #f0f0f0, #f0f0f0);
padding: 6rem 4rem;
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
padding: 2rem 1rem;
}
#title {
@@ -390,7 +394,7 @@ body {
font-family: "Inter", sans-serif;
font-weight: 900;
letter-spacing: 0.2rem;
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
letter-spacing: 0.1rem;
font-size: 2rem;
}
@@ -400,7 +404,7 @@ body {
font-family: "Inter", sans-serif;
font-size: 1.4rem;
color: $greyheader;
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
font-size: 0.8rem;
}
}
@@ -415,7 +419,7 @@ body {
flex-wrap: wrap;
gap: 1rem;
margin: 4rem 0;
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
margin: 1rem 0;
padding: 0;
width: 100%;
@@ -498,7 +502,7 @@ body {
width: $contentwidth;
margin: 0 auto;
margin-top: 5%;
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
margin-top: 15%;
}
.section-heading {
@@ -533,7 +537,7 @@ body {
background-color: $tilebg;
border-radius: 0.5rem;
transition: all 200ms ease-in-out;
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
min-height: 6rem;
}
.package-icon {
@@ -544,7 +548,7 @@ body {
display: flex;
min-width: 6rem;
max-width: 6rem;
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
display: none;
}
@@ -712,7 +716,7 @@ body {
#footer-content {
width: $contentwidth;
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
width: $contentwidthwide;
}
padding: 2%;
@@ -810,7 +814,7 @@ body {
h2 {
margin: 2rem 0 1rem 0;
}
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
max-width: $maxwidthwide;
width: $contentwidthwide;
gap: 1rem;
@@ -829,7 +833,7 @@ body {
flex-direction: row;
font-family: "Inter", sans-serif;
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
flex-direction: column;
align-items: flex-start;
justify-content: center;
@@ -853,7 +857,7 @@ body {
background-color: $tilebg3;
}
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
background-color: $tilebg4;
}
@@ -927,7 +931,7 @@ body {
Open Sans,
sans-serif;
}
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
font-size: 1rem;
line-height: 1.8rem;
}
@@ -976,7 +980,7 @@ body {
max-height: 225px;
}
transition: all 200ms ease-in-out;
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
display: none;
}
}
@@ -1003,7 +1007,7 @@ body {
font-size: 1.1rem;
margin: 1rem 0;
color: $tiletext;
- @media (max-device-width: 40rem) {
+ @media (max-width: 50rem), (max-device-width: 40rem) {
font-size: 1rem;
line-height: 1.8rem;
}
@@ -1245,3 +1249,941 @@ body {
line-height: 1.5;
margin-top: 0.5rem;
}
+
+#media-kit-content {
+ max-width: $maxwidth;
+ margin: 0 auto;
+
+ h2 {
+ margin-top: 6rem;
+ font-size: 2.25rem;
+ font-weight: 800;
+ font-family: "Inter", sans-serif;
+ letter-spacing: -0.02em;
+ position: relative;
+ background: linear-gradient(15deg, #000000 0%, #777777 100%);
+ display: inline-block;
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+ -webkit-text-fill-color: transparent;
+
+ &::after {
+ content: "";
+ display: block;
+ width: 3rem;
+ height: 0.25rem;
+ background: linear-gradient(90deg, #000000 0%, #999999 100%);
+ border-radius: 2px;
+ margin-top: 0.75rem;
+ }
+
+ @media (max-width: 50rem), (max-device-width: 40rem) {
+ margin-top: 4rem;
+ font-size: 1.75rem;
+ }
+ }
+
+ // Primary Logos Section
+ #logos-list,
+ #trademarked-logos-list {
+ display: flex;
+ flex-direction: column;
+ gap: 3rem;
+ margin-top: 3rem;
+
+ @media (max-width: 50rem), (max-device-width: 40rem) {
+ gap: 2.5rem;
+ }
+
+ .logo-section {
+ background: linear-gradient(
+ 135deg,
+ rgba(255, 255, 255, 0.9) 0%,
+ rgba(255, 255, 255, 0.5) 100%
+ );
+ backdrop-filter: blur(10px);
+ border-radius: 1.25rem;
+ padding: 2.5rem;
+ transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+ position: relative;
+ overflow: hidden;
+
+ @media (max-width: 50rem), (max-device-width: 40rem) {
+ flex-direction: column;
+ padding: 2rem;
+ }
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 135deg,
+ var(--hover-color, transparent) 0%,
+ transparent 100%
+ );
+ opacity: 0;
+ transition: opacity 300ms ease;
+ z-index: -1;
+ }
+
+ &:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+ border-color: rgba(255, 255, 255, 0.5);
+
+ &::before {
+ opacity: 0.15;
+ }
+ }
+
+ .logo-img {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 2.5rem;
+ background-color: white;
+ border-radius: 1rem;
+ min-height: 180px;
+ min-width: 300px;
+ // box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
+ position: relative;
+ overflow: hidden;
+ margin-right: 2.5rem;
+
+ @media (max-width: 50rem), (max-device-width: 40rem) {
+ margin-right: 0;
+ margin-bottom: 2rem;
+ min-width: 100%;
+ min-height: 160px;
+ padding: 2rem;
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 135deg,
+ rgba(var(--hover-color, transparent), 0.05) 0%,
+ transparent 70%
+ );
+ }
+
+ img {
+ max-width: 100%;
+ max-height: 140px;
+ object-fit: contain;
+ transition: transform 300ms ease;
+ position: relative;
+ z-index: 2;
+ }
+
+ &:hover img {
+ transform: scale(1.05);
+ }
+ }
+
+ .logo-info {
+ flex: 1;
+
+ .logo-tile {
+ margin-bottom: 1.5rem;
+
+ .logo-text {
+ display: flex;
+ flex-direction: column;
+
+ .logo-name {
+ font-family: "Inter", sans-serif;
+ font-weight: 700;
+ font-size: 1.5rem;
+ color: $tiletext;
+ margin-bottom: 1rem;
+ letter-spacing: -0.01em;
+ margin-left: 0;
+ }
+
+ .logo-details {
+ font-family: "Inter", sans-serif;
+ font-size: 1rem;
+ color: $tiletext2;
+ line-height: 1.7;
+ max-width: 650px;
+ }
+ }
+ }
+
+ .logo-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ margin-top: auto; // Push to bottom
+ padding-top: 1.5rem; // Ensure spacing from content
+ margin-left: -1.5rem;
+
+ a {
+ display: inline-block;
+ padding: 0.75rem 1.5rem;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 3rem;
+ font-family: "Inter", sans-serif;
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: $tiletext;
+ text-decoration: none;
+ transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ backdrop-filter: blur(5px);
+
+ &:hover {
+ background-color: #000;
+ color: #fff;
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
+ border-color: #000;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ // Guidelines Section
+ .guidelines-container {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 2.5rem;
+ margin-top: 3rem;
+
+ @media (max-width: 50rem), (max-device-width: 40rem) {
+ grid-template-columns: 1fr;
+ }
+
+ .do-section,
+ .dont-section {
+ background: linear-gradient(
+ 135deg,
+ rgba(255, 255, 255, 0.9) 0%,
+ rgba(255, 255, 255, 0.5) 100%
+ );
+ backdrop-filter: blur(10px);
+ border-radius: 1rem;
+ padding: 2rem;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ transition:
+ transform 300ms ease,
+ box-shadow 300ms ease;
+ position: relative;
+ overflow: hidden;
+
+ &:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+ }
+
+ h3 {
+ font-family: "Inter", sans-serif;
+ font-weight: 700;
+ font-size: 1.4rem;
+ margin-bottom: 1.5rem;
+ padding-bottom: 0.75rem;
+ letter-spacing: -0.01em;
+ position: relative;
+ display: inline-block;
+ margin-top: 2rem;
+
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ background: currentColor;
+ border-radius: 2px;
+ opacity: 0.3;
+ }
+ }
+
+ ul {
+ margin-left: -1.5rem;
+ list-style-type: none;
+
+ li {
+ margin-bottom: 1rem;
+ font-family: "Inter", sans-serif;
+ font-size: 1rem;
+ color: $tiletext2;
+ line-height: 1.6;
+ padding-left: 3rem;
+ position: relative;
+
+ &::before {
+ position: absolute;
+ left: 0;
+ top: 0.1rem;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.8rem;
+ font-weight: 700;
+ }
+ }
+ }
+ }
+
+ .do-section {
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 135deg,
+ rgba(46, 125, 50, 0.05) 0%,
+ transparent 70%
+ );
+ z-index: -1;
+ }
+
+ h3 {
+ color: #2e7d32; // Green for "Do's"
+ }
+
+ ul li::before {
+ content: "✓";
+ background-color: rgba(46, 125, 50, 0.1);
+ color: #2e7d32;
+ }
+ }
+
+ .dont-section {
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 135deg,
+ rgba(198, 40, 40, 0.05) 0%,
+ transparent 70%
+ );
+ z-index: -1;
+ }
+
+ h3 {
+ color: #c62828; // Red for "Don'ts"
+ }
+
+ ul li::before {
+ content: "✕";
+ background-color: rgba(198, 40, 40, 0.1);
+ color: #c62828;
+ }
+ }
+ }
+
+ // Package Icons Section
+ #icons-list {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ gap: 2rem;
+ margin-top: 3rem;
+
+ @media (max-width: 50rem), (max-device-width: 40rem) {
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+ }
+
+ .icon-section {
+ background: linear-gradient(
+ 135deg,
+ rgba(255, 255, 255, 0.9) 0%,
+ rgba(255, 255, 255, 0.5) 100%
+ );
+ backdrop-filter: blur(10px);
+ border-radius: 1rem;
+ padding: 1.75rem;
+ transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
+ position: relative;
+ overflow: hidden;
+
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ &:hover {
+ transform: translateY(-6px);
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+ border-color: rgba(255, 255, 255, 0.5);
+ }
+
+ // Package-specific styling for each icon
+ anndata-tile {
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 135deg,
+ rgba($anndataorange, 0.1) 0%,
+ transparent 80%
+ );
+ z-index: -1;
+ }
+
+ &:hover {
+ .icon-name {
+ color: $anndataorange;
+ }
+ }
+ }
+
+ scanpy-tile {
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 135deg,
+ rgba($scanpymandy, 0.1) 0%,
+ transparent 80%
+ );
+ z-index: -1;
+ }
+
+ &:hover {
+ .icon-name {
+ color: $scanpymandy;
+ }
+ }
+ }
+
+ mudata-tile {
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 135deg,
+ rgba($mudatagreen, 0.1) 0%,
+ transparent 80%
+ );
+ z-index: -1;
+ }
+
+ &:hover {
+ .icon-name {
+ color: $mudatagreen;
+ }
+ }
+ }
+
+ muon-tile {
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 135deg,
+ rgba($muonaquamarine, 0.1) 0%,
+ transparent 80%
+ );
+ z-index: -1;
+ }
+
+ &:hover {
+ .icon-name {
+ color: $muonaquamarine;
+ }
+ }
+ }
+
+ spatialdata-tile {
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 135deg,
+ rgba($spatialdatablue, 0.1) 0%,
+ transparent 80%
+ );
+ z-index: -1;
+ }
+
+ &:hover {
+ .icon-name {
+ color: $spatialdatablue;
+ }
+ }
+ }
+
+ scirpy-tile {
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 135deg,
+ rgba($scirpypurple, 0.1) 0%,
+ transparent 80%
+ );
+ z-index: -1;
+ }
+
+ &:hover {
+ .icon-name {
+ color: $scirpypurple;
+ }
+ }
+ }
+
+ squidpy-tile {
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 135deg,
+ rgba($squidpyviolet, 0.1) 0%,
+ transparent 80%
+ );
+ z-index: -1;
+ }
+
+ &:hover {
+ .icon-name {
+ color: $squidpyviolet;
+ }
+ }
+ }
+
+ scvi-tools-tile {
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 135deg,
+ rgba($scviyellow, 0.1) 0%,
+ transparent 80%
+ );
+ z-index: -1;
+ }
+
+ &:hover {
+ .icon-name {
+ color: $scviyellow;
+ }
+ }
+ }
+
+ .icon-img {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 1.5rem;
+ background-color: none;
+ border-radius: 0.75rem;
+ margin-bottom: 1.25rem;
+ min-height: 110px;
+ // box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
+ position: relative;
+ overflow: hidden;
+
+ img {
+ max-width: 100%;
+ max-height: 85px;
+ object-fit: contain;
+ transition: transform 300ms ease;
+ position: relative;
+ z-index: 2;
+ }
+
+ &:hover {
+ transform: translateY(-3px);
+
+ img {
+ transform: scale(1.08);
+ }
+ }
+ }
+
+ .icon-info {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+
+ .icon-tile {
+ .icon-text {
+ display: flex;
+ flex-direction: column;
+
+ .icon-name {
+ font-family: "Inter", sans-serif;
+ font-weight: 700;
+ font-size: 1.15rem;
+ color: $tiletext;
+ margin-bottom: 0.4rem;
+ letter-spacing: -0.01em;
+ transition: color 300ms ease;
+ }
+
+ .icon-details {
+ font-family: "Inter", sans-serif;
+ font-size: 0.9rem;
+ color: $tiletext2;
+ line-height: 1.5;
+ }
+ }
+ }
+
+ .icon-links {
+ margin-top: auto;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.65rem;
+ padding-top: 1rem;
+ margin-left: -1rem;
+
+ a {
+ display: inline-block;
+ padding: 0.55rem 1rem;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 2.5rem;
+ font-family: "Inter", sans-serif;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: $tiletext;
+ text-decoration: none;
+ transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ backdrop-filter: blur(5px);
+
+ &:hover {
+ background-color: #000;
+ color: #fff;
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
+ border-color: #000;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ // Contact Section
+ #contact {
+ margin-bottom: 5rem;
+
+ a {
+ text-decoration: none;
+ color: inherit;
+ border-bottom: 1px solid $linkunderline;
+ transition:
+ border 200ms,
+ color 200ms;
+ &:hover,
+ &:active {
+ border-bottom: 1px solid black;
+ }
+ }
+
+ p {
+ font-family: "Inter", sans-serif;
+ font-size: 1.05rem;
+ color: $tiletext2;
+ line-height: 1.8;
+ max-width: 700px;
+ background: linear-gradient(
+ 135deg,
+ rgba(255, 255, 255, 0.9) 0%,
+ rgba(255, 255, 255, 0.5) 100%
+ );
+ backdrop-filter: blur(10px);
+ padding: 2.5rem;
+ border-radius: 1rem;
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ position: relative;
+ overflow: hidden;
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 135deg,
+ rgba(69, 87, 196, 0.05) 0%,
+ transparent 80%
+ );
+ z-index: -1;
+ }
+ }
+ }
+
+ // Additional flair for the entire page
+ &::before {
+ content: "";
+ position: fixed;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background:
+ radial-gradient(circle, rgba(69, 87, 196, 0.02) 0%, transparent 60%),
+ radial-gradient(
+ circle at 80% 20%,
+ rgba($anndataorange, 0.02) 0%,
+ transparent 40%
+ ),
+ radial-gradient(
+ circle at 20% 80%,
+ rgba($scanpymandy, 0.02) 0%,
+ transparent 50%
+ );
+ z-index: -1;
+ pointer-events: none;
+ }
+
+ // Toggle switch for package icons display mode
+ .icon-display-toggle {
+ display: flex;
+ align-items: center;
+ margin: 2rem 0 1rem;
+ justify-content: flex-start;
+
+ .toggle-label {
+ font-family: "Inter", sans-serif;
+ font-size: 0.9rem;
+ color: $tiletext2;
+ margin-right: 1rem;
+ }
+
+ .toggle-switch {
+ position: relative;
+ width: 8rem;
+ height: 34px;
+
+ .toggle-checkbox {
+ height: 0;
+ width: 0;
+ visibility: hidden;
+ position: absolute;
+
+ &:checked + .toggle-label {
+ background: #000;
+
+ .toggle-inner {
+ margin-left: 0;
+
+ &:before {
+ content: attr(data-text-on);
+ left: 10px;
+ color: white;
+ }
+ }
+
+ .toggle-switch-button {
+ left: calc(100% - 2px);
+ transform: translateX(-100%);
+ }
+ }
+ }
+
+ .toggle-label {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+ width: 100%;
+ height: 100%;
+ background: #eaeaea;
+ border-radius: 100px;
+ position: relative;
+ transition: background-color 0.2s;
+ padding: 0 5px;
+
+ .toggle-inner {
+ display: block;
+ width: 100%;
+ height: 100%;
+
+ &:before {
+ content: attr(data-text-off);
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ right: 10px;
+ color: #333;
+ font-size: 0.8rem;
+ font-weight: 600;
+ font-family: "Inter", sans-serif;
+ transition: all 0.2s;
+ }
+ }
+
+ .toggle-switch-button {
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ width: 30px;
+ height: 30px;
+ border-radius: 45px;
+ transition: 0.2s;
+ background: #fff;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ }
+ }
+ }
+ }
+
+ // Icons display modes
+ #icons-list {
+ &.icons-only-mode {
+ .icon-img {
+ img {
+ height: 6rem;
+ max-width: 90%;
+ }
+ }
+ }
+
+ &.icons-with-text-mode {
+ .icon-img {
+ img {
+ height: 6rem;
+ max-width: 90%;
+ }
+ }
+ }
+ }
+
+ .logo-examples-gallery {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 2rem;
+ margin: 2.5rem 0 4rem;
+
+ @media (max-width: 50rem) {
+ grid-template-columns: 1fr;
+ gap: 1.75rem;
+ }
+
+ .example-item {
+ border-radius: 1rem;
+ overflow: hidden;
+ transition: transform 300ms ease;
+
+ &:hover {
+ transform: translateY(-5px);
+ }
+
+ .example-image {
+ width: 100%;
+ height: 0;
+ padding-bottom: 66%; // 3:2 aspect ratio
+ position: relative;
+ overflow: hidden;
+ background-color: #f8f8f8;
+ border-radius: 1rem;
+
+ img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 600ms ease;
+ }
+
+ &:hover img {
+ transform: scale(1.03);
+ }
+ }
+
+ .example-caption {
+ padding: 0.75rem 0.5rem;
+ font-family: "Inter", sans-serif;
+ font-size: 0.85rem;
+ color: $tiletext2;
+ line-height: 1.4;
+ text-align: left;
+ }
+ }
+ }
+
+ // Add a subtle separator line between sections
+ #logo-examples {
+ position: relative;
+ margin-top: 6rem;
+
+ &:before {
+ content: "";
+ position: absolute;
+ top: -3rem;
+ left: 0;
+ width: 100%;
+ height: 1px;
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 0, 0, 0.05) 0%,
+ rgba(0, 0, 0, 0.1) 50%,
+ rgba(0, 0, 0, 0.05) 100%
+ );
+ }
+ }
+}
diff --git a/content/design/_index.md b/content/design/_index.md
new file mode 100644
index 00000000..a39db2f8
--- /dev/null
+++ b/content/design/_index.md
@@ -0,0 +1,137 @@
++++
+title = "Media Kit"
+aliases = ["/brand/", "/logo/"]
+
+[[sections]]
+ 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).
+"""
+ logo_guidelines = "To maintain brand consistency, please follow these guidelines when using our logo."
+ do_guidelines = """
+- Use the logo in its original proportions
+- Maintain adequate white space around the logo
+- Use the logo on backgrounds that provide sufficient contrast
+- Use the SVG format when possible for best quality at any size
+"""
+ dont_guidelines = """
+- Don't alter the colors of the logo
+- Don't stretch or distort the logo
+- Don't add effects such as shadows, outlines, or glows
+- Don't place the logo on busy backgrounds that reduce visibility
+- Don't rotate or change the orientation of the logo
+- Don't use the logo at sizes where details become illegible
+"""
+ package_icons = "These logos represent our core packages. They are available for download in SVG or PNG formats, sometimes with variations such as with or without the package name."
+ contact = "For questions about logo usage or requests for additional formats, please contact us at [core@scverse.org](mailto:core@scverse.org). For more information about scverse, please visit our [About page](/about/)."
+
+[[primarylogos]]
+ name = "Primary Logo"
+ description = "Primary logo with text"
+ img = "../img/logo/scverse.svg"
+ details = """
+Our primary logo combines our icon with the full name. Use this version when introducing our brand or in more formal contexts. Use the PT Sans font.
+"""
+ [[primarylogos.links]]
+ text = "Download SVG"
+ url = "../img/logo/scverse.svg"
+ [[primarylogos.links]]
+ text = "Download PNG"
+ url = "../img/logo/scverse.png"
+
+[[primarylogos]]
+ name = "Icon Only"
+ description = "Logo mark without text"
+ img = "../img/logo/scverse_symbol.svg"
+ details = "Our icon can be used independently when space is limited or when our brand is already well-established in context."
+ [[primarylogos.links]]
+ text = "Download SVG"
+ url = "../img/logo/scverse_symbol.svg"
+ [[primarylogos.links]]
+ text = "Download PNG"
+ url = "../img/logo/scverse_symbol.png"
+
+[[packageicons]]
+ name = "anndata"
+ description = "AnnData package icon"
+ img = "../img/libs/anndata_schema.svg"
+ details = "Icon for the AnnData package, representing annotated matrices."
+ color = true
+ [[packageicons.links]]
+ text = "Download SVG"
+ url = "../img/libs/anndata_schema.svg"
+
+[[packageicons]]
+ name = "mudata"
+ description = "MuData package icon"
+ img = "../img/libs/mudata_flat.svg"
+ details = "Icon for the MuData package, representing multimodal data format."
+ color = true
+ [[packageicons.links]]
+ text = "Download SVG"
+ url = "../img/libs/mudata_flat.svg"
+ [[packageicons.links]]
+ text = "Download SVG (w/ name)"
+ url = "../img/libs/mudata.svg"
+
+[[packageicons]]
+ name = "spatialdata"
+ description = "SpatialData package icon"
+ img = "../img/icons/spatialdata.svg"
+ details = "Icon for the SpatialData package, representing data format for spatial resolution data."
+ color = true
+ [[packageicons.links]]
+ text = "Download SVG"
+ url = "../img/icons/spatialdata.svg"
+ [[packageicons.links]]
+ text = "Download PNG (w/ name)"
+ url = "../img/libs/spatialdata_horizontal.png"
+
+[[packageicons]]
+ name = "scanpy"
+ description = "Scanpy package icon"
+ img = "../img/icons/scanpy.svg"
+ details = "Icon for the Scanpy package, representing single-cell analysis framework."
+ color = true
+ [[packageicons.links]]
+ text = "Download SVG"
+ url = "../img/icons/scanpy.svg"
+
+[[packageicons]]
+ name = "muon"
+ description = "Muon package icon"
+ img = "../img/icons/muon.svg"
+ details = "Icon for the Muon package, representing multi-omics analysis framework."
+ [[packageicons.links]]
+ text = "Download SVG"
+ url = "../img/icons/muon.svg"
+
+[[packageicons]]
+ name = "scirpy"
+ description = "Scirpy package icon"
+ img = "../img/icons/scirpy.svg"
+ details = "Icon for the Scirpy package, representing single-cell immune sequencing framework."
+ [[packageicons.links]]
+ text = "Download SVG"
+ url = "../img/icons/scirpy.svg"
+
+[[packageicons]]
+ name = "squidpy"
+ description = "Squidpy package icon"
+ img = "../img/icons/squidpy.svg"
+ details = "Icon for the Squidpy package, representing spatial single cell analysis."
+ [[packageicons.links]]
+ text = "Download SVG"
+ url = "../img/icons/squidpy.svg"
+
+[[packageicons]]
+ name = "scvi-tools"
+ description = "scvi-tools package icon"
+ img = "../img/icons/scvi-tools.svg"
+ details = "Icon for the scvi-tools package, representing probabilistic modelling framework for single-cell omics data."
+ [[packageicons.links]]
+ text = "Download SVG"
+ url = "../img/icons/scvi-tools.svg"
++++
\ No newline at end of file
diff --git a/layouts/design/list.html b/layouts/design/list.html
new file mode 100644
index 00000000..0c221814
--- /dev/null
+++ b/layouts/design/list.html
@@ -0,0 +1,213 @@
+
+
+
+ {{ partial "head" . }}
+
+
+
+
+ {{ partial "header" . }}
+
+
+
+
+
{{ .Title }}
+
+ {{ if .Params.sections }}
+ {{ $sections := index .Params.sections 0 }}
+
+ {{ if or .Params.primarylogos .Params.packageicons }}
+
Primary Logos
+
{{ $sections.primary_logos | markdownify }}
+ {{ if .Params.primarylogos }}
+
+ {{ $primarylogos := .Params.primarylogos }}
+ {{ range $i, $e := $primarylogos }}
+
+
+

+
+
+
+
+ {{ .name }}
+ {{ .details | markdownify }}
+
+
+
+
+
+ {{ end }}
+
+ {{ end }}
+
Logo Usage Guidelines
+
{{ $sections.logo_guidelines | markdownify }}
+
+
+
Do's
+ {{ $sections.do_guidelines | markdownify }}
+
+
+
Don'ts
+ {{ $sections.dont_guidelines | markdownify }}
+
+
+
Logo in Action
+
+
+
+

+
+
+ Conference Branding - scverse conference in the Bay Area in 2025
+
+
+
+
+

+
+
+ Conference Branding - scverse lettering for the 2025 conference (no icon)
+
+
+
+
+

+
+
+ Conference Branding - scverse conference in Munich in 2024
+
+
+
+
+

+
+
Slide Branding - example scverse-branded slide
+
+
+
+

+
+
+ Light Backgrounds - scverse icon with the concentric circles reminding of the
+ multi-layered scverse ecosystem
+
+
+
+
Package Logos
+
{{ $sections.package_icons | markdownify }}
+
+ {{ $packageicons := .Params.packageicons }}
+ {{ range $i, $e := $packageicons }}
+
+
+
+

+
+
+
+
+ {{ .name }}
+ {{ .details | markdownify }}
+
+
+
+
+
+ {{ end }}
+
+ {{ end }}
+
+
+
+
Contact
+
{{ $sections.contact | markdownify }}
+
+
+ {{ end }}
+
+
+
+
+ {{ partial "footer" . }}
+
+
+
+
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 26aa2590..803d879b 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -10,6 +10,7 @@ Pages
Blog
Events
About
+ Media kit
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 47a416c4..10a376c6 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -103,6 +103,9 @@
Code of Conduct
+
+ Media kit
+
Contact
diff --git a/static/img/libs/mudata.svg b/static/img/libs/mudata.svg
new file mode 100644
index 00000000..c0db62c8
--- /dev/null
+++ b/static/img/libs/mudata.svg
@@ -0,0 +1,36 @@
+
+
+
diff --git a/static/img/libs/muon.png b/static/img/libs/muon.png
new file mode 100644
index 00000000..c4e1c69a
Binary files /dev/null and b/static/img/libs/muon.png differ
diff --git a/static/img/libs/spatialdata_horizontal.png b/static/img/libs/spatialdata_horizontal.png
new file mode 100644
index 00000000..5683233e
Binary files /dev/null and b/static/img/libs/spatialdata_horizontal.png differ
diff --git a/static/img/logo/scverse-bridge-sketch.png b/static/img/logo/scverse-bridge-sketch.png
new file mode 100644
index 00000000..e0a1b169
Binary files /dev/null and b/static/img/logo/scverse-bridge-sketch.png differ
diff --git a/static/img/logo/scverse-lettering.png b/static/img/logo/scverse-lettering.png
new file mode 100644
index 00000000..2e819318
Binary files /dev/null and b/static/img/logo/scverse-lettering.png differ
diff --git a/static/img/logo/scverse-munich.png b/static/img/logo/scverse-munich.png
new file mode 100644
index 00000000..4194313c
Binary files /dev/null and b/static/img/logo/scverse-munich.png differ
diff --git a/static/img/logo/scverse-palms.png b/static/img/logo/scverse-palms.png
new file mode 100644
index 00000000..1295f981
Binary files /dev/null and b/static/img/logo/scverse-palms.png differ
diff --git a/static/img/logo/scverse-slide.png b/static/img/logo/scverse-slide.png
new file mode 100644
index 00000000..dedb3d6f
Binary files /dev/null and b/static/img/logo/scverse-slide.png differ
diff --git a/static/img/logo/scverse.png b/static/img/logo/scverse.png
new file mode 100644
index 00000000..ca1a2516
Binary files /dev/null and b/static/img/logo/scverse.png differ
diff --git a/static/img/logo/scverse.svg b/static/img/logo/scverse.svg
new file mode 100644
index 00000000..f9460277
--- /dev/null
+++ b/static/img/logo/scverse.svg
@@ -0,0 +1,17 @@
+
+
+
diff --git a/static/img/logo/scverse_symbol.png b/static/img/logo/scverse_symbol.png
new file mode 100644
index 00000000..133da4f9
Binary files /dev/null and b/static/img/logo/scverse_symbol.png differ
diff --git a/static/img/logo/scverse_symbol.svg b/static/img/logo/scverse_symbol.svg
new file mode 100644
index 00000000..f9ad163a
--- /dev/null
+++ b/static/img/logo/scverse_symbol.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file