Merge pull request #56 from acend/changes

korrekturen studio wanner

site/assets/js/utils/imageclouds.js

@@ -0,0 +1,25 @@
+
+export default function() {
+
+
+  console.log('imageclouds' );
+  const imageclouds = document.querySelectorAll('.imagecloud');
+
+
+  if (!imageclouds) return;
+
+  imageclouds.forEach(imagecloud => {
+    const children = imagecloud.children;
+    if (children.length > 0) {
+      const randomChild = children[Math.floor(Math.random() * children.length)];
+      randomChild.classList.replace('d-none', 'd-flex');
+
+      setTimeout(() => {
+        randomChild.dataset.scroll = 'in';
+      }, 200);
+
+
+    }
+  });
+
+}

site/assets/js/utils/scrollmove.js

@@ -15,4 +15,7 @@ export default function() {
       source: document.documentElement
     })
   });
+
+
+
 }

site/assets/js/utils/scrolltext.js

@@ -0,0 +1,67 @@
+
+export default function() {
+
+    /**
+   * Select all the messages
+   * @type {NodeList}
+   */
+    const messages = document.querySelectorAll('.marquee__inner');
+
+
+  if (!messages) return;
+
+
+
+  /**
+   * The speed in time (in milliseconds) of a single pixel.
+   * Changing this value will change the speed.
+   * @type {number}
+   */
+  let timePerPixel = 3;
+
+  /**
+   * Width of the container.
+   * Hardcoded for simplicity' sake.
+   * @type {number}
+   */
+  const containerWidth = window.innerWidth;
+
+
+  /**
+   * For each message, calculate the duration based on the lenght of the message.  
+   * Then set the animation-duration of the animation.
+   */
+  messages.forEach(message => {
+    const messageWidth = message.offsetWidth;
+    const distance = messageWidth + containerWidth;
+    const duration = timePerPixel * distance;
+
+    message.style.setProperty('--speed', `${duration}ms`);
+  });
+
+
+  /**
+   * Update the duration of the animation based on the scroll speed.
+   *
+  let lastScrollY = window.scrollY;
+
+  window.addEventListener('scroll', () => {
+    let scrollSpeed = Math.abs(window.scrollY - lastScrollY);
+    lastScrollY = window.scrollY;
+
+    console.log(scrollSpeed);
+
+    timePerPixel = 3 - (scrollSpeed / 100);
+
+    messages.forEach(message => {
+      const messageWidth = message.offsetWidth;
+      const distance = messageWidth + containerWidth;
+      const duration = timePerPixel * distance;
+
+      message.style.setProperty('--speed', `${duration}ms`);
+    });
+  });
+
+  */
+
+}

site/assets/js/views/on-every-page.js

@@ -8,6 +8,8 @@ import about from "js/views/about";
 import faq from "js/views/faq";
 import Slideshows from "js/utils/slideshows";
 import Scrollmove from "js/utils/scrollmove";
+import ScrollText from "js/utils/scrolltext";
+import imageclouds from "js/utils/imageclouds";
 
 // lazy sizes for image loading
 import 'lazysizes';
@@ -70,7 +72,9 @@ export default function() {
 
 
 
+  imageclouds();
   Scrollmove();
+  ScrollText();
   Slideshows();
   //home();
   trainings();

site/assets/scss/components/_accordions.scss

@@ -10,10 +10,19 @@
   //--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
   //--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 
-  @include media-breakpoint-up(lg) {
+  --bs-accordion-btn-padding-x: 1.6rem;
+  --bs-accordion-btn-padding-y: 1.6rem;
+  --bs-accordion-body-padding-x: 1.6rem;
+
+
+  @include media-breakpoint-up(sm) {
     --bs-accordion-btn-padding-x: 2rem;
-    --bs-accordion-btn-padding-y: 2.8rem;
+    --bs-accordion-btn-padding-y: 2.2rem;
     --bs-accordion-body-padding-x: 2rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    --bs-accordion-btn-padding-y: 2.8rem;
     --bs-accordion-body-padding-y: 0;
   }
 
@@ -31,8 +40,19 @@
   &::after {
     content: none;
   }
+
+  .title {
+    transition: transform 0.3s ease;
+  }
+
+  &[aria-expanded="false"]:hover {
+    .title {
+      transform: translateX(1rem);
+    }
+  }
 }
 
+/*
 .accordion-body {
   opacity: 0;
   transition: opacity 0.6s ease-in-out;
@@ -41,4 +61,5 @@
   .show & {
     opacity: 1;
   }
-}
+}
+  */

site/assets/scss/components/_scroll-out.scss

@@ -4,9 +4,11 @@
   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;
 
+  /*
   &.accordion-item {
     transform: translate(-20%, 0);
   }
+    */
 }
 
 [data-scroll="in"] {
@@ -22,7 +24,9 @@
   opacity: 0;
   transform: translateY(2rem);
 
+  /*
   &.accordion-item {
     transform: translate(-20%, 0);
   }
+    */
 }

