Welcome to this comprehensive showcase of the Retro-Compatible Zola Theme! This article demonstrates all the features, elements, shortcodes, and styling options available in this unique theme designed for maximum backward compatibility with browsers dating back to the 90s.

Changelog

Date	Change
2025-07-11	Improved accessibility with skip links, focus indicators, and screenreader support
2025-06-16	Initial version of the theme showcase
2025-06-16	Added code block styling with retro terminal look
2025-06-16	Integration of additional fonts (Visitor, PixelOperator, Petiote, Virtual DJ, 5x5, Ambitsek, AddStandardBitmap)
2025-06-16	Headings highlighted with color (Purple)
2025-06-16	Added changelog table

What is Zola?

Zola is a blazing-fast static site generator (SSG) written in Rust. It takes your content written in Markdown, applies templates, and generates a complete HTML website that can be served by any web server. Some key features of Zola include:

Speed: Built with Rust for exceptional performance
Simplicity: Easy to use with a single binary
Flexibility: Powerful templating with Tera
Built-in Features: Syntax highlighting, search, and more
Live Reload: Instant preview of changes during development

About This Theme

The Retro-Compatible Zola Theme combines nostalgic aesthetics with modern functionality, offering:

Maximum Backward Compatibility: Support for browsers dating back to the 90s
Responsive Design: Optimized for desktop, tablet, and mobile devices
Retro Shortcodes: Special retro-style formatting elements
Pixel Fonts: VT323 and Perfect DOS VGA 437 for the authentic look
Three-Column Layout: Classic web design with modern responsiveness

ℹ️ THEME PURPOSE
This theme was specifically designed to provide a nostalgic web experience while maintaining compatibility with both vintage and modern browsers. It’s perfect for retro computing enthusiasts, digital preservation projects, or anyone who appreciates the aesthetic of early web design.

Compatibility Features

Browser Compatibility

This theme is designed to work with browsers dating back to the 90s, including:

Netscape Navigator 3.0 and earlier
Internet Explorer 3.0 and earlier
Opera 3.0 and earlier
Early WebTV browsers
Text-based browsers like Lynx

Technical Compatibility Features

HTML 4.01 Strict Doctype: For maximum compatibility
Table-based layouts: Instead of Flexbox or Grid
Simple color definitions: Using hexadecimal color codes
No JavaScript dependencies: All features work without JavaScript
Email-based forms: For guestbook and contact functionality

Font Showcase

This theme uses special pixel fonts to create an authentic retro look. Here’s a showcase of the main fonts used:

Main Fonts

VT323: The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()

Perfect DOS VGA 437: The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()

Commodore 64: The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()

Consolas: The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()

Courier New: The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()

Visitor: The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()

PixelOperator: The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()

Petiote: The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()

Virtual DJ: The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()

5x5: The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()

Ambitsek: The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()

AddStandardBitmap: The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()

Special Font: SerenityOS-Emoji

😀 😃 😄 😁 😆 😅 😂 🤣 🥲 ☺️ 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜

Font Combinations

Header Style (VT323, Perfect DOS VGA 437)

This is a paragraph in VT323 font. It's designed to look like old terminal text but with better readability for longer content blocks.

This is code text in Perfect DOS VGA 437 font.

Font Sizes Comparison

Heading 1 (26px)

Heading 2 (22px)

Heading 3 (20px)

Regular paragraph text (20px)

Small text (16px)

Extra small text (14px)

Shortcodes

The theme includes various shortcodes to enhance your content with retro-style elements.

Infoboxes

Infoboxes are used to highlight important information in different styles:

Information Box

ℹ️ INFORMATION
This is a standard information box for general notices and information.

Warning Box

⚠️ WARNING
This is a warning box for important notices and potential issues.

Tip Box

💡 TIP
This is a helpful tip to improve your experience with the theme.

Retro Dividers

Dividers help separate content sections with retro-style lines:

Single Line Divider

Double Line Divider

Dashed Line Divider

ASCII Art

The theme supports ASCII art through a dedicated shortcode:

____      _             ____            _          
 / ___|_ __(_) |_ _   _  | __ )  __ _ ___(_) ___ ___ 
