apply the changes requested by Freeyorp

6 files changed, 48 insertions, 39 deletions

diff --git a/src/App.vue b/src/App.vue
index d6ccd44..a6f1aea 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,13 +42,17 @@
 				margin-top: 2em;
 			}
 		}
+
+		& p {
+			margin: 0px 40px 5px 30px;
+		}
 	}
 
 	& > .footer {
 		grid-area: footer;
 	}
 
-	font-family: Helvetica, Arial, sans-serif;
+	font-family: sans-serif;
 	color: #2c3e50;
 
 	width: 100%;
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 7527999..54a50b0 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -73,7 +73,7 @@
 			padding: 1ch;
 
 			&:hover, &.router-link-exact-active, &.custom-active {
-				background: rgba(255,255,255,0.4);
+				background-color: rgba(255,255,255,0.4);
 				border: solid 1px #2f2e32;
 				font-weight: bold;
 			}
@@ -101,7 +101,7 @@
 		border-radius: 0 0 5px 5px;
 
 		&:hover {
-			background: rgba(255,255,255,0.4);
+			background-color: rgba(255,255,255,0.4);
 		}
 	}
 
@@ -113,6 +113,10 @@
 			padding: 0;
 			width: 133px;
 			height: 100px;
+
+			&:hover {
+				opacity: 0.8;
+			}
 		}
 	}
 }
