Small visual tweaks

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>

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>

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>

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>

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>