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

56
site/snippets/footer.php
View File

@@ -13,28 +13,46 @@
<footer class="footer">
<div class="grid">
<div class="column" style="--columns: 8">
<h2><a href="https://getkirby.com">Made with Kirby</a></h2>
<p>
<?php
$homePage = page('home');
$footerImage = $homePage ? $homePage->image('Lichterei.png') : null;
?>
<?php
$language = kirby()->language()?->code() ?? 'en';
$blackoutMessage = $language === 'de'
? 'Wer hat den Lichtschalter berührt?'
: 'Who touched the light switch?';
?>
<div class="column footer-main footer-magnet" style="--columns: 8" data-footer-magnet>
<h2 class="footer-magnet" data-footer-magnet><a href="https://b.mindboost.team/media/">Made with fun.</a></h2>
<p class="blackout-message" data-blackout-message>
<?= esc($blackoutMessage) ?>
</p>
<p class="footer-magnet" data-footer-magnet>
<?php if ($footerImage): ?>
<img
class="footer-dim-image"
data-footer-magnet
data-brightness-index="0"
src="<?= $footerImage->url() ?>"
alt="<?= $footerImage->alt()->or('Lichterei') ?>"
>
<?php else: ?>
Kirby: the file-based CMS that adapts to any project, loved by developers and editors alike
<?php endif ?>
</p>
</div>
<div class="column" style="--columns: 2">
<h2>Pages</h2>
<ul>
<?php foreach ($site->children()->listed() as $example): ?>
<li><a href="<?= $example->url() ?>"><?= $example->title()->esc() ?></a></li>
<?php endforeach ?>
</ul>
</div>
<div class="column" style="--columns: 2">
<h2>Kirby</h2>
<ul>
<li><a href="https://getkirby.com">Website</a></li>
<li><a href="https://getkirby.com/docs">Docs</a></li>
<li><a href="https://forum.getkirby.com">Forum</a></li>
<li><a href="https://chat.getkirby.com">Chat</a></li>
<li><a href="https://github.com/getkirby">GitHub</a></li>
<?php
$secretHeading = $site->footerSecretsHeading()->or('Secrets');
$secretOne = $site->footerSecretOne()->or('Our source of inspiration');
$secretTwo = $site->footerSecretTwo()->or('The forbidden glow hacks');
$secretLink = 'https://b.mindboost.team/media';
?>
<div class="column secret-column footer-magnet" style="--columns: 4" data-footer-magnet>
<h2 class="footer-magnet" data-footer-magnet><?= esc($secretHeading) ?></h2>
<ul class="secret-links">
<li class="footer-magnet" data-footer-magnet><a class="secret-link" href="<?= $secretLink ?>"><?= esc($secretOne) ?></a></li>
<li class="footer-magnet" data-footer-magnet><a class="secret-link" href="<?= $secretLink ?>"><?= esc($secretTwo) ?></a></li>
</ul>
</div>
</div>

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">