Remade LogoScroll

components/ColourableLogo.vue

@@ -1,13 +1,10 @@
 <template>
   <svg
-    width="375mm"
-    height="25mm"
     viewBox="0 0 375 25"
     version="1.1"
     id="logotype"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:svg="http://www.w3.org/2000/svg"
-    class="h-4 w-full"
     :fill="color"
   >
     <defs id="defslogotype" />

components/LogoScroll.vue

@@ -1,88 +1,55 @@
 <template>
-  <div class="w-full inline-flex flex-nowrap overflow-x-clip">
-    <div
-      class="flex items-center justify-center md:justify-start animate-infinite-scroll"
-    >
-      <ColourableLogo
-        color="var(--brand-red)"
-        class="max-w-none mx-8 logotype"
-      />
-      <ColourableLogo
-        color="var(--brand-orange)"
-        class="max-w-none mx-8 logotype"
-      />
-      <ColourableLogo
-        color="var(--brand-yellow)"
-        class="max-w-none mx-8 logotype"
-      />
-      <ColourableLogo
-        color="var(--brand-green)"
-        class="max-w-none mx-8 logotype"
-      />
-      <ColourableLogo
-        color="var(--brand-blue)"
-        class="max-w-none mx-8 logotype"
-      />
-      <ColourableLogo
-        color="var(--brand-purple)"
-        class="max-w-none mx-8 logotype"
-      />
-      <ColourableLogo
-        color="var(--brand-rose)"
-        class="max-w-none mx-8 logotype"
-      />
-    </div>
-    <div
-      class="flex items-center justify-center md:justify-start animate-infinite-scroll"
-      aria-hidden="true"
-    >
-      <ColourableLogo
-        color="var(--brand-red)"
-        class="max-w-none mx-8 logotype"
-      />
-      <ColourableLogo
-        color="var(--brand-orange)"
-        class="max-w-none mx-8 logotype"
-      />
-      <ColourableLogo
-        color="var(--brand-yellow)"
-        class="max-w-none mx-8 logotype"
-      />
-      <ColourableLogo
-        color="var(--brand-green)"
-        class="max-w-none mx-8 logotype"
-      />
-      <ColourableLogo
-        color="var(--brand-blue)"
-        class="max-w-none mx-8 logotype"
-      />
-      <ColourableLogo
-        color="var(--brand-purple)"
-        class="max-w-none mx-8 logotype"
-      />
-      <ColourableLogo
-        color="var(--brand-rose)"
-        class="max-w-none mx-8 logotype"
-      />
+  <div class="logo-scroll">
+    <div class="logo-scroll_inner">
+      <ColourableLogo color="var(--brand-red)" />
+      <ColourableLogo color="var(--brand-orange)" />
+      <ColourableLogo color="var(--brand-yellow)" />
+      <ColourableLogo color="var(--brand-green)" />
+      <ColourableLogo color="var(--brand-blue)" />
+      <ColourableLogo color="var(--brand-purple)" />
+      <ColourableLogo color="var(--brand-rose)" />
+      <ColourableLogo color="var(--brand-red)" />
+      <ColourableLogo color="var(--brand-orange)" />
+      <ColourableLogo color="var(--brand-yellow)" />
+      <ColourableLogo color="var(--brand-green)" />
+      <ColourableLogo color="var(--brand-blue)" />
+      <ColourableLogo color="var(--brand-purple)" />
+      <ColourableLogo color="var(--brand-rose)" />
     </div>
   </div>
 </template>
 
 <style>
-.logotype {
-  width: fit-content;
-  height: 1.5rem;
+.logo-scroll {
+  /* Width will be overitten by JS */
+  width: 720px;
+  min-height: 4em;
+  overflow: hidden;
 }
 
-@keyframes infinite-scroll {
-  from {
-    transform: translateX(0);
-  }
+.logo-scroll_inner {
+  display: flex;
+  align-items: center;
+  min-width: fit-content;
+  min-height: 100%;
+  gap: 5em;
+  animation: 100s scroll linear infinite;
+}
+
+.logo-scroll_inner > * {
+  min-width: calc(375px + 0.2em);
+  min-height: calc(25px + 0.2em);
+}
+
+@keyframes scroll {
   to {
-    transform: translateX(-100%);
+    transform: translateX(calc(-50% - 2.5em));
   }
 }
-.animate-infinite-scroll {
-  animation: infinite-scroll 25s linear infinite;
-}
 </style>
+
+<script setup>
+onMounted(() => {
+  document.querySelector(".logo-scroll").style.width = `${window.innerWidth}px`
+})
+</script>

layouts/default.vue

@@ -42,7 +42,7 @@
           class="flex flex-col sm:flex-row items-center sm:items-start sm:justify-center py-6 gap-8 mx-[calc(5%+2rem)] sm:mx-0"
         >
           <div class="flex flex-col items-center sm:items-start gap-4 pt-2">
-            <ColourableLogo color="var(--brand-blue)" />
+            <ColourableLogo color="var(--brand-blue)" class="h-4 w-full" />
             <div
               class="flex flex-col gap-1 font-[500] text-[var(--text-colour)] text-sm"
             >