add fading in/out background glow and lighter gridlines.

This commit is contained in:
tsb95 2025-11-14 18:44:24 -10:00
parent c58a03e611
commit 8cebfb54ab
1 changed files with 14 additions and 3 deletions

View File

@ -5,6 +5,12 @@
--background-radial-percent: 70%; --background-radial-percent: 70%;
} }
@keyframes pulseGlow {
0% { box-shadow: 0 0 10px rgba(0,255,255,0.4); }
50% { box-shadow: 0 0 18px rgba(0,255,255,0.7); }
100% { box-shadow: 0 0 10px rgba(0,255,255,0.4); }
}
body { body {
background: #141E30; /* fallback for old browsers */ background: #141E30; /* fallback for old browsers */
background: hsla(0, 0%, 0%, 1); background: hsla(0, 0%, 0%, 1);
@ -32,7 +38,13 @@ body {
background: -webkit-linear-gradient(to right, #3c1053, #ad5389); /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(to right, #3c1053, #ad5389); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* border: .5px solid #bebcbc76; subtle outer border */ border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow:
0 0 12px rgba(0, 255, 255, 0.4),
0 0 24px rgba(150, 0, 255, 0.25),
inset 0 0 12px rgba(255, 255, 255, 0.1);
border-radius: 8px; /* optional, looks more "techno" */
animation: pulseGlow 3.5s ease-in-out infinite;
} }
.audiowide-regular { .audiowide-regular {
@ -85,8 +97,7 @@ h1 {
.cell { .cell {
width: var(--cell-size); width: var(--cell-size);
height: var(--cell-size); height: var(--cell-size);
border: 1px solid rgba(255, 255, 255, 0.07);
border: .25px solid rgba(222, 219, 219, 0.281); /* light subtle grid lines */
box-sizing: border-box; /* ensures borders don't expand cells */ box-sizing: border-box; /* ensures borders don't expand cells */
} }