marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 style: update neural network background CSS for improved aesthetics

Browse Source
This commit is contained in:
Till Tomczak
2025-05-02 18:54:33 +02:00
parent a99f82d4cf
commit 54a5ccc224
1 changed files with 0 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
static/css/neural-network-background.css
View File

@@ -131,12 +131,10 @@ body:not(.dark) footer {
.dark .neural-network-bg .node { .dark .neural-network-bg .node {
fill: rgba(139, 92, 246, 0.4); fill: rgba(139, 92, 246, 0.4);
transition: fill 0.3s ease;
} }
.dark .neural-network-bg .link { .dark .neural-network-bg .link {
stroke: rgba(139, 92, 246, 0.15); stroke: rgba(139, 92, 246, 0.15);
transition: stroke 0.3s ease;
} }
/* Light Mode Netzwerk-Hintergrund */ /* Light Mode Netzwerk-Hintergrund */
@@ -146,72 +144,9 @@ body:not(.dark) .neural-network-container {
body:not(.dark) .neural-network-bg .node { body:not(.dark) .neural-network-bg .node {
fill: rgba(124, 58, 237, 0.35); fill: rgba(124, 58, 237, 0.35);
filter: drop-shadow(0 0 3px rgba(124, 58, 237, 0.2));
transition: all 0.3s ease;
}
body:not(.dark) .neural-network-bg .node:hover {
fill: rgba(124, 58, 237, 0.5);
filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.3));
} }
body:not(.dark) .neural-network-bg .link { body:not(.dark) .neural-network-bg .link {
stroke: rgba(124, 58, 237, 0.15); stroke: rgba(124, 58, 237, 0.15);
stroke-width: 1.25; stroke-width: 1.25;
filter: drop-shadow(0 0 1px rgba(124, 58, 237, 0.1));
transition: all 0.3s ease;
}
body:not(.dark) .neural-network-bg .link:hover {
stroke: rgba(124, 58, 237, 0.3);
stroke-width: 1.5;
}
/* Animationen für das Netzwerk */
@keyframes pulse {
0% { opacity: 0.7; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0); }
}
.neural-network-bg .node {
animation: pulse 3s infinite ease-in-out;
}
.neural-network-bg .link {
animation: pulse 4s infinite ease-in-out;
}
/* Speziell für den Light Mode leicht pulsierende Knoten */
body:not(.dark) .neural-network-bg .node {
animation: pulse 4s infinite ease-in-out, float 6s infinite ease-in-out;
animation-delay: calc(var(--node-index, 0) * 0.2s);
}
/* Responsives Verhalten */
@media (max-width: 768px) {
.neural-network-container {
opacity: 0.2; /* Auf mobilen Geräten etwas dezenter */
}
body:not(.dark) .neural-network-bg .link {
stroke-width: 1;
}
}
/* Hover-Effekte für Desktop-Geräte */
@media (min-width: 1024px) {
body:not(.dark) .neural-network-container:hover {
opacity: 0.35;
}
.dark .neural-network-container:hover {
opacity: 0.6;
}
} }