From 08e36809693470c0572a1ef996e47a728d149b12 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Fri, 29 Sep 2017 12:40:02 -0700
Subject: [PATCH] broke top bar into two sections

---
 public/assets/css/BEM.css        | 31 ++++++++++++++++++++++++++++++-
 views/partials/topBar.handlebars | 32 +++++++++++++++++---------------
 2 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/public/assets/css/BEM.css b/public/assets/css/BEM.css
index 9960c939..80a15610 100644
--- a/public/assets/css/BEM.css
+++ b/public/assets/css/BEM.css
@@ -157,8 +157,31 @@ footer {
 
 /* TOP BAR */
 
+/* blocks */
 .nav-bar {
+
+}
+
+.nav-bar-title-section, .nav-bar-link-section {
+	padding: 0px 1em 0px 1em;
+}
+
+.nav-bar-title-section {
+	overflow: hidden;
 	border-bottom: 2px solid #eaeaea;
+	position: relative;
+	z-index: 2;
+}
+
+.nav-bar-link-section {
+	position: absolute;
+	bottom: 0px;
+	right: 0px;
+}
+
+/* elements */
+.nav-bar-title, .nav-bar-link {
+	padding: 1.5rem 0.5rem 1.5rem 0.5rem;
 }
 
 .nav-bar-logo, .nav-bar-title, .nav-bar-link {
@@ -176,8 +199,14 @@ footer {
 }
 
 .nav-bar-link {
-	padding: 1em 0.5em 1em 0.5em;
+	border-bottom: 1px solid #eaeaea;
 }
+.nav-bar-link:hover {
+	background-color: yellow;
+	border-bottom: 1px solid blue;
+}
+
+
 
 /* LINKS */
 
diff --git a/views/partials/topBar.handlebars b/views/partials/topBar.handlebars
index e4564a2d..7feb8ccb 100644
--- a/views/partials/topBar.handlebars
+++ b/views/partials/topBar.handlebars
@@ -1,20 +1,22 @@
-<div class="row nav-bar">
-    <div class="column column--3 align-content-left">
+<div class="row-wide nav-bar">
+    <div class="nav-bar-title-section">
         <a href="/"><span class="nav-bar-title">Spee.ch</span></a><span class="nav-bar-title nav-bar-title--superscript">(beta)</span>
-    </div><div class="column column--7 align-content-right">
-        <a class="nav-bar-link" href="/popular">popular</a>
-        <a class="nav-bar-link" href="https://github.com/lbryio/spee.ch" target="_blank">source</a>
-        <a class="nav-bar-link" href="/about">about</a>
-        {{#if user}}
-            <select type="text" class="select nav-bar-link" onchange="toggleLogin(event)">
-                <option value="none">@{{user.userName}}</option>
-                <option value="view">view</option>
-                <option value="logout">logout</option>
-            </select>
-        {{else}}
-            <a class="nav-bar-link" href="/login">login</a>
-        {{/if}}
+        <div class="nav-bar-link-section">
+            <a class="nav-bar-link" href="https://github.com/lbryio/spee.ch" target="_blank">source</a>
+            <a class="nav-bar-link" href="/about">about</a>
+            {{#if user}}
+                <select type="text" class="select nav-bar-link" onchange="toggleLogin(event)">
+                    <option value="none">@{{user.userName}}</option>
+                    <option value="view">view</option>
+                    <option value="logout">logout</option>
+                </select>
+            {{else}}
+                <a class="nav-bar-link" href="/login">login</a>
+            {{/if}}
+        </div>
     </div>
+
+
 </div>
 
 <script type="text/javascript">