techadmin/sonith-website
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: Cluster größer + Hover-Ring an Außenknoten (v1.6.1)

Browse Source 
- 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:
Dominik Höfling
2026-05-05 00:24:34 +02:00
parent 57039e188b
commit 4b95cd1c58
5 changed files with 58 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CLAUDE.md
+1 -1
View File
@@ -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)*
css/style.css
+25
View File
@@ -168,6 +168,30 @@ html {
50% { transform: scale(1.18); opacity: 1; } 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) */ /* Klickflaeche: unsichtbarer groesserer Kreis (bessere Mausziel-Groesse) */
.node-hit { .node-hit {
fill: transparent; fill: transparent;
@@ -204,6 +228,7 @@ html {
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.logo-cluster line, .logo-cluster line,
.cluster-ring, .cluster-ring,
.hover-ring,
.node { animation: none !important; } .node { animation: none !important; }
} }
datenschutz.html
+1 -1
View File
@@ -208,7 +208,7 @@
<div class="flex flex-col sm:flex-row items-center justify-between gap-4"> <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p> <p class="text-ci-gray text-sm">&copy; 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>
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a> <a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>
impressum.html
+1 -1
View File
@@ -91,7 +91,7 @@
<div class="flex flex-col sm:flex-row items-center justify-between gap-4"> <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p> <p class="text-ci-gray text-sm">&copy; 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>
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<a href="impressum.html" class="text-sonith text-sm">Impressum</a> <a href="impressum.html" class="text-sonith text-sm">Impressum</a>
index.html
+30 -25
View File
@@ -161,60 +161,65 @@
</div> </div>
<!-- Cluster-Spalte (1 fr) — Sonith-Logo-Stern als interaktiver Service-Picker. <!-- 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"> <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"> <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">
<!-- Strahlenfoermige Linien vom Center -->
<g class="logo-cluster"> <g class="logo-cluster">
<line x1="250" y1="280" x2="138" y2="136"/> <!-- Strahlenfoermige Linien vom Center zu den Aussenknoten -->
<line x1="250" y1="280" x2="406" y2="142"/> <line x1="313" y1="350" x2="172" y2="170"/>
<line x1="250" y1="280" x2="616" y2="275"/> <line x1="313" y1="350" x2="508" y2="178"/>
<line x1="250" y1="280" x2="88" y2="282"/> <line x1="313" y1="350" x2="770" y2="344"/>
<line x1="250" y1="280" x2="261" y2="399"/> <line x1="313" y1="350" x2="110" y2="352"/>
<line x1="313" y1="350" x2="326" y2="499"/>
<!-- Pulsierender Ring (Logo-Markenzeichen) --> <!-- Pulsierender Ring um Center (Logo-Markenzeichen) -->
<circle class="cluster-ring" cx="250" cy="280" r="44"/> <circle class="cluster-ring" cx="313" cy="350" r="55"/>
<!-- Center-Knoten = Managed Services (Hauptleistung) --> <!-- Center-Knoten = Managed Services (Hauptleistung) -->
<a href="#service-managed-services" class="cluster-link"> <a href="#service-managed-services" class="cluster-link">
<title>Managed Services</title> <title>Managed Services</title>
<circle class="node node-center" cx="250" cy="280" r="24"/> <circle class="node node-center" cx="313" cy="350" r="30"/>
<circle class="node-hit" cx="250" cy="280" r="38"/> <circle class="node-hit" cx="313" cy="350" r="50"/>
</a> </a>
<!-- Außenknoten — jeder verlinkt eine Leistungs-Karte --> <!-- Aussenknoten: hover-ring (versteckt) + node + unsichtbare Hit-Area -->
<a href="#service-erp" class="cluster-link"> <a href="#service-erp" class="cluster-link">
<title>ERP-Systeme</title> <title>ERP-Systeme</title>
<circle class="node" cx="138" cy="136" r="14"/> <circle class="hover-ring" cx="172" cy="170" r="30"/>
<circle class="node-hit" cx="138" cy="136" r="26"/> <circle class="node" cx="172" cy="170" r="18"/>
<circle class="node-hit" cx="172" cy="170" r="32"/>
</a> </a>
<a href="#service-backup" class="cluster-link"> <a href="#service-backup" class="cluster-link">
<title>Managed Backup</title> <title>Managed Backup</title>
<circle class="node" cx="406" cy="142" r="14"/> <circle class="hover-ring" cx="508" cy="178" r="30"/>
<circle class="node-hit" cx="406" cy="142" r="26"/> <circle class="node" cx="508" cy="178" r="18"/>
<circle class="node-hit" cx="508" cy="178" r="32"/>
</a> </a>
<a href="#service-hosting" class="cluster-link"> <a href="#service-hosting" class="cluster-link">
<title>Hosting</title> <title>Hosting</title>
<circle class="node" cx="616" cy="275" r="14"/> <circle class="hover-ring" cx="770" cy="344" r="30"/>
<circle class="node-hit" cx="616" cy="275" r="26"/> <circle class="node" cx="770" cy="344" r="18"/>
<circle class="node-hit" cx="770" cy="344" r="32"/>
</a> </a>
<a href="#service-network" class="cluster-link"> <a href="#service-network" class="cluster-link">
<title>Netzwerk &amp; Infrastruktur</title> <title>Netzwerk &amp; Infrastruktur</title>
<circle class="node" cx="88" cy="282" r="14"/> <circle class="hover-ring" cx="110" cy="352" r="30"/>
<circle class="node-hit" cx="88" cy="282" r="26"/> <circle class="node" cx="110" cy="352" r="18"/>
<circle class="node-hit" cx="110" cy="352" r="32"/>
</a> </a>
<a href="#service-nextcloud" class="cluster-link"> <a href="#service-nextcloud" class="cluster-link">
<title>Nextcloud</title> <title>Nextcloud</title>
<circle class="node" cx="261" cy="399" r="14"/> <circle class="hover-ring" cx="326" cy="499" r="30"/>
<circle class="node-hit" cx="261" cy="399" r="26"/> <circle class="node" cx="326" cy="499" r="18"/>
<circle class="node-hit" cx="326" cy="499" r="32"/>
</a> </a>
</g> </g>
</svg> </svg>
<p class="cluster-hint text-center text-xs text-ci-gray/80 tracking-widest uppercase mt-4">Knoten klicken &mdash; direkt zur Leistung</p>
</div> </div>
</div> </div>
</div> </div>
@@ -526,7 +531,7 @@
<div class="flex flex-col sm:flex-row items-center justify-between gap-4"> <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p> <p class="text-ci-gray text-sm">&copy; 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>
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a> <a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>