diff options
| -rw-r--r-- | src/App.vue | 6 | ||||
| -rw-r--r-- | src/components/Navigation.vue | 8 | ||||
| -rw-r--r-- | src/components/News.vue | 1 | ||||
| -rw-r--r-- | src/views/AccountRecovery.vue | 38 | ||||
| -rw-r--r-- | src/views/NotFound.vue | 2 | ||||
| -rw-r--r-- | src/views/Registration.vue | 32 |
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" |