apply webhint suggestions

2 files changed, 48 insertions, 42 deletions

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 991e8e8..749bc61 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -1,30 +1,34 @@
 <template>
 	<nav class="nav" id="nav">
-		<a href="#nav" class="hamburger"></a>
-		<ul>
-			<li><router-link :class="{ 'custom-active': isHome }" :to="{ name: 'home' }">Home</router-link></li>
-			<li><router-link :to="{ name: 'registration' }">Create Account</router-link></li>
-			<li><a href="https://wiki.themanaworld.org/index.php/Downloads">Download</a></li>
-			<li><router-link :to="{ name: 'about' }">About</router-link></li>
-			<li><a href="https://wiki.themanaworld.org/index.php/FAQ">FAQ</a></li> <!-- we might want to put FAQ under About, or put About on the wiki -->
-			<li><router-link :class="{ 'custom-active': isSupport }" :to="{ name: 'support' }">Support</router-link></li>
-			<li><a href="https://wiki.themanaworld.org/">Wiki</a></li>
-			<li><a href="https://forums.themanaworld.org/">Forums</a></li>
-		</ul>
+		<a href="#nav" class="hamburger">☰</a>
+		<div>
+			<ul>
+				<li><router-link :class="{ 'custom-active': isHome }" :to="{ name: 'home' }">Home</router-link></li>
+				<li><router-link :to="{ name: 'registration' }">Create Account</router-link></li>
+				<li><a href="https://wiki.themanaworld.org/index.php/Downloads">Download</a></li>
+				<li><router-link :to="{ name: 'about' }">About</router-link></li>
+				<li><a href="https://wiki.themanaworld.org/index.php/FAQ">FAQ</a></li> <!-- we might want to put FAQ under About, or put About on the wiki -->
+				<li><router-link :class="{ 'custom-active': isSupport }" :to="{ name: 'support' }">Support</router-link></li>
+				<li><a href="https://wiki.themanaworld.org/">Wiki</a></li>
+				<li><a href="https://forums.themanaworld.org/">Forums</a></li>
+			</ul>
+		</div>
 		<div class="server">
 			<span>Server Status</span>
 			<ServerStatus class="status"/>
 		</div>
 		<div class="screenshots">
-			<a href="https://wiki.themanaworld.org/index.php/Screenshots"></a>
+			<a href="https://wiki.themanaworld.org/index.php/Screenshots">Screenshots</a>
 		</div>
-		<ul>
+		<div>
 			<span>Source Code</span>
-			<li><a href="https://github.com/themanaworld">The Mana World</a></li>
-			<li><a href="https://gitlab.com/evol">Evol Online</a></li>
-			<li><a href="https://gitlab.com/manaplus">ManaPlus</a></li>
-			<li><a href="https://github.com/bjorn/tiled">Tiled</a></li>
-		</ul>
+			<ul>
+				<li><a href="https://github.com/themanaworld">The Mana World</a></li>
+				<li><a href="https://gitlab.com/evol">Evol Online</a></li>
+				<li><a href="https://gitlab.com/manaplus">ManaPlus</a></li>
+				<li><a href="https://github.com/bjorn/tiled">Tiled</a></li>
+			</ul>
+		</div>
 	</nav>
 </template>
 
@@ -45,21 +49,35 @@
 		color: gray(50);
 		z-index: 300;
 		display: block;
-
-		&::before {
-			content: "☰";
-		}
 	}
 
-	& ul, & div {
+	& div {
 		background: #CBA083;
-		margin: 0px;
-		padding: 0px;
+		margin: 0;
+		padding: 0;
 		border-radius: 5px;
 		border: solid 1px #2f2e32;
-		list-style: none;
 		margin-bottom: 13px;
 
+		& ul {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+
+			& li {
+				margin-left: 0.8ch;
+				margin-right: 0.8ch;
+
+				&:first-of-type {
+					margin-top: 0.8ch;
+				}
+
+				&:last-of-type {
+					margin-bottom: 0.8ch;
+				}
+			}
+		}
+
 		& span {
 			text-align: center;
 			display: block;
@@ -82,20 +100,6 @@
 		}
 	}
 
-	& ul li {
-		margin-left: 0.8ch;
-		margin-right: 0.8ch;
-
-		&:first-of-type {
-			margin-top: 0.8ch;
-		}
-
-		&:last-of-type {
-			margin-bottom: 0.8ch;
-		}
-	}
-
-
 	& .server > .status {
 		text-align: center;
 		font-weight: bolder;
@@ -115,6 +119,7 @@
 			padding: 0;
 			width: 133px;
 			height: 100px;
+			color: rgba(0, 0, 0, 0);
 
 			&:hover {
 				opacity: 0.8;
diff --git a/src/components/ServerStatus.vue b/src/components/ServerStatus.vue
index c35e916..cb4c2e6 100644
--- a/src/components/ServerStatus.vue
+++ b/src/components/ServerStatus.vue
@@ -1,7 +1,7 @@
 <template>
 	<aside>
-		<a v-if="Online && Players" target="_blank" href="https://server.themanaworld.org">Online: {{Players}} players</a>
-		<a v-if="Online && !Players" target="_blank" href="https://server.themanaworld.org">Online</a>
+		<a v-if="Online && Players" target="_blank" rel="noopener" href="https://server.themanaworld.org">Online: {{Players}} players</a>
+		<a v-if="Online && !Players" target="_blank" rel="noopener" href="https://server.themanaworld.org">Online</a>
 		<a v-if="!Online" class="offline" target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=ILVfzx5Pe-A">Offline</a>
 	</aside>
 </template>
@@ -9,6 +9,7 @@
 <style scoped>
 aside :any-link {
 	text-decoration: none;
+	text-shadow: 0 0 1ch #e1d6cf;
 	color: green;
 	display: block;
 	padding: 8px;