Added logo to nav, polished colours and updated/fixed the team page

frontend/App.vue

@@ -136,6 +136,11 @@ export default {
 
 html {
 	overflow: auto !important;
+
+	a {
+		color: #03a9f4;
+		text-decoration: none;
+	}
 }
 
 .modal-card {

frontend/components/MainHeader.vue

@@ -2,7 +2,10 @@
 	<nav class="nav is-info">
 		<div class="nav-left">
 			<router-link class="nav-item is-brand" to="/">
-				Musare
+				<img
+					:src="`${this.frontendDomain}/assets/wordmark.png`"
+					alt="Musare"
+				/>
 			</router-link>
 		</div>
 
@@ -24,18 +27,18 @@
 			>
 				<strong>Admin</strong>
 			</router-link>
-			<router-link class="nav-item is-tab admin" to="/team">
+			<router-link class="nav-item is-tab" to="/team">
 				Team
 			</router-link>
-			<router-link class="nav-item is-tab admin" to="/about">
+			<router-link class="nav-item is-tab" to="/about">
 				About
 			</router-link>
-			<router-link class="nav-item is-tab admin" to="/news">
+			<router-link class="nav-item is-tab" to="/news">
 				News
 			</router-link>
 			<span v-if="$parent.$parent.loggedIn" class="grouped">
 				<router-link
-					class="nav-item is-tab admin"
+					class="nav-item is-tab"
 					:to="{
 						name: 'profile',
 						params: { username: $parent.$parent.username }
@@ -43,7 +46,7 @@
 				>
 					Profile
 				</router-link>
-				<router-link class="nav-item is-tab admin" to="/settings"
+				<router-link class="nav-item is-tab" to="/settings"
 					>Settings</router-link
 				>
 				<a
@@ -87,9 +90,15 @@ import { mapState, mapActions } from "vuex";
 export default {
 	data() {
 		return {
-			isMobile: false
+			isMobile: false,
+			frontendDomain: ""
 		};
 	},
+	mounted: function() {
+		lofig.get("frontendDomain", res => {
+			this.frontendDomain = res;
+		});
+	},
 	computed: mapState("modals", {
 		modals: state => state.modals.header
 	}),
@@ -126,18 +135,25 @@ export default {
 		font-size: 2.1rem !important;
 		line-height: 64px !important;
 		padding: 0 20px;
+		color: #ffffff;
+		font-family: Pacifico, cursive;
+		filter: brightness(0) invert(1);
+
+		img {
+			max-height: 38px;
+		}
 	}
 
 	.nav-item {
-		font-size: 15px;
-		color: hsl(0, 0%, 100%);
+		font-size: 17px;
+		color: #ffffff;
 
 		&:hover {
-			color: hsl(0, 0%, 100%);
+			color: #ffffff;
 		}
 	}
-	.admin {
-		color: #424242;
+	.admin strong {
+		color: #9d42b1;
 	}
 }
 .grouped {

frontend/components/Station/CommunityHeader.vue

@@ -7,7 +7,10 @@
 					href="#"
 					:to="{ path: '/' }"
 				>
-					Musare
+					<img
+						:src="`${this.frontendDomain}/assets/wordmark.png`"
+						alt="Musare"
+					/>
 				</router-link>
 			</div>
 
@@ -210,9 +213,15 @@ export default {
 		return {
 			title: this.$route.params.id,
 			isMobile: false,
-			controlBar: true
+			controlBar: true,
+			frontendDomain: ""
 		};
 	},
+	mounted: function() {
+		lofig.get("frontendDomain", res => {
+			this.frontendDomain = res;
+		});
+	},
 	methods: {
 		isOwner: function() {
 			return (
@@ -251,19 +260,22 @@ export default {
 		font-size: 2.1rem !important;
 		line-height: 64px !important;
 		padding: 0 20px;
+		color: #ffffff;
+		font-family: Pacifico, cursive;
+		filter: brightness(0) invert(1);
+
+		img {
+			max-height: 38px;
+		}
 	}
 }
 
 a.nav-item {
-	color: hsl(0, 0%, 100%);
-	font-size: 15px;
+	color: #ffffff;
+	font-size: 17px;
 
 	&:hover {
-		color: hsl(0, 0%, 100%);
-	}
-
-	.admin {
-		color: #424242;
+		color: #ffffff;
 	}
 
 	padding: 0 12px;
@@ -278,6 +290,10 @@ a.nav-item {
 	}
 }
 
+.admin strong {
+	color: #9d42b1;
+}
+
 .grouped {
 	margin: 0;
 	display: flex;

frontend/components/Station/OfficialHeader.vue

@@ -3,7 +3,10 @@
 		<nav class="nav">
 			<div class="nav-left">
 				<router-link class="nav-item is-brand" to="/">
-					Musare
+					<img
+						:src="`${this.frontendDomain}/assets/wordmark.png`"
+						alt="Musare"
+					/>
 				</router-link>
 			</div>
 
@@ -231,9 +234,15 @@ export default {
 		return {
 			title: this.$route.params.id,
 			isMobile: false,
-			controlBar: false
+			controlBar: false,
+			frontendDomain: ""
 		};
 	},
+	mounted: function() {
+		lofig.get("frontendDomain", res => {
+			this.frontendDomain = res;
+		});
+	},
 	methods: {
 		isOwner: function() {
 			return (
@@ -271,19 +280,22 @@ export default {
 		font-size: 2.1rem !important;
 		line-height: 64px !important;
 		padding: 0 20px;
+		color: #ffffff;
+		font-family: Pacifico, cursive;
+		filter: brightness(0) invert(1);
+
+		img {
+			max-height: 38px;
+		}
 	}
 }
 
 a.nav-item {
-	color: hsl(0, 0%, 100%);
-	font-size: 15px;
+	color: #ffffff;
+	font-size: 17px;
 
 	&:hover {
-		color: hsl(0, 0%, 100%);
-	}
-
-	.admin {
-		color: #424242;
+		color: #ffffff;
 	}
 
 	padding: 0 12px;
@@ -298,6 +310,10 @@ a.nav-item {
 	}
 }
 
+.admin strong {
+	color: #9d42b1;
+}
+
 .grouped {
 	margin: 0;
 	display: flex;

frontend/components/pages/Team.vue

@@ -33,8 +33,7 @@
 								</li>
 								<li>
 									<b>Email: </b>
-									<a
-										href="&#109;&#097;&#105;&#108;&#116;&#111;:&#107;&#114;&#105;&#115;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;"
+									<a href="mailto:kris@musare.com"
 										>&#107;&#114;&#105;&#115;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;</a
 									>
 								</li>
@@ -71,8 +70,7 @@
 								</li>
 								<li>
 									<b>Email: </b>
-									<a
-										href="&#109;&#097;&#105;&#108;&#116;&#111;:&#111;&#119;&#101;&#110;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;"
+									<a href="mailto:owen@musare.com"
 										>&#111;&#119;&#101;&#110;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;</a
 									>
 								</li>
@@ -105,8 +103,7 @@
 								</li>
 								<li>
 									<b>Email: </b>
-									<a
-										href="&#109;&#097;&#105;&#108;&#116;&#111;:&#106;&#111;&#110;&#097;&#116;&#104;&#097;&#110;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;"
+									<a href="mailto:jonathan@musare.com"
 										>&#106;&#111;&#110;&#097;&#116;&#104;&#097;&#110;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;</a
 									>
 								</li>
@@ -139,9 +136,41 @@
 								</li>
 								<li>
 									<b>Email: </b>
-									<a
-										href="&#109;&#097;&#105;&#108;&#116;&#111;:&#108;&#108;&#100;&#106;&#115;&#104;&#097;&#100;&#111;&#119;&#108;&#108;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;"
-										>&#108;&#108;&#100;&#106;&#115;&#104;&#097;&#100;&#111;&#119;&#108;&#108;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;</a
+									<a href="mailto:antonio@musare.com"
+										>&#97;&#110;&#116;&#111;&#110;&#105;&#111;&#64;&#109;&#117;&#115;&#97;&#114;&#101;&#46;&#99;&#111;&#109;</a
+									>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<br />
+			<div class="columns">
+				<div
+					class="card column is-6-desktop is-offset-3-desktop is-12-mobile"
+				>
+					<header class="card-header">
+						<p class="card-header-title">
+							Zachary
+						</p>
+					</header>
+					<div class="card-content">
+						<div class="content">
+							<span class="role"
+								><span class="custom-tag light-blue"
+									>Developer</span
+								></span
+							>
+							<ul>
+								<li>
+									<b>Joined: </b>
+									July 12, 2019
+								</li>
+								<li>
+									<b>Email: </b>
+									<a href="mailto:zachary@musare.com"
+										>&#122;&#97;&#99;&#104;&#97;&#114;&#121;&#64;&#109;&#117;&#115;&#97;&#114;&#101;&#46;&#99;&#111;&#109;</a
 									>
 								</li>
 							</ul>

frontend/dist/index.tpl.html

@@ -32,7 +32,7 @@
 	<meta name='theme-color' content='#03a9f4'>
 	<meta name='google' content='nositelinkssearchbox' />
 
-	<link href='https://fonts.googleapis.com/css?family=Roboto:100,400' rel='stylesheet'>
+	<link href='https://fonts.googleapis.com/css?family=Roboto:100,400|Pacifico' rel='stylesheet'>
 	<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css">
 	<link rel='stylesheet' href='/index.css'>