Isabelline Theme Sass Mixin

The Isabelline mixin is a comprehensive typography and layout system designed for content-focused websites. It provides a carefully crafted set of styles optimized for readability and elegant presentation of article-based content.

Features

• Responsive typography system with serif/sans-serif font stacks
• Color scheme based on a configurable hue
• Semantic HTML5 structure support
• Markdown-compatible styling
• Advanced article formatting including asides, blockquotes, and lists
• Table styling
• Customizable content width
• Footer styling
• Badge system for content classification

Usage

@include isabelline($hue: 30, $width: 900px, $reset-h1: true);

Parameters

| Parameter | Type | Default | Description | |---------------|---------|--------:|-------------| | $base-hue | Number | 30 | Base hue for the color scheme. Controls the overall color palette. | | $base-width | Length | 900px | Maximum width for main content, header, and footer. | | $reset-h1 | Boolean | true | Enables/disables H1 size reset within articles and sections. |

Color System

The mixin uses HSL color model with a configurable hue parameter to generate a cohesive color scheme:

• Background: Light neutral shade (96% lightness)
• Text: Black for maximum readability
• Links: Varies based on context (header, main content, footer)
• Headings: 30% lightness with 50% saturation
• Blockquotes: Deeper color with 70% saturation
• Asides: Accent color with 70% saturation

Typography

Font Stacks

$sans-serif: helvetica, arial, sans-serif;
$serif: "Noto Serif", times, serif;
$header-serif: "Bree Serif", $serif;
$body-serif: "Noto Serif", "Bree Serif", $serif;

Base Sizes

• Body text: 1.3em
• Article headings: Hierarchical scaling
• Footer: 60% of base size
• Navigation: 80% of base size

Content Structures

Articles

• Clean, semantic markup support
• Custom unordered list styling with em-dashes
• Task list support with custom checkboxes
• Blockquote styling with decorative quotation marks
• Code block formatting
• Table styling with header emphasis

Asides

Provides right-aligned, inset side notes with:

• 40% width
• Reduced font size (90%)
• Left border
• Custom color

Index Pages

• Year-based navigation
• Post listing with dates
• Custom badge system for content categorization

Badge System

Includes predefined styles for content classification:

• Draft (red gradient)
• Collection (blue gradient)
• Private (neutral gradient)
• Blog (purple gradient)

HTML5 Semantic Structure

The mixin supports modern HTML5 document outline with:

• Semantic <article> and <section> elements
• Optional H1 reset for traditional heading hierarchy
• Clear distinction between main content, header, and footer areas

Browser Compatibility

• Modern browser support
• Graceful degradation for older browsers
• Custom selection color support
• Flexbox layout system

Best Practices

1. Always include required font files for custom typography
2. Consider enabling $reset-h1 when using Markdown-generated content
3. Adjust $width based on your content and target devices
4. Use the badge system consistently for content classification

Example Implementation

@use 'isabelline' as *;

// Basic implementation
@include isabelline();

// Customized implementation
@include isabelline(
  $base-hue: 210,        // Blue-based scheme
  $base-width: 1200px,   // Wider layout
  $reset-h1: true   // Enable H1 reset
);