diff options
Diffstat (limited to 'extras/html/themes/monochrome_prism/style.css')
| -rw-r--r-- | extras/html/themes/monochrome_prism/style.css | 44 |
1 files changed, 36 insertions, 8 deletions
diff --git a/extras/html/themes/monochrome_prism/style.css b/extras/html/themes/monochrome_prism/style.css index 0f78b96..9b191ca 100644 --- a/extras/html/themes/monochrome_prism/style.css +++ b/extras/html/themes/monochrome_prism/style.css @@ -25,7 +25,7 @@ --color-primary: #0099ff; --color-secondary: #00ddff; --color-accent: #00ffff; - --color-glow: #00ccff33; + --color-glow: rgba(0, 204, 255, 0.2); } * { @@ -37,7 +37,7 @@ html { background-color: var(--color-bg); min-height: 100vh; } - +/* CRT effect */ @keyframes flicker { 0% { opacity: 0.97; } 100% { opacity: 1; } @@ -58,10 +58,31 @@ html::before { transparent 2px ); pointer-events: none; - z-index: 1; + z-index: 9999; animation: flicker 0.15s infinite; } +/* CRT curve effect */ +html::after { + content: ""; + position: fixed; + top: -5%; + left: -5%; + right: -5%; + bottom: -5%; + background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%); + pointer-events: none; + z-index: 10000; +} + + + + 100% { opacity: 1; +}; +} + + + body { font-family: text, monospace; background-color: var(--color-bg); @@ -83,7 +104,7 @@ body::before { left: 0; right: 0; bottom: 0; - background: radial-gradient(ellipse at center, transparent 0%, var(--color-bg) 100%); + background: radial-gradient(ellipse at center, transparent 0%, var(--color-bg) 125%); pointer-events: none; z-index: 2; } @@ -279,16 +300,23 @@ p { /* 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); } + 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; |
