Skip to content

Commit 3347123

Browse files
gtcapre-commit-ci[bot]
gtca
and
pre-commit-ci[bot]
authored
Add media kit page
* Media kit page draft * Add media kit link to the footer * Add more examples and clean up package logos * Add example logo usage * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Include styles for the trademarked logo * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
1 parent 19b6e9a commit 3347123

File tree

17 files changed

+1381
-17
lines changed

17 files changed

+1381
-17
lines changed

‎assets/main.scss‎

Lines changed: 959 additions & 17 deletions
Large diffs are not rendered by default.

‎content/design/_index.md‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
+++
2+
title = "Media Kit"
3+
aliases = ["/brand/", "/logo/"]
4+
5+
[[sections]]
6+
primary_logos = """scverse&#174; logo is a signature pair of letters **sc**, originally derived from 'single-cell', smoothly interwoven to create perseption of a third dimension.
7+
8+
Our logo is available in several formats for different use cases. Please use these official versions and follow our guidelines when representing our brand.
9+
10+
Our logo is protected as a registered trademark. For details and specifics, consult the [NumFOCUS trademark guidelines](https://numfocus.org/trademark-guidelines).
11+
"""
12+
logo_guidelines = "To maintain brand consistency, please follow these guidelines when using our logo."
13+
do_guidelines = """
14+
- Use the logo in its original proportions
15+
- Maintain adequate white space around the logo
16+
- Use the logo on backgrounds that provide sufficient contrast
17+
- Use the SVG format when possible for best quality at any size
18+
"""
19+
dont_guidelines = """
20+
- Don't alter the colors of the logo
21+
- Don't stretch or distort the logo
22+
- Don't add effects such as shadows, outlines, or glows
23+
- Don't place the logo on busy backgrounds that reduce visibility
24+
- Don't rotate or change the orientation of the logo
25+
- Don't use the logo at sizes where details become illegible
26+
"""
27+
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."
28+
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/)."
29+
30+
[[primarylogos]]
31+
name = "Primary Logo"
32+
description = "Primary logo with text"
33+
img = "../img/logo/scverse.svg"
34+
details = """
35+
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.
36+
"""
37+
[[primarylogos.links]]
38+
text = "Download SVG"
39+
url = "../img/logo/scverse.svg"
40+
[[primarylogos.links]]
41+
text = "Download PNG"
42+
url = "../img/logo/scverse.png"
43+
44+
[[primarylogos]]
45+
name = "Icon Only"
46+
description = "Logo mark without text"
47+
img = "../img/logo/scverse_symbol.svg"
48+
details = "Our icon can be used independently when space is limited or when our brand is already well-established in context."
49+
[[primarylogos.links]]
50+
text = "Download SVG"
51+
url = "../img/logo/scverse_symbol.svg"
52+
[[primarylogos.links]]
53+
text = "Download PNG"
54+
url = "../img/logo/scverse_symbol.png"
55+
56+
[[packageicons]]
57+
name = "anndata"
58+
description = "AnnData package icon"
59+
img = "../img/libs/anndata_schema.svg"
60+
details = "Icon for the AnnData package, representing annotated matrices."
61+
color = true
62+
[[packageicons.links]]
63+
text = "Download SVG"
64+
url = "../img/libs/anndata_schema.svg"
65+
66+
[[packageicons]]
67+
name = "mudata"
68+
description = "MuData package icon"
69+
img = "../img/libs/mudata_flat.svg"
70+
details = "Icon for the MuData package, representing multimodal data format."
71+
color = true
72+
[[packageicons.links]]
73+
text = "Download SVG"
74+
url = "../img/libs/mudata_flat.svg"
75+
[[packageicons.links]]
76+
text = "Download SVG (w/ name)"
77+
url = "../img/libs/mudata.svg"
78+
79+
[[packageicons]]
80+
name = "spatialdata"
81+
description = "SpatialData package icon"
82+
img = "../img/icons/spatialdata.svg"
83+
details = "Icon for the SpatialData package, representing data format for spatial resolution data."
84+
color = true
85+
[[packageicons.links]]
86+
text = "Download SVG"
87+
url = "../img/icons/spatialdata.svg"
88+
[[packageicons.links]]
89+
text = "Download PNG (w/ name)"
90+
url = "../img/libs/spatialdata_horizontal.png"
91+
92+
[[packageicons]]
93+
name = "scanpy"
94+
description = "Scanpy package icon"
95+
img = "../img/icons/scanpy.svg"
96+
details = "Icon for the Scanpy package, representing single-cell analysis framework."
97+
color = true
98+
[[packageicons.links]]
99+
text = "Download SVG"
100+
url = "../img/icons/scanpy.svg"
101+
102+
[[packageicons]]
103+
name = "muon"
104+
description = "Muon package icon"
105+
img = "../img/icons/muon.svg"
106+
details = "Icon for the Muon package, representing multi-omics analysis framework."
107+
[[packageicons.links]]
108+
text = "Download SVG"
109+
url = "../img/icons/muon.svg"
110+
111+
[[packageicons]]
112+
name = "scirpy"
113+
description = "Scirpy package icon"
114+
img = "../img/icons/scirpy.svg"
115+
details = "Icon for the Scirpy package, representing single-cell immune sequencing framework."
116+
[[packageicons.links]]
117+
text = "Download SVG"
118+
url = "../img/icons/scirpy.svg"
119+
120+
[[packageicons]]
121+
name = "squidpy"
122+
description = "Squidpy package icon"
123+
img = "../img/icons/squidpy.svg"
124+
details = "Icon for the Squidpy package, representing spatial single cell analysis."
125+
[[packageicons.links]]
126+
text = "Download SVG"
127+
url = "../img/icons/squidpy.svg"
128+
129+
[[packageicons]]
130+
name = "scvi-tools"
131+
description = "scvi-tools package icon"
132+
img = "../img/icons/scvi-tools.svg"
133+
details = "Icon for the scvi-tools package, representing probabilistic modelling framework for single-cell omics data."
134+
[[packageicons.links]]
135+
text = "Download SVG"
136+
url = "../img/icons/scvi-tools.svg"
137+
+++

