Remove marquee whitespace gaps

Author: Bardakor

src/components/skills.rs

@@ -31,14 +31,16 @@ pub fn Skills() -> impl IntoView {
             }).collect_view()}
             </div>
             <div class="p-[clamp(16px,2.5vw,32px)] flex flex-col justify-center">
-                <div class="overflow-hidden py-5 flex">
-                    <div class="ticker-track flex w-max items-center pr-4">
-                        <span class="font-serif text-[clamp(2rem,4vw,3.5rem)] font-black whitespace-nowrap pl-4">{marquee.clone()}</span>
-                        <span class="marquee-outline font-serif text-[clamp(2rem,4vw,3.5rem)] font-black whitespace-nowrap pl-4">{m2.clone()}</span>
-                    </div>
-                    <div class="ticker-track flex w-max items-center pr-4" aria-hidden="true">
-                        <span class="font-serif text-[clamp(2rem,4vw,3.5rem)] font-black whitespace-nowrap pl-4">{marquee.clone()}</span>
-                        <span class="marquee-outline font-serif text-[clamp(2rem,4vw,3.5rem)] font-black whitespace-nowrap pl-4">{m2}</span>
+                <div class="overflow-hidden py-5">
+                    <div class="marquee-track flex w-max items-center">
+                        <div class="marquee-set flex w-max items-center">
+                            <span class="font-serif text-[clamp(2rem,4vw,3.5rem)] font-black whitespace-nowrap">{marquee.clone()}</span>
+                            <span class="marquee-outline font-serif text-[clamp(2rem,4vw,3.5rem)] font-black whitespace-nowrap">{m2.clone()}</span>
+                        </div>
+                        <div class="marquee-set flex w-max items-center" aria-hidden="true">
+                            <span class="font-serif text-[clamp(2rem,4vw,3.5rem)] font-black whitespace-nowrap">{marquee.clone()}</span>
+                            <span class="marquee-outline font-serif text-[clamp(2rem,4vw,3.5rem)] font-black whitespace-nowrap">{m2}</span>
+                        </div>
                     </div>
                 </div>
             </div>

src/components/ticker.rs

@@ -22,6 +22,10 @@ pub fn Ticker(#[prop(default = false)] reverse: bool) -> impl IntoView {
         meta.ticker_top
     };
 
+    if text.trim().is_empty() {
+        return view! { <></> }.into_any();
+    }
+
     let t1 = text.clone();
     let t2 = text.clone();
 
@@ -36,5 +40,5 @@ pub fn Ticker(#[prop(default = false)] reverse: bool) -> impl IntoView {
                 <span class="font-sans text-[0.65rem] font-medium tracking-normal uppercase text-muted whitespace-nowrap pr-4">{t2}</span>
             </div>
         </div>
-    }
+    }.into_any()
 }

styles/portfolio.css

@@ -98,11 +98,24 @@
   animation: marquee-reverse 25s linear infinite;
 }
 
+.marquee-track {
+  animation: marquee-half 25s linear infinite;
+}
+
+.marquee-set {
+  flex: 0 0 auto;
+}
+
 @keyframes marquee {
   0% { transform: translateX(0); }
   100% { transform: translateX(-100%); }
 }
 
+@keyframes marquee-half {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
 @keyframes marquee-reverse {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(0); }