Sync dev with master

Reviewed-on: #256

assets/css/style.css

@@ -13,9 +13,7 @@
   --gcg-color-border: #dee2e6;
   --gcg-font-primary: "Ubuntu", sans-serif;
   --gcg-font-header: "Fira Sans", sans-serif;
-  --gcg-font-icon: "Material Design Icons";
-  --gcg-icon-list: "\f0B2A";
-  --gcg-icon-search: "\f0349";
+  --gcg-icon-list: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-chevron-right-circle" class="hi-svg-inline" fill="rgb(255,188,59)" width="1em" height="1em" viewBox="0 0 24 24"><path d="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,18L16,12L10,6L8.6,7.4L13.2,12L8.6,16.6L10,18Z" /></svg>');
 }
 
 /*  typography */
@@ -298,7 +296,6 @@ textarea.form-control {
 .content ul li::before {
   position: absolute;
   content: var(--gcg-icon-list);
-  font-family: var(--gcg-font-icon);
   font-size: 14px;
   left: 0;
   top: 1px;
@@ -396,6 +393,7 @@ details[open] summary {
 }
 
 .fb-tile-icon {
+  display: flex;
   font-size: 96px;
 }
 
@@ -550,11 +548,9 @@ details[open] summary {
   background: var(--gcg-color-primary);
   color: white;
   font-size: 25px;
-  text-align: center;
-}
-
-.play-btn i {
-  line-height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .play-btn::before {
@@ -657,16 +653,6 @@ details[open] summary {
   font-weight: 600;
 }
 
-.nav-item .nav-link.nav-search::before {
-  position: relative;
-  content: var(--gcg-icon-search);
-  font-family: var(--gcg-font-icon);
-  font-size: 14px;
-  left: 0;
-  top: 1px;
-  transition: 0.3s ease;
-}
-
 .nav-item::before {
   position: absolute;
   left: 0;
@@ -702,7 +688,7 @@ link:focus,
   color: white;
 }
 
-.navbar-expand-lg .navbar-nav .nav-link {
+.navbar-expand-xl .navbar-nav .nav-link {
   padding: 40px 0px;
 }
 
@@ -916,6 +902,17 @@ link:focus,
 }
 
 @media (max-width: 991px) {
+  .feature-blocks {
+    margin-top: 0;
+    padding: 50px;
+  }
+
+  .feature-blocks h3 {
+    font-size: 25px;
+  }
+}
+
+@media (max-width: 1199px) {
   .navigation {
     background: var(--gcg-color-secondary);
   }
@@ -929,7 +926,7 @@ link:focus,
     background: var(--gcg-color-secondary) !important;
   }
 
-  .navbar-expand-lg .navbar-nav .nav-link {
+  .navbar-expand-xl .navbar-nav .nav-link {
     padding: 20px;
   }
 
@@ -950,17 +947,6 @@ link:focus,
     text-align: center;
   }
 
-  .feature-blocks {
-    margin-top: 0;
-    padding: 50px;
-  }
-
-  .feature-blocks h3 {
-    font-size: 25px;
-  }
-}
-
-@media (max-width: 1199px) {
   .feature-blocks {
     padding-right: 50px;
     padding-left: 50px;
@@ -1066,3 +1052,14 @@ link:focus,
     font-size: 1.5em;
   }
 }
+
+.hi-svg-inline {
+  vertical-align: -0.125rem;
+}
+
+#chart-container {
+  position: relative;
+  height: 50vh;
+  overflow: hidden;
+}
+

assets/js/script.js

@@ -1,4 +1,4 @@
-(function ($) {
+(($) => {
   'use strict';
 
   // adapt header to height
@@ -18,7 +18,7 @@
   }
 
   // load scripts
-  $(window).on('load', function () {
+  $(window).on('load', () => {
     $('.preloader').fadeOut(100);
     adaptHeight();
     if ($('#top-banner').length) {
@@ -34,13 +34,6 @@
   // sticky menu
   $(window).scroll(adaptHeight);
 
-  // background image
-  $('[data-background]').each(function () {
-    $(this).css({
-      'background-image': 'url(' + $(this).data('background') + ')'
-    });
-  });
-
   // hero slider
   $('.hero-slider').slick({
     autoplay: true,
@@ -49,18 +42,15 @@
     pauseOnHover: true,
     infinite: true,
     arrows: true,
-    prevArrow: '<button type=\'button\' class=\'prevArrow\'><i class=\'mdi mdi-chevron-left arrowIcon\'></i></button>',
-    nextArrow: '<button type=\'button\' class=\'nextArrow\'><i class=\'mdi mdi-chevron-right arrowIcon\'></i></button>',
+    prevArrow: '<button type=\'button\' class=\'prevArrow\'><svg xmlns="http://www.w3.org/2000/svg" id="mdi-chevron-left" class="arrowIcon" viewBox="0 0 24 24" height="1em" width="1em" fill="currentColor"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" /></svg></button>',
+    nextArrow: '<button type=\'button\' class=\'nextArrow\'><svg xmlns="http://www.w3.org/2000/svg" id="mdi-chevron-left" class="arrowIcon" viewBox="0 0 24 24" height="1em" width="1em" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/></svg></button>',
     dots: true
   });
 
   // venobox popup
-  $(document).ready(function () {
-    new VenoBox({
-      selector: '.vb-video',
-      spinner: 'grid'
-    });
-    new VenoBox({
+  $(document).ready(() => {
+    $('.vb-video').venobox({ spinner: 'grid' });
+    $('.vb-gallery').venobox({
       selector: '.vb-gallery',
       numeration: true,
       infinigall: true,
@@ -71,53 +61,73 @@
   });
 
   // filter
-  $(document).ready(function () {
-    var containerEl = document.querySelector('.filtr-container');
-    if (containerEl) {
-      new Filterizr(
-        '.filtr-container',
-        {
-          layout: 'sameWidth',
-          gutterPixels: 10
-        }
-      );
-    } 
-    // active changer
-    $('.filter-controls li').on('click', function () {
-      $('.filter-controls li').removeClass('active');
-      $(this).addClass('active');
-    });
+  $(document).ready(() => {
+    if ($('.filter-container').length != 0) {
+      const shuffleInstance = new Shuffle($('.filter-container'), {
+        itemSelector: '.filter-item',
+        sizer: '.filter-sizer',
+        delimiter: ','
+      });
+      $('.filter-controls li').on('click',() => {
+        $('.filter-controls li').removeClass('active');
+        $(this).addClass('active');
+        shuffleInstance.filter($(this).data('filter'))
+      });
+    }
   });
 
-  // count up
-  function counter() {
+  // counter
+  $(window).on('scroll', () => {
     var oTop;
     if ($('.count').length !== 0) {
       oTop = $('.count').offset().top - window.innerHeight;
     }
     if ($(window).scrollTop() > oTop) {
-      $('.count').each(function () {
-        var $this = $(this),
-          countTo = $this.attr('data-count');
-        $({
-          countNum: $this.text()
-        }).animate({
-          countNum: countTo
-        }, {
-          duration: 1000,
-          easing: 'swing',
-          step: function () {
-            $this.text(Math.floor(this.countNum));
-          },
-          complete: function () {
-            $this.text(this.countNum);
-          }
-        });
+      $('.count').each(() => {
+        var $this = $(this), countTo = $this.attr('data-count');
+        $({ countNum: $this.text() }).animate(
+          { countNum: countTo },
+          {
+            duration: 1000,
+            easing: 'swing',
+            step: () => $this.text(Math.floor(this.countNum)),
+            complete: () => $this.text(this.countNum)
+          });
       });
     }
-  }
-  $(window).on('scroll', function () {
-    counter();
   });
+
+  $(window).on('DOMContentLoaded', () => {
+    if (window.PagefindUI != undefined) {
+      new window.PagefindUI({
+        element: "#search",
+        translations: {
+          placeholder: "Suchen...",
+          zero_results: "Leider konnten keine Ergebnisse zu [SEARCH_TERM] gefunden werden",
+          clear_search: "Löschen"
+        }
+      });
+  
+      $('#pagefind-search').on('shown.bs.modal', () => {
+        $('.pagefind-ui__search-input').focus();
+      });
+    }
+  });
+
+  // enable matomo analytics
+  var _paq = window._paq = window._paq || [];
+  _paq.push(["setDoNotTrack", true]);
+  _paq.push(["disableCookies"]);
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+  (() => {
+    var u="https://analytics.cantorgymnasium.de/";
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
+    _paq.push(['setSiteId', '1']);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+  })();
+
+  new LazyLoad();
   
 })(jQuery);

config.yml

@@ -20,43 +20,44 @@ params:
   address: Georg-Cantor-Gymnasium <br> Torstraße 13 <br> 06110 Halle (Saale)
   top_header: true
   email: schulleitung@cantor-gymnasium.de
-  email_label: schulleitung<i class='mdi mdi-at'></i>cantor-gymnasium.de
+  email_label: schulleitung(at)cantor-gymnasium.de
   description: Das Georg-Cantor-Gymnasium - eine
     mathematisch-naturwissenschaftliche Spezialschule in Halle (Saale).
   images:
     - media/zeichnung.webp
   impressumURL: pages/impressum
   dseURL: pages/datenschutz
-  copyright: "Georg-Cantor-Gymnasium Halle (Saale). Made with :heart: and [Hugo](https://gohugo.io)."
+  copyright: "Georg-Cantor-Gymnasium Halle (Saale). Made with :heart: and
+    [Hugo](https://gohugo.io)."
   plugins:
     css:
       - https://assets.cantorgymnasium.de/bootstrap/v5/css/bootstrap.min.css
       - https://assets.cantorgymnasium.de/slick/v1.8/slick.css
       - https://assets.cantorgymnasium.de/venobox/v2/dist/venobox.min.css
-      - https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css
-      - https://assets.cantorgymnasium.de/fonts/fira/fira.css
-      - https://assets.cantorgymnasium.de/fonts/ubuntu/ubuntu.css
+      - https://assets.cantorgymnasium.de/fonts/fira/fira.min.css
+      - https://assets.cantorgymnasium.de/fonts/ubuntu/ubuntu.min.css
+      - /pagefind/pagefind-ui.css
     js:
       - https://assets.cantorgymnasium.de/bootstrap/v5/js/bootstrap.bundle.min.js
       - https://assets.cantorgymnasium.de/slick/v1.8/slick.min.js
       - https://assets.cantorgymnasium.de/lazyload/v17/dist/lazyload.min.js
+      - /pagefind/pagefind-ui.js
     head_js:
-      - https://assets.cantorgymnasium.de/echarts/v5/echarts.min.js
-      - https://assets.cantorgymnasium.de/jquery/v3.6/jquery.min.js
+      - https://assets.cantorgymnasium.de/jquery/v3.7/jquery.min.js
       - https://assets.cantorgymnasium.de/venobox/v2/dist/venobox.min.js
-      - https://assets.cantorgymnasium.de/filterizr/v2/dist/vanilla.filterizr.min.js
+      - https://assets.cantorgymnasium.de/shuffle/v6/shuffle.min.js
   social:
     - title: YouTube
-      icon: mdi mdi-youtube
+      icon: youtube
       link: https://www.youtube.com/@cantornews
     - title: Twitter
-      icon: mdi mdi-twitter
+      icon: twitter
       link: https://twitter.com/cantor_news
     - title: Instagram
-      icon: mdi mdi-instagram
+      icon: instagram
       link: https://instagram.com/cantor.news
     - title: Facebook
-      icon: mdi mdi-facebook
+      icon: facebook
       link: https://facebook.com/cantor.news
   preloader:
     enable: true
@@ -242,7 +243,7 @@ menu:
     - parent: Für Schüler und Eltern
       name: Förderverein
       URL: pages/foerderverein
-      weight: 6
+      weight: 5
       hasChildren: false
       params:
         external: false
@@ -250,13 +251,13 @@ menu:
     - parent: Für Schüler und Eltern
       name: Schülervertretung
       URL: pages/schuelervertretung
-      weight: 7
+      weight: 6
       hasChildren: false
       params:
         external: false
         separator: false
     - name: Elternvertretung
-      weight: 8
+      weight: 7
       URL: pages/elternvertretung
       parent: Für Schüler und Eltern
       hasChildren: false
@@ -270,6 +271,12 @@ menu:
       params:
         external: false
         separator: false
+    - name: Schülerzeitung
+      weight: 9
+      parent: Für Schüler und Eltern
+      URL: https://schuelerzeitung-gcg.de
+      params:
+        external: true
   footer:
     - name: Termine
       URL: termine
@@ -290,3 +297,6 @@ privacy:
     privacyEnhanced: true
   vimeo:
     enableDNT: true
+module:
+  imports:
+  - path: github.com/hugomods/icons/vendors/mdi

content/alumninetzwerk/_index.md

@@ -1,5 +1,6 @@
 ---
 title: Alumninetzwerk
+draft: true
 aliases:
   - /schulchronik/pages/alumninetzwerk
   - /chronikseiten/alumninetzwerk

content/blog/eindrucke-vom-tag-der-offenen-tur.md

@@ -1,32 +0,0 @@
----
-title: "Eindrücke vom Tag der offenen Tür "
-date: 2023-11-27T13:12:17.714+01:00
-draft: true
-image: /media/image.webp
-author:
-  - denys-konovalov
-categories:
-  - Veranstaltungen
-subjects: []
-tags:
-  - "2023"
-  - tdot
-type: post
----
-Am Samstag, dem 25.11.2023, fand nach zahlreichen Vorbereitungen der diesjährige Tag der offenen Tür statt, mit welchem vor allem zukünftigen Schülern und Eltern die Möglichkeit geboten wurde, sich im Schulgebäude umzuschauen und über die vielfältigen Angebote unserer Schule zu informieren.
-
-Trotz des momentan hohen Krankenstandes gelang es dennoch, ein aufregendes Programm zu gestalten - von spannenden Chemieexperimenten bis zu kreativen Theater- und Musikvorstellungen war alles geboten. 
-
-Während unsere jungen Besucherinnen und Besucher von Schülerlotsen aus unseren 5. und 6. Klassen durch das Schulhaus geführt wurden und in verschiedensten Räumen das Interessanteste aus allen Bereichen kennenlernen konnten, bestand für Eltern die einzigartige Möglichkeit sich mit Lehrerinnen und Lehrern zu unterhalten, das Aufnahmeverfahren näher kennenzulernen und einen allgemeinen Eindruck von der Schule zu erhalten.
-
-Besonders gefreut haben uns auch in diesem Jahr wieder die vielen ehemaligen Lehrer und Schüler, welche sich weiterhin über das aktuelle Schulleben auf dem Laufen halten und in den Gängen anzutreffen waren.
-
-Für alle, die am Tag der offenen Tür leider nicht teilnehmen konnte, steht mir dem [digitalen Schulrundgang](https://vr.cantorgymnasium.de/) weiterhin eine Möglichkeit zur Verfügung, sich etwas im Schulhaus umzusehen (Hinweis: Einige Aufnahmen und Inhalte können inzwischen veraltet sein).
-
-Für alle Interessenten verweisen wir zudem noch einmal auf unser Aufnahmeverfahren:
-
-
-
-{{< card title="Aufnahmeverfahren" link="/anmeldung/" >}}
-
-

content/blog/einladung-weihnachtskonzert-2023.md

@@ -2,7 +2,7 @@
 title: Einladung Weihnachtskonzert 2023
 date: 2023-11-04T23:10:45.890+01:00
 draft: false
-image: /media/gcgweihnachten.png
+image: /media/blog/weihnachten.webp
 author:
   - herr-berger
 categories:

content/blog/weihnachtstraditionen-2023.md

@@ -2,7 +2,7 @@
 title: Weihnachtstraditionen 2023
 date: 2023-12-22T23:39:48.861+01:00
 draft: false
-image: /media/gcgweihnachten.png
+image: /media/blog/weihnachten.webp
 author:
   - herr-berger
   - frau-schulz

content/blog/wettbewerbserfolge-am-jahresende.md

@@ -2,7 +2,7 @@
 title: Wettbewerbserfolge am Jahresende
 date: 2023-12-15T10:36:32.078+01:00
 draft: false
-image: /media/blog/Sj2023_2024/vlw2023.jpg
+image: /media/blog/Sj2023_2024/vlw2023.webp
 author:
   - herr-berger
 categories:

content/chronikseiten/abiturdurchschnitte.md

@@ -10,14 +10,8 @@ type: pages
 aliases:
   - /schulchronik/pages/abiturdurchschnitte
 ---
-<style>
-#chart-container {
-  position: relative;
-  height: 50vh;
-  overflow: hidden;
-}
-</style>
 
+<script src="https://assets.cantorgymnasium.de/echarts/v5/echarts.min.js"></script>
 <div id="chart-container"></div>
 <script>
   var dom = document.getElementById("chart-container");

content/chronikseiten/schuelerzahlen.md

@@ -5,13 +5,7 @@ type: pages
 aliases:
   - /schulchronik/pages/schülerzahlen
 ---
-<style>
-#chart-container {
-  position: relative;
-  height: 50vh;
-  overflow: hidden;
-}
-</style>
+<script src="https://assets.cantorgymnasium.de/echarts/v5/echarts.min.js"></script>
 
 <div id="chart-container"></div>
 <script>

content/pages/anmeldung-abgeschickt.md

@@ -0,0 +1,17 @@
+---
+title: Anmeldung abgeschickt
+draft: false
+description: ""
+type: pages
+---
+Sehr geehrte Eltern,
+
+die Anmeldung Ihres Kindes für die Aufnahmeprüfung über das Online-Anmeldeformular wurde erfolgreich abgeschickt. Wir überprüfen diese umgehend und senden Ihnen eine Bestätigung der Anmeldung an die von Ihnen angegebene E-Mail-Adresse zu.
+
+Bitte beachten Sie außerdem, dass wir bis sofort nach dessen Ausgabe von Ihrem Kind das Halbjahreszeugnis der 4. Klasse benötigen. Dieses können Sie persönlich bei uns im Sekretariat sowie online über das Formular oder die E-Mail-Adresse [aufnahme(at)cantor-gymnasium.de](mailto:aufnahme@cantor-gymnasium.de). Die aktuellen Informationen können Sie stets auf unserer Homepage einsehen.
+
+Mit freundlichen Grüßen
+
+Das Team des Georg-Cantor-Gymnasiums
+
+{{< card title="Zurück zur Aufnahme-Seite" link="/anmeldung" >}}

content/pages/kontaktanfrage-abgeschickt.md

@@ -0,0 +1,18 @@
+---
+title: Kontaktanfrage abgeschickt
+draft: false
+type: pages
+---
+Sehr geehrte Damen und Herren,
+
+Ihre Kontaktanfrage wurde erfolgreich an unser Sekretariat verschickt. Ihre Nachricht wird schnellstmöglich von uns bearbeitet. Wir bitten um Ihr Verständnis für mögliche Verzögerungen.
+
+Mit freundlichen Grüßen
+
+Das Team des Georg-Cantor-Gymnasiums
+
+
+
+{{< card title="Zurück zum Kontaktformular" link="/kontakt" >}}
+
+

content/projektwoche/2023.md

@@ -12,7 +12,7 @@ type: projektwoche
 tiles:
   - title: Unser "Cantor" aus Sicht der Schulchronisten
     bg_color: "#990000"
-    icon: mdi mdi-pillar
+    icon: pillar
     font_color: white
     content: >
       Lust auf „Zurück in die Zukunft“? Was soll denn das nun heißen? In diesem
@@ -34,7 +34,7 @@ tiles:
       {{< gallery dir="/media/projektwoche/2023/p01" >}}
   - title: Georg Cantor zwischen Genie und Wahnsinn
     bg_color: "#e4fdfd"
-    icon: mdi mdi-head-cog-outline
+    icon: head-cog-outline
     font_color: black
     content: >+
       Wir haben uns in der Projektwoche mit Cantors psychischen Erkrankungen
@@ -57,7 +57,7 @@ tiles:
 
   - title: Keramikreliefs und anderes aus dem Brennofen
     bg_color: "#cc9966"
-    icon: mdi mdi-fireplace
+    icon: fireplace
     font_color: black
     content: >
       Wir ergänzen die fehlenden Reliefs im Schulhaus und stellen Dinge her, die
@@ -66,14 +66,14 @@ tiles:
       {{< gallery dir="/media/projektwoche/2023/p03" >}}
   - title: Unendlichkeiten der Zeit
     bg_color: "#6666ff"
-    icon: mdi mdi-printer-3d
+    icon: printer-3d
     font_color: white
     content: >
       Wir nutzten den 3-D-Drucker, um Uhren und weitere Merchandising-Artikel zu
       gestalten und zu produzieren.
   - title: Unendlichkeit in der Literatur
     bg_color: "#ccffcc"
-    icon: mdi mdi-bookshelf
+    icon: bookshelf
     font_color: black
     content: >+
       Unser Projekt handelt vom Schreiben einer „unendlichen Geschichte“.
@@ -115,7 +115,7 @@ tiles:
 
   - title: Unendlich viele Affen schreiben Shakespeare
     bg_color: "#ff9933"
-    icon: mdi mdi-fountain-pen-tip
+    icon: fountain-pen-tip
     font_color: black
     content: >+
       Es ist ein gleichermaßen bekanntes wie bizarres Gedankenexperiment:
@@ -143,7 +143,7 @@ tiles:
 
   - title: Berühmte Zeitgenossen Cantors in Halle
     bg_color: "#336699"
-    icon: mdi mdi-account-question-outline
+    icon: account-question-outline
     font_color: white
     content: >
       Zehn Schülerinnen und Schüler haben in vier Gruppen gearbeitet und
@@ -162,7 +162,7 @@ tiles:
       {{< gallery dir="/media/projektwoche/2023/p07" >}}
   - title: Wir basteln eigene Brettspiele zu Cantor und zum GCG
     bg_color: "#cc3333"
-    icon: mdi mdi-checkerboard
+    icon: checkerboard
     font_color: white
     content: >
       Im Projekt „Wir basteln eigene Brettspiele zu Cantor und dem GCG“ hatten
@@ -183,7 +183,7 @@ tiles:
       {{< gallery dir="/media/projektwoche/2023/p09" >}}
   - title: Ein Cantor-Team-Duell
     bg_color: "#99cc99"
-    icon: mdi mdi-fencing
+    icon: fencing
     font_color: black
     content: >
       Bei diesem Projekt konnten die Schülerinnen und Schüler ihrer ganzen
@@ -204,7 +204,7 @@ tiles:
       {{< gallery dir="/media/projektwoche/2023/p10" >}}
   - title: Cantor-School-Rap
     bg_color: "#ffcccc"
-    icon: mdi mdi-microphone-variant
+    icon: microphone-variant
     font_color: black
     content: >
       Unser Cantor-School-Rap entstand mit Beteiligung der Klassen 5, 6, 8 und
@@ -229,13 +229,13 @@ tiles:
       {{< gallery dir="/media/projektwoche/2023/p11" >}}
   - title: Chor und Schulband
     bg_color: "#ffcc00"
-    icon: mdi mdi-music-clef-treble
+    icon: music-clef-treble
     font_color: black
     content: |
       {{< gallery dir="/media/projektwoche/2023/p12" >}}
   - title: Farben zu Cantors Zeiten
     bg_color: "#ccccff"
-    icon: mdi mdi-test-tube
+    icon: test-tube
     font_color: black
     content: >
       Die Projektgruppe „Farben zu Cantors Zeiten“, geleitet von Frau
@@ -254,14 +254,14 @@ tiles:
       {{< gallery dir="/media/projektwoche/2023/p13" >}}
   - title: Die Stadt Halle zu Cantors Zeiten
     bg_color: "#009999"
-    icon: mdi mdi-bank-outline
+    icon: bank-outline
     font_color: white
     content: >
       <iframe src="/media/projektwoche/2023/p14/Medizin_Cantor.pdf" width="100%"
       height="600vh"></iframe>
   - title: Wir fotografieren die Unendlichkeit
     bg_color: "#ccff66"
-    icon: mdi mdi-camera-outline
+    icon: camera-outline
     font_color: black
     content: >+
       Kann man die Unendlichkeit fotografieren? Sicher nicht. Wie soll das
@@ -286,7 +286,7 @@ tiles:
 
   - title: Philosophie und Unendlichkeit
     bg_color: "#cc6600"
-    icon: mdi mdi-all-inclusive-box-outline
+    icon: all-inclusive-box-outline
     font_color: white
     content: >+
       In der Projektgruppe "Philosophie und Unendlichkeit" haben sich
@@ -309,13 +309,13 @@ tiles:
 
   - title: Das unendlich Große/Kleine in den Naturwissenschaften
     bg_color: "#cc0066"
-    icon: mdi mdi-bacteria-outline
+    icon: bacteria-outline
     font_color: white
     content: |
       {{< gallery dir="/media/projektwoche/2023/p17" >}}
   - title: Bau einer Rube-Goldberg-Maschine
     bg_color: "#996699"
-    icon: mdi mdi-state-machine
+    icon: state-machine
     font_color: white
     content: >+
       In unserem Projekt ging es darum, eine Maschine zu bauen, die man im
@@ -338,19 +338,19 @@ tiles:
 
   - title: Kleine Ursache - großer Effekt
     bg_color: "#3333cc"
-    icon: mdi mdi-magnet-on
+    icon: magnet-on
     font_color: white
     content: |
       {{< gallery dir="/media/projektwoche/2023/p19" >}}
   - title: Science meets Literature
     bg_color: "#ffff00"
-    icon: mdi mdi-book-search-outline
+    icon: book-search-outline
     font_color: black
     content: |
       {{< gallery dir="/media/projektwoche/2023/p20" >}}
   - title: Cantor - Wer kann ihm entkommen?
     bg_color: "#9966ff"
-    icon: mdi mdi-map-legend
+    icon: map-legend
     font_color: white
     content: |
       {{< gallery dir="/media/projektwoche/2023/p21" >}}

content/superhaufen/20-jahriges-jubilaum.md

@@ -26,7 +26,7 @@ tiles:
 
 
     title: Programm
-    icon: mdi mdi-text
+    icon: text
     bg_color: "#44bda7"
     font_color: "#ffffff"
 ---

content/superhaufen/30-jahriges-jubilaum.md

@@ -10,7 +10,7 @@ tiles:
   - title: Festveranstaltung
     bg_color: "#ffef00"
     font_color: "#ffffff"
-    icon: mdi mdi-crowd
+    icon: crowd
     content: |+
 
 
@@ -135,7 +135,7 @@ tiles:
           {{< gallery dir="/media/schulchronik/2018/festveranstaltung" >}}
   - title: Aktionen
     bg_color: "#0fe008"
-    icon: mdi mdi-theater
+    icon: theater
     content: >
       Den Freitag, den zweiten Tag der Festtage zum 30. Jubiläum, verbrachten
       Schülerinnen und Schüler mit unterschiedlichen Aktionen, wie zum Beispiel
@@ -292,7 +292,7 @@ tiles:
           {{< gallery dir="/media/schulchronik/2018/rallye" >}}
   - title: Flashmob
     bg_color: "#0051e5"
-    icon: mdi mdi-all-inclusive
+    icon: all-inclusive
     content: >
       Unser geliebtes Gymnasium feierte im Jahr 2018 sein 30-jähriges Jubiläum.
 

content/superhaufen/35-jahriges-jubilaum.md

@@ -9,7 +9,7 @@ previous:
 tiles:
   - title: Aktionen
     bg_color: "#f85d1f"
-    icon: mdi mdi-file-document-outline
+    icon: file-document-outline
     font_color: "#ffffff"
     content: "\ \n"
     unterhaufen:
@@ -32,12 +32,12 @@ tiles:
 
   - title: Festveranstaltung
     bg_color: "#2a1dc8"
-    icon: mdi mdi-party-popper
+    icon: party-popper
     font_color: "#fff9f9"
     content: "\ \n"
   - title: Flashmob
     bg_color: "#49e649"
-    icon: mdi mdi-crowd
+    icon: crowd
     font_color: "#fff5f5"
     content: "\ \n"
 ---

data/ausblick.yml

@@ -1,17 +1,13 @@
-enable: false
+enable: true
 title: Ausblick auf die Woche
 author:
   - herr-berger
-image: /media/gcgweihnachten.png
+image: /media/ausblick.webp
 content: >
-  _Nun stehen die letzten drei Schultage in 2023 an, die trotzdem noch
-  ereignisreich sind._ 
+  Der Ausblick der Woche ist dieses Mal ganz kurz: 
 
 
-  Der Schülerrat führt wieder seine Wichtelaktion durch. Dafür haben wieder viele fleißige Hände Plätzchen gebacken und Wichtelgeschenke verpackt. Diese werden nun zusammen mit den Lieferungen des Schulshops ausgeteilt. 
+  Ab Montag findet das Spezialistenlager Mathematik der 8. bis 111 Klassen in Wittenberg statt. Möge das Training für die Mathematikolympiade erfolgreich sein!
 
 
-  **Am Dienstag (19.12.) findet von 16 bis 19 Uhr der Weihnachtsbasar in unserer Aula statt. Alle Schülerinnen und Schüler, Lehrkräfte, Eltern und weitere Familienmitglieder sowie auch alle aus Nachbarschaft und Umgebung sind eingeladen.** 
-
-
-  Der letzte Tag vor den Ferien verläuft wieder in alter Tradition: in der 1.-3. Stunde können die Schülerinnen und Schüler ihre Restbestände des Weihnachtsbasars an ihre Mitschüler verkaufen. **Danach findet um 11 Uhr das gemeinsame Weihnachtssingen statt, bevor alle in ihre wohlverdienten Ferien starten.**
+  _(22.01.-28.01.2024)_

data/homepage.yml

@@ -5,7 +5,7 @@ top_banner:
     statt.  <br>**Weihnachtssingen** am 20.12.2023, 11 Uhr
   color: "#19aa96"
   font_color: "#ffffff"
-  icon: mdi mdi-gift-open
+  icon: gift-open
   temporarily:
     enable: true
     start_date: 2023-11-05T14:47:53.000+01:00
@@ -158,7 +158,7 @@ success_banner:
       image: media/home/cds.webp
     - type: icon
       name: Und viel mehr ...
-      icon: mdi mdi-trophy-outline
+      icon: trophy-outline
       content: >
         Durch umfassende Begabtenförderungsangebote sind unsere Schüler bei
         vielen Wettbewerben erfolgreich. Diese umfassen erweiterte Stoffgebiete,

go.mod

@@ -0,0 +1,5 @@
+module git.cantorgymnasium.de/gcg/gcg-website
+
+go 1.19
+
+require github.com/hugomods/icons/vendors/mdi v0.3.2 // indirect

go.sum

@@ -0,0 +1,4 @@
+github.com/hugomods/icons v0.6.0 h1:G6RU93okhPPRDh/jqcew9gwkcYpSpg0rCBv4S6yUAFw=
+github.com/hugomods/icons v0.6.0/go.mod h1:cIkSvK6W0q6N4U6n9KGz+QfRWQXAW0INd+1P31gPNGg=
+github.com/hugomods/icons/vendors/mdi v0.3.2 h1:59KlTgBNiKGlPXzaQ6zn+VLYstFb4zABKwlHfzL8ADY=
+github.com/hugomods/icons/vendors/mdi v0.3.2/go.mod h1:yHIDYxNoBV8RCAc4Uordp6rr4GObPrtBAimShBBFdmc=

layouts/author/single.html

@@ -14,7 +14,7 @@
 		  {{ .Content }}
 		  <hr>
 		  {{ with .Params.email }}
-		      <a href="mailto:{{ . }}"><i class="mdi mdi-at"></i></a>
+		      <a href="mailto:{{ . }}">{{ partial "icons/icon" (dict "vendor" "mdi" "name" "at") }}</a>
 		  {{ end }}
 		</div>
   </div>

layouts/ganztagsangebote/list.html

@@ -3,12 +3,13 @@
 <section class="section">
   <div class="container">
     {{ partial "filter-controls" . }}
-    <div class="filtr-container">
+    <div class="filter-container row">
     {{ range .Data.Pages }}
-      <div data-category="{{ .Params.category | urlize }}" class="col-lg-4 col-sm-6 filtr-item">
+      <div data-groups="{{ .Params.category | urlize }}" class="col-lg-4 col-sm-6 filter-item">
         {{ partial "ganztag" . }}
       </div>
     {{ end }}
+    <div class="filter-sizer col-1"></div>
     </div>
   </div>
 </section>

layouts/ganztagsangebote/single.html

@@ -6,10 +6,10 @@
     <img src="{{ .Params.image | relURL }}" class="img-fluid w-100 mb-4">
     <h2 class="mb-4">{{ .Title }}</h2>
     <div class="row mb-4">
-      {{ partial "icon-element" (dict "size" 3 "icon" "mdi-calendar-today-outline" "title" "Zeit" "content" .Params.schedule) }}
-      {{ partial "icon-element" (dict "size" 3 "icon" "mdi-timer-sand" "title" "Dauer" "content" .Params.duration) }}
-      {{ partial "icon-element" (dict "size" 3 "icon" "mdi-crowd" "title" "Klassen" "content" .Params.class) }}
-      {{ partial "icon-element" (dict "size" 3 "icon" "mdi-map-marker-radius-outline" "title" "Raum" "content" .Params.room) }}
+      {{ partial "icon-element" (dict "size" 3 "icon" "calendar-today-outline" "title" "Zeit" "content" .Params.schedule) }}
+      {{ partial "icon-element" (dict "size" 3 "icon" "timer-sand" "title" "Dauer" "content" .Params.duration) }}
+      {{ partial "icon-element" (dict "size" 3 "icon" "crowd" "title" "Klassen" "content" .Params.class) }}
+      {{ partial "icon-element" (dict "size" 3 "icon" "map-marker-radius-outline" "title" "Raum" "content" .Params.room) }}
     </div>
     <hr class="mb-4">
     <div class="content text-justify">

layouts/index.html

@@ -6,7 +6,7 @@
 
 {{ if $data.homepage.slider.enable }}
 {{ with $data.homepage.slider }}
-<section class="hero-section overlay bg-cover hero-default" data-background="{{ .bg_image | absURL }}">
+<section class="hero-section overlay bg-cover hero-default" style="background-image: url('{{ .bg_image | absURL }}');">
   <div class="container">
     <div class="row">
       <div class="col-md-12">
@@ -117,12 +117,12 @@
       <div class="col-lg-4 col-sm-6 mb-4 mb-lg-0 d-flex align-items-stretch">
         <div class="card border-info rounded-0 hover-shadow mb-2">
           <span class="position-absolute top-0 start-0 ms-5 translate-middle p-2 text-bg-info border border-info rounded-pill">
-            <i class="mdi mdi-pin me-2">Angeheftet</i>
+            {{ partial "mdi" "pin" }} Angeheftet
           </span>        
           <img class="card-img-top rounded-0" src="{{ .image | relURL }}" alt="{{ .title }}" onclick="$('#{{ md5 .title }}').modal('show');">
           <div class="card-body d-flex flex-column">
             <span class="text-truncate mb-2">
-              <i class="mdi mdi-fountain-pen-tip me-2"></i>
+              {{ partial "mdi" "fountain-pen-tip" }}
               {{ partial "authors" (dict "Site" $.Site "author" .author )}}
             </span>
             <h4 class="card-title text-truncate" onclick="$('#{{ md5 .title }}').modal('show');">{{ .title }}</h4>
@@ -145,7 +145,7 @@
 
 {{ if $data.homepage.success_banner.enable }}
 {{ with $data.homepage.success_banner }}
-<section class="section bg-cover" data-background="{{ .image | absURL }}" id="success">
+<section class="section bg-cover" style="background-image: url('{{ .image | absURL }}');" id="success">
   <div class="container">
     <div class="row feature-blocks bg-white justify-content-between">
       {{ range .feature_item }}
@@ -154,7 +154,7 @@
           <img src="{{ . }}" class="mb-xl-4 mb-lg-3 mb-4 feature-icon"></img>
         {{ end }}
         {{ with .icon }}
-          <i class="{{ . }} mb-xl-4 mb-lg-3 mb-4 feature-icon"></i>
+          <span class="mb-xl-4 mb-lg-3 mb-4 feature-icon d-flex">{{ partial "mdi" . }}</span>
         {{ end }}
         <h3 class="mb-xl-4 mb-lg-3 mb-4">{{ .name | markdownify }}</h3>
         <div class="content">

layouts/kontakt/list.html

@@ -30,12 +30,12 @@
             <li class="list-group-item">
               <p class="card-title mb-0">{{ .name }}</p>
               <p class="text-muted mb-0">{{ .position }}</p>
-              <p class="card-text"><a href="mailto:{{ .email }}"><i class="mdi mdi-email-multiple-outline me-2"></i>{{ with (split .email "@") }}{{ print (index . 0) "(at)" (index . 1) }}{{ end }}</a></p>
+              <p class="card-text"><a href="mailto:{{ .email }}">{{ partial "mdi" "email-multiple-outline" }}<span class="ms-2">{{ with (split .email "@") }}{{ print (index . 0) (partial "mdi" "at") (index . 1) | safeHTML }}{{ end }}</span></a></p>
             </li>
             {{ end }}
             <li class="list-group-item">
-              <p class="card-text"><i class="mdi mdi-phone-outline me-2"></i>Telefon: <a href="tel:+493456903156">+49-0345/6903156</a></p>
-              <p class="card-text"><i class="mdi mdi-fax me-2"></i>Fax: <a href="tel:+493456903157">+49-0345/6903157</a></p>
+              <p class="card-text">{{ partial "mdi" "phone-outline" }}<span class="ms-2">Telefon: <a href="tel:+493456903156">+49-0345/6903156</a></span></p>
+              <p class="card-text">{{ partial "mdi" "fax" }}<span class="ms-2">Fax: <a href="tel:+493456903157">+49-0345/6903157</a></span></p>
             </li>
           </ul>
         </div>

layouts/partials/card-article.html

@@ -2,10 +2,13 @@
   <a href="{{ .Permalink }}"><img class="card-img-top rounded-0" src="{{ .Params.image | relURL }}" alt="{{ .Title }}"></a>
   <div class="card-body d-flex flex-column">
     <div class="d-flex justify-content-between gap-1 flex-wrap mb-2">
-      <span><i class="mdi mdi-calendar-today me-2"></i>{{ time.Format "02. Jan 2006" .PublishDate }}</span>
+      <span>
+        {{ partial "mdi" "calendar-today"}}
+        <span class="ms-2">{{ time.Format "02. Jan 2006" .PublishDate }}</span>
+      </span>
       <span class="text-truncate">
-        <i class="mdi mdi-fountain-pen-tip me-2"></i>
-        {{ partial "authors" (dict "Site" .Site "author" .Params.author )}}
+        {{ partial "mdi" "fountain-pen-tip" }}
+        <span class="ms-2">{{ partial "authors" (dict "Site" .Site "author" .Params.author )}}</span>
       </span>
     </div>
     <h4 class="card-title text-truncate"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>

layouts/partials/card-category.html

@@ -1,7 +1,7 @@
 <div class="card border-primary rounded-0 hover-shadow mb-2">
   <a href="{{ .Permalink }}"><img class="card-img-top rounded-0" src="{{ .Params.Image | relURL }}" alt="{{ .Title }}"></a>
   <div class="card-body">
-    <div class="mb-2"><i class="mdi mdi-bookmark-outline me-2"></i>{{ .Params.category }}</div>
+    <div class="mb-2">{{ partial "mdi" "bookmark-outline" }}<span class="ms-2">{{ .Params.category }}</span></div>
     <h4 class="card-title text-truncate"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
     <a href="{{ .Permalink }}" class="btn btn-primary btn-sm" data-pagefind-ignore>Mehr anzeigen</a>
   </div>

layouts/partials/collapsible.html

@@ -3,7 +3,7 @@
     <details>
       <summary>{{ .title }}</summary>
       <div class="content text-justify">
-        <div>{{ .content }}</div>
+        <div>{{ .content | markdownify | emojify }}</div>
       </div>
     </details>
   </div>

layouts/partials/download.html

@@ -1,6 +1,6 @@
 <div class="shortcode card border-primary rounded-0 hover-shadow mb-2">
   <div class="card-body mb-0">
     <h4 class="card-title"><a class="text-decoration-none" href='{{ .link }}'>{{ .title }}</a></h4>
-    <a href='{{ .link }}' class="text-decoration-none btn btn-primary btn-sm mb-0"><i class="mdi mdi-tray-arrow-down me-2"></i>Download</a>
+    <a href='{{ .link }}' class="text-decoration-none btn btn-primary btn-sm mb-0">{{ partial "mdi" "tray-arrow-down" }}<span class="ms-2">Download</span></a>
   </div>
 </div>

layouts/partials/footer.html

@@ -54,7 +54,7 @@
         <div class="col-sm-5 text-sm-end text-center">
           <ul class="list-inline">
             {{ range .Site.Params.social }}
-            <li class="list-inline-item"><a class="d-inline-block p-2" href="{{ .link | safeURL }}"><i class="{{ .icon }} text-primary"></i></a></li>
+            <li class="list-inline-item"><a class="d-inline-block p-2" href="{{ .link | safeURL }}"><span class="text-primary">{{ partial "mdi" .icon }}</span></a></li>
             {{ end }}
           </ul>
         </div>
@@ -68,8 +68,4 @@
 {{ end }}
 
 {{ $script := resources.Get "js/script.js" | minify }}
-<script src="{{ $script.Permalink }}"></script>
-
-<script>
-  new LazyLoad();
-</script>
+<script src="{{ $script.Permalink }}"></script>

layouts/partials/ganztag.html

@@ -1,8 +1,8 @@
 <div class="card border-primary rounded-0 hover-shadow mb-2">
   <a href="{{ .Permalink }}"><img class="card-img-top rounded-0" src="{{ .Params.image | relURL }}" alt="{{ .Title }}"></a>
   <div class="card-body">
-    <div class="mb-2 text-truncate"><i class="mdi mdi-calendar-today me-2"></i>{{ .Params.schedule }}</div>
-    <div class="mb-2 text-truncate"><i class="mdi mdi-crowd me-2"></i>{{ .Params.class }}</div>
+    <div class="mb-2 text-truncate">{{ partial "mdi" "calendar-today" }}<span class="ms-2">{{ .Params.schedule }}</span></div>
+    <div class="mb-2 text-truncate">{{ partial "mdi" "crowd"}}<span class="ms-2">{{ .Params.class }}</span></div>
     <h4 class="card-title text-truncate"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
     <a href="{{ .Permalink }}" class="btn btn-primary btn-sm" data-pagefind-ignore>Mehr anzeigen</a>
   </div>

layouts/partials/head.html

@@ -17,59 +17,40 @@
   <link rel="shortcut icon" href="{{ `media/favicon.png` | absURL }}" type="image/x-icon">
   <link rel="icon" href="{{ `media/favicon.png` | absURL }}" type="image/x-icon">
 
+  {{ if eq .Page.RelPermalink "/" }}
+    <link rel="preload" fetchpriority="high" as="image" href="/media/home/banner.webp" type="image/webp">
+  {{ else }}
+    <link rel="preload" fetchpriority="high" as="image" href="/media/titelbild.webp" type="image/webp">
+  {{ end }}
+
   {{ range .Site.Params.plugins.head_js }}
     <script src="{{ . | absURL }}" type="text/javascript"></script>
   {{ end }}
-
-  <link href="/pagefind/pagefind-ui.css" rel="stylesheet">
-  <script src="/pagefind/pagefind-ui.js" type="text/javascript"></script>
-
+  
+  <!-- jquery passive listener fixes -->
   <script>
-    ($ => {
-      $(window).on('DOMContentLoaded', () => {
-        new PagefindUI({
-          element: "#search",
-          translations: {
-            placeholder: "Suchen...",
-            zero_results: "Leider konnten keine Ergebnisse zu [SEARCH_TERM] gefunden werden",
-            clear_search: "Löschen"
-          }
-        });
-
-        $('#pagefind-search').on('shown.bs.modal', () => {
-          $('.pagefind-ui__search-input').focus();
-        });
-      });
-    })(jQuery);
-  </script>
-
-  <script>
-    var _paq = window._paq = window._paq || [];
-    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-    _paq.push(["setDoNotTrack", true]);
-    _paq.push(["disableCookies"]);
-    _paq.push(['trackPageView']);
-    _paq.push(['enableLinkTracking']);
-    (function() {
-      var u="https://analytics.cantorgymnasium.de/";
-      _paq.push(['setTrackerUrl', u+'matomo.php']);
-      _paq.push(['setSiteId', '1']);
-      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-      g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-    })();
+    jQuery.event.special.touchstart = {
+      setup: function( _, ns, handle ) {
+          this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
+      }
+    };
+    jQuery.event.special.touchmove = {
+        setup: function( _, ns, handle ) {
+            this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") });
+        }
+    };
+    jQuery.event.special.wheel = {
+        setup: function( _, ns, handle ){
+            this.addEventListener("wheel", handle, { passive: true });
+        }
+    };
+    jQuery.event.special.mousewheel = {
+        setup: function( _, ns, handle ){
+            this.addEventListener("mousewheel", handle, { passive: true });
+        }
+    };
   </script>
 
   {{ partial "opengraph" . }}
   {{ partial "twitter" . }}
-
 </head>
-
-<div id="pagefind-search" class="modal fade" data-pagefind-ignore>
-  <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered" role="document">
-    <div class="modal-content">
-      <div class="modal-body">
-        <div id="search"></div>
-      </div>
-    </div>
-  </div>
-</div>

layouts/partials/header-contest.html

@@ -5,7 +5,7 @@
     {{ end }}
     <div class="d-flex justify-content-between mb-4">
       <div class="d-flex align-items-center">
-        <i class="mdi mdi-crowd text-primary icon-md me-2"></i>
+        <span class="text-primary icon-md me-2 d-flex">{{ partial "mdi" "crowd"}}</span>
         <div class="text-start">
           <h6 class="mb-0 text-uppercase">Klassen</h6>
           <p class="mb-0">{{ .Params.class }}</p>

layouts/partials/header.html

@@ -6,8 +6,9 @@
         <div class="col-lg-4 text-center text-lg-start">
           <ul class="list-inline">
             {{ range .Site.Params.social }}
-            <li class="list-inline-item mx-0"><a class="d-inline-block p-2 text-body-secondary" href="{{ .link | safeURL }}"><i
-                  class="{{ .icon }}"></i></a></li>
+            <li class="list-inline-item mx-0"><a class="d-inline-block p-2 text-body-secondary" href="{{ .link | safeURL }}">
+              {{ partial "mdi" .icon }}
+            </a></li>
             {{ end }}
           </ul>
         </div>
@@ -20,7 +21,7 @@
             </li>
             <li class="list-inline-item">
               <a class="text-body-secondary" href="mailto:{{ .Site.Params.email }}">
-                <strong class="text-uppercase">E-Mail:</strong> {{ .Site.Params.email_label | safeHTML }}
+                <strong class="text-uppercase">E-Mail:</strong> {{ replace .Site.Params.email_label "(at)" (partial "mdi" "at") | safeHTML }}
               </a>
             </li>
           </ul>
@@ -31,7 +32,7 @@
   {{ end }}
   <div class="navigation w-100">
     <div class="container">
-      <nav class="navbar navbar-expand-lg navbar-dark p-0">
+      <nav class="navbar navbar-expand-xl navbar-dark p-0">
         
         <a class="navbar-brand" href="{{ .Site.BaseURL | relURL }}"><img height="60"
             src="{{ .Site.Params.logo | absURL }}" class="py-2" alt="{{ .Site.Title }}"></a>
@@ -67,7 +68,7 @@
             {{ end }}
             {{ end }}
             <li class="nav-item">
-              <div class="nav-link nav-search" onclick="$('#pagefind-search').modal('show');">Suche</button>
+              <div class="nav-link nav-search" onclick="$('#pagefind-search').modal('show');">{{ partial "mdi" "magnify" }}Suche</div>
             </li>
           </ul>
         </div>
@@ -90,10 +91,20 @@
   <div id="top-banner" class="p-3" style="background: {{ .color }}" data-pagefind-ignore>
     <div class="container">
       <div class="no-gutters align-items-center">
-        <div style="color: {{ .font_color }}"><b><i class="{{ .icon }}"></i> {{ .text | markdownify }}</b></div>
+        <div style="color: {{ .font_color }}"><b>{{ partial "mdi" .icon }} {{ .text | markdownify }}</b></div>
       </div>
     </div>
   </div>
   {{ end }}
   {{ end }}
-{{ end }}
+{{ end }}
+
+<div id="pagefind-search" class="modal fade" data-pagefind-ignore>
+  <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-body">
+        <div id="search"></div>
+      </div>
+    </div>
+  </div>
+</div>

layouts/partials/icon-element.html

@@ -1,6 +1,6 @@
 <div class="col-lg-{{.size}} col-sm-{{ mul (int .size) 2 }} mb-3 mb-sm-0">
 	<div class="d-flex align-items-center">
-		<i class="mdi {{ .icon }} text-primary icon-md me-2"></i>
+		<span class="text-primary icon-md d-flex me-2">{{ partial "mdi" .icon }}</span>
 		<div class="text-start">
 		  <h6 class="mb-0 text-uppercase">{{ .title }}</h6>
 		  <p class="mb-0">{{ .content }}</p>

layouts/partials/info.html

@@ -1,10 +1,10 @@
 {{ with .Site.Data.homepage.info }}
-<section class="section bg-cover" data-background="{{ .bg_image | absURL }}">
+<section class="section bg-cover" style="background-image: url('{{ .bg_image | absURL }}');">
   <div class="container">
     <div class="row">
       <div class="col-lg-6 col-sm-4 position-relative intro-video">
         <a class="play-btn vb-video" href="{{ .video_link | safeURL }}" data-vbtype="video">
-          <i class="mdi mdi-play icon-md"></i>
+          <span class="icon-md d-flex">{{ partial "mdi" "play" }}</span>
         </a>
       </div>
       <div class="col-lg-6 col-sm-8">

layouts/partials/mdi.html

@@ -0,0 +1 @@
+{{ partial "icons/icon" (dict "vendor" "mdi" "name" .) }}

layouts/partials/page-header.html

@@ -4,7 +4,7 @@
       <div class="col-md-8 position-relative" data-pagefind-body>
         <ul class="list-inline">
           <li class="list-inline-item h2" data-pagefind-ignore><a class="text-primary font-header" href="{{ if .Params.Previous.enable }}{{ .Params.Previous.link }}{{ else if .Parent.Page }}{{ .Parent.Page.Permalink }}{{ else }}{{ .Site.baseURL | absURL }}{{ end }}">{{ if .Params.previous.enable }}{{ .Params.previous.title }}{{ else }}{{ with .Parent.Params.title }}{{.}}{{ else }}Startseite{{ end }}{{ end }}</a></li>
-          <li class="list-inline-item h2"><i class="mdi mdi-chevron-double-right text-white"></i></li>
+          <li class="list-inline-item h2">{{ partial "icons/icon" (dict "vendor" "mdi" "name" "chevron-double-right" "className" "align-bottom text-white") }}</li>
           <li class="list-inline-item text-white h2 font-header" data-pagefind-weight="10">{{ .Title }}</li>
         </ul>
         <p class="text-white text-opacity-75">{{ .Params.description | markdownify }}</p>

layouts/partials/pagination.html

@@ -10,14 +10,14 @@
     {{ if ne $paginator.PageNumber 1 }}
     <li class="page-item">
       <a class="page-link" href="{{ $paginator.First.URL }}">
-        <i class="mdi mdi-step-backward-2"></i>
+        {{ partial "mdi" "step-backward-2" }}
       </a>
     </li>
     {{ end }}
     {{ if $paginator.HasPrev }}
     <li class="page-item">
       <a href="{{ $paginator.Prev.URL }}" class="page-link">
-        <i class="mdi mdi-step-backward"></i>
+        {{ partial "mdi" "step-backward" }}
       </a>
     </li>
     {{ end }}
@@ -51,14 +51,14 @@
     {{ if $paginator.HasNext }}
     <li class="page-item">
       <a href="{{ $paginator.Next.URL }}" class="page-link">
-        <i class="mdi mdi-step-forward"></i>
+        {{ partial "mdi" "step-forward" }}
       </a>
     </li>
     {{ end }}
     {{ if ne $paginator.PageNumber $paginator.TotalPages }}
     <li class="page-item">
       <a class="page-link" href="{{ $paginator.Last.URL }}">
-        <i class="mdi mdi-step-forward-2"></i>
+        {{ partial "mdi" "step-forward-2" }}
       </a>
     </li>
     {{ end }}

layouts/partials/termin.html

@@ -10,7 +10,8 @@
         <h4 class="card-title mb-0">{{ .title }}</h4>
         {{ with .location }}
         <div class="card-text d-flex align-items-center">
-          <i class="mdi mdi-map-marker-radius-outline icon-s text-primary me-2"></i>{{ . | markdownify }}
+          <span class="text-primary icon-s d-flex me-2">{{ partial "mdi" "map-marker-radius-outline" }}</span>
+          {{ . | markdownify }}
         </div>
         {{ end }}
       </div>

layouts/partials/tile-modals.html

@@ -11,7 +11,7 @@
         <div class="col-lg-4 col-sm-6">
           <div class="card border-primary rounded-0 hover-shadow mb-2">
             <div class="container fb-tile-color" style="background-color:{{ .bg_color }};">
-              <i class="{{ .icon }} fb-tile-icon" style="color: {{ .font_color }}"></i>
+              <span class="fb-tile-icon" style="color: {{ .font_color }}">{{ partial "mdi" .icon }}</span>
             </div>
             <div class="card-body d-flex flex-column">
               <h4 class="card-title text-truncate">{{ .title }}</h4>

layouts/termine/list.html

@@ -7,12 +7,13 @@
       <li class="list-inline-item m-3 text-uppercase" data-filter="upcoming">Anstehend</li>
       <li class="list-inline-item m-3 text-uppercase" data-filter="past">Vergangen</li>
     </ul>
-    <div class="filtr-container row mx-auto">
+    <div class="filter-container row mx-auto">
       {{ range .Params.events }}
-      <div class="filtr-item col-12" data-category="{{ if or (ge (.date | time.AsTime).Unix now.Unix) (and .enddate (ge (.enddate | time.AsTime).Unix now.Unix)) }}upcoming{{else}}past{{end}}" data-time="{{.date}}">
+      <div class="filter-item col-12" data-groups="{{ if or (ge (.date | time.AsTime).Unix now.Unix) (and .enddate (ge (.enddate | time.AsTime).Unix now.Unix)) }}upcoming{{else}}past{{end}}" data-time="{{.date}}">
         {{ partial "termin" . }}
       </div>
       {{ end }}
+      <div class="filter-sizer col-1"></div>
     </div>
   </div>
 </section>

layouts/wettbewerbe/list.html

@@ -3,12 +3,13 @@
 <section class="section">
   <div class="container">
     {{ partial "filter-controls" . }}
-    <div class="row filtr-container">
+    <div class="filter-container row">
       {{ range .Data.Pages }}
-      <div data-category="{{ .Params.category | urlize }}" class="col-lg-4 col-sm-6 filtr-item">
+      <div data-groups="{{ .Params.category | urlize }}" class="col-lg-4 col-sm-6 filter-item">
         {{ partial "card-category" . }}
       </div>
       {{ end }}
+      <div class="filter-sizer col-1"></div>
     </div>
   </div>
 </section>

static/admin/config/collections/widgets.js

@@ -41,7 +41,7 @@ const IconList = {
   label: "Symbol",
   widget: "string",
   required: false,
-  hint: "Liste unter https://assets.cantorgymnasium.de/fonts/mdi/v7/preview.html",
+  hint: "Liste unter https://assets.cantorgymnasium.de/fonts/mdi/v7/preview.html. Das `mdi` am Anfang ist wegzulassen.",
 };
 
 const PreviewNumber = {

static/admin/config/props.js

@@ -9,6 +9,7 @@ const EditorProps = {
 
 const MarkdownProps = {
   widget: "markdown",
+  show_raw: true,
   toolbar_buttons: {
     main: [
       "bold",

static/admin/icons.js

@@ -17,6 +17,7 @@ const IconNames = {
   projektwoche: "mdi mdi-calendar-range-outline",
   superhaufen: "mdi mdi-view-dashboard",
   stats: "mdi mdi-chart-bar",
+  color: "mdi mdi-palette",
 };
 
 let Icons = [];

static/admin/index.html

@@ -9,12 +9,12 @@
     />
     <link
       rel="stylesheet"
-      href="https://unpkg.com/@staticcms/app@next/dist/main.css"
+      href="https://unpkg.com/@staticcms/app@^4.0.0/dist/main.css"
     />
     <title>Static CMS</title>
   </head>
   <body>
-    <script src="https://unpkg.com/@staticcms/app@next/dist/static-cms-app.js"></script>
+    <script src="https://unpkg.com/@staticcms/app@^4.0.0/dist/static-cms-app.js"></script>
     <script type="module">
       import config from "./config/index.js";
       // imports

static/admin/previews/page-previews/event-preview.js

@@ -31,11 +31,11 @@ const EventPreview = ({ widgetsFor, entry }) => {
         ),
         h(
           "div",
-          { className: "filtr-container row" },
+          { className: "filter-container row" },
           widgetsFor("events").map((event) =>
             h(
               "div",
-              { className: "filtr-item col-12" },
+              { className: "filter-item col-12" },
               h(
                 "div",
                 {

static/admin/previews/page-previews/styles.js

@@ -1,7 +1,7 @@
 const PreviewStyles = [
   "https://assets.cantorgymnasium.de/bootstrap/v5/css/bootstrap.min.css",
-  "https://assets.cantorgymnasium.de/fonts/fira/fira.css",
-  "https://assets.cantorgymnasium.de/fonts/ubuntu/ubuntu.css",
+  "https://assets.cantorgymnasium.de/fonts/fira/fira.min.css",
+  "https://assets.cantorgymnasium.de/fonts/ubuntu/ubuntu.min.css",
   "https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css",
   "/css/style.min.css",
 ];