Merge pull request #45 from acend/changes

marquee
acend · Sep 23, 2024 · 581d130 · 581d130
2 parents 6894311 + 25d2561
commit 581d130
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -8,9 +8,18 @@
 
 <section data-sticky-container class="section mb-5">
 
-  <div class="title-huge overflow-hidden">
-    <div class="container-fluid">
-       <div class="scrollmove">
+  <div class="title-huge overflow-hidden marquee position-relative">
+    <div class="container-fluid_ marquee__inner">
+       <div class="scrollmove_">
+         {{ .Title }}
+       </div>
+       <div class="scrollmove_">
+         {{ .Title }}
+       </div>
+       <div class="scrollmove_">
+         {{ .Title }}
+       </div>
+       <div class="scrollmove_">
          {{ .Title }}
        </div>
     </div>