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

site/snippets/footer.php

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