From 2cba0279e6f0f1c7cee3a5f7756e373b6c5d5c22 Mon Sep 17 00:00:00 2001
From: Max <m.giller.dev@gmail.com>
Date: Fri, 21 May 2021 19:19:44 +0200
Subject: [PATCH] Small visual tweaks

---
 src/components/base/BaseTitle.vue             | 19 ++++++++++++++++++-
 src/components/layout/LayoutMinimal.vue       |  4 ++--
 src/components/layout/LayoutNavbarPrivate.vue |  4 ++--
 src/views/Changelog.vue                       |  6 ++++++
 src/views/NotFound.vue                        |  4 ++--
 5 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/components/base/BaseTitle.vue b/src/components/base/BaseTitle.vue
index 4e0aa39..1a0bffd 100644
--- a/src/components/base/BaseTitle.vue
+++ b/src/components/base/BaseTitle.vue
@@ -1,5 +1,9 @@
 <template>
-  <h1 id="title" :class="[size, { center: center }]" class="bold">
+  <h1
+    id="title"
+    :class="[size, { center: center }, { outline: outline }]"
+    class="bold"
+  >
     <slot />
   </h1>
 </template>
@@ -15,12 +19,18 @@ export default {
     center: {
       default: true,
       type: Boolean
+    },
+    outline: {
+      default: false,
+      type: Boolean
     }
   }
 };
 </script>
 
 <style lang="sass" scoped>
+@import '@/style/theme.sass'
+
 #title.tiny
   font-size: 1em
 #title.small
@@ -31,10 +41,17 @@ export default {
   font-size: 1.7em
 #title.huge
   font-size: 2em
+#title.giant
+  font-size: 3em
 
 #title.center
   text-align: center
 
+#title.outline
+  color: transparent
+  -webkit-text-stroke-width: 1.5px
+  -webkit-text-stroke-color: $secondary
+
 .bold
   font-weight: bold
 </style>
diff --git a/src/components/layout/LayoutMinimal.vue b/src/components/layout/LayoutMinimal.vue
index 1dcb2bb..8894686 100644
--- a/src/components/layout/LayoutMinimal.vue
+++ b/src/components/layout/LayoutMinimal.vue
@@ -7,8 +7,8 @@
       class="space-bottom"
       :class="{ 'center-content': center }"
     >
-      <BaseTitle v-if="title" center size="huge" class="centered pt-5 pb-2">
-        {{ title }}
+      <BaseTitle v-if="title" center size="giant" class="centered" outline>
+        {{ title.toUpperCase() }}
       </BaseTitle>
       <slot />
     </BaseContainer>
diff --git a/src/components/layout/LayoutNavbarPrivate.vue b/src/components/layout/LayoutNavbarPrivate.vue
index e39eeae..dff621d 100644
--- a/src/components/layout/LayoutNavbarPrivate.vue
+++ b/src/components/layout/LayoutNavbarPrivate.vue
@@ -21,8 +21,8 @@
         center
         :class="{ 'center-content': center }"
       >
-        <BaseTitle v-if="title" center size="huge" class="centered">
-          {{ title }}
+        <BaseTitle v-if="title" center size="giant" class="centered" outline>
+          {{ title.toUpperCase() }}
         </BaseTitle>
         <slot />
       </BaseContainer>
diff --git a/src/views/Changelog.vue b/src/views/Changelog.vue
index 2da6752..9bcdebd 100644
--- a/src/views/Changelog.vue
+++ b/src/views/Changelog.vue
@@ -1,5 +1,11 @@
 <template>
   <LayoutMinimal title="Changelog">
+    <BaseTitle size="small">
+    21.05.2021
+    </BaseTitle>
+    <ul>
+      <li>Visual tweaks</li>
+    </ul>
     <BaseTitle size="small">
     12.04.2021
     </BaseTitle>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index 00ea51a..637891e 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -1,6 +1,6 @@
 <template>
-  <LayoutMinimal center title="Couldn't find what you were looking for :(">
-    404
+  <LayoutMinimal center title="404">
+    Couldn't find what you were looking for :(
   </LayoutMinimal>
 </template>