diff --git a/css/theme.css b/css/theme.css index 56ff0df..997b59f 100644 --- a/css/theme.css +++ b/css/theme.css @@ -50,6 +50,81 @@ body { grid-template-columns: 1fr; justify-items: start; column-gap: 3rem; + + /* Styles for CRT effect */ + margin: 0; + min-height: 100vh; + /* Text glow */ + text-shadow: + 2px 2px 0px #000, /* Hard shadow for legibility */ + -1px -1px 0 rgba(255,255,255,0.3), /* Slight highlight */ + 0 0 8px rgba(255, 255, 255, 0.5), /* Soft bloom */ + 0 0 20px rgba(255, 255, 255, 0.3); /* Wide bloom */ +} + +/* Scanline overlay pseudo-element */ +body::before { + content: " "; + display: block; + position: fixed; + top: 0; left: 0; bottom: 0; right: 0; + z-index: 9999; + pointer-events: none; + + background: linear-gradient( + to bottom, + rgba(0,0,0, 0) 50%, + rgba(0,0,0, 0.1) 50% + ); + background-size: 100% 4px; +} + +/* Rolling refresh rate mismatch bar pseudo-element */ +body::after { + content: " "; + display: block; + position: fixed; + z-index: 9999; + + /* 1. STARTING POSITION */ + /* Place it vertically above the screen */ + top: -10vh; + left: 0; right: 0; + + /* 2. DIMENSIONS */ + /* Make it big enough to notice */ + height: 10vh; + + pointer-events: none; + + /* 3. THE BEAM (Brighter for now: 0.2 opacity) */ + background: linear-gradient( + to bottom, + rgba(255,255,255,0) 0%, + rgba(255,255,255,0.03) 50%, /* Visible white line */ + rgba(255,255,255,0) 100% + ); + + /* 4. ANIMATION */ + will-change: transform; + animation: scan-drop 15s linear infinite; +} + +@keyframes scan-drop { + 0% { transform: translateY(0); } + 25% { transform: translateY(0); } + 50% { transform: translateY(150vh); } + 100% { transform: translateY(150vh); } +} + +/* Theme scrollbars */ +body::-webkit-scrollbar { + width: 12px; + background: #000; +} +body::-webkit-scrollbar-thumb { + background: var(--accent-alt); + border: 1px solid #fff; } body > nav, @@ -60,6 +135,10 @@ h4, h5, h6 { font-family: var(--fancy-font-stack); + + text-shadow: + 3px 0px 0px rgba(255, 0, 0, 0.5), + -3px 0px 0px rgba(0, 0, 255, 0.5); } img {