diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 261 |
1 files changed, 39 insertions, 222 deletions
@@ -1,4 +1,3 @@ -/* Retro Theme: binary_compiler */ @font-face { font-family: 'text'; src: url("./text.ttf") format("truetype"); @@ -19,263 +18,81 @@ src: url("./handnotes.ttf") format("truetype"); } -:root { - --color-bg: #1a0f00; - --color-text: #ff6600; - --color-primary: #ff3300; - --color-secondary: #ff9900; - --color-accent: #ffcc00; - --color-glow: rgba(255, 102, 0, 0.2); -} - -* { - box-sizing: border-box; -} - html { - font-size: 16px; - background-color: var(--color-bg); - min-height: 100vh; + background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%23cccccc"><polygon points="50,15 61,39 87,39 66,57 76,84 50,68 24,84 34,57 13,39 39,39"/></svg>'), + radial-gradient(#000000 1px, transparent 1px); + background-size: 32px 32px; + background-color: #000000; } 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 75%, var(--color-bg) 100%); - pointer-events: none; - z-index: 2; + font-family: text, sans-serif; + background: #ffffff; + max-width: 1200px; + padding: 20px; + margin: 20px auto; + border: 5px solid #eeeeee; + border-radius: 15px; + word-wrap: break-word; } -/* 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); + font-family: heading, serif; } -/* Links with retro hover effects */ a { font-family: code, monospace; - color: var(--color-secondary); text-decoration: none; - position: relative; - transition: all 0.3s ease; + color: #666666; + padding: 0 0 0 0; } a:hover { - color: var(--color-accent); - text-shadow: 0 0 5px var(--color-glow); + text-decoration: underline; } -a::after { - content: ""; - position: absolute; - bottom: -2px; - left: 0; - width: 0; - height: 2px; - background: var(--color-accent); - transition: width 0.3s ease; +a.textlink:before { + content: "⇒ "; } -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:before { + content: "« "; + padding-left: 2px; } -.quote::after { - bottom: -0.5em; - right: 0.1em; +.quote:after { + content: " »"; + padding-right: 2px; } -/* 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; + margin: 0 0 0 0; + padding: 0 0 0 0; } -ul li::before { - content: "▸ "; - color: var(--color-accent); - font-weight: bold; - margin-left: -1.5em; - margin-right: 0.5em; +li:before { + content: "★"; + padding-right: 5px; } -/* 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; + max-width: 90%; } -/* 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; +pre { + font-family: code, monospace; + padding: 20px; + border: 1px solid #dddddd; + border-radius: 15px; } -/* 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; +span.inlinecode { + font-family: code, monospace; + border: 1px solid #999999; + border-radius: 2px; } |