feat: Rotate over cities in footer-love

assets/js/cityRotator.js

@@ -0,0 +1,29 @@
+(function() {
+  function initializeCityRotator() {
+    const rotatorElement = document.querySelector('.o-footer__city-rotator');
+    if (!rotatorElement) return;
+
+    const cities = JSON.parse(rotatorElement.getAttribute('data-cities'));
+    if (!cities || cities.length <= 1) return;
+
+    let currentIndex = 0;
+
+    function cycleCities() {
+      rotatorElement.style.opacity = '0';
+
+      setTimeout(() => {
+        currentIndex = (currentIndex + 1) % cities.length;
+        rotatorElement.textContent = cities[currentIndex];
+        rotatorElement.style.opacity = '1';
+      }, 300);
+    }
+
+    setInterval(cycleCities, 3000);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeCityRotator);
+  } else {
+    initializeCityRotator();
+  }
+})();

assets/js/main.js

@@ -4,3 +4,4 @@ import './resizeObserver.js';
 import './mediaqueries.js';
 import './highlightHeadline.js';
 import './anchorlinks.js';
+import './cityRotator.js';

assets/sass/footer.scss

@@ -36,3 +36,9 @@
     justify-content: space-between;
     flex-wrap: wrap;
 }
+
+.o-footer__city-rotator {
+    display: inline-block;
+    transition: opacity 0.3s ease;
+    min-width: 1ch;
+}

i18n/de.yaml

@@ -22,7 +22,11 @@ countryselection: Länderauswahl
 editPage: Seite bearbeiten
 footer-love:
   aria-label: Made with love in Frankfurt & Köln
-  text: Made with ♥️ in Frankfurt & Köln
+  cities:
+    '0': Frankfurt
+    '1': Köln
+    '2': Aachen
+  text: Made with ♥️ in
 general: Übergreifendes
 highlight:
   important: Wichtige Information

i18n/en.yaml

@@ -21,7 +21,11 @@ countryselection: choose country
 editPage: Edit page
 footer-love:
   aria-label: Made with love in Frankfurt & Cologne
-  text: Made with ♥️ in Frankfurt & Cologne
+  cities:
+    '0': Frankfurt
+    '1': Cologne
+    '2': Aachen
+  text: Made with ♥️ in
 general: general
 highlight:
   important: Important Information

layouts/partials/footer-love.html

@@ -0,0 +1,12 @@
+{{ $cities := slice }}
+{{ $i := 0 }}
+{{ range seq 10 }}
+  {{ $city := T (printf "footer-love.cities.%d" $i) }}
+  {{ if ne $city "" }}
+    {{ $cities = $cities | append $city }}
+  {{ end }}
+  {{ $i = add $i 1 }}
+{{ end }}
+<div aria-label='{{ T "footer-love.aria-label"}}'>
+  {{ T "footer-love.text"}} <span class="o-footer__city-rotator" data-cities='{{ $cities | jsonify }}'>{{ index $cities 0 }}</span>
+</div>

layouts/partials/footer.html

@@ -1,9 +1,7 @@
 <div class="o-footer o-container">
   <div class="o-footer__firstline">
-    <div class="col-12 col-lg-6" aria-label='{{ T "footer-love.aria-label"}}'>
-      {{ T "footer-love.text"}}
-    </div>
-    <div class="col-12 col-lg-6 o-footer__links">
+    {{ partial "footer-love" . }}
+    <div class="o-footer__links">
       {{ $contactPage := site.GetPage "contact" }}
       {{ if $contactPage }}
           <a class="o-footer__link" href="{{ $contactPage.RelPermalink }}">{{ $contactPage.Title }}</a>

layouts/partials/teaser.html

@@ -3,7 +3,7 @@
 
 {{ $dateMachine := $page.Date | time.Format "2006-01-02T15:04:05-07:00" }}
 {{ $dateHuman := $page.Date | time.Format ":date_long" }}
-<div class="m-teaser{{ if $listview }} m-teaser--listview{{ else }} col-lg-4 col-md-6{{ end }} col-12">
+<div class="m-teaser{{ if $listview }} m-teaser--listview{{ end }}">
   <a href="{{ $page.RelPermalink }}" class="m-teaser__wrapper">
     {{ $image := (partial "helper/contentImage" $page ) }}
     {{ if $image }}