This post demonstrates the features of the consolidated xhosi template, built from analyzing and extracting the best practices from three existing websites.

Typography and Content

xhosi uses a modern typography system with proper heading hierarchy, readable line spacing, and responsive font sizing that adapts to different screen sizes.

Code Examples

Here’s how inline code looks, and below is a syntax-highlighted code block:

// Theme switcher example
class ThemeSwitcher {
  constructor() {
    this.currentTheme = this.getStoredTheme() || 'system';
    this.init();
  }
  
  applyTheme(theme) {
    document.documentElement.setAttribute('data-force-theme', theme);
  }
}

Lists and Structure

xhosi handles various content structures:

  1. Ordered lists with proper spacing
  2. Unordered lists with consistent styling
  3. Blockquotes for emphasis

This is a blockquote showing how quoted content is styled with subtle background treatment and border styling.

Footnote System

xhosi includes both basic and advanced footnote support[1]. The implementation allows for flexible footnote rendering[2].

Theme System

Toggle between light, dark, and system preference themes using the switcher in the header. The system respects user preferences and provides smooth transitions.

Technical Implementation

The modular CSS architecture splits styles into focused files:

  • variables.css - Design tokens and CSS custom properties
  • base.css - Typography and foundational styles
  • layout.css - Page structure and navigation
  • components.css - Reusable UI elements
  • posts.css - Blog-specific components
  • footnotes.css - Footnote implementations
  • themes.css - Light/dark theme system
  • responsive.css - Mobile-first responsive design

This approach reduces complexity while maintaining all essential features from the source websites.