summaryrefslogtreecommitdiff
path: root/extras/html/themes/quantum_matrix
diff options
context:
space:
mode:
authorPaul Buetow <paul@buetow.org>2025-06-22 22:14:11 +0300
committerPaul Buetow <paul@buetow.org>2025-06-22 22:14:11 +0300
commit2b78e5fcdf303f7055a67e13c5968e9ed92f56df (patch)
treeaa64ddf518419c807782ce302a62ff36da79fca2 /extras/html/themes/quantum_matrix
parent3af674aebad9e3792fbf13b3cbda7b1691b1f4f3 (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/quantum_matrix')
-rw-r--r--extras/html/themes/quantum_matrix/LICENSE18
-rw-r--r--extras/html/themes/quantum_matrix/code.ttfbin0 -> 356060 bytes
-rw-r--r--extras/html/themes/quantum_matrix/example.html75
-rw-r--r--extras/html/themes/quantum_matrix/handnotes.ttfbin0 -> 367144 bytes
-rw-r--r--extras/html/themes/quantum_matrix/heading.ttfbin0 -> 356060 bytes
-rw-r--r--extras/html/themes/quantum_matrix/style.css285
-rw-r--r--extras/html/themes/quantum_matrix/text.ttfbin0 -> 356060 bytes
-rw-r--r--extras/html/themes/quantum_matrix/theme.conf8
8 files changed, 386 insertions, 0 deletions
diff --git a/extras/html/themes/quantum_matrix/LICENSE b/extras/html/themes/quantum_matrix/LICENSE
new file mode 100644
index 0000000..2295271
--- /dev/null
+++ b/extras/html/themes/quantum_matrix/LICENSE
@@ -0,0 +1,18 @@
+Theme: quantum_matrix
+Style: Retro/Retro-futuristic
+Generated: 2025-06-22 22:11:25
+
+Color Palette: amber_crt
+Effect Type: grid
+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/quantum_matrix/code.ttf b/extras/html/themes/quantum_matrix/code.ttf
new file mode 100644
index 0000000..78ca9da
--- /dev/null
+++ b/extras/html/themes/quantum_matrix/code.ttf
Binary files differ
diff --git a/extras/html/themes/quantum_matrix/example.html b/extras/html/themes/quantum_matrix/example.html
new file mode 100644
index 0000000..7075932
--- /dev/null
+++ b/extras/html/themes/quantum_matrix/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>QUANTUM MATRIX :: RETRO THEME</title>
+ <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+ <div class="content">
+ <h1>SYSTEM: QUANTUM MATRIX</h1>
+
+ <p>Welcome to the amber crt 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>Retro visual 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 quantum_matrix</code> stands out clearly.</p>
+
+ <pre>// THEME CONFIGURATION
+const retroTheme = {
+ name: "quantum_matrix",
+ style: "amber_crt",
+ effect: "grid",
+ 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 grid effect adds visual depth to the interface. 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 :: QUANTUM_MATRIX :: RETRO FUTURISTIC DESIGN
+ </div>
+ </div>
+</body>
+</html> \ No newline at end of file
diff --git a/extras/html/themes/quantum_matrix/handnotes.ttf b/extras/html/themes/quantum_matrix/handnotes.ttf
new file mode 100644
index 0000000..7c8e65b
--- /dev/null
+++ b/extras/html/themes/quantum_matrix/handnotes.ttf
Binary files differ
diff --git a/extras/html/themes/quantum_matrix/heading.ttf b/extras/html/themes/quantum_matrix/heading.ttf
new file mode 100644
index 0000000..78ca9da
--- /dev/null
+++ b/extras/html/themes/quantum_matrix/heading.ttf
Binary files differ
diff --git a/extras/html/themes/quantum_matrix/style.css b/extras/html/themes/quantum_matrix/style.css
new file mode 100644
index 0000000..b4e5524
--- /dev/null
+++ b/extras/html/themes/quantum_matrix/style.css
@@ -0,0 +1,285 @@
+/* Retro Theme: quantum_matrix */
+@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: #0a0400;
+ --color-text: #ffb000;
+ --color-primary: #ff9500;
+ --color-secondary: #ff7700;
+ --color-accent: #ffc500;
+ --color-glow: #ff950033;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 16px;
+ background-color: var(--color-bg);
+ min-height: 100vh;
+}
+
+html {
+ background-image:
+ linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+ background-size: 20px 20px;
+ background-position: -1px -1px;
+}
+
+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/quantum_matrix/text.ttf b/extras/html/themes/quantum_matrix/text.ttf
new file mode 100644
index 0000000..78ca9da
--- /dev/null
+++ b/extras/html/themes/quantum_matrix/text.ttf
Binary files differ
diff --git a/extras/html/themes/quantum_matrix/theme.conf b/extras/html/themes/quantum_matrix/theme.conf
new file mode 100644
index 0000000..815363b
--- /dev/null
+++ b/extras/html/themes/quantum_matrix/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
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-07 19:13:48 +0000