30f3ecc6ad
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> This commit refactors the entire application to replace the 'parties' concept with 'events'. All controllers, models, views, and related files have been updated to reflect this change. The parties table has been replaced with an events table, and all related functionality has been updated accordingly.
103 lines
3.1 KiB
Markdown
Executable File
103 lines
3.1 KiB
Markdown
Executable File
# Theme Rules & Color Palette - Aperonight
|
|
|
|
Extracted from `app/views/pages/home.html.erb`
|
|
|
|
## Color Palette
|
|
|
|
### Primary Colors
|
|
- **Indigo**: `#4338ca` (rgb(67, 56, 202)) - Used in hero gradient
|
|
- **Purple**: `#8b5cf6` (rgb(139, 92, 246)) - Primary brand color
|
|
- **Pink**: `#ec4899` (rgb(236, 72, 153)) - Accent color
|
|
|
|
### Background Gradients
|
|
- **Hero**: `bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700`
|
|
- **CTA**: `bg-gradient-to-r from-purple-900 via-indigo-900 to-pink-900`
|
|
- **Cards**: `bg-gradient-to-br from-gray-800 to-gray-900`
|
|
- **Buttons**: `bg-gradient-to-r from-purple-600 to-pink-600`
|
|
|
|
### Text Colors
|
|
- **White**: `text-white` - Primary text
|
|
- **Gray-200**: `text-gray-200` - Secondary text
|
|
- **Gray-300**: `text-gray-300` - Subtle text
|
|
- **Gray-400**: `text-gray-400` - Muted text
|
|
- **Transparent gradient**: `text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400` - Special highlight
|
|
|
|
### Background Colors
|
|
- **Gray-900**: `bg-gray-900` - Main background
|
|
- **Black**: `bg-black` - Overlay backgrounds
|
|
- **Gray-800**: `bg-gray-800` - Card backgrounds
|
|
- **White/Transparent**: `bg-white bg-opacity-10 backdrop-blur-sm` - Glass effect
|
|
|
|
## Spacing & Layout
|
|
|
|
### Hero Section
|
|
- **Height**: `min-h-[70vh]`
|
|
- **Max-width**: `max-w-7xl mx-auto`
|
|
- **Padding**: `px-4 sm:px-6 lg:px-8`
|
|
|
|
### Grid Layouts
|
|
- **Responsive**: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
|
|
- **Gap**: `gap-8` standard spacing
|
|
|
|
### Padding Classes
|
|
- **Section**: `py-16`, `py-20`
|
|
- **Card**: `p-4`, `p-6`, `p-8`
|
|
- **Button**: `py-3`, `py-4`, `px-6`, `px-8`
|
|
|
|
## Typography
|
|
|
|
### Font Sizes
|
|
- **Hero Title**: `text-5xl md:text-7xl`
|
|
- **Section Title**: `text-4xl`
|
|
- **Card Title**: `text-2xl`
|
|
- **Body**: `text-xl`, `text-lg`
|
|
- **Small**: `text-sm`
|
|
|
|
### Font Weights
|
|
- **Bold**: `font-bold` (headings)
|
|
- **Semibold**: `font-semibold` (buttons, important text)
|
|
- **Medium**: `font-medium` (labels)
|
|
|
|
## Interactive States
|
|
|
|
### Hover Effects
|
|
- **Scale**: `hover:scale-105`
|
|
- **Transition**: `transition-all duration-300`
|
|
- **Button Hover**: `hover:from-purple-700 hover:to-pink-700`
|
|
- **Glass Hover**: `hover:bg-opacity-20`
|
|
|
|
### Shadows
|
|
- **Default**: `shadow-lg`
|
|
- **Strong**: `shadow-xl`
|
|
- **Card**: `shadow-2xl`
|
|
|
|
## Border Radius
|
|
- **Buttons**: `rounded-full` (pill-shaped)
|
|
- **Cards**: `rounded-2xl`
|
|
- **Inputs**: `rounded-lg`
|
|
|
|
## Icon Colors
|
|
- **Primary**: `text-white` (on colored backgrounds)
|
|
- **Accent**: `text-purple-400`, `text-pink-400`
|
|
- **Muted**: `text-gray-400`
|
|
|
|
## Usage Examples
|
|
|
|
### Primary Button
|
|
```html
|
|
class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-4 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg"
|
|
```
|
|
|
|
### Card Background
|
|
```html
|
|
class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-xl"
|
|
```
|
|
|
|
### Hero Gradient
|
|
```html
|
|
class="bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700"
|
|
```
|
|
|
|
### Glass Effect
|
|
```html
|
|
class="bg-white bg-opacity-10 backdrop-blur-sm border border-white border-opacity-30" |