summaryrefslogtreecommitdiff
path: root/extras/html/themes/cathode_dimension
diff options
context:
space:
mode:
Diffstat (limited to 'extras/html/themes/cathode_dimension')
-rw-r--r--extras/html/themes/cathode_dimension/LICENSE18
-rw-r--r--extras/html/themes/cathode_dimension/code.ttfbin0 -> 356060 bytes
-rw-r--r--extras/html/themes/cathode_dimension/example.html75
-rw-r--r--extras/html/themes/cathode_dimension/handnotes.ttfbin0 -> 367144 bytes
-rw-r--r--extras/html/themes/cathode_dimension/heading.ttfbin0 -> 367144 bytes
-rw-r--r--extras/html/themes/cathode_dimension/style.css295
-rw-r--r--extras/html/themes/cathode_dimension/text.ttfbin0 -> 64104 bytes
-rw-r--r--extras/html/themes/cathode_dimension/theme.conf8
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
new file mode 100644
index 0000000..78ca9da
--- /dev/null
+++ b/extras/html/themes/cathode_dimension/code.ttf
Binary files differ
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
new file mode 100644
index 0000000..7c8e65b
--- /dev/null
+++ b/extras/html/themes/cathode_dimension/handnotes.ttf
Binary files differ
diff --git a/extras/html/themes/cathode_dimension/heading.ttf b/extras/html/themes/cathode_dimension/heading.ttf
new file mode 100644
index 0000000..7c8e65b
--- /dev/null
+++ b/extras/html/themes/cathode_dimension/heading.ttf
Binary files differ
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
new file mode 100644
index 0000000..2711179
--- /dev/null
+++ b/extras/html/themes/cathode_dimension/text.ttf
Binary files differ
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
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-07 23:15:50 +0000