Mes coses

frontend/app/assets/css/colors.scss

@@ -5,6 +5,8 @@ $themes: (
         background: #141414,
         background-line: #202324,
         background-fore: #10141f,
+        hover: #21262d,
+        selected: #4a4a4b,
         border-color: #819796,
         border: #202324,
         text: #ebede9,
@@ -16,6 +18,8 @@ $themes: (
         background-fore: #ffffff,
         border-color: #e0e0e0,
         border: #f0f0f0,
+        hover: #e9e9e9,
+        selected: #d4d4d4,
         text: #1e1e1e,
         container-shadow: #5f6774
     )

frontend/app/components/parts/PageHeader.vue

@@ -6,9 +6,12 @@ import SiteOptions from './site_options/SiteOptions.vue';
 <template>
     <div class="header">
         <div class="container">
+            <div class="header-container">
+                <h1>ARANROIG.COM</h1>
+                <HeaderLinks></HeaderLinks>
+            </div>
         </div>
         <div class="header-container">
-            <HeaderLinks></HeaderLinks>
         </div>
         <div class="container">
             <SiteOptions></SiteOptions>
@@ -26,15 +29,7 @@ import SiteOptions from './site_options/SiteOptions.vue';
 }
 
 .header-container {
-    position: relative;
-    margin-left: 15px;
-    margin-right: 15px;
-    background: var(--color-background-fore);
-    padding: 8px 12px;
-    font-size: 1em;
-    color: white;
-    border: 1px solid var(--color-border-color);
-    border-radius: 8px;
-    box-shadow: 8px -8px 0px 0px var(--color-container-shadow);
+    position:relative;
+    margin-bottom: 20px;
 }
 </style>

frontend/app/components/parts/TableHeader.vue

@@ -2,16 +2,49 @@
 import HeaderLinks from './HeaderLinks.vue';
 import SiteOptions from './site_options/SiteOptions.vue';
 
+import { accent } from '~/composables/theme'
+const spritePath = computed(() => {
+    return `/sprites/${accent.value}/${accent.value}.gif`
+});
+const hasAnimated = useState('title-animated', () => false)
+
+const fullText = "ARANROIG.COM";
+const displayedText = ref("");
+
+let index = 0
+let interval = null
+
+onMounted(() => {
+if (hasAnimated.value) {
+    displayedText.value = fullText
+    return
+  }
+
+  interval = setInterval(() => {
+    if (index < fullText.length) {
+      displayedText.value += fullText[index]
+      index++
+    } else {
+      clearInterval(interval)
+      hasAnimated.value = true;
+    }
+  }, 35) // velocidad de escritura
+})
+
+onBeforeUnmount(() => {
+  clearInterval(interval)
+})
+
 </script>
 
 <template>
     <div class="header">
         <div class="header-container">
+                <h1 class="title">{{ displayedText }}</h1>
+                <HeaderLinks></HeaderLinks>
         </div>
         <div class="undertable">
-            <h1>ARANROIG.COM</h1>
-            <HeaderLinks></HeaderLinks>
-            <Sprite path="/sprites/katlum/katlum.gif" top="-267px" left="-80px" width="1300"></Sprite> 
+            <Sprite :path="spritePath" bottom="-141px" left="-75px" width="1300"></Sprite> 
         </div>
         <div class="header-container">
             <SiteOptions></SiteOptions>
@@ -33,10 +66,38 @@ import SiteOptions from './site_options/SiteOptions.vue';
 
 .undertable {
     position: relative;
-    left: 45px;
-    margin-top: 300px;
-    margin-left: -360px;
+    left: -200px;
+    margin-top: 450px;
+    margin-left: -370px;
     margin-bottom: 25px;
     user-select: none;
 }
+
+.web-links {
+    position: relative;
+    z-index: 200;
+    padding: 10px 20px;
+    margin-bottom: -10px;
+    left: -30px;
+    background-color: var(--color-background);
+}
+
+.title {
+    width: 300px;
+}
+
+.title::after {
+    content: "_";
+    animation: blink 3s infinite;
+    animation-timing-function: steps(1, end);
+}
+
+@keyframes blink {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+  25%, 75% {
+    opacity: 0;
+  }
+}
 </style>

frontend/app/components/parts/site_options/LanguageSelector.vue

@@ -50,8 +50,8 @@ const changeLocale = (lang) => {
 
 <style lang="scss" scoped>
 .menu-button {
-  background: #161b22;
-  color: white;
+  background: var(--color-background-fore);
+  color: var(--color-text);
   font-size: 1em;
   border: 1px solid #30363d;
   padding: 8px 12px;
@@ -69,7 +69,7 @@ z-index: 10;
   top: 50px;
   right: 110px;
   margin-right: 10px;
-  background: #161b22;
+  background: var(--color-background-fore);
   border: 1px solid #30363d;
   border-radius: 8px;
   padding: 8px 0;
@@ -79,14 +79,18 @@ z-index: 10;
 /* Items */
 .menu-item {
   padding: 8px 16px;
-  color: #c9d1d9;
+  color: var(--color-text);
   cursor: pointer;
   display: flex;
   gap: 10px;
   align-items: center;
 
   &.active {
-    background: #30363d;
+    background: var(--color-selected);
   }
 }
+
+.menu-item:hover {
+  background: var(--color-hover);
+}
 </style>

frontend/app/components/parts/site_options/ThemeSelector.vue

@@ -64,10 +64,10 @@ onUnmounted(() => {
                     <div class="circle katlum"></div>
                     {{ $t('themes.accents.katlum') }}
                 </div>
-                <!--
                 <div :class="{'menu-item': true, 'active': accent === 'solus' }" @click="setAccent('solus')">
                     <div class="circle solus"></div>Solus
                 </div>
+                <!--
                 <div :class="{'menu-item': true, 'active': accent === 'silang' }" @click="setAccent('silang')">
                     <div class="circle silang"></div>Silang
                 </div>
@@ -136,8 +136,8 @@ onUnmounted(() => {
 
 /* Button */
 .menu-button {
-  background: #161b22;
-  color: white;
+  background: var(--color-background-fore);
+  color: var(--color-text);
   font-size: 1em;
   border: 1px solid #30363d;
   padding: 8px 12px;
@@ -154,7 +154,7 @@ z-index: 10;
   right: 0;
   margin-right: 10px;
   width: 320px;
-  background: #161b22;
+  background: var(--color-background-fore);
   border: 1px solid #30363d;
   border-radius: 8px;
   padding: 8px 0;
@@ -169,7 +169,7 @@ z-index: 10;
 /* Items */
 .menu-item {
   padding: 8px 16px;
-  color: #c9d1d9;
+  color: var(--color-text);
   cursor: pointer;
   display: flex;
   border-radius: 5px;
@@ -178,13 +178,13 @@ z-index: 10;
   align-items: center;
 
   &.active {
-    background: #30363d;
+    background: var(--color-selected);
   }
 }
 
 .menu-header {
   padding: 8px 16px;
-  color: #c9d1d9;
+  color: var(--color-text);
   display: flex;
   gap: 10px;
   align-items: center;
@@ -193,7 +193,7 @@ z-index: 10;
 }
 
 .menu-item:hover {
-  background: #21262d;
+  background: var(--color-hover);
 }
 
 /* Divider */