A lot of AI slop

frontend/app/components/parts/StickyHeader.vue

@@ -14,35 +14,33 @@ function onScroll() {
  
 onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }));
 onUnmounted(() => window.removeEventListener('scroll', onScroll));
+
 </script>
 
 <template>
-<div class="sticky-header" :class="{ visible: isVisible }">
-        <div class="container">
-            <div class="sticky-header-inner">
-                <div class="left">
-                    <h1>ARANROIG.COM</h1>
-                    <HeaderLinks />
-                </div>
-                <SiteOptions />
-            </div>
+<div class="tui-stickybar" :class="{ visible: isVisible }">
+    <div class="sticky-inner">
+        <div class="left">
+            <span class="sticky-title" aria-hidden="true">◆ ARANROIG.COM</span>
+            <HeaderLinks />
         </div>
+        <SiteOptions />
     </div>
+</div>
 </template>
 
 <style lang="scss" scoped>
 
-.sticky-header {
+.tui-stickybar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
  
-    background: var(--color-sticky-header-bg, #fff);
-    border-bottom: 1px solid var(--color-sticky-header-border, rgba(0, 0, 0, 0.08));
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
-    backdrop-filter: blur(10px);
+    background: var(--color-sticky-header-bg);
+    backdrop-filter: blur(8px);
+    box-shadow: 0 4px 0px 0px var(--color-container-shadow);
  
     // Hidden state — translated up and invisible
     transform: translateY(-100%);
@@ -57,21 +55,26 @@ onUnmounted(() => window.removeEventListener('scroll', onScroll));
         transform: translateY(0);
         opacity: 1;
         pointer-events: auto;
+        transition:
+            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+            opacity 0.3s ease;
     }
 }
- 
-.sticky-header-inner {
+
+.sticky-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
-    padding: 10px 0;
- 
-    h1 {
-        margin: 0;
-        font-size: inherit; // inherit from your existing h1 styles
-        white-space: nowrap;
-        font-weight: normal;
+    padding: 6px 24px;
+
+    @media screen and (max-width: 900px) {
+        padding: 5px 16px;
+    }
+
+    @media screen and (max-width: 600px) {
+        padding: 4px 12px;
+        gap: 0.5rem;
     }
 }
 
@@ -79,6 +82,22 @@ onUnmounted(() => window.removeEventListener('scroll', onScroll));
     display: flex;
     align-items: center;
     gap: 1rem;
-    margin-left: 30px;
+    
+    @media screen and (max-width: 600px) {
+        gap: 0.5rem;
+    }
 }
-</style>
+
+.sticky-title {
+    font-family: 'Hurmit', monospace;
+    font-size: 0.8rem;
+    color: var(--color-text);
+    letter-spacing: 1px;
+    white-space: nowrap;
+    
+    @media screen and (max-width: 900px) {
+        font-size: 0.75rem;
+    }
+}
+
+</style>