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

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

@ -93,7 +93,7 @@ $cyber-black: #1a1a1a;
margin-top: 0; margin-top: 0;
background-color: $dark-bg; background-color: $dark-bg;
overflow: hidden; overflow: hidden;
// Matrix digital rain canvas // Matrix digital rain canvas
.matrix-rain { .matrix-rain {
position: absolute; position: absolute;
@ -154,7 +154,7 @@ $cyber-black: #1a1a1a;
padding: 2rem; padding: 2rem;
// Add a subtle backdrop filter to make content more readable against the matrix rain // Add a subtle backdrop filter to make content more readable against the matrix rain
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
@media (max-width: 768px) { @media (max-width: 768px) {
flex-direction: column-reverse; flex-direction: column-reverse;
gap: 2rem; gap: 2rem;
@ -169,34 +169,37 @@ $cyber-black: #1a1a1a;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
padding-right: 2rem; padding-right: 2rem;
@media (max-width: 768px) { @media (max-width: 768px) {
align-items: center; align-items: center;
text-align: center; text-align: center;
padding-right: 0; padding-right: 0;
} }
} }
// Title styling // Title styling
&-title { &-title {
font-size: 3.5rem; font-size: 5rem;
font-weight: bold; font-weight: bold;
color: white; color: white;
margin-bottom: 1rem; margin-bottom: 1rem;
letter-spacing: 4px; 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; animation: flicker 3s infinite alternate;
&-highlight { &-highlight {
font-size: 5rem;
color: $neon-pink; 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) { @media (max-width: 768px) {
font-size: 2.5rem; font-size: 5rem;
} }
} }
// Subtitle styling // Subtitle styling
&-subtitle { &-subtitle {
font-size: 1.2rem; font-size: 1.2rem;
@ -205,12 +208,12 @@ $cyber-black: #1a1a1a;
max-width: 500px; max-width: 500px;
line-height: 1.6; line-height: 1.6;
letter-spacing: 1px; letter-spacing: 1px;
@media (max-width: 768px) { @media (max-width: 768px) {
font-size: 1rem; font-size: 1rem;
} }
} }
// Logo styling // Logo styling
&-logo-container { &-logo-container {
position: relative; position: relative;
@ -219,7 +222,7 @@ $cyber-black: #1a1a1a;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
max-width: 50%; max-width: 50%;
@media (max-width: 768px) { @media (max-width: 768px) {
max-width: 80%; max-width: 80%;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -231,7 +234,7 @@ $cyber-black: #1a1a1a;
height: auto; height: auto;
border-radius: 8px; border-radius: 8px;
filter: drop-shadow(0 0 10px rgba($neon-blue, 0.7)) 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; animation: pulse 4s ease-in-out infinite;
z-index: 2; z-index: 2;
} }
@ -317,7 +320,7 @@ $cyber-black: #1a1a1a;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba($neon-pink, 0.2); background-color: rgba($neon-pink, 0.5);
opacity: 0; opacity: 0;
z-index: 1; z-index: 1;

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

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