diff --git a/site/assets/scss/app.scss b/site/assets/scss/app.scss index 0a36185..ce4271f 100644 --- a/site/assets/scss/app.scss +++ b/site/assets/scss/app.scss @@ -31,6 +31,7 @@ @import "components/accordions"; @import "components/animations"; @import "components/headroom"; +@import "components/ticker-text"; @import "layouts/home"; @import "layouts/about"; diff --git a/site/assets/scss/common/_global.scss b/site/assets/scss/common/_global.scss index 4356141..66620e5 100644 --- a/site/assets/scss/common/_global.scss +++ b/site/assets/scss/common/_global.scss @@ -317,7 +317,7 @@ a { .title-huge { font-family: "TTFirsNeue-Medium", sans-serif; font-size: 15.2rem; - line-height: 1; + line-height: 1.05; white-space: nowrap; overflow: hidden; -webkit-text-fill-color: transparent; diff --git a/site/assets/scss/components/_ticker-text.scss b/site/assets/scss/components/_ticker-text.scss new file mode 100644 index 0000000..5059aec --- /dev/null +++ b/site/assets/scss/components/_ticker-text.scss @@ -0,0 +1,55 @@ +/* +.ticker { + overflow: hidden; + font-family: var(--font); + font-weight: 500; + font-size: 3rem; + line-height: 1; + + @include media-breakpoint-down(sm) { + font-size: 2rem; + } + + .inner { + position: relative; + width: 100%; + display: flex; + color: white; + font-size: 8rem; + + > * { + white-space: nowrap; + padding-right: 0.5em; + } + } +} +*/ + +.marquee { + --offset: 20vw; + --move-initial: calc(-25% + var(--offset)); + --move-final: calc(-50% + var(--offset)); +} + +.marquee__inner { + width: fit-content; + display: flex; + position: relative; + transform: translate3d(var(--move-initial), 0, 0); + animation: marquee 15s linear infinite; + + div { + padding-right: 0.25em; + } +} + + +@keyframes marquee { + 0% { + transform: translate3d(var(--move-initial), 0, 0); + } + + 100% { + transform: translate3d(var(--move-final), 0, 0); + } +} diff --git a/site/hugo_stats.json b/site/hugo_stats.json index 2dc2937..0c0bcd1 100644 --- a/site/hugo_stats.json +++ b/site/hugo_stats.json @@ -162,6 +162,7 @@ "contain", "container", "container-fluid", + "container-fluid_", "container-kubernetes", "container-openshift", "content", @@ -262,6 +263,8 @@ "list", "logo", "m-0", + "marquee", + "marquee__inner", "mb-0", "mb-10", "mb-16", @@ -456,6 +459,7 @@ "row-cols-lg-4", "row-cols-md-2", "scrollmove", + "scrollmove_", "section", "section-about", "serverless", diff --git a/site/layouts/trainings/single.html b/site/layouts/trainings/single.html index 0851e7d..a3c364c 100644 --- a/site/layouts/trainings/single.html +++ b/site/layouts/trainings/single.html @@ -8,9 +8,18 @@
-
-
-
+
+
+
+ {{ .Title }} +
+
+ {{ .Title }} +
+
+ {{ .Title }} +
+
{{ .Title }}