new components

nginx/vue/src/components/Navbar.vue

@@ -49,14 +49,10 @@ const faces_string = faces.join("      ");
         <RouterLink class="bdr-2 bg-bg_primary" to="/" v-if="!inHome">
             <a>HOME</a>
         </RouterLink>
-        <RouterLink
-            class="bdr-2 bg-bg_primary"
-            v-if="parentPath"
-            :to="parentPath"
-        >
+        <RouterLink class="bdr-2 bg-bg_primary" v-if="parentPath" :to="parentPath">
             <a>UP</a>
         </RouterLink>
-        <Headline class="border flex-1">
+        <Headline class="border flex-1 max-w-full">
             <code class="whitespace-pre">{{ faces_string }}</code>
         </Headline>
     </nav>

nginx/vue/src/components/text/Headline.vue

@@ -1,9 +1,8 @@
 <script setup>
-import { ref, onMounted, useTemplateRef, onUnmounted } from "vue";
+import { onMounted, useTemplateRef, onUnmounted } from "vue";
 
 const container = useTemplateRef("container");
 const item1 = useTemplateRef("item1");
-const item2 = useTemplateRef("item2");
 
 let offset = 0;
 
@@ -14,7 +13,6 @@ const speed = 0.5; // pixels per frame
 function animate() {
     const ctnr = container.value;
     const it1 = item1.value;
-    const it2 = item2.value;
 
     const width = Math.max(ctnr.offsetWidth, it1.scrollWidth);
 
@@ -24,8 +22,7 @@ function animate() {
         offset += width;
     }
 
-    it1.style.transform = `translateX(${offset}px)`;
-    it2.style.transform = `translateX(${width + offset}px)`;
+    ctnr.style.transform = `translateX(${offset}px)`;
 
     rafId = requestAnimationFrame(animate);
 }
@@ -40,40 +37,32 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div class="marquee">
+    <div class="root">
         <div class="container" ref="container">
-            <div class="item" ref="item1"><slot /></div>
-            <div class="item item2" ref="item2"><slot /></div>
+            <div ref="item1">
+                <slot />
+            </div>
+            <div>
+                <slot />
+            </div>
         </div>
     </div>
 </template>
 
 <style scoped>
-.marquee {
+.root {
     overflow: hidden;
-    width: 100%;
 }
 
 .container {
-    width: 100%;
-    height: fit-content;
-    position: relative;
-    will-change: transform;
-}
-
-.item {
-    height: fit-content;
-    top: 0px;
-    padding-right: 3em;
     width: fit-content;
-    white-space: nowrap;
-}
-
-.item1 {
-    left: 0px;
-}
-
-.item2 {
-    position: absolute;
+    height: fit-content;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    /* Each column fits its content */
+    overflow-x: visible;
+    will-change: transform;
+    gap: 10em;
 }
 </style>