fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Back-to-top-Button: erscheint nach 1,5 Viewporthöhen, Fokus-Management, reduced-motion, 48px-Ziel

Browse Source 
Enthält auch User-Upgrade: JSON-LD als @graph mit seitenspezifischen Extra-Knoten

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-06-11 23:00:03 +02:00
parent 557fe1c16b
commit 259e209692
6 changed files with 252 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/components/jsonld.php
View File

@@ -3,13 +3,19 @@
declare(strict_types=1); declare(strict_types=1);
/** /**
* SportsClub-Schema aus data/club.json — auf jeder Seite identisch (NAP-Konsistenz für SEO/GEO). * JSON-LD als ein @graph. Der SportsClub-Knoten (aus data/club.json) ist auf jeder
* Seite identisch (NAP-Konsistenz für SEO/GEO) und hat eine feste @id, auf die
* seitenspezifische Knoten verweisen.
* Props:
* $extra array — zusätzliche Graph-Knoten der Seite (z. B. SportsTeam, FAQPage,
* BreadcrumbList), gebaut via team_schema()/page_schema().
*/ */
$club = json_load('club'); $club = json_load('club');
$clubId = abs_url() . '#club';
$schema = [ $clubNode = [
'@context' => 'https://schema.org',
'@type' => 'SportsClub', '@type' => 'SportsClub',
'@id' => $clubId,
'name' => $club['name'], 'name' => $club['name'],
'alternateName' => $club['legal_name'], 'alternateName' => $club['legal_name'],
'foundingDate' => $club['founded'], 'foundingDate' => $club['founded'],
@@ -27,5 +33,10 @@ $schema = [
], ],
'sameAs' => array_values(array_filter($club['social'])), 'sameAs' => array_values(array_filter($club['social'])),
]; ];
$graph = [
'@context' => 'https://schema.org',
'@graph' => array_merge([$clubNode], $extra ?? []),
];
?> ?>
<script type="application/ld+json"><?= json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?></script> <script type="application/ld+json"><?= json_encode($graph, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?></script>

4
app/components/meta.php
View File

@@ -16,7 +16,7 @@ if (empty($meta['title_absolute'])) {
$description = $meta['description'] ?? $club['description']; $description = $meta['description'] ?? $club['description'];
$canonical = abs_url($current === '404' ? '' : $current); $canonical = abs_url($current === '404' ? '' : $current);
$ogImage = rtrim((string) config('base_url'), '/') . '/assets/' . ltrim($meta['og_image'] ?? 'img/og-default.jpg', '/'); $ogImage = rtrim((string) config('base_url'), '/') . '/assets/' . ltrim($meta['og_image'] ?? 'img/og-default.jpg', '/');
$scripts = array_merge(['nav.js'], $meta['scripts'] ?? []); $scripts = array_merge(['nav.js', 'back-to-top.js'], $meta['scripts'] ?? []);
?> ?>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -49,4 +49,4 @@ $scripts = array_merge(['nav.js'], $meta['scripts'] ?? []);
<?php foreach ($scripts as $js): ?> <?php foreach ($scripts as $js): ?>
<script defer src="<?= e(asset("js/{$js}")) ?>"></script> <script defer src="<?= e(asset("js/{$js}")) ?>"></script>
<?php endforeach; ?> <?php endforeach; ?>
<?php component('jsonld'); ?> <?php component('jsonld', ['extra' => $meta['schema'] ?? []]); ?>

5
app/layout.php
View File

@@ -14,9 +14,12 @@ declare(strict_types=1);
<body> <body>
<a class="skip-link" href="#main">Zum Inhalt springen</a> <a class="skip-link" href="#main">Zum Inhalt springen</a>
<?php component('header', ['current' => $current]); ?> <?php component('header', ['current' => $current]); ?>
<main id="main"> <main id="main" tabindex="-1">
<?= $content ?> <?= $content ?>
</main> </main>
<?php component('footer'); ?> <?php component('footer'); ?>
<a class="back-to-top" href="#main" hidden>
<?= icon('arrow-up') ?><span class="visually-hidden">Zurück nach oben</span>
</a>
</body> </body>
</html> </html>

203
public/assets/css/layout.css
View File

@@ -86,6 +86,111 @@
border-bottom-color: var(--clr-accent); border-bottom-color: var(--clr-accent);
} }
/* --- Dropdown-Untermenü --- */
.site-nav__item--has-submenu {
position: relative;
}
/* Unsichtbare Brücke über die Lücke zwischen Trigger und Menü: hält den :hover
durchgehend, damit das Dropdown beim Rüberfahren nicht sofort schließt. */
.site-nav__item--has-submenu:hover::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 15rem;
max-width: 90vw;
height: 0.85rem;
}
/* Dropdown-Trigger sieht aus wie die übrigen Nav-Links (ist aber ein <button>). */
.site-nav__sublink {
display: inline-flex;
align-items: center;
gap: 0.3em;
margin: 0;
padding: 0.25em 0;
font: inherit;
color: var(--clr-text);
background: none;
border: 0;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: border-color var(--transition);
}
.site-nav__sublink:hover,
.site-nav__sublink[data-current],
.site-nav__item--has-submenu:focus-within > .site-nav__sublink {
border-bottom-color: var(--clr-accent);
}
.site-nav__chevron {
font-size: 0.7em;
transition: transform var(--transition);
}
.site-nav__item--has-submenu:hover .site-nav__chevron,
.site-nav__item--has-submenu:focus-within .site-nav__chevron,
.site-nav__sublink[aria-expanded="true"] .site-nav__chevron {
transform: rotate(180deg);
}
.site-nav__submenu {
position: absolute;
top: calc(100% + 0.4rem);
left: 50%;
transform: translateX(-50%);
z-index: 25;
display: grid;
gap: 0.35rem;
min-width: 13rem;
margin: 0;
padding: 0.6rem;
list-style: none;
background: var(--clr-bg-deep);
border: 1px solid var(--clr-glass-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
/* Clippt die Hover-Flächen sauber an den abgerundeten Ecken (kein Überstehen). */
overflow: hidden;
/* Sanftes Einblenden statt hartem display-Wechsel (animierbar). */
opacity: 0;
visibility: hidden;
transition: opacity var(--transition), top var(--transition), visibility var(--transition);
}
.site-nav__item--has-submenu:hover > .site-nav__submenu,
.site-nav__item--has-submenu:focus-within > .site-nav__submenu,
.site-nav__sublink[aria-expanded="true"] + .site-nav__submenu {
opacity: 1;
visibility: visible;
top: calc(100% + 0.75rem);
}
.site-nav__list .site-nav__submenu a:not(.btn) {
display: block;
padding: 0.6rem 0.85rem;
border-bottom: 0;
border-radius: var(--radius-btn);
font-size: var(--fs-500);
line-height: 1.25;
white-space: nowrap;
transition: background var(--transition), color var(--transition);
}
.site-nav__list .site-nav__submenu a:not(.btn):hover,
.site-nav__list .site-nav__submenu a:not(.btn):focus-visible {
border-bottom: 0;
background: rgb(var(--clr-accent-rgb) / 0.16);
}
.site-nav__list .site-nav__submenu a:not(.btn)[aria-current="page"] {
border-bottom: 0;
background: rgb(var(--clr-accent-rgb) / 0.24);
}
@media (max-width: 1249px) { @media (max-width: 1249px) {
/* Mobile: Logo links, CTAs + Burger rechts */ /* Mobile: Logo links, CTAs + Burger rechts */
.site-header__inner { .site-header__inner {
@@ -172,6 +277,41 @@
text-transform: uppercase; text-transform: uppercase;
} }
/* Dropdown im Overlay: Trigger wie die anderen Punkte, Untermenü inline darunter. */
.site-nav__sublink {
font-family: var(--ff-heading);
font-size: var(--fs-700);
text-transform: uppercase;
justify-content: center;
}
/* Im Overlay inline einklappen — display statt visibility, sonst bliebe Platz reserviert. */
.site-nav__submenu {
position: static;
transform: none;
display: none;
opacity: 1;
visibility: visible;
gap: 0.25rem;
min-width: 0;
margin: 0.75rem 0 0;
padding: 0;
background: none;
border: 0;
box-shadow: none;
text-align: center;
}
.site-nav__item--has-submenu:focus-within > .site-nav__submenu,
.site-nav__sublink[aria-expanded="true"] + .site-nav__submenu {
display: grid;
}
.site-nav__list .site-nav__submenu a:not(.btn) {
font-size: var(--fs-600);
color: var(--clr-text-muted);
}
body.nav-open .site-nav__list { body.nav-open .site-nav__list {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
@@ -188,13 +328,8 @@
} }
} }
/* CTAs im Overlay-Menü: nur auf schmalen Screens (dort fehlen sie im Header) */
.site-nav__cta {
display: none;
}
@media (max-width: 600px) { @media (max-width: 600px) {
/* Schmale Screens: nur der primäre (letzte) CTA neben dem Burger */ /* Schmale Screens: CTA(s) kompakter neben dem Burger. */
.site-header__actions a:not(:last-child) { .site-header__actions a:not(:last-child) {
display: none; display: none;
} }
@@ -203,15 +338,50 @@
font-size: var(--fs-400); font-size: var(--fs-400);
padding: 8px 14px; padding: 8px 14px;
} }
}
/* Im offenen Menü übernehmen die Overlay-CTAs */ /* --- Back-to-top --- */
.site-nav__cta { .back-to-top {
display: block; position: fixed;
margin-top: 1rem; right: 1.25rem;
} bottom: 1.25rem;
z-index: 15;
body.nav-open .site-header__actions { display: grid;
place-items: center;
width: 48px;
height: 48px;
color: var(--clr-text);
font-size: 1.25rem;
background: rgb(10 10 10 / 0.82);
border: 1px solid var(--clr-glass-border-strong);
border-radius: 50%;
backdrop-filter: blur(6px);
/* Unsichtbar, bis genug gescrollt wurde (is-visible via JS) */
opacity: 0;
visibility: hidden; visibility: hidden;
translate: 0 10px;
transition: opacity var(--transition), visibility var(--transition), translate var(--transition), background var(--transition);
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
translate: 0 0;
}
.back-to-top:hover {
background: var(--clr-accent);
border-color: var(--clr-accent);
}
.back-to-top:focus-visible {
outline: 2px solid var(--clr-text);
outline-offset: 3px;
}
@media print {
.back-to-top {
display: none;
} }
} }
@@ -354,3 +524,10 @@
.site-footer__bottom-inner p { .site-footer__bottom-inner p {
margin: 0; margin: 0;
} }
/* Verbände-Zeile bleibt ab Tablet-Breite einzeilig (wrappt als Ganzes in die nächste Reihe) */
@media (min-width: 768px) {
.site-footer__memberships {
white-space: nowrap;
}
}