diff --git a/src/components/News.vue b/src/components/News.vue
index ac24144..5e2b598 100644
--- a/src/components/News.vue
+++ b/src/components/News.vue
@@ -30,6 +30,7 @@
 
 	& > .date {
 		float: right;
+		color: #0000FF;
 	}
 
 	& .body {
diff --git a/src/views/AccountRecovery.vue b/src/views/AccountRecovery.vue
index c04829e..7345f59 100644
--- a/src/views/AccountRecovery.vue
+++ b/src/views/AccountRecovery.vue
@@ -2,24 +2,24 @@
 	<main>
 		<div v-if="step == 1">
 			<h1>Account Recovery</h1>
-			Use this form if you forgot your username or password.
-			If it matches any account we have on file you will receive a message containing the list of your account usernames
-			along with a password reset link, should you wish to reset your password.
+			<p>Use this form if you forgot your username or password.</p>
+			<p>If it matches any account we have on file you will receive a message containing the list of your account usernames
+			along with a password reset link, should you wish to reset your password.</p>
 		</div>
 
 		<div v-if="step == -1">
 			<h1>reCAPTCHA could not be loaded</h1>
-			This page requires reCAPTCHA but something prevents it from loading.
-			If you are using an ad blocker or tracker blocker please whitelist this page and refresh to continue.
+			<p>This page requires reCAPTCHA but something prevents it from loading.
+			If you are using an ad blocker or tracker blocker please whitelist this page and refresh to continue.</p>
 		</div>
 
 		<div v-if="step == 1">
 			<h1>Email address</h1>
-			The email address that was used to register your account(s).
+			<p>The email address that was used to register your account(s).</p>
 
 			<div class="error notFound" v-if="notFound">
 				<h2>Not found</h2>
-				We were not able to find any accounts associated with this email address.
+				<p>We were not able to find any accounts associated with this email address.</p>
 			</div>
 
 			<form @submit.prevent="checkEmail">
@@ -38,34 +38,34 @@
 
 		<div v-if="step == 3">
 			<h1>Recovery process started</h1>
-			An email was sent with the list of your accounts.
+			<p>An email was sent with the list of your accounts.</p>
 
 			<h1>Next steps</h1>
-			If you wish to reset the password of your accounts, click the provided link in the email you received.<br>
-			This link is only valid once: if you wish to reset more than one password you will have to repeat the process.
+			<p>If you wish to reset the password of your accounts, click the provided link in the email you received.</p>
+			<p>This link is only valid once: if you wish to reset more than one password you will have to repeat the process.</p>
 
 			<br><br><br>
 			<h1>Can't find the account you were looking for?</h1>
-			Double-check the email address you entered; You might have used a different address when you created the account or you might have omitted to provide an email address.
+			<p>Double-check the email address you entered; You might have used a different address when you created the account or you might have omitted to provide an email address.</p>
 
 			<h1>Still need help?</h1>
-			Feel free to <router-link :to="{ name: 'support' }">contact us</router-link> for further assistance.
+			<p>Feel free to <router-link :to="{ name: 'support' }">contact us</router-link> for further assistance.</p>
 		</div>
 
 		<!-- PART TWO: -->
 
 		<div v-if="step == -2">
 			<h1>Expired link</h1>
-			This password reset link has expired or is invalid.<br>
-			Keep in mind that emailed links are only valid for 60 minutes.
+			<p>This password reset link has expired or is invalid.</p>
+			<p>Keep in mind that emailed links are only valid for 60 minutes.</p>
 
 			<h1>Start over</h1>
-			You may try again in 5 minutes: <router-link :to="{ name: 'support' }">account recovery</router-link>
+			<p>You may try again in 5 minutes: <router-link :to="{ name: 'support' }">account recovery</router-link></p>
 		</div>
 
 		<div v-if="step == 4">
 			<h1>Username</h1>
-			Your password reset link is <em>only</em> valid for account usernames listed in the email that was sent to you.
+			<p>Your password reset link is <em>only</em> valid for account usernames listed in the email that was sent to you.</p>
 
 			<form @submit.prevent="checkUser">
 				<label for="user">Enter a username:</label>
@@ -76,7 +76,7 @@
 
 		<div v-if="step == 5">
 			<h1>Password</h1>
-			Please choose a new, hard-to-guess password.
+			<p>Please choose a new, hard-to-guess password.</p>
 			<p>It must contain between 8 and 23 characters. Letters and numbers only. Case-sensitive.</p>
 
 			<div v-if="exposed" class="exposed">
@@ -115,10 +115,10 @@
 
 		<div v-if="step == 7">
 			<h1>The deed is done</h1>
-			The password of account <q>{{user.name}}</q> has been reset.
+			<p>The password of account <q>{{user.name}}</q> has been reset.</p>
 
 			<h1>Next steps</h1>
-			To start playing, <a href="https://wiki.themanaworld.org/index.php/Downloads">download ManaPlus</a> and select the server <i>The Mana World</i>
+			<p>To start playing, <a href="https://wiki.themanaworld.org/index.php/Downloads">download ManaPlus</a> and select the server <i>The Mana World</i>.</p>
 		</div>
 
 		<div class="g-recaptcha" id="recaptcha-container"
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index b45a4f2..35b9753 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -1,6 +1,6 @@
 <template>
 	<main>
 		<h1>Page not found</h1>
-		This page does not exist or has been removed
+		<p>This page does not exist or has been removed.</p>
 	</main>
 </template>
diff --git a/src/views/Registration.vue b/src/views/Registration.vue
index 0029fc4..8aac0c2 100644
--- a/src/views/Registration.vue
+++ b/src/views/Registration.vue
@@ -1,20 +1,20 @@
 <template>
 	<main class="registration">
 		<h1>Account creation</h1>
-		Welcome to The Mana World! With this form you can register for a new game account.<br>
-		Please note that you will also need to down and install ManaPlus, our official game client.
-		<br><br>
+		<p>Welcome to The Mana World! With this form you can register for a new game account.</p>
+		<p>Please note that you will also need to down and install ManaPlus, our official game client.</p>
+		<br>
 		<button v-if="!step" @click="start">Begin!</button>
 
 		<div v-if="step == -1">
 			<h1>reCAPTCHA could not be loaded</h1>
-			This page requires reCAPTCHA but something prevents it from loading.
-			If you are using an ad blocker or tracker blocker please whitelist this page and refresh to continue.
+			<p>This page requires reCAPTCHA but something prevents it from loading.
+			If you are using an ad blocker or tracker blocker please whitelist this page and refresh to continue.</p>
 
 			<h1>Registering without reCAPTCHA</h1>
-			If you would rather not use reCAPTCHA, you may register by contacting us by email.<br>
-			We will create a new account for you and associate it with the email address that you used to contact us.
-			<br><br>
+			<p>If you would rather not use reCAPTCHA, you may register by contacting us by email.</p>
+			<p>We will create a new account for you and associate it with the email address that you used to contact us.</p>
+			<br>
 			<address>sysadmin@themanaworld.org</address>
 		</div>
 
@@ -22,9 +22,9 @@
 
 		<div v-if="step == 1">
 			<h1>Email address</h1>
-			We will never give your email address to someone else or send you spam.
-			Providing an email address is entirely optional but it is the only way to request a password reset, should you loose access to your account.
-			If you did not provide an email address you will be unable to perform password resets.
+			<p>We will never give your email address to someone else or send you spam.</p>
+			<p>Providing an email address is entirely optional but it is the only way to request a password reset, should you loose access to your account.
+			If you did not provide an email address you will be unable to perform password resets.</p>
 			<form @submit.prevent="checkEmail">
 				<label for="email">Enter your email (optional):</label>
 				<input v-model="user.email" type="email" maxlength="39" id="email" ref="email" placeholder="your@email.com">
@@ -34,12 +34,12 @@
 
 		<div v-if="step == 2">
 			<h1>Username</h1>
-			Your username is used to log in to the game server. It is never shared with other players: only you see this name.
+			<p>Your username is used to log in to the game server. It is never shared with other players: only you see this name.</p>
 			<p>It must contain between 4 and 23 characters. Letters and numbers only.</p>
 
 			<div class="error taken" v-if="taken">
 				<h2>Username taken</h2>
-				Please choose another username.
+				<p>Please choose another username.</p>
 			</div>
 
 			<form @submit.prevent="checkUser">
@@ -51,7 +51,7 @@
 
 		<div v-if="step == 3">
 			<h1>Password</h1>
-			Please choose a hard-to-guess password.
+			<p>Please choose a hard-to-guess password.</p>
 			<p>It must contain between 8 and 23 characters. Letters and numbers only. Case-sensitive.</p>
 
 			<div v-if="exposed" class="exposed">
@@ -93,10 +93,10 @@
 
 		<div v-if="step == 5">
 			<h1>Thank you</h1>
-			Your account has been successfully created.
+			<p>Your account has been successfully created.</p>
 
 			<h1>Next steps</h1>
-			To start playing, <a href="https://wiki.themanaworld.org/index.php/Downloads">download ManaPlus</a> and select the server <i>The Mana World</i>
+			<p>To start playing, <a href="https://wiki.themanaworld.org/index.php/Downloads">download ManaPlus</a> and select the server <i>The Mana World</i>.</p>
 		</div>
 
 		<div class="g-recaptcha" id="recaptcha-container"