diff options
Diffstat (limited to 'extras/html/themes/retro_nexus/style.css')
| -rw-r--r-- | extras/html/themes/retro_nexus/style.css | 295 |
1 files changed, 295 insertions, 0 deletions
diff --git a/extras/html/themes/retro_nexus/style.css b/extras/html/themes/retro_nexus/style.css new file mode 100644 index 0000000..1766516 --- /dev/null +++ b/extras/html/themes/retro_nexus/style.css @@ -0,0 +1,295 @@ +/* Retro Theme: retro_nexus */ +@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: #1a0f00; + --color-text: #ff6600; + --color-primary: #ff3300; + --color-secondary: #ff9900; + --color-accent: #ffcc00; + --color-glow: #ff660033; +} + +* { + 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; +} |