collapse all changes
This commit is contained in:
Michael DiLeo
132
.cursor/rules/pico-css-variables.mdc
Normal file
132
.cursor/rules/pico-css-variables.mdc
Normal file
@@ -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);
|
||||
}
|
||||
```
|
||||
83
.cursor/rules/project-setup.mdc
Normal file
83
.cursor/rules/project-setup.mdc
Normal file
@@ -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`
|
||||
Reference in New Issue
Block a user