Adjusting styles

Author: webdevnerdstuff

src/assets/style.css

@@ -66,6 +66,16 @@ button:focus-visible {
 #app-inner {
 	display: flex;
 	flex-direction: column;
+	margin: 0 auto;
+	max-width: 1280px;
+	padding: 2rem;
+	text-align: center;
+}
+
+#app-inner > div {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
 	justify-content: space-between;
 	margin: 0 auto;
 	max-width: 1280px;

src/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="app-inner">
+	<div>
 		<div>&nbsp;</div>
 		<div>
 			<header>
@@ -43,9 +43,11 @@
 				&nbsp;
 				<a href="https://github.com/webdevnerdstuff/vue-easter-egg-trigger">
 					<img
-						src="https://img.shields.io/github/package-json/v/webdevnerdstuff/vue-easter-egg-trigger"
+						alt="@WebDevNerdStuff"
+						src="https://img.shields.io/badge/GitHub-WebDevNerdStuff-brightgreen.svg?logo=github"
 					/>
 				</a>
+
 				<h5>
 					by <a href="https://github.com/webdevnerdstuff">WebDevNerdStuff</a>
 				</h5>
@@ -93,18 +95,18 @@
 					Konami code triggered
 				</div>
 			</div>
+
+			<EasterEggComponent
+				:pattern="['click']"
+				target=".using-component"
+				type="click"
+				@callback="callbackEvent('using-component')"
+				@triggered="triggeredEvent('using-component')"
+			/>
 		</div>
 
 		<footer>&copy; 2022 WebDevNerdStuff</footer>
 
-		<EasterEggComponent
-			:pattern="['click']"
-			target=".using-component"
-			type="click"
-			@callback="callbackEvent('using-component')"
-			@triggered="triggeredEvent('using-component')"
-		/>
-
 		<component :is="activeEasterEgg" @closeEasterEgg="closeEasterEgg" />
 	</div>
 </template>