code clean up / single training page

acend · Oct 4, 2024 · 31b6408 · 31b6408
1 parent 1610c49
commit 31b6408
Show file tree

Hide file tree

Showing 11 changed files with 94 additions and 56 deletions.
diff --git a/site/assets/js/app.js b/site/assets/js/app.js
@@ -16,6 +16,7 @@ const swup = new Swup({
   containers: ['#main', '#main-menu', '#top-menu' ],
   ignoreVisit: (url, { el } = {}) => el?.closest('.language-switcher') ,
   //ignoreVisit: (url, { el } = {}) => el?.closest('[data-no-swup]') || el?.closest('#wpadminbar'),
+  native: true,
   plugins: [
     new SwupBodyClassPlugin(),
     new SwupHeadPlugin({ persistAssets: true }),

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) {
 }          
 
 
-
+/*
 document.querySelectorAll('video[autoplay]').forEach( video => {
   video.play();
 });
-
+ */
 
   const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
 

diff --git a/site/assets/scss/common/_global.scss b/site/assets/scss/common/_global.scss
@@ -7,9 +7,10 @@
 
   @include media-breakpoint-up(md) {
     --body-padding-top: 20rem;
-
+    
     &:has(.home) {
       --body-padding-top: 12rem;
+      scroll-behavior: smooth !important;
     }
   }
 }
@@ -28,23 +29,26 @@ body {
 
   display: flex;
   flex-direction: column;
-  padding-top: var(--body-padding-top);
-
+
   color: $AC-Blue;
   color: var(--primary);
-
+  
   @include media-breakpoint-up(lg) {
     font-size: 1.8rem;
     //padding-top: 23rem;
   }
-
+  
   -moz-font-feature-settings: "ss01";
   -webkit-font-feature-settings: "ss01";
   font-feature-settings: "ss01";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+#main {
+  padding-top: var(--body-padding-top);
+
+}
 
 //icons
 .icon {
@@ -223,7 +227,10 @@ h6,
   }
 }
 
