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

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

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
• Progressive JavaScript: Core content works without JavaScript; the visitor counter and uptime display enhance themselves when it is available
• 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

Special Font: SerenityOS-Emoji

Font Combinations

Font Sizes Comparison

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

Warning Box

Tip Box

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:

1. Left Sidebar: Navigation, search, and status panels
2. Main Content: Articles and primary content
3. 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:

1. Status Panel: Displays an animated GIF showing the current status
2. Links Panel: List of useful web links with matching emojis
3. Obligatory GIFs Panel: Display of animated GIFs in retro style
4. Visitor Counter: Cookie-free page-load counter with a digital display

Visitor Counter and System Uptime

The visitor panel is intentionally small and old-web styled, but it uses two different mechanisms:

• System uptime is calculated in the browser from the configured site_launch_date. It needs no cookies or network request.
• Visitors is a page-load counter. The browser requests an invisible static pixel once per page load. A systemd timer on the host reads only these Nginx log entries every minute and writes the accumulated total to visitor-count.json.

The counter does not set cookies and its counter script does not store IP addresses, user agents, referrers, or other visitor profiles. It measures page loads since the counter was activated, rather than unique people.

The supporting host files live in visitor-counter/: count-visits.sh, criticalbasics-visitor-counter.service, and criticalbasics-visitor-counter.timer. They are infrastructure for the deployed static site, not files interpreted by Zola.

Featured Article Images

Posts may opt into a featured image with three optional values in their [extra] front matter. When no featured_image is supplied, no image is rendered.

[extra]
featured_image = "pics/posts/my-image.png"
featured_image_alt = "Concise description of the image"
featured_image_caption = "Optional caption"

Featured images appear below the article metadata and open at full size when clicked. On the homepage, an explicitly configured image becomes the right-hand thumbnail beside the article excerpt.

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

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:

  <colgroup>
    
      <col width="30%">
    
      <col width="70%">
    
  </colgroup>


<thead><tr><th>Property</th><th>Description</th></tr></thead><tbody>

Example with 4 Columns of Different Sizes

You can define any number of columns with different widths:

{​% table(cols="15%,25%,20%,40%") %​}
| ID | Category | Priority | Description |
|----|----------|----------|-------------|
| 001 | Hardware | High | New graphics card for workstation |
| 002 | Software | Medium | Operating system update |
| 003 | Network  | Low      | Office Wi-Fi optimization |
{​% end %​}

The result looks like this:

  <colgroup>
    
      <col width="15%">
    
      <col width="25%">
    
      <col width="20%">
    
      <col width="40%">
    
  </colgroup>


<thead><tr><th>ID</th><th>Category</th><th>Priority</th><th>Description</th></tr></thead><tbody>

Shortcut Table

The shortcut_table shortcode is specifically optimized for displaying keyboard shortcuts. It uses fixed column widths (40% for the first column, 60% for the second) to ensure a consistent presentation.

Syntax:

{​% shortcut_table() %​}
| Action | Shortcut |
|--------|----------|
| Copy | Ctrl+C |
| Paste | Ctrl+V |
{​% end %​}

Example:

Changelog Table

The changelog_table shortcode is optimized for changelogs. It gives the date column a fixed width (100px) so that dates are displayed uniformly.

Syntax:

{​% changelog_table() %​}
| Date | Changes |
|------|--------|
| 2025-01-01 | Initial release |
| 2025-01-15 | Bug fixes |
{​% end %​}

Example: The changelog table at the beginning of this page uses the changelog_table shortcode.

Note on Displaying Shortcode Examples

To display shortcode examples in the documentation without them being executed, a special trick is used: invisible spaces (Zero-Width Spaces \u200b) are inserted between the curly braces and the percent signs. This prevents Zola from recognizing and executing the shortcodes, but they are not visible to the user.

Example: {\u200b% shortcode %\u200b} instead of {% shortcode %} (with an invisible space between { and % and between % and })

Markdown Troubleshooting

Common Layout Issues

When working with this theme (or any Markdown-based system), certain formatting issues can break your layout. Here are some common problems and solutions:

HTML-Like Syntax in Markdown

Problem Example:

Select **<Yes>** to enable automatic updates.

In this example, <Yes> might be interpreted as an HTML tag named “Yes”, causing layout issues.

Solutions:

1. Use quotes instead of angle brackets:

   Select **"Yes"** to enable automatic updates.

2. Use backticks to format as code:

   Select **`<Yes>`** to enable automatic updates.

3. Use HTML entities:

   Select **<Yes>** to enable automatic updates.

4. Use escape characters:

   Select **\<Yes\>** to enable automatic updates.

Other Common Markdown Issues

• Unclosed code blocks: Always ensure your code blocks have opening and closing backticks on their own lines.
• Malformed tables: Tables require a specific format with headers and separators.
• Nested HTML: Be careful when nesting HTML elements inside Markdown content.

Getting Started

Conclusion

The Retro-Compatible Zola Theme offers a unique combination of nostalgic design and modern functionality. It’s perfect for:

• Retro computing enthusiasts
• Digital preservation projects
• Personal websites with a nostalgic touch
• Anyone who appreciates the aesthetic of early web design