| |   | '__| | __| | | | |  _ \ / _` / __| |/ __/ __|
| |___| |  | | |_| |_| | | |_) | (_| \__ \ | (__\__ \
 \____|_|  |_|\__|\__, | |____/ \__,_|___/_|\___|___/
                  |___/

_____  _____  _____  _____  _____  _____  _____  _____  _____  _____ 
|_____||_____||_____||_____||_____||_____||_____||_____||_____||_____|
                                                                      
 _____                                                         _____ 
|_____|  _____ _____ _____ _____ _____ _____ _____ _____      |_____|
        |_____||_____||_____||_____||_____||_____||_____|            
 _____                                                         _____ 
|_____|  _____ _____ _____ _____ _____ _____ _____ _____      |_____|
        |_____||_____||_____||_____||_____||_____||_____|            
 _____                                                         _____ 
|_____||_____||_____||_____||_____||_____||_____||_____||_____||_____|

_______ _    _ ______  __  __  ______      _______ _    _ _____  ______          _______ ______ 
 |__   __| |  | |  ____|/_ |/_ |/ __ \ \    / / ____| |  | |  __ \|  ____|   /\   |__   __|  ____|
    | |  | |__| | |__    | | | | |  | \ \  / / (___ | |__| | |  | | |__     /  \     | |  | |__   
    | |  |  __  |  __|   | | | | |  | |\ \/ / \___ \|  __  | |  | |  __|   / /\ \    | |  |  __|  
    | |  | |  | | |____  | | | | |__| | \  /  ____) | |  | | |__| | |____ / ____ \   | |  | |____ 
    |_|  |_|  |_|______| |_| |_|\____/   \/  |_____/|_|  |_|_____/|______/_/    \_\  |_|  |______|
                                                                                                  
  _______ _    _ ______  __  __  ______      _______ _    _ _____  ______          _______ ______ 
 |__   __| |  | |  ____|/_ |/_ |/ __ \ \    / / ____| |  | |  __ \|  ____|   /\   |__   __|  ____|
    | |  | |__| | |__    | | | | |  | \ \  / / (___ | |__| | |  | | |__     /  \     | |  | |__   
    | |  |  __  |  __|   | | | | |  | |\ \/ / \___ \|  __  | |  | |  __|   / /\ \    | |  |  __|  
    | |  | |  | | |____  | | | | |__| | \  /  ____) | |  | | |__| | |____ / ____ \   | |  | |____ 
    |_|  |_|  |_|______| |_| |_|\____/   \/  |_____/|_|  |_|_____/|______/_/    \_\  |_|  |______|
                                                                                                  
  _______ _    _ ______  __  __  ______      _______ _    _ _____  ______          _______ ______ 
 |__   __| |  | |  ____|/_ |/_ |/ __ \ \    / / ____| |  | |  __ \|  ____|   /\   |__   __|  ____|
    | |  | |__| | |__    | | | | |  | \ \  / / (___ | |__| | |  | | |__     /  \     | |  | |__   
    | |  |  __  |  __|   | | | | |  | |\ \/ / \___ \|  __  | |  | |  __|   / /\ \    | |  |  __|  
    | |  | |  | | |____  | | | | |__| | \  /  ____) | |  | | |__| | |____ / ____ \   | |  | |____ 
    |_|  |_|  |_|______| |_| |_|\____/   \/  |_____/|_|  |_|_____/|______/_/    \_\  |_|  |______|

Additional Code Examples

Rust Example (Zola is written in Rust!)

use std::collections::HashMap;

fn main() {
    // Create a new HashMap to store user scores
    let mut scores = HashMap::new();
    
    // Insert some values
    scores.insert(String::from("Blue"), 10);
    scores.insert(String::from("Yellow"), 50);
    scores.insert(String::from("Red"), 25);
    
    // Access a value
    let team_name = String::from("Blue");
    let score = scores.get(&team_name).unwrap_or(&0);
    
    println!("Team {} score: {}", team_name, score);
    
    // Iterate over all key-value pairs
    for (key, value) in &scores {
        println!("{}: {}", key, value);
    }
}

HTML Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Retro Web Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        body {
            background-color: #000000;
            color: #33ff33;
            font-family: "Courier New", monospace;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        td {
            border: 1px solid #444444;
            padding: 8px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Retro Website</h1>
    <p>This is a simple example of HTML 4.01 Strict.</p>
    <table>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
        </tr>
    </table>
</body>
</html>

Layout Features

The theme uses a three-column layout:

Left Sidebar: Navigation, search, and status panels
Main Content: Articles and primary content
Right Sidebar: Additional links, visitor counter, and GIF panels

The layout automatically collapses on mobile devices for better readability.

Retro Panels

The theme includes various retro-style panels:

Status Panel: Displays an animated GIF showing the current status
Links Panel: List of useful web links with matching emojis
Obligatory GIFs Panel: Display of animated GIFs in retro style
Visitor Counter: Simulated visitor counter that grows over time

Improved Accessibility

The theme has been equipped with numerous accessibility improvements:

Skip Links: Allow skipping the navigation to get directly to the main content.
Focus Indicators: Clearly visible focus styles for all interactive elements.
Screen Reader Support: Use of ARIA attributes and semantic HTML.
High Contrast: High-contrast color scheme for better readability.

Customization Options

The theme offers extensive customization options:

Central configuration in sass/partials/_variables.scss
Customizable header with background image
Adjustable logo sizes for desktop and mobile
Configurable GIF panels in different areas of the page
Button styling and appearance settings

💡 CUSTOMIZATION TIP
All design elements can be configured centrally in the file `sass/partials/_variables.scss`, making it easy to maintain a consistent look throughout your site.

Form Elements

The theme includes retro-styled form elements:

Tables

The Retro-Compatible Zola Theme offers three different table shortcodes, each optimized for different use cases.

Table with Custom Column Widths

The table shortcode allows you to set the width of each column individually. The column widths are specified as percentages and must add up to 100%.

Syntax:

{% table(cols="30%,70%") %}
| Property | Description |
|----------|-------------|
| Name     | The name of the property |
| Value    | A longer description that needs more space |
{% end %}

Example:

Property	Description
Name	The name of the property
Value	A longer description that needs more space

Action	Shortcut
Copy	Ctrl+C
Paste	Ctrl+V
Save	Ctrl+S
Open	Ctrl+O

⚠️ AVOID RAW HTML TAGS IN TEXT
Using angle brackets (`<` and `>`) in your Markdown text can cause layout problems because they might be interpreted as HTML tags. This can break the entire page layout if the “tag” is never closed.

💡 DEBUGGING LAYOUT ISSUES
If your page layout breaks, try removing sections of content one by one until the layout displays correctly. This can help identify which specific content is causing the problem.

ℹ️ GETTING STARTED
To get started with this theme: Clone the repository into your Zola `themes` directory Activate the theme in your `config.toml` Run `zola serve` to see a preview For detailed instructions, see the Main Documentation.

Retro-Compatible Zola Theme Showcase

Table of Contents 📑