135 lines
4.1 KiB
PHP
135 lines
4.1 KiB
PHP
<?php
|
|
/*
|
|
Snippets are a great way to store code snippets for reuse
|
|
or to keep your templates clean.
|
|
|
|
This header snippet is reused in all templates.
|
|
It fetches information from the `site.txt` content file
|
|
and contains the site navigation.
|
|
|
|
More about snippets:
|
|
https://getkirby.com/docs/guide/templates/snippets
|
|
*/
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
|
|
<?php
|
|
/*
|
|
In the title tag we show the title of our
|
|
site and the title of the current page
|
|
*/
|
|
?>
|
|
<title><?= $site->title()->esc() ?> | <?= $page->title()->esc() ?></title>
|
|
|
|
<?php
|
|
/*
|
|
Stylesheets can be included using the `css()` helper.
|
|
Kirby also provides the `js()` helper to include script file.
|
|
More Kirby helpers: https://getkirby.com/docs/reference/templates/helpers
|
|
*/
|
|
?>
|
|
<?= css([
|
|
'assets/css/prism.css',
|
|
'assets/css/lightbox.css',
|
|
'assets/css/index.css',
|
|
'@auto'
|
|
]) ?>
|
|
|
|
<?php
|
|
/*
|
|
The `url()` helper is a great way to create reliable
|
|
absolute URLs in Kirby that always start with the
|
|
base URL of your site.
|
|
*/
|
|
?>
|
|
<link rel="shortcut icon" type="image/x-icon" href="<?= url('favicon.ico') ?>">
|
|
</head>
|
|
<body class="<?= $page->isHomePage() ? 'is-home' : 'is-subpage has-top-menu' ?>">
|
|
|
|
<?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;
|
|
}
|
|
}
|
|
}
|
|
?>
|
|
|
|
<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 ?>
|
|
|
|
<?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">
|