Adding padding to HeaderBar

src/components/HeaderBar.vue

@@ -1,6 +1,6 @@
 <template>
 	<header ref="header">
-		<div class="logo">
+		<div class="logo padder">
 			<div class="small">
 				<span> RS </span>
 			</div>
@@ -11,7 +11,7 @@
 
 		<nav ref="navigation">
 			<div class="topbar" ref="topbar">
-				<router-link class="t_link link" :to="element.val" v-for="element in primary" :key="element.key">{{ element.key }}</router-link>
+				<router-link class="t_link link padder" :to="element.val" v-for="element in primary" :key="element.key">{{ element.key }}</router-link>
 			</div>
 			<div class="wrapper">
 				<span class="t_link_d t_link link" ref="dropdownArrow">VV</span>
@@ -21,7 +21,7 @@
 			</div>
 		</nav>
 
-		<div class="user">
+		<div class="user padder">
 			<div v-if="user">
 				<span v-if="!compressed">Username: {{ user.username }} </span>
 				<span v-else>Hi, {{ user.username }} </span>
@@ -224,6 +224,18 @@
 		display: none;
 	}
 
+	/*
+	Padding top-bottom
+	*/
+	.padder {
+		padding-top: 0.2em;
+		padding-bottom: 0.2em;
+	}
+
+	/*
+	Small width should print less things.
+	TODO: Investigate better conditions.
+	*/
 	@media (max-width: 600px) {
 		/* Switch to the small logo */
 		.logo > .small {