diff --git a/site/assets/js/app.js b/site/assets/js/app.js index c7ee204..dc66594 100644 --- a/site/assets/js/app.js +++ b/site/assets/js/app.js @@ -5,6 +5,7 @@ import Swup from 'swup'; import SwupBodyClassPlugin from '@swup/body-class-plugin'; import SwupHeadPlugin from '@swup/head-plugin'; +//import SwupScrollPlugin from '@swup/scroll-plugin'; //import SwupDebugPlugin from '@swup/debug-plugin'; import starterScripts from "./assets/js/views/starter-scripts"; @@ -20,6 +21,12 @@ const swup = new Swup({ plugins: [ new SwupBodyClassPlugin(), new SwupHeadPlugin({ persistAssets: true }), + /* + new SwupScrollPlugin({ + //doScrollingRightAway: true, + //animateScroll: false + }), + */ //new SwupDebugPlugin(), ], }); diff --git a/site/assets/js/views/on-every-page.js b/site/assets/js/views/on-every-page.js index 83d6c78..e642f72 100644 --- a/site/assets/js/views/on-every-page.js +++ b/site/assets/js/views/on-every-page.js @@ -1,6 +1,6 @@ import ScrollOut from "scroll-out"; -import Sticky from "sticky-js"; +//import Sticky from "sticky-js"; import home from "js/views/home"; import trainings from "js/views/trainings"; @@ -35,7 +35,7 @@ export default function() { }); */ - var sticky = new Sticky('.sticky'); + // var sticky = new Sticky('.sticky'); let root = document.documentElement; @@ -84,16 +84,16 @@ export default function() { - + // still needed? const anmeldeToggler = document.querySelector(".anmelde-toggler"); if (anmeldeToggler) { anmeldeToggler.addEventListener('click', function() { - document.querySelector('.box-anmelden .sticky').classList.toggle('d-none'); + document.querySelector('.box-anmelden .inner').classList.toggle('active'); }); } - + /* autoplay ios fix */ document.querySelectorAll('video[autoplay]').forEach( video => { diff --git a/site/assets/scss/common/_swup.scss b/site/assets/scss/common/_swup.scss index 1bdb8db..7f2e1f3 100644 --- a/site/assets/scss/common/_swup.scss +++ b/site/assets/scss/common/_swup.scss @@ -1,3 +1,21 @@ +::view-transition-old(*), +::view-transition-new(*) { + position: absolute; + //top: 0; + inset-block-start: 0; + inline-size: 100%; + block-size: auto; + + // animation-duration: inherit; + animation-fill-mode: inherit; + // animation-delay: inherit; +} + +::view-transition-new(*) { + //top: -2rem; +} + + html.is-changing .transition-fade { view-transition-name: main; } diff --git a/site/assets/scss/layouts/_faq.scss b/site/assets/scss/layouts/_faq.scss index c347cb9..0934854 100644 --- a/site/assets/scss/layouts/_faq.scss +++ b/site/assets/scss/layouts/_faq.scss @@ -1,8 +1,10 @@ -.sticky-top{ +.sticky-top { top: 4rem; - &[stuck] { + /* + &[stuck] { box-shadow: 0 0 16px black; } + */ } .topics-selector-group { diff --git a/site/assets/scss/layouts/_trainings.scss b/site/assets/scss/layouts/_trainings.scss index 12e8396..1b9f9ff 100644 --- a/site/assets/scss/layouts/_trainings.scss +++ b/site/assets/scss/layouts/_trainings.scss @@ -144,23 +144,46 @@ } }*/ -.box-anmelden .sticky { - transition: box-shadow 0.2s ease-in-out; +.box-anmelden.sticky-top { + //transition: box-shadow 0.2s ease-in-out; + top: 12rem; - &.is-sticky { - // box-shadow: 0 0 30px rgba(0,0,0,0.2); - // box-shadow: 0 0 30px var(--shadowColor); - //z-index: 2; - } - @include media-breakpoint-down(sm) { - //.box-anmelden { + @include media-breakpoint-down(md) { + + .inner { + + //.box-anmelden { position: fixed; - top: 180px; - left: 15px; - right: 15px; + //top: 180px; + bottom: 180px; + left: 1.8rem; + right: 1.8rem; z-index: 5; - box-shadow: 0 0 30px rgba(0,0,0,0.2); - box-shadow: 0 0 30px var(--shadowColor); + //box-shadow: 0 0 30px rgba(0,0,0,0.2); + //box-shadow: 0 0 30px var(--shadowColor); + + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.45, 0.98); + transform: scale(0, 0); + transform-origin: bottom right; + + .box, + .btn { + opacity: 0; + transition: opacity 0.3s ease 0.3s; + transition-delay: 0s; + } + + &.active { + transform: scale(1); + transition: all 0.3s cubic-bezier(0.37, 0.03, 0.27, 1.55); + + .box, + .btn { + opacity: 1; + transition: opacity 0.3s ease 0.3s; + } + } + } // } } } diff --git a/site/hugo_stats.json b/site/hugo_stats.json index ada7c52..4f64894 100644 --- a/site/hugo_stats.json +++ b/site/hugo_stats.json @@ -83,6 +83,7 @@ "align-items-start", "align-self-end", "anmelde-toggler", + "anmelde-toggler_", "ansible", "argo-cd", "author", @@ -101,6 +102,7 @@ "border-bottom", "border-top", "bottom-0", + "box", "box-anmelden", "box-large", "box-training", @@ -144,6 +146,7 @@ "col-lg-7", "col-lg-8", "col-lg-9", + "col-md-1", "col-md-10", "col-md-3", "col-md-4", @@ -177,8 +180,12 @@ "d-md-inline", "d-md-none", "d-none", + "d-none_", "datenschutz", "delivery-ci-cd", + "dropdown", + "dropdown-menu", + "dropdown-toggle", "duration", "email", "entry-content", @@ -294,6 +301,7 @@ "mb-lg-6", "mb-lg-8", "mb-md-0", + "mb-md-2", "mb-md-6", "mc-field-group", "md", @@ -376,6 +384,7 @@ "order-lg-1", "order-lg-3", "order-md-1", + "order-md-3", "outline", "overflow-hidden", "overflow-hidden_", @@ -417,6 +426,7 @@ "ps-lg-3", "ps-lg-6", "ps-lg-8", + "ps-md-10", "ps-md-4", "pt-1", "pt-10", diff --git a/site/layouts/trainings/single.html b/site/layouts/trainings/single.html index 4fd13bd..db20f76 100644 --- a/site/layouts/trainings/single.html +++ b/site/layouts/trainings/single.html @@ -17,13 +17,13 @@
-
+
Training