1
public/assets/icons/arrow-up.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 239 B

40
public/assets/js/back-to-top.js Normal file
View File

@@ -0,0 +1,40 @@
/* Back-to-top: erscheint nach ~1,5 Viewporthöhen Scrolltiefe.
Sanftes Scrollen kommt aus dem CSS (scroll-behavior + reduced-motion-Kill-Switch);
JS übernimmt Sichtbarkeit und Fokus-Management. Ohne JS bleibt der Button hidden. */
(function () {
'use strict';
var button = document.querySelector('.back-to-top');
var main = document.getElementById('main');
if (!button || !main) {
return;
}
button.hidden = false;
var ticking = false;
function update() {
button.classList.toggle('is-visible', window.scrollY > window.innerHeight * 1.5);
ticking = false;
}
window.addEventListener('scroll', function () {
if (!ticking) {
ticking = true;
window.requestAnimationFrame(update);
}
}, { passive: true });
update();
// Deep-Link-Einstiege (#anker): Sprung passiert teils vor dem Listener-Setup.
window.addEventListener('load', update);
button.addEventListener('click', function (event) {
event.preventDefault();
var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
window.scrollTo({ top: 0, behavior: reduced ? 'auto' : 'smooth' });
// Fokus an den Seitenanfang mitnehmen (Tastatur/Screenreader).
main.focus({ preventScroll: true });
});
})();