c0.1.134 Awards Marquee

static/style.css

@@ -804,6 +804,109 @@ b {
   margin-bottom: 20px;
 }
 
+:root {
+  /* --color-text: black;
+  --color-bg: white;
+  --color-bg-accent: gray; */
+  --size: clamp(10rem, 1rem + 40vmin, 30rem);
+  --gap: calc(var(--size) / 14);
+  --duration: 10s;
+  --scroll-start: 0;
+  --scroll-end: calc(-100% - var(--gap));
+}
+
+.marquee {
+  display: flex;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  gap: var(--gap);
+  -webkit-mask-image: linear-gradient(var(--mask-direction, to right),
+      hsl(0 0% 0% / 0),
+      hsl(0 0% 0% / 1) 20%,
+      hsl(0 0% 0% / 1) 80%,
+      hsl(0 0% 0% / 0));
+  mask-image: linear-gradient(var(--mask-direction, to right),
+      hsl(0 0% 0% / 0),
+      hsl(0 0% 0% / 1) 20%,
+      hsl(0 0% 0% / 1) 80%,
+      hsl(0 0% 0% / 0));
+}
+
+.marquee__group {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: var(--gap);
+  min-width: 100%;
+  -webkit-animation: scroll-x var(--duration) linear infinite;
+  animation: scroll-x var(--duration) linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .marquee__group {
+    -webkit-animation-play-state: paused;
+    animation-play-state: paused;
+  }
+}
+
+@-webkit-keyframes scroll-x {
+  from {
+    transform: translateX(var(--scroll-start));
+  }
+
+  to {
+    transform: translateX(var(--scroll-end));
+  }
+}
+
+@keyframes scroll-x {
+  from {
+    transform: translateX(var(--scroll-start));
+  }
+
+  to {
+    transform: translateX(var(--scroll-end));
+  }
+}
+
+.marquee-child {
+  display: grid;
+  place-items: center;
+  width: var(--size);
+  fill: var(--color-text);
+  background: var(--color-bg-accent);
+  aspect-ratio: 16/9;
+  padding: calc(var(--size) / 10);
+  border-radius: 0.5rem;
+  border-style: solid;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  margin: auto;
+  max-width: 100vw;
+}
+
+@-webkit-keyframes fade {
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@keyframes fade {
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
 /* --------------------------------------------------------------------------- */
 /* Deep blue waves */
 

wiki/pages/awards.html

@@ -9,6 +9,60 @@
 
 <br>
 
+<div class="wrapper">
+    <div class="marquee">
+        <div class="marquee__group">
+
+            <div class="reveal-on-scroll">
+                <img src="static/assets/awards/software-tool.svg" alt="Best Software Tool" width="70px">
+                <h2 class="reveal-on-scroll">Best Software Tool</h2>
+            </div>
+
+            <div class="reveal-on-scroll">
+                <img src="static/assets/awards/education.svg" alt="Best Education" width="70px">
+                <h2 class="reveal-on-scroll">Best Education</h2>
+            </div>
+
+            <div class="reveal-on-scroll">
+                <img src="static/assets/awards/presentation.svg" alt="Best Presentation" width="70px">
+                <h2 class="reveal-on-scroll">Best Presentation</h2>
+            </div>
+
+            <div class="reveal-on-scroll">
+                <img src="static/assets/awards/wiki.svg" alt="Best Wiki" width="70px">
+                <h2 class="reveal-on-scroll">Best Wiki</h2>
+            </div>
+
+        </div>
+
+        <div aria-hidden="true" class="marquee__group">
+
+            <div class="reveal-on-scroll">
+                <img src="static/assets/awards/software-tool.svg" alt="Best Software Tool" width="70px">
+                <h2 class="reveal-on-scroll">Best Software Tool</h2>
+            </div>
+
+            <div class="reveal-on-scroll">
+                <img src="static/assets/awards/education.svg" alt="Best Education" width="70px">
+                <h2 class="reveal-on-scroll">Best Education</h2>
+            </div>
+
+            <div class="reveal-on-scroll">
+                <img src="static/assets/awards/presentation.svg" alt="Best Presentation" width="70px">
+                <h2 class="reveal-on-scroll">Best Presentation</h2>
+            </div>
+
+            <div class="reveal-on-scroll">
+                <img src="static/assets/awards/wiki.svg" alt="Best Wiki" width="70px">
+                <h2 class="reveal-on-scroll">Best Wiki</h2>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<br>
+
 <h1>Medals</h1>
 <div class="awards-box reveal-on-scroll">
     <p class="display-4">Gold medal 🥇</p>