Skip to content

Commit 99269a1

Browse files
authored
overhaul (#4)
1 parent 29fe504 commit 99269a1

486 files changed

Lines changed: 50663 additions & 21 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
File renamed without changes.

assets/css/custom.css

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/* Logo dark/light switching.
2+
Congo toggles a .dark class on <html> via JS — the native
3+
prefers-color-scheme media query inside <picture> tags does not respond
4+
to this toggle, so we handle switching with CSS classes instead. */
5+
.logo-light {
6+
display: block;
7+
max-width: 100%;
8+
height: auto;
9+
}
10+
.logo-dark {
11+
display: none;
12+
max-width: 100%;
13+
height: auto;
14+
}
15+
html.dark .logo-light {
16+
display: none;
17+
}
18+
html.dark .logo-dark {
19+
display: block;
20+
}
21+
22+
/* Experimental page — v2 callout and problem cards */
23+
html.dark .v2-callout {
24+
background: #1e3a5f !important;
25+
border-color: #3b82f6 !important;
26+
}
27+
html.dark .v2-callout p { color: #93c5fd !important; }
28+
html.dark .v2-callout strong { color: #bfdbfe !important; }
29+
html.dark .problem-card {
30+
background: #1f2937 !important;
31+
border-color: #374151 !important;
32+
}
33+
html.dark .problem-card p { color: #9ca3af !important; }
34+
html.dark .problem-card strong { color: #d1d5db !important; }
35+
html.dark .v2-pipeline-step-neutral {
36+
background: #1f2937 !important;
37+
border-color: #374151 !important;
38+
color: #d1d5db !important;
39+
}
40+
html.dark .v2-pipeline-step-purple {
41+
background: #2e1065 !important;
42+
border-color: #4c1d95 !important;
43+
color: #c4b5fd !important;
44+
}
45+
html.dark .v2-pipeline-step-blue {
46+
background: #1e3a5f !important;
47+
border-color: #1e40af !important;
48+
color: #93c5fd !important;
49+
}
50+
html.dark .v2-pipeline-step-yellow {
51+
background: #422006 !important;
52+
border-color: #854d0e !important;
53+
color: #fde68a !important;
54+
}
55+
html.dark .v2-pipeline-step-green {
56+
background: #052e16 !important;
57+
border-color: #166534 !important;
58+
color: #86efac !important;
59+
}
60+
61+
/* Hero entrance animations */
62+
@keyframes fadeUp {
63+
from { opacity: 0; transform: translateY(28px); }
64+
to { opacity: 1; transform: translateY(0); }
65+
}
66+
.hero-fade-1 { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s both; }
67+
.hero-fade-2 { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.30s both; }
68+
.hero-fade-3 { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.45s both; }
69+
.hero-fade-4 { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.60s both; }
70+
.hero-fade-5 { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.75s both; }
71+
72+
/* List view logos */
73+
.list-logo-light { display: block; }
74+
.list-logo-dark { display: none; }
75+
html.dark .list-logo-light { display: none !important; }
76+
html.dark .list-logo-dark { display: block !important; }
77+
78+
/* Pipeline step hover bounce (spring easing gives natural overshoot) */
79+
.pipeline-step {
80+
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
81+
}
82+
.pipeline-step:hover {
83+
transform: translateY(-4px) scale(1.04);
84+
box-shadow: 0 6px 16px rgba(0,0,0,0.13);
85+
}
86+
html.dark .pipeline-step:hover {
87+
box-shadow: 0 6px 16px rgba(0,0,0,0.45);
88+
}
89+
90+
/* Pill icon */
91+
.pill-icon {
92+
height: 14px;
93+
width: 14px;
94+
object-fit: contain;
95+
vertical-align: middle;
96+
margin-right: 4px;
97+
border-radius: 2px;
98+
display: inline-block;
99+
position: relative;
100+
top: -1px;
101+
}
102+
103+
/* Hero dark mode overrides */
104+
html.dark .hero-tagline { color: #9ca3af !important; }
105+
html.dark .hero-arrow { color: #4b5563 !important; }
106+
html.dark .hero-stage-label { color: #6b7280 !important; }
107+
108+
html.dark .hero-pill-neutral { background: #1f2937 !important; border-color: #374151 !important; color: #d1d5db !important; }
109+
html.dark .hero-pill-purple { background: #2e1065 !important; border-color: #4c1d95 !important; color: #c4b5fd !important; }
110+
html.dark .hero-pill-blue { background: #1e3a5f !important; border-color: #1e40af !important; color: #93c5fd !important; }
111+
html.dark .hero-pill-green { background: #052e16 !important; border-color: #166534 !important; color: #86efac !important; }
112+
html.dark .hero-btn-primary { background: #3b82f6 !important; }
113+
html.dark .hero-btn-outline { border-color: #374151 !important; color: #d1d5db !important; }
114+
html.dark .hero-secondary-link { color: #6b7280 !important; border-bottom-color: #374151 !important; }

config/_default/hugo.toml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
baseURL = "https://cytomining.github.io/"
2+
locale = "en"
3+
title = "Cytomining"
4+
theme = "congo"
5+
6+
enableRobotsTXT = true
7+
paginate = 10
8+
9+
[markup]
10+
[markup.goldmark]
11+
[markup.goldmark.renderer]
12+
unsafe = true

config/_default/languages.en.toml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
label = "English"
2+
weight = 1
3+
title = "Cytomining"
4+
5+
[params]
6+
description = "Essential tools, workflows, and best practices for single-cell image-based profiling."
7+
8+
[params.author]
9+
name = "Cytomining"

config/_default/menus.en.toml

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
[[main]]
2+
name = "Tools"
3+
pageRef = "tools"
4+
weight = 10
5+
6+
[[main]]
7+
name = "Experimental tools"
8+
pageRef = "experimental"
9+
weight = 20
10+
11+
[[main]]
12+
name = "Media"
13+
pageRef = "media"
14+
weight = 30
15+
16+
[[main]]
17+
name = "About"
18+
pageRef = "about"
19+
weight = 40
20+
21+
[[main]]
22+
name = "History"
23+
pageRef = "history"
24+
weight = 50
25+
26+
[[main]]
27+
name = "Contact"
28+
pageRef = "contact"
29+
weight = 60

config/_default/params.toml

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
colorScheme = "ocean"
2+
defaultAppearance = "light"
3+
autoSwitchAppearance = true
4+
enableSearch = true
5+
enableCodeCopy = false
6+
7+
[homepage]
8+
layout = "background"
9+
showRecent = false
10+
11+
[header]
12+
layout = "fixed"
13+
14+
[footer]
15+
showCopyright = true
16+
showThemeAttribution = false
17+
showAppearanceSwitcher = true
18+
showScrollToTop = true
19+
20+
[article]
21+
showDate = false
22+
showAuthor = false
23+
showReadingTime = false
24+
showTableOfContents = true
25+
showRelatedContent = false
26+
showEdit = false
27+
28+
[list]
29+
showCards = true
30+
groupByYear = false
31+
cardView = true
32+
showSummary = true

content/_index.md

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: "Cytomining"
3+
description: "Open-source tools for single-cell image-based profiling"
4+
---
5+
6+
<div class="not-prose" style="text-align: center; padding: 3rem 0 2rem;">
7+
8+
<!-- Logo -->
9+
<div class="hero-fade-1" style="margin-bottom: 1.5rem;">
10+
<img
11+
src="https://avatars.githubusercontent.com/u/19327357?v=4"
12+
alt="Cytomining"
13+
style="width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 1rem; display: block; box-shadow: 0 4px 20px rgba(0,0,0,0.12);"
14+
>
15+
<h1 style="font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 0;">Cytomining</h1>
16+
</div>
17+
18+
<!-- Tagline -->
19+
<div class="hero-fade-2" style="margin-bottom: 2.5rem;">
20+
<p style="font-size: 1.2rem; color: #6b7280; max-width: 540px; margin: 0 auto; line-height: 1.6;">
21+
Open-source tools for every stage of the<br>single-cell image-based profiling workflow.
22+
</p>
23+
</div>
24+
25+
<!-- Pipeline visualization -->
26+
<div class="hero-fade-3" style="margin-bottom: 2.5rem; overflow-x: auto; padding: 0.5rem 0;">
27+
<div style="display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: center; padding: 0 1rem;">
28+
29+
<div class="pipeline-step" style="background: #f3f4f6; border-radius: 8px; padding: 0.45rem 0.9rem; font-size: 0.8rem; color: #374151; font-weight: 500; border: 1px solid #e5e7eb;">
30+
🔬 Raw Images
31+
</div>
32+
33+
<span style="color: #9ca3af; font-size: 1.1rem; font-weight: 300;">→</span>
34+
35+
<a href="/experimental/iceberg-bioimage/" class="pipeline-step" style="background: #ede9fe; border-radius: 8px; padding: 0.45rem 0.9rem; font-size: 0.8rem; color: #5b21b6; font-weight: 600; border: 1px solid #ddd6fe; text-decoration: none;">
36+
iceberg-bioimage
37+
</a>
38+
39+
<span style="color: #9ca3af; font-size: 1.1rem; font-weight: 300;">→</span>
40+
41+
<a href="/tools/cytotable/" class="pipeline-step" style="background: #ede9fe; border-radius: 8px; padding: 0.45rem 0.9rem; font-size: 0.8rem; color: #5b21b6; font-weight: 600; border: 1px solid #ddd6fe; text-decoration: none;">
42+
CytoTable
43+
</a>
44+
45+
<span style="color: #9ca3af; font-size: 1.1rem; font-weight: 300;">→</span>
46+
47+
<a href="/tools/cosmicqc/" class="pipeline-step" style="background: #dbeafe; border-radius: 8px; padding: 0.45rem 0.9rem; font-size: 0.8rem; color: #1e40af; font-weight: 600; border: 1px solid #bfdbfe; text-decoration: none;">
48+
coSMicQC
49+
</a>
50+
51+
<span style="color: #9ca3af; font-size: 1.1rem; font-weight: 300;">→</span>
52+
53+
<a href="/tools/pycytominer/" class="pipeline-step" style="background: #dbeafe; border-radius: 8px; padding: 0.45rem 0.9rem; font-size: 0.8rem; color: #1e40af; font-weight: 600; border: 1px solid #bfdbfe; text-decoration: none;">
54+
pycytominer
55+
</a>
56+
57+
<span style="color: #9ca3af; font-size: 1.1rem; font-weight: 300;">→</span>
58+
59+
<a href="/tools/copairs/" class="pipeline-step" style="background: #dcfce7; border-radius: 8px; padding: 0.45rem 0.9rem; font-size: 0.8rem; color: #166534; font-weight: 600; border: 1px solid #bbf7d0; text-decoration: none;">
60+
copairs
61+
</a>
62+
63+
<span style="color: #9ca3af; font-size: 1.1rem; font-weight: 300;">/</span>
64+
65+
<a href="/experimental/buscar/" class="pipeline-step" style="background: #dcfce7; border-radius: 8px; padding: 0.45rem 0.9rem; font-size: 0.8rem; color: #166534; font-weight: 600; border: 1px solid #bbf7d0; text-decoration: none;">
66+
buscar
67+
</a>
68+
69+
</div>
70+
<p style="font-size: 0.72rem; color: #9ca3af; margin-top: 0.75rem;">ingest &nbsp;·&nbsp; quality control &nbsp;·&nbsp; process &nbsp;·&nbsp; evaluate</p>
71+
</div>
72+
73+
<!-- CTA -->
74+
<div class="hero-fade-4" style="margin-bottom: 2.5rem; display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;">
75+
<a href="/tools/" style="display: inline-block; background: #2563eb; color: white; font-weight: 600; font-size: 0.95rem; padding: 0.65rem 1.5rem; border-radius: 8px; text-decoration: none; transition: background 0.15s;">
76+
Explore tools →
77+
</a>
78+
<a href="https://cytomining.github.io/profiling-handbook" target="_blank" style="display: inline-block; background: transparent; color: #374151; font-weight: 600; font-size: 0.95rem; padding: 0.65rem 1.5rem; border-radius: 8px; text-decoration: none; border: 1.5px solid #d1d5db; transition: border-color 0.15s;">
79+
Profiling handbook
80+
</a>
81+
</div>
82+
83+
<!-- Community + get started links -->
84+
<div class="hero-fade-5" style="font-size: 0.85rem; color: #6b7280; display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap;">
85+
<a href="https://github.com/cytomining/profiling-recipe" target="_blank" style="color: #6b7280; text-decoration: none; border-bottom: 1px dashed #d1d5db;">Profiling recipe</a>
86+
<a href="https://forum.image.sc/" target="_blank" style="color: #6b7280; text-decoration: none; border-bottom: 1px dashed #d1d5db;">image.sc forum</a>
87+
<a href="https://github.com/orgs/cytomining/people" target="_blank" style="color: #6b7280; text-decoration: none; border-bottom: 1px dashed #d1d5db;">Contributors</a>
88+
<a href="https://www.cytodata.org/" target="_blank" style="color: #6b7280; text-decoration: none; border-bottom: 1px dashed #d1d5db;">CytoData community</a>
89+
</div>
90+
91+
</div>

content/about/_index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: "About"
3+
description: "About the Cytomining ecosystem and community."
4+
---
5+
6+
Cytomining is an open-source software ecosystem that maintains essential tools, workflows, and best practices for single-cell image-based profiling and microscopy data analysis research.
7+
We are proud members of the [CytoData](https://www.cytodata.org/) scientific community.

content/contact/_index.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: "Contact"
3+
description: "Get in touch with the Cytomining community."
4+
---
5+
6+
- 💬 Join the conversation on our [Discourse forums](https://forum.image.sc/)
7+
- 📫 Subscribe to the [CytoData mailing list](https://www.cytodata.org/contact/)
8+
- 🐛 Report issues on [GitHub](https://github.com/cytomining)

content/experimental/_index.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: "Experimental"
3+
description: "Next-generation tools under active development in the WayScience organization."
4+
---
5+
6+
The following tools are under active development in the [WayScience](https://github.com/WayScience) organization and represent the next generation of the Cytomining ecosystem.

0 commit comments

Comments
 (0)