diff options
| author | Paul Buetow <paul@buetow.org> | 2025-06-22 22:14:11 +0300 |
|---|---|---|
| committer | Paul Buetow <paul@buetow.org> | 2025-06-22 22:14:11 +0300 |
| commit | 2b78e5fcdf303f7055a67e13c5968e9ed92f56df (patch) | |
| tree | aa64ddf518419c807782ce302a62ff36da79fca2 /extras/html/themes/cathode_dimension | |
| parent | 3af674aebad9e3792fbf13b3cbda7b1691b1f4f3 (diff) | |
Replace themes with 50 retro-futuristic single-column themes
- 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 <noreply@anthropic.com>
Diffstat (limited to 'extras/html/themes/cathode_dimension')
| -rw-r--r-- | extras/html/themes/cathode_dimension/LICENSE | 18 | ||||
| -rw-r--r-- | extras/html/themes/cathode_dimension/code.ttf | bin | 0 -> 356060 bytes | |||
| -rw-r--r-- | extras/html/themes/cathode_dimension/example.html | 75 | ||||
| -rw-r--r-- | extras/html/themes/cathode_dimension/handnotes.ttf | bin | 0 -> 367144 bytes | |||
| -rw-r--r-- | extras/html/themes/cathode_dimension/heading.ttf | bin | 0 -> 367144 bytes | |||
| -rw-r--r-- | extras/html/themes/cathode_dimension/style.css | 295 | ||||
| -rw-r--r-- | extras/html/themes/cathode_dimension/text.ttf | bin | 0 -> 64104 bytes | |||
| -rw-r--r-- | extras/html/themes/cathode_dimension/theme.conf | 8 |
8 files changed, 396 insertions, 0 deletions
diff --git a/extras/html/themes/cathode_dimension/LICENSE b/extras/html/themes/cathode_dimension/LICENSE new file mode 100644 index 0000000..2b07613 --- /dev/null +++ b/extras/html/themes/cathode_dimension/LICENSE @@ -0,0 +1,18 @@ +Theme: cathode_dimension +Style: Retro/Retro-futuristic +Generated: 2025-06-22 22:11:25 + +Color Palette: matrix +Effect Type: scanlines +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/cathode_dimension/code.ttf b/extras/html/themes/cathode_dimension/code.ttf Binary files differnew file mode 100644 index 0000000..78ca9da --- /dev/null +++ b/extras/html/themes/cathode_dimension/code.ttf diff --git a/extras/html/themes/cathode_dimension/example.html b/extras/html/themes/cathode_dimension/example.html new file mode 100644 index 0000000..f29f152 --- /dev/null +++ b/extras/html/themes/cathode_dimension/example.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> +<head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>CATHODE DIMENSION :: RETRO THEME</title> + <link rel="stylesheet" href="style.css" /> +</head> +<body> + <div class="content"> + <h1>SYSTEM: CATHODE DIMENSION</h1> + + <p>Welcome to the matrix retro theme. This single-column layout features a minimum width of 1200px for optimal viewing on modern displays while maintaining that classic retro aesthetic.</p> + + <h2>INTERFACE ELEMENTS</h2> + + <p>This theme combines retro-futuristic typography with a carefully crafted color palette inspired by retro computing aesthetics.</p> + + <h3>FEATURES</h3> + + <ul> + <li>Single column layout optimized for readability</li> + <li>Minimum 1200px width for modern displays</li> + <li>CRT scanline effects</li> + <li>Monospace typography throughout</li> + <li>High contrast color scheme</li> + </ul> + + <h2>CODE DISPLAY</h2> + + <p>Execute commands with style. Inline code like <code>theme --activate cathode_dimension</code> stands out clearly.</p> + + <pre>// THEME CONFIGURATION +const retroTheme = { + name: "cathode_dimension", + style: "matrix", + effect: "scanlines", + width: "1200px", + initialized: true +}; + +console.log("Theme loaded successfully");</pre> + + <h3>NAVIGATION</h3> + + <p>Navigate through the system with <a href="#">hyperlinks</a> that glow on hover. Longer <a href="#" class="textlink">text-based navigation links demonstrate the retro hover effects</a>.</p> + + <div class="quote"> + "The future is already here — it's just not evenly distributed." Experience the aesthetics of retro computing with modern web standards. + </div> + + <h2>VISUAL STYLE</h2> + + <p>The scanlines effect creates authentic scanlines reminiscent of CRT monitors. Every element has been carefully styled to evoke the golden age of computing.</p> + + <hr /> + + <h3>SYSTEM STATUS</h3> + + <ul> + <li>Theme Engine: ACTIVE</li> + <li>Visual Effects: ENABLED</li> + <li>Glow Intensity: OPTIMAL</li> + <li>Contrast Ratio: HIGH</li> + <li>Readability: MAXIMUM</li> + </ul> + + <p>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.</p> + + <div class="footer"> + SYSTEM THEME :: CATHODE_DIMENSION :: RETRO FUTURISTIC DESIGN + </div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/extras/html/themes/cathode_dimension/handnotes.ttf b/extras/html/themes/cathode_dimension/handnotes.ttf Binary files differnew file mode 100644 index 0000000..7c8e65b --- /dev/null +++ b/extras/html/themes/cathode_dimension/handnotes.ttf diff --git a/extras/html/themes/cathode_dimension/heading.ttf b/extras/html/themes/cathode_dimension/heading.ttf Binary files differnew file mode 100644 index 0000000..7c8e65b --- /dev/null +++ b/extras/html/themes/cathode_dimension/heading.ttf diff --git a/extras/html/themes/cathode_dimension/style.css b/extras/html/themes/cathode_dimension/style.css new file mode 100644 index 0000000..7df9450 --- /dev/null +++ b/extras/html/themes/cathode_dimension/style.css @@ -0,0 +1,295 @@ +/* Retro Theme: cathode_dimension */ +@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: #000000; + --color-text: #00ff41; + --color-primary: #00ff41; + --color-secondary: #008f11; + --color-accent: #00ff00; + --color-glow: #00ff4133; +} + +* { + box-sizing: border-box; +} + +html { + font-size: 16px; + background-color: var(--color-bg); + min-height: 100vh; +} + +html::before { + content: ""; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(255, 255, 255, 0.03) 2px, + rgba(255, 255, 255, 0.03) 4px + ); + pointer-events: none; + z-index: 1; +} + +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/cathode_dimension/text.ttf b/extras/html/themes/cathode_dimension/text.ttf Binary files differnew file mode 100644 index 0000000..2711179 --- /dev/null +++ b/extras/html/themes/cathode_dimension/text.ttf diff --git a/extras/html/themes/cathode_dimension/theme.conf b/extras/html/themes/cathode_dimension/theme.conf new file mode 100644 index 0000000..815363b --- /dev/null +++ b/extras/html/themes/cathode_dimension/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 |
