interkollektives/lichterei-web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance CSS: magnetic menu hover text, home grid captions, responsive improvements

Browse Source
This commit is contained in:
Robert Rapp
2026-08-30 00:40:20 +02:00
parent 3012e5b994
commit 823f04fc05
108 changed files with 1977 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
site/snippets/header.php
View File

@@ -49,39 +49,86 @@
?>
<link rel="shortcut icon" type="image/x-icon" href="<?= url('favicon.ico') ?>">
</head>
<body>
<body class="<?= $page->isHomePage() ? 'is-home' : 'is-subpage has-top-menu' ?>">
<header class="header">
<?php
/*
We use `$site->url()` to create a link back to the homepage
for the logo and `$site->title()` as a temporary logo. You
probably want to replace this with an SVG.
*/
?>
<a class="logo" href="<?= $site->url() ?>">
<?= $site->title()->esc() ?>
</a>
<?php
$currentLanguage = kirby()->language();
$languages = kirby()->languages();
$languageCode = $currentLanguage?->code() ?? 'en';
$blackoutText = $languageCode === 'de'
? 'Wer hat den Lichtschalter berührt?'
: 'Who touched the light switch?';
$languageSwitch = null;
if ($currentLanguage && $languages->count() > 1) {
foreach ($languages as $languageOption) {
if ($languageOption->code() !== $languageCode) {
$languageSwitch = $languageOption;
break;
}
}
}
?>
<nav class="menu">
<?php
/*
In the menu, we only fetch listed pages,
i.e. the pages that have a prepended number
in their foldername.
<div class="blackout-overlay" data-blackout-overlay>
<p><?= esc($blackoutText) ?></p>
</div>
<?php if ($languageSwitch): ?>
<a class="language-toggle" href="<?= $page->url($languageSwitch->code()) ?>" aria-label="Switch language to <?= $languageSwitch->name() ?>">
<span aria-hidden="true">🌐</span>
<span><?= strtoupper($languageSwitch->code()) ?></span>
</a>
<?php endif ?>
We do not want to display links to unlisted
`error`, `home`, or `sandbox` pages.
More about page status:
https://getkirby.com/docs/reference/panel/blueprints/page#statuses
*/
?>
<?php foreach ($site->children()->listed() as $item): ?>
<a <?php e($item->isOpen(), 'aria-current="page"') ?> href="<?= $item->url() ?>"><?= $item->title()->esc() ?></a>
<?php endforeach ?>
<?php snippet('social') ?>
</nav>
</header>
<?php
$menuPages = $site->children()->listed()->limit(3);
$menuImageMap = [
'home' => 'hugger.png',
'photography' => 'PXL_20251120_000355748.PORTRAIT.ORIGINAL_1.jpg',
];
$slots = 3;
?>
<section class="magnetic-menu" aria-label="Site navigation">
<div class="magnetic-menu__inner" data-magnetic-menu>
<?php for ($i = 0; $i < $slots; $i++): ?>
<?php
$item = $menuPages->nth($i);
$label = $item ? $item->title()->value() : 'Secret Spot ' . ($i + 1);
$safeLabel = esc($label);
$repeatText = mb_strtoupper($label) . ' • ';
$circleText = str_repeat($repeatText, 8);
$pathId = 'circlePath-' . $i;
$imageFile = $menuImageMap[$item?->id()] ?? 'hugger.png';
$imageUrl = url('media/' . $imageFile);
?>
<?php if ($item): ?>
<a
class="magnetic-menu__item"
href="<?= $item->url() ?>"
data-index="<?= $i ?>"
>
<?php else: ?>
<div class="magnetic-menu__item is-placeholder" data-index="<?= $i ?>" aria-hidden="true">
<?php endif ?>
<div class="magnetic-menu__image">
<img src="<?= $imageUrl ?>" alt="<?= $safeLabel ?>">
</div>
<svg class="magnetic-menu__circle" viewBox="0 -5 100 113" preserveAspectRatio="xMidYMid meet" aria-hidden="true" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="<?= $pathId ?>" d="M50 50 m -45, 0 a 45,45 0 1,1 90,0 a 45,45 0 1,1 -90,0"></path>
</defs>
<text>
<textPath startOffset="0" xlink:href="#<?= $pathId ?>" href="#<?= $pathId ?>">
<?= esc($circleText) ?>
</textPath>
</text>
</svg>
<?php if ($item): ?>
</a>
<?php else: ?>
</div>
<?php endif ?>
<?php endfor ?>
</div>
</section>
<main class="main">