About Wintergreen Theme

Welcome to the Wintergreen Theme Showcase! This theme is designed with a clean, modern aesthetic inspired by IDE color schemes. It features a light color palette with accent colors that mimic the vibrant hues found in popular code editors.

Technical Foundation

The Wintergreen Theme is built on the Eleventy (11ty) static site generator, a powerful yet flexible tool for creating static websites. It is a derivative work based on the excellent eleventy-notes theme created by Sandro Roth.

License Information

The original eleventy-notes theme is released under the MIT License. While the MIT License is very permissive, the Wintergreen Theme has been relicensed under the BSD 2-Clause License to better protect the attribution rights of both the original author and this theme's maintainer.

We kindly ask users to respect this licensing choice and to refer to the original work for more information about its design philosophy and implementation details. The BSD 2-Clause License ensures that proper credit is given to all contributors while still allowing for modification and redistribution of the theme.

Enhanced Features

Building upon the solid foundation of the original theme, Wintergreen includes several significant enhancements:

• Dark Mode Support: Full dark mode adaptation with IDE-inspired color schemes that provide comfortable viewing during extended coding sessions
• Expanded Typography: Additional font support for better multilingual display, including optimized Chinese font stacks
• Enhanced Syntax Highlighting: Improved code block styling with more accurate color representation
• Responsive Design Refinements: Better mobile adaptation and touch-friendly elements
• Accessibility Improvements: Enhanced keyboard navigation and screen reader compatibility

Design Philosophy

The Wintergreen Theme is built around the following principles:

• Clean Readability: Prioritizes clear typography and comfortable spacing
• IDE-Inspired Colors: Uses a palette of greens, blues, and oranges similar to code editor syntax highlighting
• Minimalist Layout: Focuses on content with subtle design elements
• Responsive Design: Adapts seamlessly to different screen sizes
• Accessibility: Ensures content is readable for all users

Color Palette

The theme uses the following color scheme:

Dark Mode Color Palette

In dark mode, the theme transforms to use the following IDE-inspired color scheme:

The dark mode color scheme is carefully crafted to provide comfortable viewing during extended coding sessions, with colors inspired by popular IDE dark themes while maintaining good contrast and readability.

Typography

The theme utilizes a carefully selected combination of modern sans-serif and monospace fonts to ensure optimal readability across different content types:

• Headings (h1): Baloo 2 - A clean sans-serif font with distinct character shapes for prominent titles
• Headings (h2-h6): Geist Mono - A clean, modern monospace font that adds technical sophistication to section titles
• Body Text: 更纱黑体 (Sarasa Gothic) - A versatile font family optimized for multilingual readability, with excellent support for Chinese characters
• Code Blocks: JetBrains Mono - A professional monospace font specifically designed for code readability, with clear distinctions between similar characters
• Sidebar: Ubuntu Mono - A clear monospace font for navigation elements, with consistent rendering across all weights including bold and italic styles

The font stack is carefully configured to provide fallback options for all platforms, ensuring consistent typography regardless of the user's environment. Ubuntu Mono's support for both bold and italic variations makes it particularly suitable for sidebar navigation, where different text weights may be used to indicate active sections or hierarchical relationships.

Layout Features

• Responsive Sidebar: Collapses on smaller screens
• Clean Card Design: Content is organized in visually appealing cards
• Subtle Animations: Smooth transitions for interactive elements
• Consistent Spacing: Uniform padding and margins throughout
• Clear Hierarchy: Visual cues to indicate content structure

Multilingual Support Showcase

Wintergreen Theme provides excellent multilingual typography support with carefully selected font stacks for different writing systems.

Chinese Example (中文示例)

冬青主题选择了精心设计的字体，确保中文、日文等东亚文字的美观显示。更纱黑体（Sarasa Gothic）提供了清晰的中文阅读体验，而思源宋体（Noto Serif SC）则为中文排版增添了优雅的衬线风格。无论是技术文档还是普通文章，都能获得优秀的视觉效果。

Japanese Example (日本語サンプル)

冬青テーマは、日本語の表示にも最適化されています。更紗ゴシック（Sarasa Gothic）は日本語の文字をくっきりと表示し、源ノ明朝（Noto Serif JP）は伝統的な和文組版の美しさを提供します。コードブロックとの調和も考慮され、技術文書から文学的な文章まで幅広く対応します。

Featured Article: "What Is Code?" by Paul Ford

To demonstrate the theme's typography and layout capabilities, here's an excerpt from Paul Ford's influential Bloomberg Businessweek article "What Is Code?" — a landmark piece that beautifully explains programming to a general audience.

The Invisible Machinery of the Modern World

Code. It's a word that's been elevated from the realm of the technical to the mainstream. We live in a world that runs on code, yet most people have no idea what it actually is or how it works.

Consider this: when you tap an icon on your smartphone, you're not just opening an app. You're initiating a cascade of instructions that have been meticulously crafted by programmers. These instructions — this code — tell the device exactly what to do, how to display information, and how to respond to your touch.

Code is the set of instructions that tells a computer what to do. Computers themselves are dumb; they can only follow instructions. But those instructions, when written by skilled programmers, can create everything from simple calculators to complex artificial intelligence systems.

A Simple Example

Let's look at a basic piece of code that demonstrates a fundamental programming concept:

def greet(name):
    """A simple function that returns a greeting"""
    return f"Hello, {name}! Welcome to the world of code."

# Using the function
print(greet("Alice"))
print(greet("Bob"))

When this code runs, it produces:

Hello, Alice! Welcome to the world of code.
Hello, Bob! Welcome to the world of code.

Why Code Matters

