Add analog effects
All checks were successful
Build Eleventy Site / build (push) Successful in 1m14s

This commit is contained in:
Devon Campbell 2025-12-26 14:11:20 -05:00
commit dcc77f5ae8

View file

@ -50,6 +50,81 @@ body {
grid-template-columns: 1fr; grid-template-columns: 1fr;
justify-items: start; justify-items: start;
column-gap: 3rem; 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, body > nav,
@ -60,6 +135,10 @@ h4,
h5, h5,
h6 { h6 {
font-family: var(--fancy-font-stack); 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 { img {