Merge pull request #837 from kvch/smaller-navbar

[enh] make navbar smaller

searx/static/themes/oscar/less/logicodev/navbar.less

@@ -1,89 +1,31 @@
-.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
+.searx-navbar {
     background: @black;
-    color: @light-green;
-}
+    height: 2.3rem;
+    font-size: 1.3rem;
+    line-height: 1.3rem;
+    padding: 0.5rem;
+    font-weight: bold;
+    margin-bottom: 0.8rem;
 
-.navbar > li > a {
-    padding: 0;
-    margin: 0;
-}
-
-.navbar-nav > li > a {
-    background: @black;
-    padding: 0 8px;
-    margin: 0;
-    line-height: 30px;
-}
-
-.navbar, .navbar-default, .menu {
-    background-color: @black;
-    border: none;
-    border-top: 4px solid @light-green;
-    padding-top: 5px;
-    color: @dim-gray !important;
-    font-weight: 700;
-    font-size: 1.1em;
-    text-transform: lowercase;
-    margin-bottom: 24px;
-    height: 30px;
-    line-height: 30px;
-
-    .navbar-nav > li > a{
-        color: @dim-gray;
+    a, a:hover {
+        margin-right: 2.0rem;
+        color: white;
+        text-decoration: none;
     }
 
-    .navbar-brand{
-        font-weight: 700;
+    .instance a {
         color: @light-green;
-        line-height: 30px;
-        padding: 0 30px;
-        margin: 0;
-    }
-    z-index: 10;
-}
-
-// Hover color
-// http://stackoverflow.com/users/114029/leniel-macaferi
-.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
-    color: @light-green;
-    background: @black;
-}
-
-.navbar-toggle {
-    margin-top: 0;
-}
-
-.menu {
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    top: 4px;
-    border: 0;
-    z-index: 1000000000;
-    height: 40px;
-    line-height: 40px;
-    ul {
-        padding: 0;
-        margin: 0;
-        li {
-            padding: 0 0.6em;
-            margin: 0;
-            float: left;
-            list-style: none;
-            a {
-                color: @dim-gray;
-            }
-        }
-        li.active a {
-            color: @light-green;
-        }
+        margin-left: 2.0rem;
     }
 }
 
-.menu-right {
-    right: 2em;
+#main-logo {
+    margin-top: 20vh;
+    margin-bottom: 25px;
+
+    & > img {
+        max-width: 350px;
+        width: 80%;
+    }
 }
 
-.menu-left {
-    left: 2em;
-}

searx/static/themes/oscar/less/pointhi/navbar.less

@@ -1,28 +1,19 @@
-.menu {
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    top: 4px;
-    border: 0;
-    z-index: 1000000000;
-    height: 40px;
-    line-height: 40px;
-    ul {
-        padding: 0;
-        margin: 0;
-        li {
-            padding: 0 0.6em;
-            margin: 0;
-            float: left;
-            list-style: none;
-        }
+.searx-navbar {
+    background: #eee;
+    color: #aaa;
+    height: 2.3rem;
+    font-size: 1.3rem;
+    line-height: 1.3rem;
+    padding: 0.5rem;
+    font-weight: bold;
+
+    a, a:hover {
+        margin-right: 2.0rem;
+        text-decoration: none;
+    }
+
+    .instance a {
+        color: #444;
+        margin-left: 2.0rem;
     }
 }
-
-.menu-right {
-    right: 2em;
-}
-
-.menu-left {
-    left: 2em;
-}

searx/templates/oscar/navbar.html

@@ -1,14 +1,9 @@
-<!-- Static navbar -->
-<div class="navbar navbar-default" role="navigation">
-    <div class="container-fluid">
-        <div class="navbar-header{% if rtl %} navbar-right{% endif %}">
-            <a class="navbar-brand" href="{{ url_for('index') }}">{{ instance_name }}</a>
-        </div>
-    </div><!--/.container-fluid -->
+<div class="searx-navbar">
+    <span class="instance {% if rtl %}pull-right{% else %}pull-left{% endif%}">
+        <a href="{{ url_for('index') }}">{{ instance_name }}</a>
+    </span>
+    <span class="{% if rtl %}pull-left{% else %}pull-right{% endif %}">
+        <a href="{{ url_for('about') }}">{{ _('about') }}</a>
+        <a href="{{ url_for('preferences') }}">{{ _('preferences') }}</a>
+    </span>
 </div>
-<div class="menu menu-{% if rtl %}left{% else %}right{% endif %}">
-    <ul> <!-- results.html -->
-        <li{% if template_name == 'about.html' %} class="active"{% endif %}><a href="{{ url_for('about') }}" class="hmarg">{{ _('about') }}</a></li>
-        <li{% if template_name == 'preferences.html' %} class="active"{% endif %}><a href="{{ url_for('preferences') }}" class="hmarg">{{ _('preferences') }}</a></li>
-    </ul>
-</div><!--/.nav-collapse -->