Add baseline start point (#1)

Co-authored-by: Michael DiLeo <michael.dileo@oakstreethealth.com>
Reviewed-on: #1

.cursor/rules/pico-css-variables.mdc

@@ -0,0 +1,132 @@
+---
+description: Pico CSS Variables Reference
+globs:
+alwaysApply: true
+---
+
+# Pico CSS Variables Reference
+
+## Overview
+Pico CSS uses CSS custom properties (variables) prefixed with `--pico-` for consistent theming and customization. These variables provide a comprehensive design system that can be leveraged in custom styles.
+
+## Core Typography Variables
+
+### Font Properties
+- `--pico-font-family` - System font stack (sans-serif by default)
+- `--pico-font-family-sans-serif` - System UI fonts
+- `--pico-font-family-monospace` - Monospace fonts for code
+- `--pico-font-family-emoji` - Emoji font fallbacks
+- `--pico-font-weight` - Base font weight (400)
+- `--pico-font-size` - Base font size (responsive, starts at 100%)
+
+### Typography Spacing
+- `--pico-typography-spacing-vertical` - Vertical spacing between elements (1rem)
+- `--pico-typography-spacing-top` - Top margin for headings after content blocks
+- `--pico-line-height` - Line height for text elements
+
+### Heading Colors
+- `--pico-h1-color` - H1 heading color
+- `--pico-h2-color` - H2 heading color
+- `--pico-h3-color` - H3 heading color
+- `--pico-h4-color` - H4 heading color
+- `--pico-h5-color` - H5 heading color
+- `--pico-h6-color` - H6 heading color
+
+## Layout & Spacing Variables
+
+### Container & Spacing
+- `--pico-spacing` - Base spacing unit used for padding/margins
+- `--pico-grid-column-gap` - Grid column spacing
+- `--pico-grid-row-gap` - Grid row spacing
+
+### Responsive Typography
+Pico automatically scales font-size across breakpoints:
+- Mobile: 100%
+- 576px+: 106.25% (17px)
+- 768px+: 112.5% (18px)
+- 1024px+: 118.75% (19px)
+- 1280px+: 125% (20px)
+- 1536px+: 131.25% (21px)
+
+## Color Variables
+
+### Base Colors
+- `--pico-background-color` - Main background color
+- `--pico-color` - Primary text color
+- `--pico-muted-color` - Subdued text color
+- `--pico-muted-border-color` - Subtle border color
+
+### Interactive Elements
+- `--pico-primary` - Primary action color
+- `--pico-primary-background` - Primary button background
+- `--pico-primary-border` - Primary button border
+- `--pico-primary-underline` - Primary link underline
+- `--pico-primary-hover` - Primary hover state
+- `--pico-primary-focus` - Primary focus state
+
+### Form Elements
+- `--pico-form-element-background-color` - Input background
+- `--pico-form-element-border-color` - Input border
+- `--pico-form-element-color` - Input text color
+- `--pico-form-element-placeholder-color` - Placeholder text
+- `--pico-form-element-selected-background-color` - Selected input background
+
+### Special Content
+- `--pico-mark-background-color` - Highlighted text background
+- `--pico-mark-color` - Highlighted text color
+- `--pico-ins-color` - Inserted text color
+- `--pico-del-color` - Deleted text color
+- `--pico-text-selection-color` - Text selection background
+
+### Table Elements
+- `--pico-table-border-color` - Table border color
+- `--pico-table-row-stripped-background-color` - Striped table row background
+
+### Code Elements
+- `--pico-code-background-color` - Code block background
+- `--pico-code-color` - Code text color
+- `--pico-code-kbd-background-color` - Keyboard shortcut background
+- `--pico-code-kbd-color` - Keyboard shortcut text
+
+## Sass Customization Variables
+
+### Theme Settings
+- `$theme-color` - Primary theme color (azure, blue, purple, etc.)
+- `$css-var-prefix` - Prefix for CSS variables (default: "--pico-")
+- `$enable-classes` - Enable/disable CSS classes (false for classless)
+- `$enable-responsive-typography` - Enable responsive font scaling
+- `$enable-transitions` - Enable CSS transitions
+- `$enable-semantic-container` - Enable semantic HTML containers
+
+### Available Theme Colors
+`amber`, `azure`, `blue`, `cyan`, `fuchsia`, `green`, `grey`, `indigo`, `jade`, `lime`, `orange`, `pink`, `pumpkin`, `purple`, `red`, `sand`, `slate`, `violet`, `yellow`, `zinc`
+
+## Best Practices for AI Assistants
+
+### When to Use Pico Variables
+1. **Spacing**: Always use `--pico-spacing` and `--pico-typography-spacing-*` for consistent layout
+2. **Typography**: Use `--pico-font-*` variables for font properties
+3. **Colors**: Leverage `--pico-color`, `--pico-muted-color`, and theme colors
+4. **Responsive Design**: Variables automatically adapt to screen sizes
+
+### Common Use Cases
+- **Custom components**: Use Pico variables to match framework styling
+- **Overlays/Banners**: Use spacing and typography variables for consistency
+- **Form styling**: Leverage form element variables for native look
+- **Theme adaptation**: Variables automatically work with different color themes
+
+### Avoiding Common Mistakes
+- Don't hardcode values that Pico variables provide
+- Don't override Pico variables unless creating a custom theme
+- Use calc() with Pico variables for proportional spacing
+- Prefer Pico's responsive system over custom breakpoints
+
+## Example Usage
+```css
+.custom-element {
+  margin: var(--pico-spacing);
+  font-family: var(--pico-font-family);
+  color: var(--pico-muted-color);
+  font-size: calc(var(--pico-font-size) * 1.125);
+}
+```

.cursor/rules/project-setup.mdc

@@ -0,0 +1,83 @@
+---
+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`