From 2b78e5fcdf303f7055a67e13c5968e9ed92f56df Mon Sep 17 00:00:00 2001 From: Paul Buetow Date: Sun, 22 Jun 2025 22:14:11 +0300 Subject: Replace themes with 50 retro-futuristic single-column themes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Removed previous multi-layout themes - Generated 50 new retro/retro-futuristic themes with: - Single column layout only - Minimum 1200px width for modern displays - Retro computing aesthetics (terminal, CRT, synthwave, etc.) - Various visual effects: scanlines, CRT, grid, dots, terminal - Monospace typography throughout - Theme palettes include: - Classic terminal green - Amber CRT monitors - Synthwave purple/pink - Matrix green - DOS blue/white - Cyberpunk neon - And more retro color schemes - Updated index.html with retro-themed gallery interface - All themes W3C CSS validated - Proper font licensing maintained - Screenshot previews for all themes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- extras/html/themes/synthwave_mainframe/LICENSE | 18 ++ extras/html/themes/synthwave_mainframe/code.ttf | Bin 0 -> 64104 bytes .../html/themes/synthwave_mainframe/example.html | 75 ++++++ .../html/themes/synthwave_mainframe/handnotes.ttf | Bin 0 -> 367144 bytes extras/html/themes/synthwave_mainframe/heading.ttf | Bin 0 -> 1854788 bytes extras/html/themes/synthwave_mainframe/style.css | 277 +++++++++++++++++++++ extras/html/themes/synthwave_mainframe/text.ttf | Bin 0 -> 367144 bytes extras/html/themes/synthwave_mainframe/theme.conf | 8 + 8 files changed, 378 insertions(+) create mode 100644 extras/html/themes/synthwave_mainframe/LICENSE create mode 100644 extras/html/themes/synthwave_mainframe/code.ttf create mode 100644 extras/html/themes/synthwave_mainframe/example.html create mode 100644 extras/html/themes/synthwave_mainframe/handnotes.ttf create mode 100644 extras/html/themes/synthwave_mainframe/heading.ttf create mode 100644 extras/html/themes/synthwave_mainframe/style.css create mode 100644 extras/html/themes/synthwave_mainframe/text.ttf create mode 100644 extras/html/themes/synthwave_mainframe/theme.conf (limited to 'extras/html/themes/synthwave_mainframe') diff --git a/extras/html/themes/synthwave_mainframe/LICENSE b/extras/html/themes/synthwave_mainframe/LICENSE new file mode 100644 index 0000000..3a34c8a --- /dev/null +++ b/extras/html/themes/synthwave_mainframe/LICENSE @@ -0,0 +1,18 @@ +Theme: synthwave_mainframe +Style: Retro/Retro-futuristic +Generated: 2025-06-22 22:11:25 + +Color Palette: synthwave +Effect Type: none +Layout: Single Column (min-width: 1200px) + +Font Licenses: +============== +All monospace fonts used are free for personal use. +- Hack: MIT License +- Consola Mono: SIL Open Font License +- Intel One Mono: Open Font License +- Other retro fonts: Free for personal use + +This theme is designed for modern displays while maintaining +a classic retro computing aesthetic. diff --git a/extras/html/themes/synthwave_mainframe/code.ttf b/extras/html/themes/synthwave_mainframe/code.ttf new file mode 100644 index 0000000..2711179 Binary files /dev/null and b/extras/html/themes/synthwave_mainframe/code.ttf differ diff --git a/extras/html/themes/synthwave_mainframe/example.html b/extras/html/themes/synthwave_mainframe/example.html new file mode 100644 index 0000000..54cf696 --- /dev/null +++ b/extras/html/themes/synthwave_mainframe/example.html @@ -0,0 +1,75 @@ + + + + + + SYNTHWAVE MAINFRAME :: RETRO THEME + + + +
+

SYSTEM: SYNTHWAVE MAINFRAME

+ +

Welcome to the synthwave retro theme. This single-column layout features a minimum width of 1200px for optimal viewing on modern displays while maintaining that classic retro aesthetic.

+ +

INTERFACE ELEMENTS

+ +

This theme combines retro-futuristic typography with a carefully crafted color palette inspired by retro computing aesthetics.

+ +

FEATURES

+ +
    +
  • Single column layout optimized for readability
    • +
  • Minimum 1200px width for modern displays
    • +
  • Retro visual effects
    • +
  • Monospace typography throughout
    • +
  • High contrast color scheme
    • +
+ +

CODE DISPLAY

+ +

Execute commands with style. Inline code like theme --activate synthwave_mainframe stands out clearly.

