deploy: ea61476

Author: mzouink

index.html

@@ -252,7 +252,7 @@ <h3>Basic Segmentation Pipeline</h3>
 
     <footer class="footer">
         <div class="container">
-            <p>CellMapFlow Hub • Generated 2026-02-05 20:14:15 UTC</p>
+            <p>CellMapFlow Hub • Generated 2026-02-05 20:19:49 UTC</p>
             <p><a href="https://github.com/cellmap/cellmap_flow_hub">View on GitHub</a></p>
         </div>
     </footer>

style.css

@@ -1,12 +1,15 @@
-/* CellMapFlow Hub Stylesheet */
+/* CellMapFlow Hub Stylesheet - GitHub Dark Theme */
 
 :root {
-    --primary: #0066cc;
-    --secondary: #00aa44;
+    --primary: #58a6ff;
+    --secondary: #3fb950;
     --warning: #ff8800;
-    --dark: #1a1a1a;
-    --light: #f5f5f5;
-    --border: #dddddd;
+    --dark: #0d1117;
+    --light: #f0f6fc;
+    --border: #30363d;
+    --bg-secondary: #161b22;
+    --text-primary: #c9d1d9;
+    --text-secondary: #8b949e;
 }
 
 * {
@@ -18,8 +21,8 @@
 html, body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     line-height: 1.6;
-    color: var(--dark);
-    background: #fafafa;
+    color: var(--text-primary);
+    background: var(--dark);
 }
 
 .container {
@@ -30,25 +33,28 @@ html, body {
 
 /* Header */
 .header {
-    background: linear-gradient(135deg, var(--primary) 0%, #0052a3 100%);
-    color: white;
+    background: var(--dark);
+    border-bottom: 1px solid var(--border);
+    color: var(--light);
     padding: 60px 20px;
     text-align: center;
 }
 
 .header h1 {
     font-size: 3em;
     margin-bottom: 10px;
+    color: var(--light);
 }
 
 .header p {
     font-size: 1.1em;
-    opacity: 0.95;
+    opacity: 0.8;
+    color: var(--text-secondary);
 }
 
 /* Navigation */
 .navbar {
-    background: white;
+    background: var(--dark);
     border-bottom: 1px solid var(--border);
     padding: 15px 0;
     position: sticky;
@@ -76,23 +82,31 @@ html, body {
 .search-input {
     padding: 8px 15px;
     border: 1px solid var(--border);
-    border-radius: 4px;
+    border-radius: 6px;
     font-size: 1em;
     width: 300px;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+.search-input::placeholder {
+    color: var(--text-secondary);
 }
 
 .search-btn {
     padding: 8px 20px;
     background: var(--primary);
-    color: white;
-    border: none;
-    border-radius: 4px;
+    color: var(--dark);
+    border: 1px solid var(--primary);
+    border-radius: 6px;
     cursor: pointer;
     font-weight: 500;
+    transition: all 0.2s ease;
 }
 
 .search-btn:hover {
-    background: #0052a3;
+    background: #79c0ff;
+    border-color: #79c0ff;
 }
 
 /* Stats */
@@ -104,21 +118,29 @@ html, body {
 }
 
 .stat-card {
-    background: white;
+    background: var(--bg-secondary);
     padding: 20px;
-    border-radius: 8px;
-    border-left: 4px solid var(--primary);
+    border-radius: 6px;
+    border: 1px solid var(--border);
     text-align: center;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: none;
+    transition: all 0.2s ease;
+}
+
+.stat-card:hover {
+    border-color: var(--primary);
+    background: #0d1117;
 }
 
 .stat-card h3 {
     font-size: 2em;
     color: var(--primary);
+    margin-bottom: 8px;
 }
 
 .stat-card p {
-    color: #666;
+    color: var(--text-secondary);
+    margin: 0;
 }
 
 /* Component Sections */
@@ -129,11 +151,13 @@ html, body {
 .component-section h2 {
     font-size: 1.8em;
     margin-bottom: 10px;
-    color: var(--dark);
+    color: var(--light);
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 10px;
 }
 
 .section-description {
-    color: #666;
+    color: var(--text-secondary);
     margin-bottom: 20px;
 }
 
@@ -145,41 +169,43 @@ html, body {
 
 /* Component Cards */
 .component-card {
-    background: white;
-    border-radius: 8px;
+    background: var(--bg-secondary);
+    border-radius: 6px;
     padding: 20px;
     border: 1px solid var(--border);
     cursor: pointer;
     transition: all 0.3s ease;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    box-shadow: none;
 }
 
 .component-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
+    transform: translateY(-4px);
     border-color: var(--primary);
+    background: #0d1117;
 }
 
 .component-card h3 {
     color: var(--primary);
     margin-bottom: 8px;
+    font-size: 1.1em;
 }
 
 .component-card .version {
     font-size: 0.9em;
-    color: #999;
+    color: var(--text-secondary);
     margin-bottom: 10px;
 }
 
 .component-card .description {
-    color: #666;
+    color: var(--text-secondary);
     margin-bottom: 15px;
     min-height: 40px;
+    font-size: 0.95em;
 }
 
 .component-card .author {
     font-size: 0.85em;
-    color: #999;
+    color: var(--text-secondary);
     margin-top: 15px;
     border-top: 1px solid var(--border);
     padding-top: 10px;
@@ -195,31 +221,35 @@ html, body {
 
 .tag {
     display: inline-block;
-    background: #e8f4f8;
+    background: rgba(88, 166, 255, 0.1);
     color: var(--primary);
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 0.85em;
     font-weight: 500;
+    border: 1px solid rgba(88, 166, 255, 0.3);
 }
 
 /* Search Results */
 .search-results {
-    background: white;
+    background: var(--bg-secondary);
     padding: 30px;
-    border-radius: 8px;
+    border-radius: 6px;
+    border: 1px solid var(--border);
     margin: 30px 0;
 }
 
 .search-results h2 {
     margin-bottom: 20px;
+    color: var(--light);
 }
 
 /* Component Detail */
 .component-detail {
-    background: white;
+    background: var(--bg-secondary);
     padding: 40px;
-    border-radius: 8px;
+    border-radius: 6px;
+    border: 1px solid var(--border);
     margin: 30px 0;
 }
 
@@ -234,8 +264,9 @@ html, body {
     gap: 20px;
     margin: 20px 0;
     padding: 20px;
-    background: var(--light);
-    border-radius: 4px;
+    background: var(--dark);
+    border-radius: 6px;
+    border: 1px solid var(--border);
 }
 
 .meta-item strong {
@@ -254,29 +285,32 @@ html, body {
 }
 
 .readme-content {
-    color: #666;
+    color: var(--text-secondary);
     line-height: 1.8;
 }
 
 pre {
-    background: var(--light);
+    background: var(--dark);
     padding: 15px;
-    border-radius: 4px;
+    border-radius: 6px;
     overflow-x: auto;
+    border: 1px solid var(--border);
 }
 
 code {
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
     font-size: 0.9em;
+    color: #79c0ff;
 }
 
 /* Footer */
 .footer {
     background: var(--dark);
-    color: white;
+    color: var(--text-secondary);
     padding: 30px 20px;
     text-align: center;
     margin-top: 50px;
+    border-top: 1px solid var(--border);
 }
 
 .footer a {
@@ -310,4 +344,14 @@ code {
     .component-detail {
         padding: 20px;
     }
+    
+    .stats {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 480px) {
+    .stats {
+        grid-template-columns: 1fr;
+    }
 }