changed nav bar to flex box

public/assets/css/general.css

@@ -39,6 +39,10 @@ body, .flex-container--column {
 	justify-content: space-between;
 }
 
+.flex-container--align-center {
+	align-items: center;
+}
+
 .flex-container--wrap {
 	-webkit-flex-wrap: wrap;
 	flex-wrap: wrap;
@@ -348,19 +352,14 @@ option {
 	cursor: pointer;
 }
 /* modifiers */
-.select--no-arrow {
-	-moz-appearance:none;
-	-webkit-appearance: none;
-	cursor: pointer;
-}
-
 .select--arrow {
 	-moz-appearance:none;
 	-webkit-appearance: none;
 	background: url('../icon/Shape.svg') no-repeat right;
+	cursor: pointer;
 	padding-right: 1.5em;
-	margin-right: 2em;
 }
+
 .input-text--primary, .select--primary {
 	border-bottom: 1px solid #9b9b9b;
 }
@@ -433,30 +432,8 @@ table {
 
 /* NAV BAR */
 
-.nav-bar-link-section {
-	padding: 0px;
-}
-
-.nav-bar-title-section {
-	overflow: hidden;
+.nav-bar {
 	border-bottom: 0.5px solid #cacaca;
-	position: relative;
-}
-
-.nav-bar-link-section {
-	position: absolute;
-	bottom: 0px;
-	right: 0px;
-	z-index: 1;
-}
-.nav-bar-title {
-	padding: 2rem 0px 2rem 0px;
-}
-
-.nav-bar-link {
-	padding: 2rem 1.5rem 2rem 1.5rem;
-	display: inline-block;
-	color: black;
 }
 
 .nav-bar-logo {
@@ -464,24 +441,23 @@ table {
 	height: 2rem;
 }
 
-.nav-bar-title--superscript {
+.nav-bar-tagline {
 	font-size: small;
-	vertical-align: top;
-}
-
-.nav-bar-title--tagline {
-	font-size: small;
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	transform: translateX(-50%) translateY(-50%);
 }
 
 .nav-bar-link {
+	padding: 1.5rem;
+	display: inline-block;
+	color: black;
 	font-weight: normal;
 	color: black;
 	border-bottom: 2px solid white;
 }
+
+.nav-bar-link--last {
+	padding-right: 0px;
+}
+
 .nav-bar-link:hover {
 	color: dodgerblue;
 }
@@ -491,11 +467,6 @@ table {
 	border-bottom: 2px solid dodgerblue;
 }
 
-.nav-bar-link-icon {
-	vertical-align: text-bottom;
-	padding-bottom: 0.25em;
-}
-
 /* PUBLISH FORM */
 
 .dropzone {

views/partials/navBar.handlebars

@@ -1,10 +1,12 @@
 <div class="row row--wide nav-bar">
-    <div class="nav-bar-title-section row row--padded row--short">
-        <div class="nav-bar-title">
+    <div class="row row--padded row--short flex-container flex-container--row flex-container--align-center">
+        <div class="nav-bar--left">
             <a href="/"><img class="nav-bar-logo" src="/assets/icon/logo.svg" alt="spee.ch"/></a>
-            <span class="nav-bar-title nav-bar-title--tagline">Open-source, decentralized image and video sharing.</span>
         </div>
-        <div class="nav-bar-link-section">
+        <div class="nav-bar--center">
+            <span class="nav-bar-tagline">Open-source, decentralized image and video sharing.</span>
+        </div>
+        <div class="nav-bar--right">
             <a class="nav-bar-link" href="/">Upload</a>
             <a class="nav-bar-link" href="/popular">Popular</a>
             <a class="nav-bar-link" href="/about">About</a>
@@ -13,7 +15,7 @@
                 <option value="VIEW">View</option>
                 <option value="LOGOUT">Logout</option>
             </select>
-            <a id="nav-bar-login-link" class="nav-bar-link" href="/login" {{#if user}}style="display:none"{{/if}}>Channel</a>
+            <a id="nav-bar-login-link" class="nav-bar-link--last" href="/login" {{#if user}}style="display:none"{{/if}}>Channel</a>
         </div>
     </div>
 </div>

views/partials/publishForm-Channel.handlebars

@@ -23,7 +23,7 @@
         <div class="column column--3">
             <label class="label" for="channel-name-select">Channel:</label>
         </div><div class="column column--7">
-            <select type="text" id="channel-name-select" class="select select--primary select--arrow" onchange="toggleSelectedChannel(event.target.selectedOptions[0].value)">
+            <select type="text" id="channel-name-select" class="select select--arrow" onchange="toggleSelectedChannel(event.target.selectedOptions[0].value)">
             {{#if user}}
                 <option value="{{user.channelName}}" id="publish-channel-select-channel-option">{{user.channelName}}</option>
             {{/if}}