KAN-208/create-a-landing-page-for-the-project by fulsomenko · Pull Request #169 · fulsomenko/kanban

fulsomenko · 2026-02-21T13:27:31Z

Summary

Create a professional landing page for the kanban project at kanban.yoon.se, showcasing the application's capabilities, features, and installation methods. The page matches the yoon.se design system with a terminal-inspired dark theme.

What

Landing page (web/index.html) with 5 main sections:
- Hero section with project tagline and installation CTAs
- Features grid highlighting vim power, speed, three interfaces, task management, developer workflow, and local-first approach
- Installation section with three methods (cargo, nix, from source)
- Roadmap section with completed/planned items using checkbox notation matching TUI
- Footer with links and project metadata
Responsive design (web/styles.css):
- Dark terminal aesthetic (GitHub Dark theme: #0d1117 bg, #c9714a accent)
- Monospace typography (SF Mono) for headings
- Responsive grid: 3 columns desktop, 2 columns tablet, 1 column mobile
- Clean spacing with no border-radius (sharp terminal style)
Terminal-style code blocks with custom orange prompt styling ($)
- No external dependencies for code display
- Clean, minimal HTML with CSS-only styling
Nix build support (web/default.nix + flake.nix):
- Static site derivation for reproducible deployments
- Added kanban-web package to flake outputs
- Ready for production deployment to kanban.yoon.se

Why

The kanban project lacked a dedicated landing page despite being production-ready (v0.2.0). This page serves as the primary entry point at kanban.yoon.se, helping users quickly understand:

What kanban is (keyboard-driven project management in the terminal)
Why they should use it (vim-like power, three interfaces, local-first)
How to install it (multiple methods for different workflows)
What's coming next (transparent roadmap)

The design matches the yoon.se ecosystem for brand consistency.

How

Design System Integration: Replicated yoon design system tokens (colors, typography, spacing) from ~/yoon/libs/design-system
Content Structure: Semantic HTML5 with proper heading hierarchy and meta tags for SEO
Responsive Layout: CSS Grid with mobile-first breakpoints
Code Block Styling: CSS-only approach with .prompt class for terminal-style command prompts
Nix Build: Simple derivation that copies static files for distribution

Testing

Visual inspection in browser (desktop, tablet, mobile viewports)
HTML validates (semantic structure, proper nesting)
CSS has no errors (no unused rules, clean selectors)
All links functional (GitHub, Crates.io, docs)
Responsive layout verified at 480px, 768px, 1200px breakpoints
Terminal prompt styling displays correctly with CSS
Nix build works: nix build .#kanban-web produces valid output
Page loads quickly with minimal file size (~19KB HTML+CSS, no external assets)

Files Changed

web/index.html - Landing page structure (148 lines)
web/styles.css - Design system and responsive styles (531 lines)
web/default.nix - Nix derivation for static site
flake.nix - Added kanban-web package output

Deployment

Ready for deployment to kanban.yoon.se:

nix build .#kanban-web
cp -r result/* /var/www/kanban.yoon.se/

Flake lock file updates: • Updated input 'nixpkgs': 'github:NixOS/nixpkgs/2dad7af78a183b6c486702c18af8a9544f298377?narHash=sha256-LYr4IDfuihCkFAkSYz5//gT2r1ewcWBYgd5AxPzPLIo%3D' (2025-10-09) → 'github:NixOS/nixpkgs/d1c15b7d5806069da59e819999d70e1cec0760bf?narHash=sha256-b9uG8yN50DRQ6A7JdZBfzq718ryYrlmGgqkRm9OOwCE%3D' (2026-02-16) • Updated input 'rust-overlay': 'github:oxalica/rust-overlay/dec08d5dfeca099b0058f0cc61264b04f33db42c?narHash=sha256-jPz0K8xsT2eNSratkw8bfPwSlTuOXGeUvz%2Bbd9wq/vY%3D' (2025-10-07) → 'github:oxalica/rust-overlay/85078369717bdbe1f266c9eaad5e66956fb6feea?narHash=sha256-4zOvSi0WkS2WAaoJtM28wECtS9S%2BL38CPYbhF%2BwINDA%3D' (2026-02-21)

- Create web/default.nix for building static site - Add kanban-web package to flake.nix - Static files (HTML, CSS, GIF) packaged for deployment

- Removed .demo-gif (not in HTML) - Removed .cta-buttons (refactored) - Removed .code-prompt (refactored) - Removed .quick-start-title (not in HTML) - Removed .status-badge.in-progress (unused)

- Add highlight.js library via CDN with atom-one-dark theme - Add language-sh class to all code blocks - Initialize highlighting on page load - Provides color-coded shell syntax for all installation commands

- Wrap $ prompts in span.prompt class - Style prompts with orange accent color and semibold weight - Applied to all code blocks (cargo, nix, git, etc.)

- Remove language-sh class so highlight.js doesn't override inline styles - Simplify CSS without !important rules - Prompt $ now displays correctly in orange

…de blocks

Removes highlight.js stylesheet and initialization script that were not functional (all code blocks use nohighlight class). This eliminates 2 unnecessary HTTP requests and ~150KB of external dependencies.

Removes redundant inline style="color: #c9714a;" attributes from prompt spans. The .prompt CSS class already provides this styling, so inline styles are unnecessary duplication.

Wrap the shell comment "# or" in a span with the comment class for visual distinction, providing styling similar to syntax highlighting without external dependencies.

Define .comment class with muted text color and italic font style for visual distinction of shell comments in code blocks.

- Change user-select from 'all' to 'text' for better UX when selecting individual lines in code blocks - Remove unnecessary .install-method:last-child border-bottom rule (no borders were applied between install methods)

fulsomenko added 24 commits February 21, 2026 12:39

Add nix build for web landing page

9e57a7f

- Create web/default.nix for building static site - Add kanban-web package to flake.nix - Static files (HTML, CSS, GIF) packaged for deployment

flake.lock: Update

b4c1772

remove demo

5911c8c

fix: remove duplicate border between roadmap and footer sections

8827e1a

fix: remove duplicate $ prompt

841d6be

fix: remove in progress from the roadmap

cbd97d3

fix: Documentation does not exist

3d0b697

style: group and equalize CTA buttons with grid layout

4518f52

style: left-align CTA buttons and add visual 'or' separator

4dfe1f6

style: revert to vertical CTA buttons with equal width and tight spacing

5aa4c89

style: stack installation methods vertically in single grey box

e5627d3

style: remove unused CSS classes

a8d6d4a

- Removed .demo-gif (not in HTML) - Removed .cta-buttons (refactored) - Removed .code-prompt (refactored) - Removed .quick-start-title (not in HTML) - Removed .status-badge.in-progress (unused)

fix: cleanup of installation and duped hero content

467f4df

fix: remove a word

e790e10

fix: remove a border

6d9c89f

style: replace emoji symbols in roadmap with [ ] for planned items

419d2a4

style: change completed checkbox from ✓ to [x]

64477ed

feat: add shell syntax highlighting with highlight.js

f6a2bc1

- Add highlight.js library via CDN with atom-one-dark theme - Add language-sh class to all code blocks - Initialize highlighting on page load - Provides color-coded shell syntax for all installation commands

style: highlight shell prompt ($) with accent color

6b99dfd

- Wrap $ prompts in span.prompt class - Style prompts with orange accent color and semibold weight - Applied to all code blocks (cargo, nix, git, etc.)

fix: ensure prompt color overrides highlight.js styling

58f35a4

fix: use inline style for prompt color to override highlight.js

3503492

fix: disable highlight.js on code blocks to preserve prompt color

7fb0b83

- Remove language-sh class so highlight.js doesn't override inline styles - Simplify CSS without !important rules - Prompt $ now displays correctly in orange

fix: add nohighlight class to prevent highlight.js from processing co…

5a09dd7

…de blocks

fulsomenko force-pushed the KAN-208/create-a-landing-page-for-the-project branch from f79c9c6 to 5a09dd7 Compare February 21, 2026 14:50

fulsomenko added 5 commits February 21, 2026 17:17

fix: Remove highlight.js CDN dependency from landing page

d2ff450

Removes highlight.js stylesheet and initialization script that were not functional (all code blocks use nohighlight class). This eliminates 2 unnecessary HTTP requests and ~150KB of external dependencies.

fix: Remove inline styles from terminal prompts

e2ee81d

Removes redundant inline style="color: #c9714a;" attributes from prompt spans. The .prompt CSS class already provides this styling, so inline styles are unnecessary duplication.

fix: Add comment styling to shell command examples

bbe602a

Wrap the shell comment "# or" in a span with the comment class for visual distinction, providing styling similar to syntax highlighting without external dependencies.

fix: Add CSS styling for comment class

3f0592b

Define .comment class with muted text color and italic font style for visual distinction of shell comments in code blocks.

fix: drop wording from title

539b224

Fix code block selection behavior and remove unused CSS rule

54dfdc2

- Change user-select from 'all' to 'text' for better UX when selecting individual lines in code blocks - Remove unnecessary .install-method:last-child border-bottom rule (no borders were applied between install methods)

fulsomenko merged commit a0e890d into develop Feb 21, 2026
7 checks passed

fulsomenko deleted the KAN-208/create-a-landing-page-for-the-project branch February 21, 2026 16:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

KAN-208/create-a-landing-page-for-the-project#169

KAN-208/create-a-landing-page-for-the-project#169
fulsomenko merged 30 commits intodevelopfrom
KAN-208/create-a-landing-page-for-the-project

fulsomenko commented Feb 21, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

fulsomenko commented Feb 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What

Why

How

Testing

Files Changed

Deployment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

fulsomenko commented Feb 21, 2026 •

edited

Loading