Skip to content

Commit c8dc20a

Browse files
ValerasNarbutasCopilot
ValerasNarbutas
and
Copilot
committed
feat: all 10 themes live — add demo links, Available status, stats bar, GitHub CTA
- All 9 'Coming soon' themes updated to 'Available now' - Added 'Live demo →' button to each theme card (points to GitHub Pages) - Added 'Buy \' button per card (Gumroad placeholder links) - Stats bar: 10 themes, 0 dependencies, 21 files, 100% Pages compatible, MIT - GitHub star CTA section above pricing - Bundle buy button updated to gumroad.com/l/csswitch-bundle - Gumroad link added to footer - Updated all theme descriptions to match final implementations Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 7765e12 commit c8dc20a

1 file changed

Lines changed: 120 additions & 23 deletions

File tree

‎index.html‎

Lines changed: 120 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>csswitch — Premium Jekyll Themes & Dev Guides</title>
7-
<meta name="description" content="Distinctive Jekyll themes for developer blogs. No Bootstrap. No jQuery. Just sharp, opinionated design — ready to deploy to GitHub Pages.">
7+
<meta name="description" content="10 distinctive Jekyll themes for developer blogs. No Bootstrap. No jQuery. Just sharp, opinionated design — ready to deploy to GitHub Pages in minutes.">
88
<meta property="og:title" content="csswitch — Premium Jekyll Themes">
9-
<meta property="og:description" content="Distinctive Jekyll themes for developer blogs. No Bootstrap. No jQuery.">
9+
<meta property="og:description" content="10 distinctive Jekyll themes for developer blogs. No Bootstrap. No jQuery. Deploy to GitHub Pages in minutes.">
1010
<meta property="og:url" content="https://csswitch.github.io">
11+
<meta property="og:image" content="https://csswitch.github.io/og-image.png">
12+
<meta name="twitter:card" content="summary_large_image">
1113
<link rel="canonical" href="https://csswitch.github.io">
1214
<link rel="icon" type="image/svg+xml" href="favicon.svg">
1315
<style>
@@ -234,6 +236,41 @@
234236
.status-available { background: rgba(0,255,136,0.1); color: var(--green); border: 1px solid rgba(0,255,136,0.2); }
235237
.status-soon { background: rgba(255,255,255,0.05); color: var(--muted); border: 1px solid var(--border); }
236238

239+
.theme-card-actions {
240+
display: flex; gap: 8px; margin-top: 14px;
241+
}
242+
.btn-demo {
243+
flex: 1; text-align: center;
244+
padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;
245+
border: 1px solid var(--border); color: var(--text); background: transparent;
246+
transition: border-color .15s, color .15s;
247+
}
248+
.btn-demo:hover { border-color: var(--accent); color: var(--accent); }
249+
.btn-buy {
250+
flex: 1; text-align: center;
251+
padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;
252+
background: var(--accent); color: #000; border: none;
253+
transition: opacity .15s;
254+
}
255+
.btn-buy:hover { opacity: 0.85; color: #000; }
256+
257+
/* STATS BAR */
258+
.stats-bar {
259+
display: flex; justify-content: center; gap: 48px;
260+
flex-wrap: wrap;
261+
padding: 32px;
262+
border-top: 1px solid var(--border);
263+
border-bottom: 1px solid var(--border);
264+
background: var(--bg2);
265+
}
266+
.stat { text-align: center; }
267+
.stat-num {
268+
font-family: var(--font-mono);
269+
font-size: 28px; font-weight: 800; color: var(--accent);
270+
display: block;
271+
}
272+
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }
273+
237274
/* WHY SECTION */
238275
.why-grid {
239276
display: grid;
@@ -356,6 +393,15 @@ <h1>Themes devs<br>actually <em>want to use</em></h1>
356393
</div>
357394
</section>
358395

396+
<!-- STATS -->
397+
<div class="stats-bar">
398+
<div class="stat"><span class="stat-num">10</span><div class="stat-label">Distinctive themes</div></div>
399+
<div class="stat"><span class="stat-num">0</span><div class="stat-label">Dependencies (jQuery, Bootstrap)</div></div>
400+
<div class="stat"><span class="stat-num">21</span><div class="stat-label">Files per theme</div></div>
401+
<div class="stat"><span class="stat-num">100%</span><div class="stat-label">GitHub Pages compatible</div></div>
402+
<div class="stat"><span class="stat-num">MIT</span><div class="stat-label">License</div></div>
403+
</div>
404+
359405
<!-- THEMES -->
360406
<section id="themes" style="background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);">
361407
<div class="section-inner">
@@ -373,7 +419,11 @@ <h2 class="section-title">10 distinctive themes</h2>
373419
<div class="theme-card-desc">Retro terminal aesthetic. Green phosphor, <code>ls -la</code> post listings, CRT scanlines, boot sequence animation.</div>
374420
<div class="theme-card-footer">
375421
<span class="theme-price">$49</span>
376-
<span class="theme-status status-available">Available now</span>
422+
<span class="theme-status status-available">Available</span>
423+
</div>
424+
<div class="theme-card-actions">
425+
<a class="btn-demo" href="https://csswitch.github.io/jekyll-terminal-theme/" target="_blank" rel="noopener">Live demo →</a>
426+
<a class="btn-buy" href="https://gumroad.com/l/csswitch-terminal" target="_blank" rel="noopener">Buy $49</a>
377427
</div>
378428
</div>
379429
</div>
@@ -385,10 +435,14 @@ <h2 class="section-title">10 distinctive themes</h2>
385435
</div>
386436
<div class="theme-card-body">
387437
<div class="theme-card-name">Glass</div>
388-
<div class="theme-card-desc">Frosted glassmorphism. Blur panels, gradient backgrounds, smooth light/dark toggle.</div>
438+
<div class="theme-card-desc">Frosted glassmorphism. Blur panels, aurora gradient backgrounds, smooth light/dark toggle.</div>
389439
<div class="theme-card-footer">
390440
<span class="theme-price">$49</span>
391-
<span class="theme-status status-soon">Coming soon</span>
441+
<span class="theme-status status-available">Available</span>
442+
</div>
443+
<div class="theme-card-actions">
444+
<a class="btn-demo" href="https://csswitch.github.io/jekyll-glass-theme/" target="_blank" rel="noopener">Live demo →</a>
445+
<a class="btn-buy" href="https://gumroad.com/l/csswitch-glass" target="_blank" rel="noopener">Buy $49</a>
392446
</div>
393447
</div>
394448
</div>
@@ -400,10 +454,14 @@ <h2 class="section-title">10 distinctive themes</h2>
400454
</div>
401455
<div class="theme-card-body">
402456
<div class="theme-card-name">Galaxy</div>
403-
<div class="theme-card-desc">Deep space aesthetic. Star field canvas, nebula gradients, constellation nav.</div>
457+
<div class="theme-card-desc">Deep space aesthetic. Canvas starfield, shooting stars, nebula gradients, comet reading progress.</div>
404458
<div class="theme-card-footer">
405459
<span class="theme-price">$49</span>
406-
<span class="theme-status status-soon">Coming soon</span>
460+
<span class="theme-status status-available">Available</span>
461+
</div>
462+
<div class="theme-card-actions">
463+
<a class="btn-demo" href="https://csswitch.github.io/jekyll-galaxy-theme/" target="_blank" rel="noopener">Live demo →</a>
464+
<a class="btn-buy" href="https://gumroad.com/l/csswitch-galaxy" target="_blank" rel="noopener">Buy $49</a>
407465
</div>
408466
</div>
409467
</div>
@@ -415,10 +473,14 @@ <h2 class="section-title">10 distinctive themes</h2>
415473
</div>
416474
<div class="theme-card-body">
417475
<div class="theme-card-name">Pixel</div>
418-
<div class="theme-card-desc">8-bit pixel art aesthetic. Sprite animations, retro game UI, pixel-perfect borders.</div>
476+
<div class="theme-card-desc">8-bit pixel art aesthetic. CRT scanlines, boot sequence animation, HP reading progress bar, 5 palettes.</div>
419477
<div class="theme-card-footer">
420478
<span class="theme-price">$49</span>
421-
<span class="theme-status status-soon">Coming soon</span>
479+
<span class="theme-status status-available">Available</span>
480+
</div>
481+
<div class="theme-card-actions">
482+
<a class="btn-demo" href="https://csswitch.github.io/jekyll-pixel-theme/" target="_blank" rel="noopener">Live demo →</a>
483+
<a class="btn-buy" href="https://gumroad.com/l/csswitch-pixel" target="_blank" rel="noopener">Buy $49</a>
422484
</div>
423485
</div>
424486
</div>
@@ -430,10 +492,14 @@ <h2 class="section-title">10 distinctive themes</h2>
430492
</div>
431493
<div class="theme-card-body">
432494
<div class="theme-card-name">Blueprint</div>
433-
<div class="theme-card-desc">Technical blueprint aesthetic. Grid paper, schematic drawings, engineering annotations.</div>
495+
<div class="theme-card-desc">Technical drawing aesthetic. Engineering grid, schematic annotations, fold marks, TOC scrollspy.</div>
434496
<div class="theme-card-footer">
435497
<span class="theme-price">$49</span>
436-
<span class="theme-status status-soon">Coming soon</span>
498+
<span class="theme-status status-available">Available</span>
499+
</div>
500+
<div class="theme-card-actions">
501+
<a class="btn-demo" href="https://csswitch.github.io/jekyll-blueprint-theme/" target="_blank" rel="noopener">Live demo →</a>
502+
<a class="btn-buy" href="https://gumroad.com/l/csswitch-blueprint" target="_blank" rel="noopener">Buy $49</a>
437503
</div>
438504
</div>
439505
</div>
@@ -445,10 +511,14 @@ <h2 class="section-title">10 distinctive themes</h2>
445511
</div>
446512
<div class="theme-card-body">
447513
<div class="theme-card-name">Neon Noir</div>
448-
<div class="theme-card-desc">Cyberpunk neon. Dark city vibes, glowing sign typography, rain effect, moody atmosphere.</div>
514+
<div class="theme-card-desc">Cyberpunk neon. Perspective grid, CRT scanlines, glitch animations, electric magenta/cyan accents.</div>
449515
<div class="theme-card-footer">
450516
<span class="theme-price">$49</span>
451-
<span class="theme-status status-soon">Coming soon</span>
517+
<span class="theme-status status-available">Available</span>
518+
</div>
519+
<div class="theme-card-actions">
520+
<a class="btn-demo" href="https://csswitch.github.io/jekyll-neon-theme/" target="_blank" rel="noopener">Live demo →</a>
521+
<a class="btn-buy" href="https://gumroad.com/l/csswitch-neon" target="_blank" rel="noopener">Buy $49</a>
452522
</div>
453523
</div>
454524
</div>
@@ -460,10 +530,14 @@ <h2 class="section-title">10 distinctive themes</h2>
460530
</div>
461531
<div class="theme-card-body">
462532
<div class="theme-card-name">Brutalist</div>
463-
<div class="theme-card-desc">Intentional web brutalism. Raw layouts, bold typography, stark contrast — ugly on purpose.</div>
533+
<div class="theme-card-desc">Newspaper grid brutalism. Bebas Neue headlines, heavy rules, tabloid red accent, invert-hover links.</div>
464534
<div class="theme-card-footer">
465535
<span class="theme-price">$49</span>
466-
<span class="theme-status status-soon">Coming soon</span>
536+
<span class="theme-status status-available">Available</span>
537+
</div>
538+
<div class="theme-card-actions">
539+
<a class="btn-demo" href="https://csswitch.github.io/jekyll-brutalist-theme/" target="_blank" rel="noopener">Live demo →</a>
540+
<a class="btn-buy" href="https://gumroad.com/l/csswitch-brutalist" target="_blank" rel="noopener">Buy $49</a>
467541
</div>
468542
</div>
469543
</div>
@@ -475,10 +549,14 @@ <h2 class="section-title">10 distinctive themes</h2>
475549
</div>
476550
<div class="theme-card-body">
477551
<div class="theme-card-name">Dashboard</div>
478-
<div class="theme-card-desc">OS dashboard aesthetic. Window chrome, taskbar, system tray — like blogging from an OS.</div>
552+
<div class="theme-card-desc">OS desktop UI. Window chrome cards, sidebar nav, stat widgets — like blogging from an operating system.</div>
479553
<div class="theme-card-footer">
480554
<span class="theme-price">$49</span>
481-
<span class="theme-status status-soon">Coming soon</span>
555+
<span class="theme-status status-available">Available</span>
556+
</div>
557+
<div class="theme-card-actions">
558+
<a class="btn-demo" href="https://csswitch.github.io/jekyll-dashboard-theme/" target="_blank" rel="noopener">Live demo →</a>
559+
<a class="btn-buy" href="https://gumroad.com/l/csswitch-dashboard" target="_blank" rel="noopener">Buy $49</a>
482560
</div>
483561
</div>
484562
</div>
@@ -490,10 +568,14 @@ <h2 class="section-title">10 distinctive themes</h2>
490568
</div>
491569
<div class="theme-card-body">
492570
<div class="theme-card-name">Vaporwave</div>
493-
<div class="theme-card-desc">90s vaporwave aesthetic. Pastel gradients, retro grids, glitch text effects, nostalgia.</div>
571+
<div class="theme-card-desc">Retro 80s/90s aesthetic. Pastel neon gradients, synthwave perspective grid, glitch text, CRT scanlines.</div>
494572
<div class="theme-card-footer">
495573
<span class="theme-price">$49</span>
496-
<span class="theme-status status-soon">Coming soon</span>
574+
<span class="theme-status status-available">Available</span>
575+
</div>
576+
<div class="theme-card-actions">
577+
<a class="btn-demo" href="https://csswitch.github.io/jekyll-vaporwave-theme/" target="_blank" rel="noopener">Live demo →</a>
578+
<a class="btn-buy" href="https://gumroad.com/l/csswitch-vaporwave" target="_blank" rel="noopener">Buy $49</a>
497579
</div>
498580
</div>
499581
</div>
@@ -505,10 +587,14 @@ <h2 class="section-title">10 distinctive themes</h2>
505587
</div>
506588
<div class="theme-card-body">
507589
<div class="theme-card-name">Manuscript</div>
508-
<div class="theme-card-desc">Writer's notebook aesthetic. Serif typography, ink texture, reading-optimised layout, calm.</div>
590+
<div class="theme-card-desc">Editorial magazine aesthetic. Cormorant Garamond + Lora, drop caps, pull quotes, Oxford double rules.</div>
509591
<div class="theme-card-footer">
510592
<span class="theme-price">$49</span>
511-
<span class="theme-status status-soon">Coming soon</span>
593+
<span class="theme-status status-available">Available</span>
594+
</div>
595+
<div class="theme-card-actions">
596+
<a class="btn-demo" href="https://csswitch.github.io/jekyll-manuscript-theme/" target="_blank" rel="noopener">Live demo →</a>
597+
<a class="btn-buy" href="https://gumroad.com/l/csswitch-manuscript" target="_blank" rel="noopener">Buy $49</a>
512598
</div>
513599
</div>
514600
</div>
@@ -557,6 +643,16 @@ <h2 class="section-title">Built differently</h2>
557643
</div>
558644
</section>
559645

646+
<!-- GITHUB CTA -->
647+
<section style="text-align:center; padding: 60px 32px;">
648+
<div style="max-width:600px;margin:0 auto;">
649+
<div style="font-size:40px;margin-bottom:16px;">⭐</div>
650+
<h2 style="font-size:1.6rem;color:#fff;margin-bottom:12px;">Open source at heart</h2>
651+
<p style="color:var(--muted);font-size:15px;margin-bottom:28px;line-height:1.7">All themes are on GitHub. Browse the source, open issues, or star a repo you like. Every star helps more developers discover the pack.</p>
652+
<a href="https://github.com/csswitch" class="btn btn-secondary" target="_blank" rel="noopener">⭐ Star us on GitHub</a>
653+
</div>
654+
</section>
655+
560656
<!-- PRICING -->
561657
<section id="pricing" style="background: var(--bg2); border-top: 1px solid var(--border);">
562658
<div class="section-inner">
@@ -591,7 +687,7 @@ <h2 class="section-title">Simple, fair pricing</h2>
591687
<li>Free lifetime updates</li>
592688
<li>Priority support</li>
593689
</ul>
594-
<a href="https://gumroad.com" class="btn btn-primary" style="width:100%;text-align:center;display:block" target="_blank" rel="noopener">Buy the bundle — $149</a>
690+
<a href="https://gumroad.com/l/csswitch-bundle" class="btn btn-primary" style="width:100%;text-align:center;display:block" target="_blank" rel="noopener">Buy the bundle — $149</a>
595691
</div>
596692

597693
<div class="pricing-card">
@@ -604,7 +700,7 @@ <h2 class="section-title">Simple, fair pricing</h2>
604700
<li>Free updates</li>
605701
<li>DRM free</li>
606702
</ul>
607-
<a href="https://gumroad.com" class="btn btn-secondary" style="width:100%;text-align:center;display:block" target="_blank" rel="noopener">Browse guides</a>
703+
<a href="https://gumroad.com/csswitch" class="btn btn-secondary" style="width:100%;text-align:center;display:block" target="_blank" rel="noopener">Browse guides</a>
608704
</div>
609705

610706
</div>
@@ -619,6 +715,7 @@ <h2 class="section-title">Simple, fair pricing</h2>
619715
<a href="https://github.com/csswitch">GitHub</a>
620716
<a href="#themes">Themes</a>
621717
<a href="#pricing">Pricing</a>
718+
<a href="https://gumroad.com/csswitch" target="_blank" rel="noopener">Gumroad</a>
622719
</div>
623720
<div class="footer-copy">MIT licensed · built with Jekyll · hosted on GitHub Pages</div>
624721
</div>

0 commit comments

Comments
 (0)