-.bold {
+.bold,
+b,
+strong {
+  font-weight: normal;
   font-family: "TTFirsNeue-Medium", sans-serif;
 }
 

diff --git a/site/assets/scss/common/_swup.scss b/site/assets/scss/common/_swup.scss
@@ -1,9 +1,26 @@
-/* Define a transition duration during page visits */
 html.is-changing .transition-fade {
-  transition: opacity 0.2s;
+  view-transition-name: main;
+}
+::view-transition-old(main) {
+  animation: fade 0.3s ease-in-out both;
+  //min-height: 100vh;
+}
+::view-transition-new(main) {
+  animation: fade 0.3s ease-in-out both reverse;
+}
+@keyframes fade {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+
+/* Define a transition duration during page visits */
+
+html.is-changing:not(.swup-native) .transition-fade {
+  transition: 0.25s opacity;
   opacity: 1;
 }
 /* Define the styles for the unloaded pages */
-html.is-animating .transition-fade {
+html.is-animating:not(.swup-native) .transition-fade {
   opacity: 0;
-}
+}
diff --git a/site/assets/scss/components/_scroll-out.scss b/site/assets/scss/components/_scroll-out.scss
@@ -2,7 +2,7 @@
   opacity: 0;
   transform: translateY(2rem);
   will-change: opacity, transform;
-  transition: opacity 0.5s cubic-bezier(0.215,0.61,0.355,1) 0.5s, transform 0.75s cubic-bezier(0.215,0.61,0.355,1) 0.5s;
+  transition: opacity 0.3s cubic-bezier(0.215,0.61,0.355,1) 0.2s, transform 0.75s cubic-bezier(0.215,0.61,0.355,1) 0.2s;
 
   /*
   &.accordion-item {

diff --git a/site/hugo_stats.json b/site/hugo_stats.json
@@ -68,6 +68,7 @@
     ],
     "classes": [
       "4",
+      "^col-lg-7",
       "about",
       "accordion",
       "accordion-body",
@@ -374,6 +375,8 @@
       "open-source",
       "openshift-operations",
       "optimized",
+      "order-lg-1",
+      "order-lg-3",
       "order-md-1",
       "outline",
       "overflow-hidden",
@@ -468,6 +471,7 @@
       "row-cols-md-2",
       "row-cols-md-3",
       "row-cols-sm-2",
+      "scroll-down",
       "scrollmove",
       "scrollmove_",
       "section",
@@ -496,6 +500,7 @@
       "testimonial-carousel",
       "text-center",
       "text-end",
+      "text-lg-end",
       "text-md-end",
       "text-white",
       "timeline-item",
@@ -678,6 +683,7 @@
       "signupModal",
       "signupModalLabel",
       "slack-bleib-mit-uns-in-kontakt",
+      "start",
       "team",
       "telefon",
       "top-menu",

diff --git a/site/layouts/contact/list.html b/site/layouts/contact/list.html
@@ -11,7 +11,7 @@
     <div class="row">
 
       <div class="col-lg-9 offset-lg-3">
-            <form id="contactform" action="{{site.Params.contact.form_action}}" method="POST" >
+            <form data-scroll id="contactform" action="{{site.Params.contact.form_action}}" method="POST" >
 
               <div class="mb-4">
                 <div class="form-check form-check-inline">

diff --git a/site/layouts/index.html b/site/layouts/index.html
@@ -2,13 +2,19 @@
 {{ $data := index .Site.Data .Site.Language.Lang }}
 
 {{ with  $data.homepage.video }}
-<div class="hero-video px-lg-6 mb-16 mb-lg-32 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    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">
+        <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>
   </div>
 
-  <h1 data-scroll="out" class="position-absolute bottom-0 left-0 text-white col-lg-5 px-4 px-lg-8 mb-8 mb-lg-16">{{ .title }}</h1>
+  <h1 data-scroll="out" class="position-absolute bottom-0 left-0 text-white col-lg-5 px-4 px-lg-8 mb-20 mb-lg-16">{{ .title }}</h1>
 
 </div>
 {{ end }}
@@ -17,7 +23,7 @@ <h1 data-scroll="out" class="position-absolute bottom-0 left-0 text-white col-lg
 
   <!-- trainings -->
   {{ with  $data.homepage.trainings }}
-  <section class="section section mb-16 mb-lg-32">
+  <section id="start" class="section mb-16 mb-lg-32 pt-16 pt-lg-32">
     <div class="container-fluid">
        {{ with .label }}
           <a data-scroll class="btn btn-sm btn-outline-primary border-1 py-0  mb-2" href="{{ i18n "trainingsLink" }}">{{ . }}</a>
@@ -94,7 +100,7 @@ <h2 data-scroll class="mb-2 col-lg-4">{{  .title }}</h2>
       </div>           
     </div>
 
-    <div class="clients-carousel mb-16 mb-lg-32">
+    <div data-scroll class="clients-carousel mb-16 mb-lg-32">
     {{ range .item }}
       {{ $title := .title }}
       {{ with resources.Get .logo }}

diff --git a/site/layouts/partials/footer/footer.html b/site/layouts/partials/footer/footer.html
@@ -43,10 +43,10 @@ <h5 class="d-inline-block me-3 me-md-6 mb-3 mb-md-0">{{ i18n "followUs" }}</h5>
 
           {{ with site.Params.social }}
           <a class="d-inline-block  me-2" href="{{.linkedin }}"  target="_blank" rel="noopener" aria-label="LinkedIn Profile">
-            <svg class="icon-lg"  width="64px" height="64px" viewBox="0 0 40 40"   fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.555 12.87A3.307 3.307 0 0 1 6.25 9.56a3.307 3.307 0 0 1 3.304-3.31 3.307 3.307 0 0 1 3.304 3.31c0 1.828-1.479 3.31-3.303 3.31ZM6.702 33.75h5.7V15.38h-5.7v18.37Zm21.351 0h5.695l.002-10.077c0-4.947-1.064-8.75-6.836-8.75a5.988 5.988 0 0 0-5.392 2.968h-.077v-2.51H15.98v18.368h5.694v-9.086c0-2.397.454-4.717 3.42-4.717 2.923 0 2.96 2.742 2.96 4.872v8.932Z" fill="#074761"/></svg>
+            <svg class="icon icon-lg"  width="64px" height="64px" viewBox="0 0 40 40"   fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.555 12.87A3.307 3.307 0 0 1 6.25 9.56a3.307 3.307 0 0 1 3.304-3.31 3.307 3.307 0 0 1 3.304 3.31c0 1.828-1.479 3.31-3.303 3.31ZM6.702 33.75h5.7V15.38h-5.7v18.37Zm21.351 0h5.695l.002-10.077c0-4.947-1.064-8.75-6.836-8.75a5.988 5.988 0 0 0-5.392 2.968h-.077v-2.51H15.98v18.368h5.694v-9.086c0-2.397.454-4.717 3.42-4.717 2.923 0 2.96 2.742 2.96 4.872v8.932Z" fill="#074761"/></svg>
           </a>
           <a class="d-inline-block me-2" href="{{.twitter }}"  target="_blank" rel="noopener" aria-label="Profile on X">
-            <svg class="icon-lg" viewBox="0 0 40 40"  width="64px" height="64px" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m18.63 23.97-7.618 8.53h-4.22l9.867-11.052 1.971 2.523ZM20.933 15.95l6.975-7.825h4.217l-9.239 10.361-1.953-2.537Z" fill="#074761"/><path d="M33.75 32.5h-8.486L6.25 8.125h8.701L33.75 32.5Zm-7.322-2.475h2.336L13.682 10.47h-2.508l15.254 19.555Z" fill="#074761"/></svg>
+            <svg class="icon icon-lg" viewBox="0 0 40 40"  width="64px" height="64px" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m18.63 23.97-7.618 8.53h-4.22l9.867-11.052 1.971 2.523ZM20.933 15.95l6.975-7.825h4.217l-9.239 10.361-1.953-2.537Z" fill="#074761"/><path d="M33.75 32.5h-8.486L6.25 8.125h8.701L33.75 32.5Zm-7.322-2.475h2.336L13.682 10.47h-2.508l15.254 19.555Z" fill="#074761"/></svg>
           </a>
           {{ end }}
         </div>

diff --git a/site/layouts/trainings/list.html b/site/layouts/trainings/list.html
@@ -1,5 +1,7 @@
 {{ define "main" }}
 
+<div class="overflow-hidden">
+
 <div class="container-fluid mb-16 mb-lg-32">
   <div class="row ">
     <div class="col-lg-6">
@@ -10,13 +12,13 @@ <h1 data-scroll class="h4 mb-2 mb-lg-3">{{ .title | markdownify }}</h1>
       {{ end }}
     </div>
 
-     <div 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 }}
 
 
-      <div data-scroll class="d-none images">
+      <div  class="d-none images">
         <div class="img-container align-self-end mb-10 z-1" id="l1">
           {{- partial "img" (dict "page" . "src"  .img1 "width" 200 "process" ""  ) }} 
           </div>
@@ -73,7 +75,6 @@ <h2 data-scroll class="mb-4 mb-lg-8">{{ .Params.filtertitle }}</h2>
       </div>
 
 
-
 
       <div class="row gy-8 gy-lg-16 gx-lg-15">
         {{ range .Data.Pages }}
@@ -82,6 +83,8 @@ <h2 data-scroll class="mb-4 mb-lg-8">{{ .Params.filtertitle }}</h2>
       </div>
 
   </div>
+
+</div>
 
 {{ with .Params.zertifikate }}
   <div class="px-lg-6 mb-16_ mb-lg-32_">
@@ -155,7 +158,7 @@ <h2  data-scroll  class="mb-4 ">{{ .title }}</h2>
       <div data-scroll class="accordion-item">
         <h3 class="accordion-header" id="heading{{ $index }}">
           <button class="accordion-button strong {{ if (ne $index 0) }} collapsed {{ end }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $index }}" aria-expanded="{{ if (eq $index 0) }}true{{ else }}false{{ end }}" aria-controls="collapse{{ $index }}">
-            {{ .question }} <div class="icon-plus ms-auto me-3"></div>
+            <div class="title">{{ .question }}</div> <div class="icon-plus ms-auto me-3"></div>
           </button>
         </h3>
         <div id="collapse{{ $index }}" class="accordion-collapse collapse {{ if (eq $index 0) }} show {{ end }}" aria-labelledby="heading{{ $index }}" data-bs-parent="#faqAccordion">

diff --git a/site/layouts/trainings/single.html b/site/layouts/trainings/single.html
@@ -1,36 +1,29 @@
 {{ define "main" }}
 
 
+
 
-
-
-
-
-<section data-sticky-container class="section mb-5">
-
-  <div class="title-huge overflow-hidden marquee position-relative">
+  <div class="title-huge overflow-hidden marquee position-relative mb-4">
     <div class="marquee__inner">
-       <div class="scrollmove_">
-         {{ .Title }}
-       </div>
-       <div class="scrollmove_">
-         {{ .Title }}
-       </div>
-       <div class="scrollmove_">
-         {{ .Title }}
-       </div>
-       <div class="scrollmove_">
-         {{ .Title }}
-       </div>
+       <div>{{ .Title }}</div>
+       <div>{{ .Title }}</div>
+       <div>{{ .Title }}</div>
+       <div>{{ .Title }}</div>
     </div>
   </div>
 
 
 
-  <div class="container-fluid">
+  <div class="container-fluid mb-16 mb-lg-32" data-sticky-container>
     <div class="row">
 
-      <div class="col-lg-1  pt-2">
+      <div class="col-8 col-lg-7 order-lg-1">
+        <div class="h4 mb-0 mb-lg-4">Training</div> 
+        <h1 class="mb-8 mb-lg-16">{{ .Title }}</h1>
+      </div>
+
+
+      <div class="col-4 col-lg-1 pt-2">
         {{ if .Params.techlogo.full }}
         {{ with .Params.techlogo.full }}
          {{ with resources.Get . }}
@@ -42,10 +35,19 @@
         {{ end }}
       </div>
 
-      <div class="col-lg-7">
-        <div class="h4 mb-0 mb-lg-4">Training</div> 
-        <h1 class="mb-8 mb-lg-16">{{ .Title }}</h1>
+      {{ if .Params.kooperation.enable }}
+        <div class="col-7 col-lg-3 offset-lg-1 ps-lg-10 order-lg-3">
+          <div class="mb-8 text-lg-end">{{ .Params.kooperation.subtitle | safeHTML }}</div>
+        </div>
+        {{ end }}
+
+      </div>
+
 
+
+      <div class="row">
+
+        <div class="col-lg-7 offset-lg-1">
         <div class="h2 mb-4 mb-lg-8">{{ .Params.main_title | markdownify}}</div>
         <div class="entry-content mb-16 mb-lg-32">
           {{ .Params.main_text | markdownify}}
@@ -156,7 +158,7 @@ <h4 class="bold mb-3">{{  .title | markdownify}}</h4>
 
         {{ if .Params.kooperation.enable }}
           {{ with .Params.kooperation }}
-          <div  data-scroll class="row section mb-16 mb-lg-32">
+          <div  data-scroll class="row">
 
                   <h3 class="mb-4 mb-md-6 pb-2 border-bottom">{{ .title  | markdownify }}</h3>
 
@@ -179,10 +181,6 @@ <h3 class="mb-4 mb-md-6 pb-2 border-bottom">{{ .title  | markdownify }}</h3>
 
 
       <div class="col-lg-3 offset-lg-1 ps-lg-10">
-        {{ if .Params.kooperation.enable }}
-          <div class="mb-29 text-end">{{ .Params.kooperation.subtitle | safeHTML }}</div>
-        {{ end }}
-
 
 
         <div id="box-anmelden" class="w-100 box-anmelden">
@@ -251,7 +249,7 @@ <h3 class="mb-4 mb-md-6 pb-2 border-bottom">{{ .title  | markdownify }}</h3>
 
     </div>
   </div>
-</section>
+