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%;
|
--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 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue