Enhance CSS: magnetic menu hover text, home grid captions, responsive improvements
This commit is contained in:
@@ -30,3 +30,13 @@ columns:
|
||||
- about
|
||||
- home
|
||||
- default
|
||||
fields:
|
||||
footerSecretsHeading:
|
||||
label: Footer secrets heading
|
||||
type: text
|
||||
footerSecretOne:
|
||||
label: Footer secret one
|
||||
type: text
|
||||
footerSecretTwo:
|
||||
label: Footer secret two
|
||||
type: text
|
||||
|
||||
33
site/config/config.dev.php
Normal file
33
site/config/config.dev.php
Normal file
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* The config file is optional. It accepts a return array with config options
|
||||
* Note: Never include more than one return statement, all options go within this single return array
|
||||
* In this example, we set debugging to true, so that errors are displayed onscreen.
|
||||
* This setting must be set to false in production.
|
||||
* All config options: https://getkirby.com/docs/reference/system/options
|
||||
*/
|
||||
return [
|
||||
'debug' => true,
|
||||
'yaml.handler' => 'symfony', // already makes use of the more modern Symfony YAML parser: https://getkirby.com/docs/reference/system/options/yaml (will become the default in a future Kirby version)
|
||||
'url' => 'http://localhost:8080',
|
||||
'panel' => [
|
||||
'install' => true,
|
||||
'url' => 'http://localhost:8080',
|
||||
],
|
||||
'languages' => [
|
||||
[
|
||||
'code' => 'de',
|
||||
'default' => true,
|
||||
'name' => 'Deutsch',
|
||||
'locale' => 'de_DE',
|
||||
'url' => '/',
|
||||
],
|
||||
[
|
||||
'code' => 'en',
|
||||
'name' => 'English',
|
||||
'locale' => 'en_US',
|
||||
'url' => '/en',
|
||||
],
|
||||
],
|
||||
];
|
||||
@@ -13,7 +13,7 @@ return [
|
||||
'url' => 'https://licht.interkollektiv.es',
|
||||
'panel' => [
|
||||
'install' => true,
|
||||
'url' => 'https://licht.interkollektiv.es/panel',
|
||||
'url' => 'https://licht.interkollektiv.es',
|
||||
],
|
||||
'languages' => [
|
||||
[
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user