.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`

Dockerfile

@@ -0,0 +1,18 @@
+FROM nginx:1.25-alpine
+
+COPY nginx.conf /etc/nginx/nginx.conf
+
+COPY public/ /usr/share/nginx/html/
+
+RUN chown -R nginx:nginx /usr/share/nginx/html \
+    && chmod -R 755 /usr/share/nginx/html
+
+
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost/ || exit 1
+
+EXPOSE 80
+
+USER nginx
+
+CMD ["nginx", "-g", "daemon off;"]

build.sh

@@ -0,0 +1,28 @@
+set -e
+
+REGISTRY="registry.keyboardvagabond.com"
+VERSION="latest"
+PLATFORM="linux/arm64"
+IMAGE_NAME="keyboard-vagabond-landing"
+
+echo "Building Keyboard Vagabond Landing Page..."
+
+docker build \
+    --platform $PLATFORM \
+    --tag $REGISTRY/library/$IMAGE_NAME:$VERSION \
+    --tag $REGISTRY/library/$IMAGE_NAME:latest \
+    .
+
+echo "✓ Container built successfully!"
+
+read -p "Push to Harbor registry? (y/N): " -n 1 -r
+echo
+if [[ $REPLY =~ ^[Yy]$ ]]; then
+    echo "Pushing to registry..."
+    docker login $REGISTRY
+    docker push $REGISTRY/library/$IMAGE_NAME:$VERSION
+    docker push $REGISTRY/library/$IMAGE_NAME:latest
+    echo "✓ Container pushed successfully!"
+fi
+
+echo "🚀 Ready for Kubernetes deployment!"

nginx.conf

@@ -0,0 +1,66 @@
+user nginx;
+worker_processes auto;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections 1024;
+    use epoll;
+    multi_accept on;
+}
+
+http {
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    server_tokens off;
+    
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+    
+    access_log /dev/stdout;
+    error_log /dev/stderr;
+    
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript 
+               application/javascript application/xml+rss 
+               application/json image/svg+xml;
+    
+    server {
+        listen 80;
+        server_name _;
+        
+        root /usr/share/nginx/html;
+        index index.html;
+        
+        # Security headers
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-XSS-Protection "1; mode=block" always;
+        add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+        
+        location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+            expires 1w;
+            add_header Cache-Control "public, immutable";
+        }
+        
+        location ~* \.html$ {
+            expires 1h;
+            add_header Cache-Control "public";
+        }
+        
+        location /health {
+            access_log off;
+            return 200 'healthy\n';
+            add_header Content-Type text/plain;
+        }
+        
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+        
+        error_page 404 /index.html;
+    }
+}