Battlesnake/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add enhanced blue neon light effect to BATTLESNAKE in hero section

Browse source
This commit is contained in:
Anton Kupriianov 2025-05-02 14:37:44 -07:00
parent bf1836b867
commit 3505ce087f
2 changed files with 21 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/scss/components/_hero.scss
View file

@ -179,21 +179,24 @@ $cyber-black: #1a1a1a;
// Title styling
&-title {
font-size: 3.5rem;
font-size: 5rem;
font-weight: bold;
color: white;
margin-bottom: 1rem;
letter-spacing: 4px;
text-shadow: 0 0 10px rgba($neon-blue, 0.7);
text-shadow: 0 0 10px rgba($neon-blue, 0.7), 0 0 20px rgba($neon-blue, 0.7),
0 0 30px rgba($neon-blue, 0.7);
animation: flicker 3s infinite alternate;
&-highlight {
font-size: 5rem;
color: $neon-pink;
text-shadow: 0 0 10px rgba($neon-pink, 0.7);
text-shadow: 0 0 10px rgba($neon-pink, 0.7),
0 0 20px rgba($neon-pink, 0.7), 0 0 30px rgba($neon-pink, 0.7);
}
@media (max-width: 768px) {
font-size: 2.5rem;
font-size: 5rem;
}
}
@ -231,7 +234,7 @@ $cyber-black: #1a1a1a;
height: auto;
border-radius: 8px;
filter: drop-shadow(0 0 10px rgba($neon-blue, 0.7))
drop-shadow(0 0 20px rgba($neon-purple, 0.5));
drop-shadow(0 0 20px rgba($neon-purple, 1));
animation: pulse 4s ease-in-out infinite;
z-index: 2;
}
@ -317,7 +320,7 @@ $cyber-black: #1a1a1a;
left: 0;
width: 100%;
height: 100%;
background-color: rgba($neon-pink, 0.2);
background-color: rgba($neon-pink, 0.5);
opacity: 0;
z-index: 1;

3
src/scss/components/_navbar.scss
View file

@ -7,7 +7,7 @@ $dark-bg: #0d0221;
$cyber-black: #1a1a1a;
// Breakpoints
$mobile-breakpoint: 768px;
$mobile-breakpoint: 1160px;
@keyframes scanline {
0% {
@ -202,6 +202,7 @@ $mobile-breakpoint: 768px;
background-color: rgba($dark-bg, 0.7);
&-text {
font-size: 2rem;
color: white;
letter-spacing: 2px;
animation: neon-flicker 5s infinite alternate;