‎layouts/design/list.html‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
{{ partial "head" . }}
5+
</head>
6+
7+
<body>
8+
<header>
9+
{{ partial "header" . }}
10+
</header>
11+
<div id="wrapper">
12+
<div id="content">
13+
<div id="page-content">
14+
<h1>{{ .Title }}</h1>
15+
<article class="post">
16+
{{ if .Params.sections }}
17+
{{ $sections := index .Params.sections 0 }}
18+
<div class="post-content" id="media-kit-content">
19+
{{ if or .Params.primarylogos .Params.packageicons }}
20+
<h2 id="primary-logos">Primary Logos</h2>
21+
<br />{{ $sections.primary_logos | markdownify }}
22+
{{ if .Params.primarylogos }}
23+
<div id="logos-list">
24+
{{ $primarylogos := .Params.primarylogos }}
25+
{{ range $i, $e := $primarylogos }}
26+
<div
27+
class="logo-section"
28+
style="--hover-color: var(--{{ .name | lower }}-color);"
29+
id="{{ .name | lower }}-tile"
30+
>
31+
<div class="logo-img">
32+
<img src="{{ .img }}" />
33+
</div>
34+
<div class="logo-info">
35+
<div class="logo-tile">
36+
<div class="logo-text">
37+
<span class="logo-name">{{ .name }}</span>
38+
<span class="logo-details">{{ .details | markdownify }}</span>
39+
</div>
40+
</div>
41+
<div class="logo-links">
42+
{{ range $k, $v := $e.links }}
43+
<a href="{{ $v.url }}" target="_blank">{{ $v.text }}</a>
44+
{{ end }}
45+
</div>
46+
</div>
47+
</div>
48+
{{ end }}
49+
</div>
50+
{{ end }}
51+
<h2 id="logo-guidelines">Logo Usage Guidelines</h2>
52+
<br />{{ $sections.logo_guidelines | markdownify }}
53+
<div class="guidelines-container">
54+
<div class="do-section">
55+
<h3>Do's</h3>
56+
{{ $sections.do_guidelines | markdownify }}
57+
</div>
58+
<div class="dont-section">
59+
<h3>Don'ts</h3>
60+
{{ $sections.dont_guidelines | markdownify }}
61+
</div>
62+
</div>
63+
<h2 id="logo-examples">Logo in Action</h2>
64+
<div class="logo-examples-gallery">
65+
<div class="example-item">
66+
<div class="example-image">
67+
<img
68+
src="../img/logo/scverse-bridge-sketch.png"
69+
alt="scverse logo - Golden Gate Bridge example"
70+
/>
71+
</div>
72+
<div class="example-caption">
73+
<strong>Conference Branding</strong> - scverse conference in the Bay Area in 2025
74+
</div>
75+
</div>
76+
<div class="example-item">
77+
<div class="example-image">
78+
<img src="../img/logo/scverse-lettering.png" alt="scverse lettering (no logo)" />
79+
</div>
80+
<div class="example-caption">
81+
<strong>Conference Branding</strong> - scverse lettering for the 2025 conference (no icon)
82+
</div>
83+
</div>
84+
<div class="example-item">
85+
<div class="example-image">
86+
<img src="../img/logo/scverse-munich.png" alt="scverse logo - Munich example" />
87+
</div>
88+
<div class="example-caption">
89+
<strong>Conference Branding</strong> - scverse conference in Munich in 2024
90+
</div>
91+
</div>
92+
<div class="example-item">
93+
<div class="example-image">
94+
<img src="../img/logo/scverse-slide.png" alt="scverse logo - Example slide" />
95+
</div>
96+
<div class="example-caption"><strong>Slide Branding</strong> - example scverse-branded slide</div>
97+
</div>
98+
<div class="example-item">
99+
<div class="example-image">
100+
<img src="../img/logo/scverse-palms.png" alt="scverse logo - Palm tree example" />
101+
</div>
102+
<div class="example-caption">
103+
<strong>Light Backgrounds</strong> - scverse icon with the concentric circles reminding of the
104+
multi-layered scverse ecosystem
105+
</div>
106+
</div>
107+
</div>
108+
<h2 id="package-icons">Package Logos</h2>
109+
<br />{{ $sections.package_icons | markdownify }}
110+
<div id="icons-list" class="icons-only-mode">
111+
{{ $packageicons := .Params.packageicons }}
112+
{{ range $i, $e := $packageicons }}
113+
<div
114+
class="icon-section"
115+
style="--hover-color: var(--{{ .name | lower }}-color);"
116+
id="{{ .name | lower }}-tile"
117+
>
118+
<div class="icon-img">
119+
<!-- Store both image versions in data attributes -->
120+
<img
121+
src="{{ .img }}"
122+
data-icon="{{ .img }}"
123+
data-icon-with-text="{{ if .imgWithText }}
124+
{{ .imgWithText }}
125+
{{ else }}
126+
{{ .img }}
127+
{{ end }}"
128+
/>
129+
</div>
130+
<div class="icon-info">
131+
<div class="icon-tile">
132+
<div class="icon-text">
133+
<span class="icon-name">{{ .name }}</span>
134+
<span class="icon-details">{{ .details | markdownify }}</span>
135+
</div>
136+
</div>
137+
<div class="icon-links">
138+
{{ range $k, $v := $e.links }}
139+
<!-- Add data attributes to store both versions of the URL -->
140+
<a
141+
href="{{ $v.url }}"
142+
target="_blank"
143+
class="icon-link"
144+
data-icon-url="{{ $v.url }}"
145+
data-with-text-url="{{ if $v.urlWithText }}
146+
{{ $v.urlWithText }}
147+
{{ else }}
148+
{{ $v.url }}
149+
{{ end }}"
150+
>
151+
{{ $v.text }}
152+
</a>
153+
{{ end }}
154+
</div>
155+
</div>
156+
</div>
157+
{{ end }}
158+
</div>
159+
{{ end }}
160+
161+
162+
<div id="contact">
163+
<h2>Contact</h2>
164+
<br />{{ $sections.contact | markdownify }}
165+
</div>
166+
</div>
167+
{{ end }}
168+
</article>
169+
</div>
170+
</div>
171+
</div>
172+
{{ partial "footer" . }}
173+
</body>
174+
175+
<script>
176+
document.addEventListener("DOMContentLoaded", function () {
177+
const toggleSwitch = document.getElementById("icon-display-mode")
178+
const iconsList = document.getElementById("icons-list")
179+
180+
toggleSwitch.addEventListener("change", function () {
181+
if (this.checked) {
182+
// Switch to logos with text mode
183+
iconsList.classList.remove("icons-only-mode")
184+
iconsList.classList.add("icons-with-text-mode")
185+
186+
// Update all displayed images to the text version
187+
document.querySelectorAll("#icons-list .icon-img img").forEach((img) => {
188+
img.src = img.dataset.iconWithText
189+
})
190+
191+
// Update download links to point to the text versions
192+
document.querySelectorAll("#icons-list .icon-link").forEach((link) => {
193+
link.href = link.dataset.withTextUrl
194+
})
195+
} else {
196+
// Switch to icons only mode
197+
iconsList.classList.remove("icons-with-text-mode")
198+
iconsList.classList.add("icons-only-mode")
199+
200+
// Update all displayed images to the icon-only version
201+
document.querySelectorAll("#icons-list .icon-img img").forEach((img) => {
202+
img.src = img.dataset.icon
203+
})
204+
205+
// Update download links to point to the icon-only versions
206+
document.querySelectorAll("#icons-list .icon-link").forEach((link) => {
207+
link.href = link.dataset.iconUrl
208+
})
209+
}
210+
})
211+
})
212+
</script>
213+
</html>

‎layouts/partials/footer.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ <h5>Pages</h5>
1010
<li><a href="/blog">Blog</a></li>
1111
<li><a href="/events">Events</a></li>
1212
<li><a href="/about">About</a></li>
13+
<li><a href="/design">Media kit</a></li>
1314
</ul>
1415
</div>
1516
<div class="col-12 col-md-6 col-lg-3">

‎layouts/partials/header.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,9 @@
103103
<li>
104104
<a class="dropdown-item" href="/about/code_of_conduct">Code of Conduct</a>
105105
</li>
106+
<li>
107+
<a class="dropdown-item" href="/design">Media kit</a>
108+
</li>
106109
<li>
107110
<!-- This is just a second link to the /join page, but makes it more discoverable for people who think “I don’t want to join, just contact” -->
108111
<a class="dropdown-item" href="/join">Contact</a>

0 commit comments

Comments
 (0)