Improve home page layout and CharacterLinks

app/components/CharacterLink.svelte

@@ -1,25 +1,20 @@
 <script>
 	import { isAdmin } from '../UserState'
+	import FactionIcon from './FactionIcon'
 	export let character;
 </script>
 
 <style>
 </style>
 
-<span class="character-link">
+{#if $isAdmin}
-	<span class="faction-icon">
+<a class="character-link" href="/user/{character.account_id}">
-	{#if character.faction_id == 1}
+	<FactionIcon {character} />
-	<img height=32 src="/img/nc_icon.png" alt="NC" />
+	<span>{character.name}</span>
-	{:else if character.faction_id == 0}
+</a>
-	<img height=32 src="/img/tr_icon.png" alt="TR" />
+{:else}
-	{:else if character.faction_id == 2}
+<span class="character-link">
-	<img height=32 src="/img/vs_icon.png" alt="VS" />
+	<FactionIcon {character} />
-	{/if}
-	</span>
-
-	{#if $isAdmin}
-	<a href="/user/{character.account_id}">{character.name}</a>
-	{:else}
 	<span>{character.name}</span>
-	{/if}
 </span>
+{/if}

app/components/EmpireStats.svelte

@@ -72,6 +72,21 @@
   position: relative;
 }
 
+.empire-stats:before {
+    content: ' ';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    opacity: 0.4;
+    background-image: url('/img/logo_crop.png');
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
 .empire-stat {
   border: 1px solid white;
   border-bottom: 0;
@@ -80,6 +95,7 @@
   text-align: center;
   min-width: 50px;
   min-height: 3em;
+  text-shadow: 2px 2px #000000;
 }
 
 .empire-stat:nth-child(2) {

app/components/FactionIcon.svelte

@@ -0,0 +1,13 @@
+<script>
+	export let character;
+</script>
+
+<span class="faction-icon">
+{#if character.faction_id == 1}
+<img height=32 src="/img/nc_icon.png" alt="NC" />
+{:else if character.faction_id == 0}
+<img height=32 src="/img/tr_icon.png" alt="TR" />
+{:else if character.faction_id == 2}
+<img height=32 src="/img/vs_icon.png" alt="VS" />
+{/if}
+</span>

app/views/Home.svelte

@@ -96,6 +96,11 @@
 	<h2>Online Players ({players.length})</h2>
 	<p>Next update in {next_update_label}</p>
 	</div>
+	<div class="col-md-4 col-12 mt-md-0 mt-3">
+		{#if stats.empires}
+		<EmpireStats bind:this={empire_stats} bind:stats={stats.empires} />
+		{/if}
+	</div>
 	<div class="col-md-8 col-12">
 		<div class="row">
 			{#each players as char, i}
@@ -104,10 +109,5 @@
 		</div>
 
 	</div>
-	<div class="col-md-4 col-12 mt-md-0 mt-3">
-		{#if stats.empires}
-		<EmpireStats bind:this={empire_stats} bind:stats={stats.empires} />
-		{/if}
-	</div>
 </div>
 {/if}

app/views/Login.svelte

@@ -85,7 +85,7 @@
       <label for="inputPassword">Password</label>
       <input class="form-control" type="password" id="inputPassword" placeholder="Password" name="password" required>
     </div>
-    <button type="submit">Login</button>
+    <button type="submit" class="btn btn-primary">Login</button>
   </form>
   <p><a href="/recovery">Forgot username/password?</a></p>
 </main>

app/views/Register.svelte

@@ -106,6 +106,6 @@
 				<div class="invalid-feedback">Email addresses must match.</div>
 			</div>
 		</div>
-		<button type="submit">Join the fight!</button>
+		<button type="submit" class="btn btn-primary">Join the fight!</button>
 	</form>
 </main>