fix: fixed issue where logo would sometimes jump

frontend/components/MainFooter.vue

@@ -39,7 +39,7 @@
 				<a href="/"
 					><img
 						class="musareFooterLogo"
-						src="/assets/wordmark.png"
+						src="/assets/blue_wordmark.png"
 						alt="Musare"
 				/></a>
 				<p class="footerLinks">

frontend/components/MainHeader.vue

@@ -3,7 +3,7 @@
 		<div class="nav-left">
 			<router-link class="nav-item is-brand" to="/">
 				<img
-					:src="`${this.siteSettings.logo}`"
+					:src="`${this.siteSettings.logo_white}`"
 					:alt="`${this.siteSettings.siteName}` || `Musare`"
 				/>
 			</router-link>
@@ -142,12 +142,11 @@ export default {
 		font-size: 2.1rem !important;
 		line-height: 38px !important;
 		padding: 0 20px;
-		color: $white;
 		font-family: Pacifico, cursive;
-		filter: brightness(0) invert(1);
 
 		img {
 			max-height: 38px;
+			color: $musareBlue;
 		}
 	}
 

frontend/components/Station/StationHeader.vue

@@ -4,7 +4,7 @@
 			<div class="nav-left">
 				<router-link class="nav-item is-brand" :to="{ path: '/' }">
 					<img
-						:src="`${this.siteSettings.logo}`"
+						:src="`${this.siteSettings.logo_white}`"
 						:alt="`${this.siteSettings.siteName}` || `Musare`"
 					/>
 				</router-link>
@@ -286,12 +286,11 @@ export default {
 		font-size: 2.1rem !important;
 		line-height: 38px !important;
 		padding: 0 20px;
-		color: $white;
 		font-family: Pacifico, cursive;
-		filter: brightness(0) invert(1);
 
 		img {
 			max-height: 38px;
+			color: $musareBlue;
 		}
 	}
 }