feat: Improved christmas lights and added animations

frontend/src/components/layout/MainHeader.vue

@@ -67,7 +67,10 @@
 			</div>
 		</div>
 
-		<div class="christmas-lights">
+		<div
+			v-if="siteSettings.christmas"
+			:class="{ 'christmas-lights': true, loggedIn }"
+		>
 			<div class="christmas-wire"></div>
 			<span class="christmas-light"></span>
 			<div class="christmas-wire"></div>
@@ -329,6 +332,7 @@ export default {
 	top: 64px;
 	display: flex;
 	justify-content: space-around;
+	overflow: hidden;
 
 	.christmas-light {
 		height: 34px;
@@ -353,52 +357,52 @@ export default {
 
 		&:nth-of-type(1) {
 			transform: rotate(5deg);
-			background-color: red;
+			animation: christmas-lights 40s ease infinite;
 		}
 
 		&:nth-of-type(2) {
 			transform: rotate(-7deg);
-			background-color: cyan;
+			animation: christmas-lights 40s ease infinite -5s;
 		}
 
 		&:nth-of-type(3) {
 			transform: rotate(3deg);
-			background-color: yellow;
+			animation: christmas-lights 40s ease infinite -10s;
 		}
 
 		&:nth-of-type(4) {
 			transform: rotate(10deg);
-			background-color: magenta;
+			animation: christmas-lights 40s ease infinite -15s;
 		}
 
 		&:nth-of-type(5) {
 			transform: rotate(-3deg);
-			background-color: lime;
+			animation: christmas-lights 40s ease infinite -20s;
 		}
 
 		&:nth-of-type(6) {
 			transform: rotate(8deg);
-			background-color: orange;
+			animation: christmas-lights 40s ease infinite -25s;
 		}
 
 		&:nth-of-type(7) {
 			transform: rotate(-1deg);
-			background-color: cyan;
+			animation: christmas-lights 40s ease infinite -30s;
 		}
 
 		&:nth-of-type(8) {
 			transform: rotate(-4deg);
-			background-color: red;
+			animation: christmas-lights 40s ease infinite -35s;
 		}
 
 		&:nth-of-type(9) {
 			transform: rotate(3deg);
-			background-color: yellow;
+			animation: christmas-lights 40s ease infinite -40s;
 		}
 
 		&:nth-of-type(10) {
 			transform: rotate(-10deg);
-			background-color: magenta;
+			animation: christmas-lights 40s ease infinite -60s;
 		}
 	}
 
@@ -422,6 +426,42 @@ export default {
 	}
 }
 
+@keyframes christmas-lights {
+	0% {
+		background-color: magenta;
+	}
+	10% {
+		background-color: cyan;
+	}
+	20% {
+		background-color: lime;
+	}
+	30% {
+		background-color: yellow;
+	}
+	40% {
+		background-color: orange;
+	}
+	50% {
+		background-color: red;
+	}
+	60% {
+		background-color: magenta;
+	}
+	70% {
+		background-color: cyan;
+	}
+	80% {
+		background-color: lime;
+	}
+	90% {
+		background-color: orange;
+	}
+	100% {
+		background-color: magenta;
+	}
+}
+
 @media screen and (max-width: 768px) {
 	.nav-toggle {
 		display: block !important;

frontend/src/pages/Home.vue

@@ -6,6 +6,7 @@
 				:hide-logo="true"
 				:transparent="true"
 				:hide-logged-out="true"
+				class="home-nav"
 			/>
 			<div class="header" :class="{ loggedIn }">
 				<img class="background" src="/assets/homebg.jpeg" />
@@ -776,6 +777,16 @@ export default {
 };
 </script>
 
+<style lang="scss">
+.christmas-mode .home-nav .christmas-lights {
+	top: 35vh;
+
+	&.loggedIn {
+		top: 20vh;
+	}
+}
+</style>
+
 <style lang="scss" scoped>
 * {
 	box-sizing: border-box;