[gimp-web/gimp-web-static] Mobile nav menu testing (first take)

[Pat David <patdavid src gnome org>]

commit 505fdd93fbdbfe1f920342440d1a174745e616bc
Author: Pat David <patdavid gmail com>
Date:   Tue Sep 22 16:11:37 2015 -0500

    Mobile nav menu testing (first take)

 themes/newgimp/static/css/gimp.css |   47 ++++++++++++++++++++++++++++++++----
 themes/newgimp/templates/base.html |   35 ++++++++++++++++++++++++++-
 2 files changed, 76 insertions(+), 6 deletions(-)
---
diff --git a/themes/newgimp/static/css/gimp.css b/themes/newgimp/static/css/gimp.css
index d8d2056..0b55218 100644
--- a/themes/newgimp/static/css/gimp.css
+++ b/themes/newgimp/static/css/gimp.css
@@ -375,7 +375,7 @@ footer .nav-bottom a {
         padding-top: 0.5rem;
     }
 
-    a#navel {
+    a#navel-old {
         top: 0;
         z-index: 2;
         font-size: 2rem;
@@ -390,19 +390,51 @@ footer .nav-bottom a {
                         1px -1px black, 
                         -1px -1px black, 
                         -1px 1px black;
-
+        display: none;
     }
 
-    a#navel.bottom {
+    a#navel-old.bottom {
         top: initial;
         bottom: 0;
     }
 
-    a#navel.initial {
+    a#navel-old.initial {
         top: 0;
         bottom: initial;
     }
+
+    #navstrip {
+        top: 0;
+        z-index: 2;
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        background-color: #333;
+        padding: 5px 0;
+        font-size: 0.8rem;
+    }
     
+    #navstrip .navfive {
+        display: inline-block;
+        width: 19%;
+    }
+
+    .navfive a {
+        color: white;
+    }
+
+    #pushPage .container.title {
+        margin-top: 65px;
+    }
+
+    #pushPage #banner {
+        padding-top: 55px;
+    }
+    
+    .container.title .column.full {
+        margin-bottom: 0;
+    }
+
     #nav-up {
         font-size: 1rem;
         color: #888;
@@ -411,9 +443,14 @@ footer .nav-bottom a {
 
 
 @media ( min-width: 40rem ){
-    a#navel {
+    #navstrip {
         display: none;
     }
+
+    a#navel-old {
+        display: none;
+    }
+
     #nav-up {
         display: none;
     }
diff --git a/themes/newgimp/templates/base.html b/themes/newgimp/templates/base.html
index d555b62..3ed4c3d 100644
--- a/themes/newgimp/templates/base.html
+++ b/themes/newgimp/templates/base.html
@@ -78,7 +78,40 @@
             <i class="fa fa-chevron-up" id='nav-up'></i>
         </nav><!-- /#menu -->
 
-        <a id="navel" href="#bottom-nav" ><i class="fa fa-bars"></i></a>
+        <div id='navstrip'>
+            <span class='navfive'>
+                <a href="/">
+                    <img src="/images/wilber-tiny.png"><br/>
+                    GIMP
+                </a>
+            </span>
+            <span class='navfive'>
+                <a href="/news/" style="">
+                    <i class="fa fa-newspaper-o" style="font-size: 1.5rem;"></i><br/>
+                    News
+                </a>
+            </span>
+            <span class='navfive'>
+                <a href="/docs/" style="">
+                    <i class="fa fa-book" style="font-size: 1.5rem;"></i><br/>
+                    Docs
+                </a>
+            </span>
+            <span class='navfive'>
+                <a href="/tutorials/" style="">
+                    <i class="fa fa-graduation-cap" style="font-size: 1.5rem;"></i><br/>
+                    Tutorials
+                </a>
+            </span>
+            <span class='navfive'>
+                <a href="#bottom-nav" id='navel' style="">
+                    <i class="fa fa-bars" style="font-size: 1.5rem;"></i><br/>
+                    More
+                </a>
+            </span>
+        </div>
+
+        <a id="navel-old" href="#bottom-nav" ><i class="fa fa-bars"></i></a>
 
     <div id="pushPage">