Small design update

Remzi1993 · Feb 5, 2025 · cb2dcb1 · cb2dcb1
1 parent e7ba3f2
commit cb2dcb1
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 45 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import Topbar from './components/Topbar.vue'
 import NavBar from './components/NavBar.vue'
 import FooterComp from './components/FooterComp.vue'
 </script>
 
 <template>
+  <topbar></topbar>
   <nav-bar></nav-bar>
   <router-view></router-view>
   <footer-comp></footer-comp>

diff --git a/src/components/FooterComp.vue b/src/components/FooterComp.vue
@@ -1,6 +1,3 @@
-<script setup lang="ts">
-</script>
-
 <template>
   <footer class="bg-body-tertiary text-center py-3 d-print-none">
     <div class="container">

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -64,12 +64,6 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="topbar fixed-top d-print-none">
-    <div class="container d-flex justify-content-center align-items-center">
-      <span>Op zoek naar een bijbaan</span>
-      <router-link class="btn btn-sm btn-success" to="/portfolio">Check mijn portfolio</router-link>
-    </div>
-  </div>
   <nav class="navbar navbar-expand-md fixed-top bg-body-tertiary d-print-none">
     <div class="container">
       <router-link class="navbar-brand" to="/">
@@ -102,32 +96,6 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="scss" scoped>
-.topbar {
-  background-color: #B22222;
-  color: white;
-  padding: 5px 0;
-  z-index: 2;
-}
-
-.topbar .container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.topbar .container > *:not(:last-child) {
-  margin-right: 1rem;
-}
-
-.topbar .container span {
-  font-size: 0.8rem;
-  line-height: 0.8rem;
-}
-
-.topbar .container .btn {
-  font-size: 0.8rem;
-}
-
 .navbar {
   top: 37px;
 }
@@ -161,11 +129,4 @@ onBeforeUnmount(() => {
     padding-bottom: 5px;
   }
 }
-
-@media (max-width: 575.98px) {
-  .topbar .container span {
-    font-size: 0.7rem;
-    line-height: 0.7rem;
-  }
-}
 </style>
diff --git a/src/components/NotFound.vue b/src/components/NotFound.vue
@@ -1,4 +1,19 @@
 <script setup lang="ts">
+import {useHead} from '@unhead/vue';
+
+useHead({
+  title: '404 pagina niet gevonden - Remzi Cavdar',
+  meta: [
+    {
+      name: 'description',
+      content: '404 pagina niet gevonden - Remzi Cavdar'
+    },
+    {
+      name: 'author',
+      content: 'Remzi Cavdar'
+    },
+  ]
+});
 </script>
 
 <template>

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -1,6 +1,3 @@
-<script setup lang="ts">
-</script>
-
 <template>
   <div class="col-lg-3 ms-auto">
     <div class="sticky-sidebar">

diff --git a/src/components/Topbar.vue b/src/components/Topbar.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="topbar fixed-top d-print-none">
+    <div class="container d-flex justify-content-center align-items-center">
+      <span>Op zoek naar een bijbaan vanaf 1 juli 2025</span>
+      <router-link class="btn btn-sm btn-success" to="/portfolio">Check mijn portfolio</router-link>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.topbar {
+  background-color: #B22222;
+  color: white;
+  padding: 5px 0;
+  z-index: 2;
+}
+
+.topbar .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.topbar .container > *:not(:last-child) {
+  margin-right: 1rem;
+}
+
+.topbar .container span {
+  font-size: 0.8rem;
+  line-height: 0.8rem;
+}
+
+.topbar .container .btn {
+  font-size: 0.8rem;
+}
+
+@media (max-width: 575.98px) {
+  .topbar .container span {
+    font-size: 0.7rem;
+    line-height: 0.7rem;
+  }
+}
+</style>