Converti chill-theme en dossier classique

2026-01-28 09:40:37 +01:00
parent 577786f22d
commit cc60b64505
118 changed files with 11868 additions and 1 deletions
@@ -0,0 +1,751 @@
+# Styling Guide
+
+Complete guide to styling and customization in the Hugo Saasify Theme. Learn how to customize colors, typography, components, and create your own design system.
+
+## Table of Contents
+
+- [Tailwind CSS Integration](#tailwind-css-integration)
+- [Color System](#color-system)
+- [Typography](#typography)
+- [Custom Components](#custom-components)
+- [Responsive Design](#responsive-design)
+- [Syntax Highlighting](#syntax-highlighting)
+- [Customization](#customization)
+- [Best Practices](#best-practices)
+
+## Tailwind CSS Integration
+
+The Hugo Saasify Theme is built with Tailwind CSS v3, providing a utility-first approach to styling.
+
+### How It Works
+
+1. **Main CSS File**: `themes/chill-theme/assets/scss/main.scss`
+2. **Tailwind Config**: `tailwind.config.js` (copied to site root during installation)
+3. **PostCSS Config**: `postcss.config.js` (copied to site root during installation)
+4. **Hugo Processing**: Automatic PostCSS compilation
+5. **Build Stats**: Required for PurgeCSS optimization
+
+### Configuration File
+
+**Location**: `tailwind.config.js` (in your site root)
+
+During installation, you copied this file from `themes/chill-theme/tailwind.config.copy.js` to your site root as `tailwind.config.js`.
+
+```javascript
+module.exports = {
+  content: ["./layouts/**/*.html"],
+  theme: {
+    extend: {
+      colors: {
+        primary: { /* custom colors */ },
+        secondary: { /* custom colors */ }
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        heading: ['Plus Jakarta Sans', 'sans-serif']
+      }
+    }
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography')
+  ]
+}
+```
+
+### Tailwind Plugins
+
+The theme includes two official plugins:
+
+1. **@tailwindcss/forms** - Beautiful form styling
+2. **@tailwindcss/typography** - Prose content styling
+
+## Color System
+
+The theme uses a comprehensive color palette with primary and secondary colors.
+
+### Primary Colors
+
+Blue-based palette for main brand elements.
+
+```javascript
+primary: {
+  50: '#eef1fc',   // Lightest
+  100: '#dde3f9',
+  200: '#bbc7f3',
+  300: '#99abec',
+  400: '#778fe6',
+  500: '#5573df',  // Base
+  600: '#425ad6',  // Main (default)
+  700: '#3548ab',
+  800: '#283680',
+  900: '#1b2456'   // Darkest
+}
+```
+
+### Secondary Colors
+
+Purple-based palette for accents and highlights.
+
+```javascript
+secondary: {
+  50: '#faf5ff',   // Lightest
+  100: '#f3e8ff',
+  200: '#e9d5ff',
+  300: '#d8b4fe',
+  400: '#c084fc',
+  500: '#a855f7',  // Base
+  600: '#9333ea',  // Main (default)
+  700: '#7e22ce',
+  800: '#6b21a8',
+  900: '#581c87'   // Darkest
+}
+```
+
+### Using Colors
+
+**In Templates**:
+```html
+<div class="bg-primary-600 text-white">Primary background</div>
+<div class="text-secondary-600">Secondary text</div>
+<button class="bg-primary-600 hover:bg-primary-700">Button</button>
+```
+
+**In Custom CSS**:
+```css
+.custom-element {
+  @apply bg-primary-50 text-primary-900;
+}
+```
+
+### Customizing Colors
+
+To change the color scheme, edit `tailwind.config.js`:
+
+```javascript
+theme: {
+  extend: {
+    colors: {
+      primary: {
+        50: '#your-color',
+        100: '#your-color',
+        // ... continue for all shades
+        900: '#your-color'
+      }
+    }
+  }
+}
+```
+
+**Quick Method** - Use a color palette generator:
+1. Choose your base color
+2. Generate shades using tools like [Tailwind Shades](https://tailwindshades.com/)
+3. Replace values in `tailwind.config.js`
+
+### Gray Scale
+
+Default Tailwind gray scale is available:
+
+```html
+<div class="bg-gray-50">Light gray background</div>
+<div class="bg-gray-100">...</div>
+<!-- ... -->
+<div class="bg-gray-900">Dark gray background</div>
+```
+
+## Typography
+
+The theme uses two modern typefaces for optimal readability and visual appeal.
+
+### Font Families
+
+**Body Text**: Inter
+- Variable font for optimal loading
+- Used for all body text, UI elements
+- Applied to: paragraphs, lists, forms, buttons
+
+**Headings**: Plus Jakarta Sans
+- Bold, modern sans-serif
+- Used for all headings (h1-h6)
+- Applied to: titles, section headers
+
+### Font Configuration
+
+**Tailwind Config**:
+```javascript
+fontFamily: {
+  sans: ['Inter', 'system-ui', 'sans-serif'],
+  heading: ['Plus Jakarta Sans', 'sans-serif']
+}
+```
+
+**CSS Application**:
+```css
+body {
+  @apply font-sans text-gray-700;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  @apply font-heading font-bold text-gray-900;
+}
+```
+
+### Font Loading
+
+Fonts are loaded via Google Fonts CDN in the base template:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@700;800&display=swap" rel="stylesheet">
+```
+
+### Typography Scale
+
+**Headings**:
+```html
+<h1 class="text-4xl md:text-5xl lg:text-6xl">Main Heading</h1>
+<h2 class="text-3xl md:text-4xl">Section Heading</h2>
+<h3 class="text-2xl md:text-3xl">Subsection Heading</h3>
+<h4 class="text-xl md:text-2xl">Small Heading</h4>
+```
+
+**Body Text**:
+```html
+<p class="text-base">Normal text (16px)</p>
+<p class="text-lg">Large text (18px)</p>
+<p class="text-xl">XL text (20px)</p>
+<p class="text-sm">Small text (14px)</p>
+```
+
+### Custom Fonts
+
+To use different fonts:
+
+1. **Add Font Files** to `static/fonts/` or use CDN
+2. **Update Tailwind Config**:
+```javascript
+fontFamily: {
+  sans: ['Your Font', 'system-ui', 'sans-serif'],
+  heading: ['Your Heading Font', 'sans-serif']
+}
+```
+3. **Load Font** in baseof.html or CSS
+
+## Custom Components
+
+Pre-built component classes for common UI elements.
+
+### Buttons
+
+**Primary Button**:
+```html
+<a href="#" class="btn-primary">Get Started</a>
+```
+
+CSS:
+```css
+.btn {
+  @apply inline-flex items-center justify-center px-6 py-3 font-medium transition duration-200 ease-in-out;
+  border-radius: 2rem;
+}
+
+.btn-primary {
+  @apply btn bg-primary-600 text-white hover:bg-primary-700 hover:scale-105;
+}
+```
+
+**Secondary Button**:
+```html
+<a href="#" class="btn-secondary">Learn More</a>
+```
+
+**Outline Button**:
+```html
+<a href="#" class="btn-outline">View Demo</a>
+```
+
+### Cards
+
+**Standard Card**:
+```html
+<div class="card">
+  <h3>Card Title</h3>
+  <p>Card content goes here</p>
+</div>
+```
+
+CSS:
+```css
+.card {
+  @apply bg-white p-6 transition duration-200 hover:shadow-md;
+  border-radius: 2rem;
+}
+```
+
+### Container
+
+**Responsive Container**:
+```html
+<div class="container">
+  <!-- Content automatically centered with responsive padding -->
+</div>
+```
+
+CSS:
+```css
+.container {
+  @apply mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
+}
+```
+
+### Sections
+
+**Section Spacing**:
+```html
+<section class="section">
+  <!-- Consistent vertical spacing -->
+</section>
+```
+
+CSS:
+```css
+.section {
+  @apply py-16 md:py-24;
+}
+```
+
+### Navigation
+
+**Nav Links**:
+```html
+<a href="#" class="nav-link">Features</a>
+```
+
+CSS:
+```css
+.nav-link {
+  @apply text-gray-600 hover:text-primary-600 font-bold transition duration-200;
+}
+```
+
+### Grids
+
+**Feature Grid**:
+```html
+<div class="feature-grid">
+  <div>Feature 1</div>
+  <div>Feature 2</div>
+  <div>Feature 3</div>
+</div>
+```
+
+CSS:
+```css
+.feature-grid {
+  @apply grid gap-8 md:grid-cols-2 lg:grid-cols-3;
+}
+```
+
+## Responsive Design
+
+The theme is mobile-first and fully responsive.
+
+### Breakpoints
+
+Tailwind's default breakpoints:
+
+```javascript
+sm: '640px',   // Small devices
+md: '768px',   // Medium devices
+lg: '1024px',  // Large devices
+xl: '1280px',  // Extra large devices
+2xl: '1536px'  // 2X large devices
+```
+
+### Responsive Utilities
+
+**Responsive Visibility**:
+```html
+<div class="hidden md:block">Visible on medium screens and up</div>
+<div class="block md:hidden">Visible only on small screens</div>
+```
+
+**Responsive Spacing**:
+```html
+<div class="py-8 md:py-12 lg:py-16">
+  Responsive padding
+</div>
+```
+
+**Responsive Grid**:
+```html
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+  <!-- Responsive columns -->
+</div>
+```
+
+**Responsive Text**:
+```html
+<h1 class="text-3xl md:text-4xl lg:text-5xl">
+  Responsive heading
+</h1>
+```
+
+### Mobile Menu
+
+The header includes a responsive mobile menu that automatically adapts to smaller screens.
+
+## Syntax Highlighting
+
+Code blocks are styled with custom syntax highlighting.
+
+### Configuration
+
+**Hugo Config** (`hugo.toml`):
+```toml
+[markup.highlight]
+  noClasses = false
+  lineNos = true
+  codeFences = true
+  guessSyntax = true
+  lineNumbersInTable = true
+```
+
+### Highlight Styles
+
+**Base Styles**:
+```css
+.highlight {
+  @apply text-sm font-mono text-gray-200;
+}
+```
+
+**Syntax Colors**:
+```css
+/* Keywords */
+.highlight .k, .highlight .kd {
+  @apply text-purple-400 font-semibold;
+}
+
+/* Functions */
+.highlight .nf, .highlight .nx {
+  @apply text-blue-400;
+}
+
+/* Strings */
+.highlight .s, .highlight .s1, .highlight .s2 {
+  @apply text-green-400;
+}
+
+/* Numbers */
+.highlight .mi, .highlight .mf {
+  @apply text-orange-400;
+}
+
+/* Comments */
+.highlight .c, .highlight .c1, .highlight .cm {
+  @apply text-gray-500 italic;
+}
+
+/* Operators */
+.highlight .o {
+  @apply text-yellow-400;
+}
+
+/* Punctuation */
+.highlight .p {
+  @apply text-gray-400;
+}
+```
+
+### Line Numbers
+
+Line numbers are styled with table layout for better copy/paste experience:
+
+```css
+.highlight table td:first-child {
+  @apply pr-4 text-right select-none text-gray-500 border-r border-gray-700;
+}
+```
+
+### Customizing Syntax Theme
+
+To use a different color scheme, modify the `.highlight` classes in `assets/scss/main.scss`.
+
+## Prose Styling
+
+Blog posts and content pages use prose styling.
+
+### Prose Classes
+
+The theme includes custom prose styling:
+
+```css
+.prose {
+  @apply max-w-none;
+}
+
+.prose h1 {
+  @apply text-4xl mb-8;
+}
+
+.prose h2 {
+  @apply text-3xl mt-12 mb-6;
+}
+
+.prose h3 {
+  @apply text-2xl mt-8 mb-4;
+}
+
+.prose p {
+  @apply text-gray-700 leading-relaxed mb-6;
+}
+
+.prose a {
+  @apply text-primary-600 hover:text-primary-700 no-underline;
+}
+
+.prose ul, .prose ol {
+  @apply my-6 ml-6;
+}
+
+.prose blockquote {
+  @apply border-l-4 border-gray-200 pl-4 italic text-gray-700 my-8;
+}
+
+.prose code:not(pre code) {
+  @apply bg-gray-100 text-gray-900 px-1.5 py-0.5 rounded text-sm font-mono;
+}
+```
+
+### Using Prose
+
+Wrap content in prose class:
+
+```html
+<article class="prose prose-lg">
+  {{ .Content }}
+</article>
+```
+
+## Customization
+
+### Adding Custom CSS
+
+1. **Create Custom CSS File**:
+`static/css/custom.css`
+
+```css
+/* Your custom styles */
+.my-custom-class {
+  background: linear-gradient(to right, #your-colors);
+}
+```
+
+2. **Add to Configuration**:
+```toml
+[params]
+  customCSS = ["css/custom.css"]
+```
+
+### Extending Tailwind
+
+**Add to `tailwind.config.js`**:
+
+```javascript
+module.exports = {
+  theme: {
+    extend: {
+      // Custom spacing
+      spacing: {
+        '128': '32rem',
+        '144': '36rem'
+      },
+      // Custom colors
+      colors: {
+        'brand': '#your-color'
+      },
+      // Custom border radius
+      borderRadius: {
+        'xl': '1.5rem',
+        '2xl': '2rem'
+      }
+    }
+  }
+}
+```
+
+### Overriding Component Styles
+
+To override existing components:
+
+1. **Copy Original** from `themes/.../assets/scss/main.scss`
+2. **Add to Your CSS** in project root `assets/css/custom.css`
+3. **Import After Main** in your build process
+
+Or use `@layer` directive:
+
+```css
+@layer components {
+  .btn-primary {
+    @apply bg-red-600 hover:bg-red-700;
+  }
+}
+```
+
+### Custom Color Scheme
+
+Complete color scheme override:
+
+```javascript
+// tailwind.config.js in your site root
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          // ... your colors
+          900: '#0c4a6e'
+        },
+        secondary: {
+          // ... your secondary palette
+        }
+      }
+    }
+  }
+}
+```
+
+### Dark Mode Support
+
+To add dark mode support:
+
+1. **Enable in Tailwind Config**:
+```javascript
+module.exports = {
+  darkMode: 'class', // or 'media'
+  // ...
+}
+```
+
+2. **Add Dark Variants**:
+```html
+<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
+  Content
+</div>
+```
+
+3. **Toggle Script** (add to baseof.html):
+```javascript
+// Dark mode toggle logic
+```
+
+## Best Practices
+
+### 1. Use Tailwind Utilities First
+
+Prefer Tailwind utilities over custom CSS:
+
+```html
+<!-- Good -->
+<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow">
+
+<!-- Avoid -->
+<div class="custom-header" style="...">
+```
+
+### 2. Extract Repeated Patterns
+
+For repeated patterns, create component classes:
+
+```css
+@layer components {
+  .product-card {
+    @apply bg-white rounded-2xl p-6 shadow-sm hover:shadow-lg transition;
+  }
+}
+```
+
+### 3. Maintain Consistency
+
+Use the theme's design tokens:
+- Colors from the palette
+- Spacing from the scale
+- Typography from defined classes
+
+### 4. Optimize for Performance
+
+- Use PurgeCSS (automatic with Hugo)
+- Minimize custom CSS
+- Avoid `!important`
+- Use efficient selectors
+
+### 5. Accessibility
+
+- Maintain color contrast ratios (WCAG AA minimum)
+- Use semantic HTML
+- Include focus states
+- Test with keyboard navigation
+
+### 6. Mobile-First
+
+Build mobile layouts first:
+
+```html
+<!-- Mobile first, then desktop -->
+<div class="text-sm md:text-base lg:text-lg">
+```
+
+### 7. Test Across Browsers
+
+- Chrome/Edge (Chromium)
+- Firefox
+- Safari
+- Mobile browsers
+
+## Testing Styles
+
+### Local Development
+
+```bash
+# Watch for changes
+hugo server -D
+
+# Clear cache if styles don't update
+hugo --gc
+hugo server -D
+```
+
+### Build for Production
+
+```bash
+# Build with minification
+hugo --minify
+
+# Check file sizes
+ls -lh public/css/
+```
+
+### Browser Testing
+
+1. Chrome DevTools - Responsive mode
+2. Firefox Developer Tools
+3. Safari Web Inspector
+4. Real device testing
+
+## Related Documentation
+
+- [CONFIGURATION.md](CONFIGURATION.md) - Theme configuration
+- [LAYOUTS.md](LAYOUTS.md) - Layout templates
+- [CONTENT-CREATION.md](CONTENT-CREATION.md) - Creating content
+- [TROUBLESHOOTING.md](TROUBLESHOOTING.md) - Common issues
+
+## Additional Resources
+
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [Tailwind CSS Typography Plugin](https://tailwindcss.com/docs/typography-plugin)
+- [Hugo Asset Processing](https://gohugo.io/hugo-pipes/)
+- [PostCSS Documentation](https://postcss.org/)