Blogs

frontend/app/components/Sprite.vue

@@ -64,5 +64,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .sprite {
     position: absolute;
+    z-index: 1;
 }
 </style>

frontend/app/components/parts/HeaderLinks.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="menus">
+        <NuxtLink href="/">About</NuxtLink>
+        <NuxtLink href="/blog">Blogs</NuxtLink>
+        <NuxtLink class="disabled" href="/drawings">Drawings</NuxtLink>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.menus {
+    margin-bottom: 10px;
+}
+
+.menus > a {
+    margin-right: 20px;
+}
+
+.disabled {
+    color: #aaaaaa77;
+}
+</style>

frontend/app/components/parts/PageHeader.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import HeaderLinks from './HeaderLinks.vue';
+
+</script>
+
+<template>
+    <div class="header">
+        <Container>
+            <h1>ARANROIG.COM</h1>
+            <HeaderLinks></HeaderLinks>
+        </Container>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.header {
+    position: relative;
+    margin-top: 50px;
+    user-select: none;
+}
+</style>

frontend/app/components/parts/TableHeader.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import HeaderLinks from './HeaderLinks.vue';
+
+</script>
+
+<template>
+    <div class="undertable">
+        <h1>ARANROIG.COM</h1>
+        <HeaderLinks></HeaderLinks>
+        <Sprite path="/sprites/alfadir/" frames="13" fps="6" top="-258px" left="-65px" width="1300"></Sprite> 
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.undertable {
+    position: relative;
+    margin-top: 350px;
+    margin-left: 80px;
+    margin-bottom: 25px;
+    user-select: none;
+}
+</style>