Ford explains the significance of understanding code in today's world:

"We are here because there are cards to be punched, numbers to be crunched, ledgers to be balanced. We are here because there is code to be written, systems to be designed, problems to be solved. The computer is a machine for solving problems, and code is the language we use to communicate those solutions."

The Layers of Complexity

Modern software is built in layers:

1. Hardware - The physical computers and devices
2. Operating Systems - Software that manages hardware resources
3. Applications - Programs that perform specific tasks
4. Libraries and Frameworks - Reusable code components
5. User Interfaces - What humans interact with

Each layer is built with code, and each layer depends on the ones below it.

The Cultural Impact of Code

Ford's article captures how code has transformed from a niche technical skill to a cultural force:

"The programmer, once a back-office functionary, is now a cultural hero. The coder is seen as a creator, a problem-solver, a digital artisan. Companies compete for programming talent, and cities compete to become tech hubs. Code has become a form of literacy for the 21st century."

Markdown Examples

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Lists

Unordered List

• Item 1
• Item 2
  • Subitem 2.1
  • Subitem 2.2

Ordered List

1. First item
2. Second item
   1. Subitem 2.1
   2. Subitem 2.2

Code Blocks

// JavaScript example demonstrating async/await
async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return processData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

// Helper function
function processData(data) {
  return data.filter(item => item.active)
             .map(item => ({
               ...item,
               processed: true
             }));
}

# Python example with type hints
from typing import List, Optional

def binary_search(arr: List[int], target: int) -> Optional[int]:
    """Return index of target in sorted array, or None if not found."""
    low, high = 0, len(arr) - 1
    
    while low <= high:
        mid = (low + high) // 2
        if arr[mid] == target:
            return mid
        elif arr[mid] < target:
            low = mid + 1
        else:
            high = mid - 1
    
    return None

# Usage
numbers = [1, 3, 5, 7, 9, 11, 13]
result = binary_search(numbers, 7)
print(f"Found at index: {result}")

Blockquotes

This is a blockquote demonstrating the theme's typography for quoted text. It features a distinctive left border and subtle background differentiation.

Nested blockquotes are also supported with additional indentation and border styling.

Blockquotes can contain bold text, italic text, and even inline code to emphasize specific points.

Tables

Images

Emphasis

This is bold text, useful for highlighting important concepts.

This is italic text, suitable for emphasis or technical terms.

This is bold and italic text for maximum emphasis.

Horizontal Rule

The horizontal rule above provides a clear visual separation between sections.

Theme Customization

Font Customization

The Wintergreen Theme allows for easy font customization. You can modify the font families in the app.scss file:

// Example font customization
body {
  font-family: "更纱黑体", "Sarasa Gothic SC", sans-serif;
  font-size: var(--font-size-fluid-0);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Geist Mono", monospace;
}

code, pre {
  font-family: "JetBrains Mono", "Noto Serif SC", monospace;
}

.sidebar {
  font-family: "Ubuntu Mono", monospace;
}

Color Customization

To customize colors, you can directly modify the color values in the app.scss file:

// Example color customization
:root {
  --primary-text: #24292e;
  --secondary-text: #586069;
  --background: #ffffff;
  --code-background: #f6f8fa;
  --border-color: #e1e4e8;
  
  // Accent colors
  --accent-green: #28a745;
  --accent-aqua: #267f99;
  --accent-orange: #d15704;
  --link-color: #0969da;
}

body {
  color: var(--primary-text);
  background-color: var(--background);
}

a {
  color: var(--link-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

a:hover {
  color: #0a3069;
  border-bottom-color: #0a3069;
}

Layout Customization

You can adjust the layout by modifying the relevant sections in app.scss:

// Example layout customization
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.sidebar {
  width: 250px;
  padding: 20px;
  background-color: #fafbfc;
  border-right: 1px solid #e1e4e8;
}

.main-content {
  flex: 1;
  padding: 20px;
  min-height: calc(100vh - 60px);
}

.card {
  background: #ffffff;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    padding: 10px;
    border-right: none;
    border-bottom: 1px solid #e1e4e8;
  }
  
  .container {
    flex-direction: column;
  }
}

Theme Features

Syntax Highlighting

The Wintergreen Theme includes comprehensive syntax highlighting for code blocks, with colors inspired by popular IDEs:

// Syntax highlighting example
class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
    this.createdAt = new Date();
  }

  greet() {
    return `Hello, ${this.name}!`;
  }

  static validateEmail(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  }
}

// Usage
const user = new User("Alice", "alice@example.com");
console.log(user.greet());
console.log(User.validateEmail("test@example.com"));

Responsive Design

The theme is fully responsive, adapting to different screen sizes:

• Desktop (1200px+): Full sidebar and content layout with optimal reading width
• Tablet (768px-1199px): Compact sidebar and adjusted content width
• Mobile (767px-): Collapsible sidebar and single-column content with touch-friendly elements

Accessibility Features

• High Contrast: Ensures text is readable against backgrounds with WCAG AA compliance
• Keyboard Navigation: Supports full tab-based navigation with visible focus indicators
• Screen Reader Compatible: Properly structured with ARIA landmarks and semantic HTML
• Reduced Motion: Respects user preferences for animations and transitions

Performance Optimizations

• Efficient CSS: Uses modern CSS features with minimal redundancy
• Optimized Font Loading: Implements font-display: swap for better performance
• Lazy Loading: Supports lazy loading of images and non-critical resources
• Minimal Dependencies: Lightweight implementation without unnecessary frameworks

Wintergreen Theme v1.0 · Inspired by IDE aesthetics · Designed for readability