From a4841b6a07edc03a15e831fa58567d6b9f61d673 Mon Sep 17 00:00:00 2001 From: Danila Date: Tue, 25 Mar 2025 17:30:45 +0100 Subject: [PATCH 1/8] Media kit page draft --- assets/main.scss | 894 ++++++++++++++++++++- content/design/_index.md | 165 ++++ layouts/design/list.html | 181 +++++ layouts/partials/header.html | 3 + static/img/libs/mudata.svg | 36 + static/img/libs/muon.png | Bin 0 -> 6781 bytes static/img/libs/spatialdata_horizontal.png | Bin 0 -> 51748 bytes static/img/logo/scverse-munich.png | Bin 0 -> 2080629 bytes static/img/logo/scverse-palms.png | Bin 0 -> 2479168 bytes static/img/logo/scverse.png | Bin 0 -> 35714 bytes static/img/logo/scverse.svg | 17 + static/img/logo/scverse_symbol.png | Bin 0 -> 40852 bytes static/img/logo/scverse_symbol.svg | 15 + 13 files changed, 1294 insertions(+), 17 deletions(-) create mode 100644 content/design/_index.md create mode 100644 layouts/design/list.html create mode 100644 static/img/libs/mudata.svg create mode 100644 static/img/libs/muon.png create mode 100644 static/img/libs/spatialdata_horizontal.png create mode 100644 static/img/logo/scverse-munich.png create mode 100644 static/img/logo/scverse-palms.png create mode 100644 static/img/logo/scverse.png create mode 100644 static/img/logo/scverse.svg create mode 100644 static/img/logo/scverse_symbol.png create mode 100644 static/img/logo/scverse_symbol.svg diff --git a/assets/main.scss b/assets/main.scss index 07a1fdf0..432eee11 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%; @@ -814,7 +818,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; @@ -833,7 +837,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; @@ -857,7 +861,7 @@ body { background-color: $tilebg3; } - @media (max-device-width: 40rem) { + @media (max-width: 50rem), (max-device-width: 40rem) { background-color: $tilebg4; } @@ -930,7 +934,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; } @@ -979,7 +983,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; } } @@ -1006,7 +1010,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,859 @@ 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 { + 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%); + } + } +} \ No newline at end of file diff --git a/content/design/_index.md b/content/design/_index.md new file mode 100644 index 00000000..3e23594e --- /dev/null +++ b/content/design/_index.md @@ -0,0 +1,165 @@ ++++ +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 both SVG and PNG formats, with or without package names." + contact = "For questions about logo usage or requests for additional formats, please contact us at [brand@example.com](mailto:brand@example.com). For more information about our organization, 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" + urlWithText = "../img/libs/anndata_schema.svg" + # [[packageicons.links]] + # text = "Download PNG" + # url = "../img/libs/anndata_schema.png" + # urlWithText = "../img/libs/anndata.svg" + +[[packageicons]] + name = "mudata" + description = "MuData package icon" + img = "../img/libs/mudata_flat.svg" + imgWithText = "../img/libs/mudata.svg" + details = "Icon for the MuData package, representing multimodal data format." + color = true + [[packageicons.links]] + text = "Download SVG" + url = "../img/icons/mudata.svg" + urlWithText = "../img/libs/mudata.svg" + # [[packageicons.links]] + # text = "Download PNG" + # url = "../img/libs/mudata_flat.png" + # urlWithText = "../img/icons/mudata.png" + +[[packageicons]] + name = "spatialdata" + description = "SpatialData package icon" + img = "../img/icons/spatialdata.svg" + imgWithText = "../img/libs/spatialdata_horizontal.png" + 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" + # urlWithText = "../img/libs/spatialdata.svg" + [[packageicons.links]] + text = "Download PNG" + urlWithText = "../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.links]] + text = "Download PNG" + url = "../img/icons/scanpy.png" + +[[packageicons]] + name = "muon" + description = "Muon package icon" + img = "../img/icons/muon.svg" + imgWithText = "../img/libs/muon.svg" + details = "Icon for the Muon package, representing multi-omics analysis framework." + [[packageicons.links]] + text = "Download SVG" + url = "../img/icons/muon.svg" + urlWithText = "../img/libs/muon.svg" + [[packageicons.links]] + text = "Download PNG" + url = "../img/icons/muon.png" + urlWithText = "../img/libs/muon.png" + +[[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.links]] + text = "Download PNG" + url = "../img/icons/scirpy.png" + +[[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.links]] + text = "Download PNG" + url = "../img/icons/squidpy.png" + +[[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" + [[packageicons.links]] + text = "Download PNG" + url = "../img/icons/scvi-tools.png" ++++ \ No newline at end of file diff --git a/layouts/design/list.html b/layouts/design/list.html new file mode 100644 index 00000000..68e06eab --- /dev/null +++ b/layouts/design/list.html @@ -0,0 +1,181 @@ + + + + {{ 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

+ +

Package Logos

+
{{ $sections.package_icons | markdownify }} +
+ Display logos: +
+ + +
+
+
+ {{ $packageicons := .Params.packageicons }} + {{ range $i, $e := $packageicons }} +
+
+ + +
+
+
+
+ {{ .name }} + {{ .details | markdownify }} +
+
+ +
+
+ {{ end }} +
+ {{ end }} + +
+

Contact and Additional Resources

+
{{ $sections.contact | markdownify }} +
+
+ {{ end }} +
+
+
+
+ {{ partial "footer" . }} + + + + + \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 588a4eb6..25be8f6a 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -102,6 +102,9 @@
  • Code of Conduct
  • +
  • + Media kit +