add fading in/out background glow and lighter gridlines.
This commit is contained in:
parent
c58a03e611
commit
8cebfb54ab
|
|
@ -5,6 +5,12 @@
|
|||
--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 {
|
||||
background: #141E30; /* fallback for old browsers */
|
||||
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: 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 {
|
||||
|
|
@ -85,8 +97,7 @@ h1 {
|
|||
.cell {
|
||||
width: var(--cell-size);
|
||||
height: var(--cell-size);
|
||||
|
||||
border: .25px solid rgba(222, 219, 219, 0.281); /* light subtle grid lines */
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
box-sizing: border-box; /* ensures borders don't expand cells */
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue