---
description: Project layout and background
globs:
alwaysApply: true
---

# Keyboard Vagabond Web Project

## Project Overview
This project is the landing page for Keyboard Vagabond, a collection of fediverse websites running on a kubernetes cluster, and is hosted at www.

The goal of this project is to create the website and build so that it can be used in the Keyboard Vagabond kubernetes project.

It is a simple, static website with rare updates that features information about the Keyboard Vagabond community and how to get involved in the fediverse.

## Tech Stack
- **CSS Framework**: Pico CSS (complete framework included in project)
- **Build System**: Shell script (`build.sh`) for deployment
- **Containerization**: Docker with nginx
- **Static HTML**: No framework, vanilla HTML/CSS/JS

## Project Structure

### Root Files
- `index.html` - Main landing page (root level)
- `build.sh` - Build script for deployment
- `Dockerfile` - Container configuration
- `nginx.conf` - Nginx web server configuration
- `README.md` - Project documentation
- `welcome.md` - Welcome/getting started guide

### Public Directory (`public/`)
- `index.html` - Alternative/development version of main page
- `about.html` - About page

### Assets (`public/assets/`)
- Static assets and resources

### CSS Library (`public/css/`)
Complete Pico CSS framework with all variants:
- Base versions: `pico.css`, `pico.min.css`
- Classless versions: `pico.classless.css` and variants
- Conditional versions: `pico.conditional.css` and variants
- Fluid versions: `pico.fluid.classless.css` and variants
- Color themes: Multiple color variants (amber, blue, cyan, green, etc.)
- Each with minified versions (.min.css)

### SCSS Source (`public/scss/`)
Source files for Pico CSS customization:
- `_index.scss`, `_settings.scss` - Main configuration
- `colors/` - Color system and utilities
- `components/` - UI components (accordion, card, dropdown, etc.)
- `content/` - Content styling (buttons, code, embedded, etc.)
- `forms/` - Form controls and styling
- `layout/` - Layout system (container, document, grid, etc.)
- `themes/` - Theme definitions
- `utilities/` - Helper utilities

### Scripts (`public/scripts/`)
- `build-themes.js` - Theme building utility

## Key Information for AI Assistants

### Development Guidelines
1. **CSS Framework**: Use Pico CSS classes and semantic HTML
2. **File Locations**: Main content should be in root `index.html`
3. **Styling**: Leverage Pico's classless approach when possible
4. **Build Process**: Use `build.sh` for deployment preparation
5. **Container Ready**: Project includes Docker configuration

### Important Notes
- The project uses Pico's classless CSS approach - minimal custom classes needed
- Multiple Pico variants available - choose appropriate one for needs
- Static site - no server-side processing required
- Kubernetes deployment target - consider container optimization
- Fediverse community focus - content should reflect this theme

### File Priorities
1. Root `index.html` - Primary landing page
2. `public/index.html` - Development/alternative version
3. `public/about.html` - Secondary page
4. Pico CSS files - Styling foundation
5. Build/deployment files - `build.sh`, `Dockerfile`, `nginx.conf`