site/assets/scss/components/_ticker-text.scss

@@ -32,11 +32,12 @@
 }
 
 .marquee__inner {
+  --speed: 15s;
   width: fit-content;
   display: flex;
   position: relative;
   transform: translate3d(var(--move-initial), 0, 0);
-  animation: marquee 15s linear infinite;
+  animation: marquee var(--speed) linear infinite;
 
   div {
     padding-right: 0.25em;

site/assets/scss/layouts/_footer.scss

@@ -1,5 +1,9 @@
 .footer-banner {
-  transform: translateY(25%);
+  transform: translateY(38%);
+
+  @include media-breakpoint-up(md) {
+    transform: translateY(25%);
+  }
 }
 
 

site/assets/scss/layouts/_header.scss

@@ -172,25 +172,28 @@
   .active & {
       &::after {
         transform: scaleX(1);
-
+        /*
         &:hover {
           transform: scaleX(0);
         }
+          */
       }
     }
 
   &:hover {
-      color: var(--primary);
-
+
+    color: var(--primary-medium);
+
       &::after {
         transform: scaleX(1);
-
-        .active & {
-          //width: 0;
-          //transform: translateX(100%);
-          //transform-origin: right;
-          //transition-delay: 0.1s;
-          transform: scaleX(0);
+        background-color: var(--primary-medium);
+      }
+
+    .active &  {
+      color: var(--primary);
+
+        &::after {
+          background-color: var(--primary);
         }
       }
     }
@@ -206,22 +209,23 @@
   &::after {
     content: "";
     display: block;
-    width: 0;
+    width: 100%;
     height: 1px;
     background-color: var(--primary);
     position: absolute;
     bottom: 0;
-    left: 0;
+    right: 0;
 
     .bg-primary & {
       background-color: #fff;
     }
     transition: width .2s ease-in-out;
   }
 
-    &:hover {
+    &:hover,
+    .stretched-link:hover & {
        &::after {
-        width: 100%;
+        width: 0%;
        }
     }
 }

site/assets/scss/layouts/_trainings.scss

@@ -50,7 +50,7 @@
     }
   }
 
-  .single.trainings & {
+  &.full {
     position: relative;
     top: auto;
     right: auto;

site/content/de/trainings/_index.md

@@ -9,9 +9,29 @@ draft: false
 header:
   title: "Trainings"
   lead: "Wir eröffnen neue Zugänge zu Cloud Native und Open Source."
-  img1 : "images/trainings/[email protected]"
-  img2 : "images/trainings/[email protected]"
-  img3 : "images/trainings/[email protected]"
+
+imagecloud:
+  - img1: "images/trainings/[email protected]"
+    img2: "images/trainings/[email protected]"
+    img3: "images/trainings/[email protected]"
+
+  - img1: "images/trainings/[email protected]"
+    img2: "images/trainings/[email protected]"
+    img3: "images/trainings/[email protected]"
+
+  - img1: "images/trainings/[email protected]"
+    img2: "images/trainings/[email protected]"
+    img3: "images/trainings/[email protected]"
+
+  - img1: "images/trainings/[email protected]"
+    img2: "images/trainings/[email protected]"
+    img3: "images/trainings/[email protected]"
+
+  - img1: "images/trainings/[email protected]"
+    img2: "images/trainings/[email protected]"
+    img3: "images/trainings/[email protected]"
+
+
 
 filtertitle: "Das passende Training für dich"
 categories: