fix: Cluster größer + Hover-Ring an Außenknoten (v1.6.1)
- Hint-Text „Knoten klicken — direkt zur Leistung" entfernt - Cluster ~25 % vergroessert (viewBox 880x690 statt 700x550, alle Koordinaten und Radien proportional skaliert; node-Radien 30/18 statt 24/14, ring r 55 statt 44) - Neuer .hover-ring pro Aussenknoten: initial unsichtbar, wird beim Hover oder Tastatur-Focus sichtbar und pulsiert exakt wie der Center-Ring (scale 1.0 → 1.35, stroke-opacity 0.7 → 0.15, 1.6s ease-in-out) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -73,4 +73,4 @@ Statische Dateien direkt auf Nginx ausliefern. Kein Build-Step notwendig.
|
||||
|
||||
---
|
||||
|
||||
*Zuletzt aktualisiert: Mai 2026 — v1.6.0 (Hero im Goldenen Schnitt, Cluster als Service-Picker)*
|
||||
*Zuletzt aktualisiert: Mai 2026 — v1.6.1 (Cluster vergrößert, Hover-Ring an Außenknoten)*
|
||||
|
||||
@@ -168,6 +168,30 @@ html {
|
||||
50% { transform: scale(1.18); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Hover-Ring um Aussenknoten — analog zum Center-Ring, aber nur waehrend Hover/Focus.
|
||||
Initial unsichtbar; beim Hover wird er sichtbar und pulsiert. */
|
||||
.hover-ring {
|
||||
fill: none;
|
||||
stroke: #DEDC1E;
|
||||
stroke-width: 1.8;
|
||||
stroke-opacity: 0;
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
transition: stroke-opacity 0.2s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cluster-link:hover .hover-ring,
|
||||
.cluster-link:focus-visible .hover-ring {
|
||||
stroke-opacity: 0.7;
|
||||
animation: hover-ring-pulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes hover-ring-pulse {
|
||||
0%, 100% { transform: scale(1); stroke-opacity: 0.7; }
|
||||
50% { transform: scale(1.35); stroke-opacity: 0.15; }
|
||||
}
|
||||
|
||||
/* Klickflaeche: unsichtbarer groesserer Kreis (bessere Mausziel-Groesse) */
|
||||
.node-hit {
|
||||
fill: transparent;
|
||||
@@ -204,6 +228,7 @@ html {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.logo-cluster line,
|
||||
.cluster-ring,
|
||||
.hover-ring,
|
||||
.node { animation: none !important; }
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -208,7 +208,7 @@
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<p class="text-ci-gray text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
||||
<span class="text-ci-gray/60 text-xs">v1.6.0</span>
|
||||
<span class="text-ci-gray/60 text-xs">v1.6.1</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>
|
||||
|
||||
+1
-1
@@ -91,7 +91,7 @@
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<p class="text-ci-gray text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
||||
<span class="text-ci-gray/60 text-xs">v1.6.0</span>
|
||||
<span class="text-ci-gray/60 text-xs">v1.6.1</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="impressum.html" class="text-sonith text-sm">Impressum</a>
|
||||
|
||||
+30
-25
@@ -161,60 +161,65 @@
|
||||
</div>
|
||||
|
||||
<!-- Cluster-Spalte (1 fr) — Sonith-Logo-Stern als interaktiver Service-Picker.
|
||||
Jeder Knoten ist ein Anker zu seiner Leistungs-Karte. -->
|
||||
Jeder Knoten ist ein Anker zu seiner Leistungs-Karte; jeder Aussenknoten
|
||||
erhaelt beim Hover einen pulsierenden Ring analog zum Center. -->
|
||||
<div class="cluster-wrapper relative">
|
||||
<svg class="hero-cluster w-full h-auto" viewBox="0 0 700 550" aria-label="Leistungsuebersicht: klicken Sie einen Knoten, um zur entsprechenden Leistung zu springen">
|
||||
<!-- Strahlenfoermige Linien vom Center -->
|
||||
<svg class="hero-cluster w-full h-auto" viewBox="0 0 880 690" aria-label="Leistungsuebersicht: klicken Sie einen Knoten, um zur entsprechenden Leistung zu springen">
|
||||
<g class="logo-cluster">
|
||||
<line x1="250" y1="280" x2="138" y2="136"/>
|
||||
<line x1="250" y1="280" x2="406" y2="142"/>
|
||||
<line x1="250" y1="280" x2="616" y2="275"/>
|
||||
<line x1="250" y1="280" x2="88" y2="282"/>
|
||||
<line x1="250" y1="280" x2="261" y2="399"/>
|
||||
<!-- Strahlenfoermige Linien vom Center zu den Aussenknoten -->
|
||||
<line x1="313" y1="350" x2="172" y2="170"/>
|
||||
<line x1="313" y1="350" x2="508" y2="178"/>
|
||||
<line x1="313" y1="350" x2="770" y2="344"/>
|
||||
<line x1="313" y1="350" x2="110" y2="352"/>
|
||||
<line x1="313" y1="350" x2="326" y2="499"/>
|
||||
|
||||
<!-- Pulsierender Ring (Logo-Markenzeichen) -->
|
||||
<circle class="cluster-ring" cx="250" cy="280" r="44"/>
|
||||
<!-- Pulsierender Ring um Center (Logo-Markenzeichen) -->
|
||||
<circle class="cluster-ring" cx="313" cy="350" r="55"/>
|
||||
|
||||
<!-- Center-Knoten = Managed Services (Hauptleistung) -->
|
||||
<a href="#service-managed-services" class="cluster-link">
|
||||
<title>Managed Services</title>
|
||||
<circle class="node node-center" cx="250" cy="280" r="24"/>
|
||||
<circle class="node-hit" cx="250" cy="280" r="38"/>
|
||||
<circle class="node node-center" cx="313" cy="350" r="30"/>
|
||||
<circle class="node-hit" cx="313" cy="350" r="50"/>
|
||||
</a>
|
||||
|
||||
<!-- Außenknoten — jeder verlinkt eine Leistungs-Karte -->
|
||||
<!-- Aussenknoten: hover-ring (versteckt) + node + unsichtbare Hit-Area -->
|
||||
<a href="#service-erp" class="cluster-link">
|
||||
<title>ERP-Systeme</title>
|
||||
<circle class="node" cx="138" cy="136" r="14"/>
|
||||
<circle class="node-hit" cx="138" cy="136" r="26"/>
|
||||
<circle class="hover-ring" cx="172" cy="170" r="30"/>
|
||||
<circle class="node" cx="172" cy="170" r="18"/>
|
||||
<circle class="node-hit" cx="172" cy="170" r="32"/>
|
||||
</a>
|
||||
|
||||
<a href="#service-backup" class="cluster-link">
|
||||
<title>Managed Backup</title>
|
||||
<circle class="node" cx="406" cy="142" r="14"/>
|
||||
<circle class="node-hit" cx="406" cy="142" r="26"/>
|
||||
<circle class="hover-ring" cx="508" cy="178" r="30"/>
|
||||
<circle class="node" cx="508" cy="178" r="18"/>
|
||||
<circle class="node-hit" cx="508" cy="178" r="32"/>
|
||||
</a>
|
||||
|
||||
<a href="#service-hosting" class="cluster-link">
|
||||
<title>Hosting</title>
|
||||
<circle class="node" cx="616" cy="275" r="14"/>
|
||||
<circle class="node-hit" cx="616" cy="275" r="26"/>
|
||||
<circle class="hover-ring" cx="770" cy="344" r="30"/>
|
||||
<circle class="node" cx="770" cy="344" r="18"/>
|
||||
<circle class="node-hit" cx="770" cy="344" r="32"/>
|
||||
</a>
|
||||
|
||||
<a href="#service-network" class="cluster-link">
|
||||
<title>Netzwerk & Infrastruktur</title>
|
||||
<circle class="node" cx="88" cy="282" r="14"/>
|
||||
<circle class="node-hit" cx="88" cy="282" r="26"/>
|
||||
<circle class="hover-ring" cx="110" cy="352" r="30"/>
|
||||
<circle class="node" cx="110" cy="352" r="18"/>
|
||||
<circle class="node-hit" cx="110" cy="352" r="32"/>
|
||||
</a>
|
||||
|
||||
<a href="#service-nextcloud" class="cluster-link">
|
||||
<title>Nextcloud</title>
|
||||
<circle class="node" cx="261" cy="399" r="14"/>
|
||||
<circle class="node-hit" cx="261" cy="399" r="26"/>
|
||||
<circle class="hover-ring" cx="326" cy="499" r="30"/>
|
||||
<circle class="node" cx="326" cy="499" r="18"/>
|
||||
<circle class="node-hit" cx="326" cy="499" r="32"/>
|
||||
</a>
|
||||
</g>
|
||||
</svg>
|
||||
<p class="cluster-hint text-center text-xs text-ci-gray/80 tracking-widest uppercase mt-4">Knoten klicken — direkt zur Leistung</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -526,7 +531,7 @@
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<p class="text-ci-gray text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
||||
<span class="text-ci-gray/60 text-xs">v1.6.0</span>
|
||||
<span class="text-ci-gray/60 text-xs">v1.6.1</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>
|
||||
|
||||
Reference in New Issue
Block a user