{{ .Title }}

-
+
{{ if .Params.techlogo.full }} {{ with .Params.techlogo.full }} {{ with resources.Get . }} @@ -36,8 +36,8 @@

{{ .Title }}

{{ if .Params.kooperation.enable }} -
-
{{ .Params.kooperation.subtitle | safeHTML }}
+
+
{{ .Params.kooperation.subtitle | safeHTML }}
{{ end }} @@ -47,7 +47,7 @@

{{ .Title }}

-
+
{{ .Params.main_title | markdownify}}
{{ .Params.main_text | markdownify}} @@ -180,17 +180,17 @@

{{ .title | markdownify }}

-
+
-
+
-
+
-
+
{{ with .Params.duration }}
diff --git a/site/package-lock.json b/site/package-lock.json index ab46557..9b3b8d3 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -20,7 +20,6 @@ "gethyas": "^2.4.2", "headroom.js": "^0.12.0", "scroll-out": "^2.2.12", - "sticky-js": "^1.3.0", "swup": "^4.7.0" }, "devDependencies": { @@ -4205,12 +4204,6 @@ "node": ">=0.10.0" } }, - "node_modules/sticky-js": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/sticky-js/-/sticky-js-1.3.0.tgz", - "integrity": "sha512-X5zWjFrw7c2xE4tUtSeK7I+1o252JOyZOlzxsu1Q9qZ6hlk2NCd9Sr/AFxf8hfGkLnE1Pak+iLaDyd883LFRgw==", - "license": "MIT" - }, "node_modules/string-width": { "version": "4.2.3", "license": "MIT", diff --git a/site/package.json b/site/package.json index 3494e47..ba572e6 100644 --- a/site/package.json +++ b/site/package.json @@ -23,7 +23,6 @@ "gethyas": "^2.4.2", "headroom.js": "^0.12.0", "scroll-out": "^2.2.12", - "sticky-js": "^1.3.0", "swup": "^4.7.0" }, "devDependencies": {