✨ Adds an optional logo image to the header, Re: #104

src/components/PageStrcture/Header.vue

@@ -1,6 +1,11 @@
 <template>
     <header>
-      <PageTitle v-if="titleVisible"  :title="pageInfo.title" :description="pageInfo.description" />
+      <PageTitle
+        v-if="titleVisible"
+        :title="pageInfo.title"
+        :description="pageInfo.description"
+        :logo="pageInfo.logo"
+      />
       <Nav v-if="navVisible" :links="pageInfo.navLinks" class="nav" />
     </header>
 </template>

src/components/PageStrcture/PageTitle.vue

@@ -1,7 +1,10 @@
 <template>
   <router-link to="/" class="page-titles">
+    <img v-if="logo" :src="logo" class="site-logo" />
+    <div class="text">
     <h1>{{ title }}</h1>
     <span class="subtitle">{{ description }}</span>
+    </div>
   </router-link>
 </template>
 
@@ -11,6 +14,7 @@ export default {
   props: {
     title: String,
     description: String,
+    logo: String,
   },
 };
 </script>
@@ -20,7 +24,9 @@ export default {
 
 .page-titles {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: center;
   text-decoration: none;
   h1 {
     color: var(--heading-text-color);
@@ -33,7 +39,13 @@ export default {
     text-shadow: 1px 1px 2px #130f23;
     opacity: var(--dimming-factor);
   }
+  img.site-logo {
+    margin: 0.2rem 0.5rem 0.2rem 0;
+    max-width: 3.5rem;
+    height: fit-content;
+  }
   @include phone {
+    flex-direction: column;
     text-align: center;
     padding: 0.25rem 0;
   }