diff --git a/assets/site.css b/assets/site.css index ffb9dc3..76ee547 100644 --- a/assets/site.css +++ b/assets/site.css @@ -196,7 +196,6 @@ svg { flex: none; } margin: 0; border-radius: 50%; background: var(--bg); - box-shadow: 0 0 0 var(--gap) var(--bg), 0 18px 50px rgba(25, 66, 66, .18); display: grid; place-items: center; transform: translate(-50%, -50%) scale(.9); opacity: 0; @@ -205,6 +204,19 @@ svg { flex: none; } .seal img { width: 94%; height: 94%; object-fit: contain; } @keyframes seal { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } +/* Ring um das Siegel mit runden Übergängen in die Kachel-Lücken (Form kommt aus site.js) */ +.seal-joint { + position: absolute; + left: 50%; top: 50%; + z-index: 4; + transform: translate(-50%, -50%); + fill: var(--bg); + pointer-events: none; + opacity: 0; + animation: fade .9s .35s var(--ease) forwards; +} +@keyframes fade { to { opacity: 1; } } + .scroll-hint { position: absolute; left: 50%; bottom: calc(var(--pad) + 14px); @@ -469,10 +481,10 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); } position: static; width: 210px; margin: 4px auto -6px; - box-shadow: none; transform: scale(.9); } @keyframes seal { to { opacity: 1; transform: none; } } + .seal-joint { display: none; } .scroll-hint { display: none; } .mosaic { gap: 12px; padding: 0 16px 16px; } .row { gap: 12px; } @@ -486,7 +498,7 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .tile, .seal { animation: none; opacity: 1; } + .tile, .seal, .seal-joint { animation: none; opacity: 1; } .tile { transform: none; } .seal { transform: translate(-50%, -50%); } .scroll-hint { animation: none; } diff --git a/assets/site.js b/assets/site.js index 3e7a965..53a26c4 100644 --- a/assets/site.js +++ b/assets/site.js @@ -24,6 +24,36 @@ }).observe(hero); } + // Ring um das Logo-Siegel: Kreis + die vier Kachel-Lücken, Übergänge mit Radius f abgerundet + const seal = document.querySelector('.seal'); + const joint = document.querySelector('.seal-joint'); + if (seal && joint) { + const drawJoint = () => { + const gap = parseFloat(getComputedStyle(seal.parentElement).columnGap) || 14; + const h = gap / 2; // halbe Lückenbreite + const R = seal.offsetWidth / 2 + gap; // Außenradius des Rings + const f = 18; // Radius der Rundung + const yd = Math.sqrt((R + f) ** 2 - (h + f) ** 2); + const k = R / (R + f); + const L = Math.ceil(R + f + 2); // Arme reichen bis zum Rand der Fläche + const rot = ([x, y], n) => { for (let i = 0; i < n; i++) [x, y] = [-y, x]; return [x + L, y + L]; }; + const pt = (p, n) => rot(p, n).map(v => v.toFixed(2)).join(' '); + let d = `M${pt([-(h + f) * k, -yd * k], 0)}`; + for (let n = 0; n < 4; n++) { + d += ` A${f} ${f} 0 0 0 ${pt([-h, -yd], n)}` + + ` L${pt([-h, -L], n)} L${pt([h, -L], n)} L${pt([h, -yd], n)}` + + ` A${f} ${f} 0 0 0 ${pt([(h + f) * k, -yd * k], n)}` + + ` A${R} ${R} 0 0 1 ${pt([-(h + f) * k, -yd * k], n + 1)}`; + } + joint.setAttribute('width', 2 * L); + joint.setAttribute('height', 2 * L); + joint.setAttribute('viewBox', `0 0 ${2 * L} ${2 * L}`); + joint.firstElementChild.setAttribute('d', d + ' Z'); + }; + drawJoint(); + addEventListener('resize', drawJoint); + } + // Elemente beim Scrollen einblenden const items = document.querySelectorAll('.reveal'); if ('IntersectionObserver' in window) { diff --git a/index.html b/index.html index 2f35bf4..8591a50 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,7 @@