Sync dev with master

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>