Merge pull request #59 from acend/changes

optimized page transition
acend · Oct 7, 2024 · 4469774 · 4469774
2 parents 752454a + 4faa2d0
commit 4469774
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 26 deletions.
diff --git a/site/assets/js/views/on-every-page.js b/site/assets/js/views/on-every-page.js
@@ -95,11 +95,11 @@ if (anmeldeToggler) {
 }          
 
 
-/*
+/* autoplay ios fix */
 document.querySelectorAll('video[autoplay]').forEach( video => {
   video.play();
 });
- */
+
 
   const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
 

diff --git a/site/assets/scss/common/_swup.scss b/site/assets/scss/common/_swup.scss
@@ -2,15 +2,31 @@ html.is-changing .transition-fade {
   view-transition-name: main;
 }
 ::view-transition-old(main) {
-  animation: fade 0.3s ease-in-out both;
+  animation: fadeOut 0.4s ease-out both;
   //min-height: 100vh;
 }
 ::view-transition-new(main) {
-  animation: fade 0.3s ease-in-out both reverse;
+  animation: fadeIn 0.4s ease-out both;
 }
-@keyframes fade {
-  from { opacity: 1; }
-  to { opacity: 0; }
+@keyframes fadeIn {
+  from { 
+    opacity: 0;
+    transform: translateY(2rem);
+  }
+  to { 
+    opacity: 1; 
+    transform: translateY(0);
+  }
+}
+@keyframes fadeOut {
+  from { 
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to { 
+    opacity: 0; 
+    transform: translateY(-2rem);
+  }
 }
 
 

diff --git a/site/hugo_stats.json b/site/hugo_stats.json
@@ -43,7 +43,6 @@
       "option",
       "p",
       "path",
-      "picture",
       "polygon",
       "rect",
       "script",
@@ -68,7 +67,6 @@
     ],
     "classes": [
       "4",
-      "^col-lg-7",
       "about",
       "accordion",
       "accordion-body",
@@ -277,7 +275,6 @@
       "mb-18",
       "mb-2",
       "mb-20",
-      "mb-29",
       "mb-3",
       "mb-4",
       "mb-5",
@@ -374,12 +371,13 @@
       "offset-md-1",
       "open-source",
       "openshift-operations",
-      "optimized",
       "order-lg-1",
       "order-lg-3",
       "order-md-1",
       "outline",
       "overflow-hidden",
+      "overflow-hidden_",
+      "overflow-x-hidden",
       "p-0",
       "p-2",
       "p-3_",
@@ -473,7 +471,6 @@
       "row-cols-sm-2",
       "scroll-down",
       "scrollmove",
-      "scrollmove_",
       "section",
       "section-about",
       "serverless",

diff --git a/site/layouts/index.html b/site/layouts/index.html
@@ -2,13 +2,13 @@
 {{ $data := index .Site.Data .Site.Language.Lang }}
 
 {{ with  $data.homepage.video }}
-<div data-scroll class="hero-video px-lg-6  position-relative">
+<div data-scroll_ class="hero-video px-lg-6  position-relative">
   <div class="bg-primary video-container pb-0">
     <video    autoplay loop muted playsinline class="cover">
       <source src="{{ .src }}" type="video/mp4"> 
     </video>
     <div class="scroll-down position-absolute bottom-0 left-0 w-100 text-center pb-6">
-      <a href="#start">
+      <a href="#start" aria-label="Scroll down">
         <svg width="42" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M39 3 21 21 3 3" stroke="#fff" stroke-width="4" stroke-miterlimit="10" stroke-linecap="square"/></svg>
       </a>
     </div>

diff --git a/site/layouts/partials/content-partner.html b/site/layouts/partials/content-partner.html
@@ -5,7 +5,7 @@
       <div class="ratio " style="--bs-aspect-ratio: 60%;">
         {{ if eq $logo.MediaType.SubType "svg" }}
         <div class="p-lg-4">
-          <img src="{{ $logo.RelPermalink }}" alt="{{ .title }}" width="200" height="200" class="contain">  
+          <img src="{{ $logo.RelPermalink }}" alt="{{ .title }}" width="200" height="200" class="contain" loading="lazy">  
          </div>
         {{ else }}
         <div class="p-4">

diff --git a/site/layouts/partials/page-header.html b/site/layouts/partials/page-header.html
@@ -1,8 +1,8 @@
 <div class="container-fluid mb-8 mb-lg-16">
   <div class="col-lg-7">
-    <h1 data-scroll class="h4 mb-2">{{ .title | markdownify }}</h1>
+    <h1 data-scroll_ class="h4 mb-2">{{ .title | markdownify }}</h1>
     {{ with .lead }}
-        <div data-scroll class="h1 sm mb-0">{{ . | markdownify }}</div>
+        <div data-scroll_ class="h1 sm mb-0">{{ . | markdownify }}</div>
     {{ end }}
   </div>
 </div>
diff --git a/site/layouts/trainings/list.html b/site/layouts/trainings/list.html
@@ -1,18 +1,18 @@
 {{ define "main" }}
 
-<div class="overflow-hidden">
+<div class="overflow-hidden_">
 
 <div class="container-fluid mb-16 mb-lg-32">
   <div class="row ">
     <div class="col-lg-6">
       {{ with .Params.header }}
-      <h1 data-scroll class="h4 mb-2 mb-lg-3">{{ .title | markdownify }}</h1>
-         <div data-scroll class="h1 sm mb-0">{{ .lead | markdownify }}</div>
+      <h1 data-scroll_ class="h4 mb-2 mb-lg-3">{{ .title | markdownify }}</h1>
+         <div data-scroll_ class="h1 sm mb-0">{{ .lead | markdownify }}</div>
 
       {{ end }}
     </div>
 
-     <div data-scroll class="col-lg-6 py-16 py-lg-32 imagecloud">
+     <div data-scroll_ class="col-lg-6 py-16 py-lg-32 imagecloud">
 
 
       {{ range .Params.imagecloud }}
@@ -118,15 +118,16 @@ <h2 data-scroll class="mb-4 mb-lg-8">{{ .Params.filtertitle }}</h2>
 
       <div data-scroll class="d-flex my-auto images">
         <div class="img-container align-self-end mb-20 z-1" id="l1">
-          {{ partial "img-srcset.html" (dict "img" .img3 "size" 300 "lazy" false) }}
+          {{- partial "img" (dict "page" . "src"  .img3 "width" 300 "process" ""  ) }} 
         </div>
         <div class="img-container" id="l2">
-          {{ partial "img-srcset.html" (dict "img" .img2 "size" 600 "lazy" false) }}
+          {{- partial "img" (dict "page" . "src"  .img2 "width" 600 "process" ""  ) }} 
         </div>
         <div class="img-container mt-10 z-1" id="l3">
-          {{ partial "img-srcset.html" (dict "img" .img1 "size" 200 "lazy" false) }}
+          {{- partial "img" (dict "page" . "src"  .img1 "width" 200 "process" ""  ) }} 
         </div>
       </div>
+
 
     </div>
 

diff --git a/site/layouts/ueber-uns/list.html b/site/layouts/ueber-uns/list.html
@@ -5,14 +5,14 @@
 {{ end }}
 
 {{ with .Params.timeline }}
-<div class="overflow-hidden mb-8 mb-lg-16">
+<div class="overflow-x-hidden mb-8 mb-lg-16">
   <div class="container-fluid">
     <div class="col-lg-10 offset-lg-1 scrollmove">
       <div class="row flex-nowrap">
 
         {{ range .items}}
         <div class="col-8 col-md-6">
-          <div data-scroll class="timeline-item me-20 me-lg-48">
+          <div data-scroll_ class="timeline-item me-20 me-lg-48">
               <h2>{{ .title }}</h2>
               <p>{{ .subtitle }}</p>
               {{ with .img }}