Retro-Compatible Zola Theme Showcase
Table of Contents 📑
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-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. |
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 how body text looks in Perfect DOS VGA 437 with VT323 as fallback. This combination is used in many parts of the theme.
Form Elements Font Preview
Font Sizes Comparison
Heading 1 (26px)
Heading 2 (22px)
Body Text (20px)
Smaller Text (16px)
Caption Text (14px)
Code Blocks
This theme features retro-styled code blocks with syntax highlighting:
<!-- HTML Example -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World</h1>
<p>This is a simple HTML example with syntax highlighting.</p>
</body>
</html>
def hello_retro_world():
print("Hello, retro world!")
for i in range(1, 6):
print(f"Counting: {i}")
return "Done!"
# Call the function
result = hello_retro_world()
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. |
Note Box
| 📝 NOTE |
This is a note for additional context or explanations. |
Retro Buttons
Buttons in retro style that look like old control elements:
Retro Dividers
Various stylized dividers in retro style:
Standard:
Dots:
Double line:
Dashed:
With shadow:
ASCII Art
Display ASCII art with correct formatting:
____ ____ ___ _____ ___ ____ _ _ ____ _ ____ ___ ____ ____ / ___| _ \|_ _|_ _|_ _/ ___| / \ | | | __ ) / \ / ___|_ _/ ___/ ___| | | | |_) || | | | | | | / _ \ | | | _ \ / _ \| | | |\___ \___ \ | |___| _ < | | | | | | |___ / ___ \| |___| |_) / ___ \ |___ | | ___) |__) | \____|_| \_\___| |_| |___\____/_/ \_\_____|____/_/ \_\____|___|____/____/
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("Alice"), 98);
scores.insert(String::from("Bob"), 82);
scores.insert(String::from("Charlie"), 75);
// Get a value
match scores.get("Alice") {
Some(score) => println!("Alice's score: {}", score),
None => println!("Alice not found")
}
// Iterate over key-value pairs
for (name, score) in &scores {
println!("{}: {}", name, score);
}
}
Quote Block
Format quotes in retro style:
| " | The definition of insanity is doing the same thing over and over again and expecting different results. — Albert Einstein (Unknown) |
Layout Features
Three-Column Layout
This theme uses a classic three-column layout that was popular in the early days of the web:
- Left Column: Categories and navigation
- Main Column: Content (what you’re reading now)
- Right Column: Links, status, and other widgets
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
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
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 |
Form Elements
The theme includes retro-styled form elements:
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
| ℹ️ GETTING STARTED |
To get started with this theme:
For detailed instructions, see the Main Documentation. |