+ + 
// THEME CONFIGURATION
+const retroTheme = {
+    name: "synthwave_mainframe",
+    style: "synthwave",
+    effect: "none",
+    width: "1200px",
+    initialized: true
+};
+
+console.log("Theme loaded successfully");
+ +

NAVIGATION

+ +

Navigate through the system with hyperlinks that glow on hover. Longer text-based navigation links demonstrate the retro hover effects.

+ +
+ "The future is already here — it's just not evenly distributed." Experience the aesthetics of retro computing with modern web standards. +
+ +

VISUAL STYLE

+ +

The none effect adds visual depth to the interface. Every element has been carefully styled to evoke the golden age of computing.

+ +
+ +

SYSTEM STATUS

+ +
    +
  • Theme Engine: ACTIVE
    • +
  • Visual Effects: ENABLED
    • +
  • Glow Intensity: OPTIMAL
    • +
  • Contrast Ratio: HIGH
    • +
  • Readability: MAXIMUM
    • +
+ +

This retro theme brings together the best of classic computing aesthetics with modern web technologies. The single-column layout ensures content remains focused and readable, while the 1200px minimum width takes advantage of contemporary display resolutions.

+ +
+ SYSTEM THEME :: SYNTHWAVE_MAINFRAME :: RETRO FUTURISTIC DESIGN +
+
+ + \ No newline at end of file diff --git a/extras/html/themes/synthwave_mainframe/handnotes.ttf b/extras/html/themes/synthwave_mainframe/handnotes.ttf new file mode 100644 index 0000000..7c8e65b Binary files /dev/null and b/extras/html/themes/synthwave_mainframe/handnotes.ttf differ diff --git a/extras/html/themes/synthwave_mainframe/heading.ttf b/extras/html/themes/synthwave_mainframe/heading.ttf new file mode 100644 index 0000000..608f2ad Binary files /dev/null and b/extras/html/themes/synthwave_mainframe/heading.ttf differ diff --git a/extras/html/themes/synthwave_mainframe/style.css b/extras/html/themes/synthwave_mainframe/style.css new file mode 100644 index 0000000..a2c2568 --- /dev/null +++ b/extras/html/themes/synthwave_mainframe/style.css @@ -0,0 +1,277 @@ +/* Retro Theme: synthwave_mainframe */ +@font-face { + font-family: 'text'; + src: url("./text.ttf") format("truetype"); +} + +@font-face { + font-family: 'heading'; + src: url("./heading.ttf") format("truetype"); +} + +@font-face { + font-family: 'code'; + src: url("./code.ttf") format("truetype"); +} + +@font-face { + font-family: 'handnotes'; + src: url("./handnotes.ttf") format("truetype"); +} + +:root { + --color-bg: #0a0014; + --color-text: #ff00ff; + --color-primary: #ff00ff; + --color-secondary: #00ffff; + --color-accent: #ff00aa; + --color-glow: #ff00ff33; +} + +* { + box-sizing: border-box; +} + +html { + font-size: 16px; + background-color: var(--color-bg); + min-height: 100vh; +} + +body { + font-family: text, monospace; + background-color: var(--color-bg); + color: var(--color-text); + line-height: 1.6; + margin: 0 auto; + padding: 2em; + min-width: 1200px; + max-width: 1400px; + position: relative; + overflow-x: auto; +} + +/* Retro glow effect */ +body::before { + content: ""; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(ellipse at center, transparent 0%, var(--color-bg) 100%); + pointer-events: none; + z-index: 2; +} + +/* Content wrapper */ +.content { + position: relative; + z-index: 3; + width: 100%; + min-width: 1200px; +} + +/* Headers with retro styling */ +h1, h2, h3 { + font-family: heading, monospace; + text-transform: uppercase; + letter-spacing: 0.1em; + margin: 1.5em 0 0.5em 0; + position: relative; +} + +h1 { + font-size: 2.5em; + color: var(--color-primary); + text-shadow: + 0 0 10px var(--color-glow), + 0 0 20px var(--color-glow), + 0 0 30px var(--color-glow); + border-bottom: 2px solid var(--color-primary); + padding-bottom: 0.5em; +} + +h2 { + font-size: 1.8em; + color: var(--color-secondary); + text-shadow: 0 0 5px var(--color-glow); +} + +h3 { + font-size: 1.4em; + color: var(--color-accent); +} + +/* Links with retro hover effects */ +a { + font-family: code, monospace; + color: var(--color-secondary); + text-decoration: none; + position: relative; + transition: all 0.3s ease; +} + +a:hover { + color: var(--color-accent); + text-shadow: 0 0 5px var(--color-glow); +} + +a::after { + content: ""; + position: absolute; + bottom: -2px; + left: 0; + width: 0; + height: 2px; + background: var(--color-accent); + transition: width 0.3s ease; +} + +a:hover::after { + width: 100%; +} + +/* Text link styling */ +.textlink { + font-family: text, monospace; +} + +/* Quotes with retro border */ +.quote { + font-family: handnotes, monospace; + border-left: 4px solid var(--color-accent); + border-right: 4px solid var(--color-accent); + padding: 1em 2em; + margin: 2em 0; + background-color: rgba(255, 255, 255, 0.02); + font-style: italic; + position: relative; +} + +.quote::before, +.quote::after { + content: '"'; + font-size: 3em; + color: var(--color-accent); + position: absolute; + opacity: 0.3; +} + +.quote::before { + top: -0.2em; + left: 0.1em; +} + +.quote::after { + bottom: -0.5em; + right: 0.1em; +} + +/* Code blocks with terminal styling */ +pre { + font-family: code, monospace; + background-color: rgba(0, 0, 0, 0.5); + border: 1px solid var(--color-primary); + padding: 1.5em; + overflow-x: auto; + margin: 2em 0; + box-shadow: + inset 0 0 20px rgba(0, 0, 0, 0.5), + 0 0 10px var(--color-glow); + position: relative; +} + +pre::before { + content: "OUTPUT"; + position: absolute; + top: -0.5em; + left: 1em; + background: var(--color-bg); + padding: 0 0.5em; + color: var(--color-primary); + font-size: 0.8em; + letter-spacing: 0.2em; +} + +code { + font-family: code, monospace; + color: var(--color-accent); +} + +/* Lists with retro bullets */ +ul { + list-style: none; + padding-left: 2em; +} + +ul li::before { + content: "â–¸ "; + color: var(--color-accent); + font-weight: bold; + margin-left: -1.5em; + margin-right: 0.5em; +} + +/* Images */ +img { + max-width: 100%; + height: auto; + filter: contrast(1.1) brightness(0.9); + border: 2px solid var(--color-primary); +} + +/* Horizontal rules */ +hr { + border: none; + height: 2px; + background: linear-gradient(90deg, + transparent 0%, + var(--color-primary) 20%, + var(--color-primary) 80%, + transparent 100%); + margin: 3em 0; + position: relative; +} + +hr::after { + content: "â—†"; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: var(--color-bg); + color: var(--color-primary); + padding: 0 1em; + font-size: 1.5em; +} + +/* Paragraphs */ +p { + margin: 1em 0; + text-align: justify; + hyphens: auto; +} + +/* Special retro effects */ +@keyframes glitch { + 0%, 100% { text-shadow: 0 0 5px var(--color-glow); } + 25% { text-shadow: -2px 0 var(--color-accent), 2px 0 var(--color-secondary); } + 50% { text-shadow: 2px 0 var(--color-accent), -2px 0 var(--color-secondary); } + 75% { text-shadow: 0 0 10px var(--color-glow); } +} + +h1:hover { + animation: glitch 0.3s infinite; +} + +/* Footer styling */ +.footer { + margin-top: 4em; + padding-top: 2em; + border-top: 2px solid var(--color-primary); + text-align: center; + color: var(--color-secondary); + font-size: 0.9em; + letter-spacing: 0.1em; +} diff --git a/extras/html/themes/synthwave_mainframe/text.ttf b/extras/html/themes/synthwave_mainframe/text.ttf new file mode 100644 index 0000000..7c8e65b Binary files /dev/null and b/extras/html/themes/synthwave_mainframe/text.ttf differ diff --git a/extras/html/themes/synthwave_mainframe/theme.conf b/extras/html/themes/synthwave_mainframe/theme.conf new file mode 100644 index 0000000..815363b --- /dev/null +++ b/extras/html/themes/synthwave_mainframe/theme.conf @@ -0,0 +1,8 @@ +declare -xr HTML_HEADER=./extras/html/header.html.part +declare -xr HTML_FOOTER=./extras/html/footer.html.part +declare -xr HTML_CSS_STYLE=$HTML_THEME_DIR/style.css +declare -xr HTML_WEBFONT_HEADING=$HTML_THEME_DIR/heading.ttf +declare -xr HTML_WEBFONT_TEXT=$HTML_THEME_DIR/text.ttf +declare -xr HTML_WEBFONT_CODE=$HTML_THEME_DIR/code.ttf +declare -xr HTML_WEBFONT_HANDNOTES=$HTML_THEME_DIR/handnotes.ttf +declare -xr SOURCE_HIGHLIGHT_CSS=./extras/html/source-highlight-styles/neon.css -- cgit v1.2.3