Demo 9: Custom Mix - Sharp Typography with Cool Gradients

Overview

Demo 9 is a custom combination that merges the best features from Demo 6 (Sharp Typography) and Demo 8 (Cool Gradients) based on specific requirements.

What’s Included

From Demo 6: Sharp Modern Typography

All typography features from demo-6:

  • Site Title: 4.5rem font-size, 900 font-weight
  • Section Headings (h2): 3rem, 800 weight
  • Post Titles (h3): 2rem, 700 weight
  • Body Text: 1.125rem with optimized line-height
  • Modern System Font Stack: -apple-system, BlinkMacSystemFont, Segoe UI, etc.
  • Text Rendering: Antialiasing and optimized rendering
  • Bold Tag Pills: 700 weight, uppercase, letter-spacing
  • Enhanced All Text Elements: Hero, navigation, footer, byline

From Demo 8: Cool Gradient Colors

Specific gradient features from demo-8:

  1. Gradient Color Palette:
    • Coral: #ff6b6b
    • Amber: #ffa726
    • Gold: #ffd54f
    • Teal: #26a69a
    • Indigo: #5c6bc0
    • Violet: #ab47bc

  2. Gradient Site Title: Animated diagonal gradient (135deg) with 10s animation

  3. Gradient Tag Pills: Each pill (6n+1 through 6n+6) has:
    • Diagonal gradient backgrounds
    • Box shadows
    • Hover effects (translateY + brightness filter)

  4. .homepage h2::after: 3px gradient underline border below section headings

  5. .page-previous_posts h3:
    • Gradient background (indigo→violet)
    • White text color
    • Text shadow for depth

Mobile Responsiveness

The demo includes comprehensive mobile breakpoints:

@media (max-width: 768px)

  • Site title: 3rem
  • Section headings: 2.25rem
  • Post titles: 1.5rem
  • Hero statement: 1.25rem
  • Hero strong: 1.5rem
  • Previous posts h3: 1.5rem
  • Tag pills: 0.75rem

@media (max-width: 480px)

  • Site title: 2.5rem
  • Section headings: 1.75rem
  • Post titles: 1.25rem
  • Body text: 1rem
  • Post content: 1rem

File Location

_sass/demos/demo-9-custom-mix.scss

How to Enable

In assets/css/style.scss:

@import "demos/demo-9-custom-mix";

How to Disable

Comment out the import:

// @import "demos/demo-9-custom-mix";

Visual Examples

Desktop

  • Full page: Shows complete site with all features
  • Top section: Highlights gradient title, tag pills, and section underlines

Mobile (375px viewport)

  • Top section: Shows responsive scaling
  • Full page: Demonstrates mobile layout with all gradient features intact

Key Features

  1. ✅ Large, Bold Typography: Maximum visual impact
  2. ✅ Sophisticated Gradients: Non-primary colors throughout
  3. ✅ Animated Gradient Title: Smooth 10-second animation
  4. ✅ Gradient Tag Pills: With shadows and hover effects
  5. ✅ Gradient Section Underlines: 3px borders below h2 headings
  6. ✅ Gradient Previous Posts Headers: Indigo/violet background
  7. ✅ Fully Responsive: 3 breakpoints (desktop, 768px, 480px)
  8. ✅ Mobile Tested: Verified on 375px viewport
  9. ✅ CSS-Only: No JavaScript dependencies
  10. ✅ Accessible: Maintains contrast and readability

Technical Details

  • Total CSS Variables: 8 (6 gradient colors + 2 font stacks)
  • Animation: gradient-shift keyframe (0% → 50% → 100%)
  • Breakpoints: 768px, 480px
  • Font Weights Used: 400, 600, 700, 800, 900
  • Gradient Angles: 135deg (diagonal), 0deg (horizontal)
  • Shadow Depths: 0 2px 4px with color-specific alpha

Browser Compatibility

Works in all modern browsers with:

  • CSS Custom Properties (variables)
  • Linear gradients with multiple stops
  • Background-clip: text
  • CSS animations
  • Media queries
  • System font stacks

Performance

  • No external font downloads (system fonts only)
  • Single CSS file import
  • GPU-accelerated animations
  • Efficient CSS selectors
  • No JavaScript overhead

Customization

To customize gradient colors, edit the CSS variables:

:root {
  --gradient-coral: #your-color;
  --gradient-amber: #your-color;
  --gradient-gold: #your-color;
  --gradient-teal: #your-color;
  --gradient-indigo: #your-color;
  --gradient-violet: #your-color;
}

To customize typography sizes, adjust font-size values in the media queries and base styles.