Take 2

journals/templates/journals/_base.html

@@ -6,7 +6,7 @@
 {% block body_class %}{{block.super}} journals{% endblock %}
 
 {% block breadcrumb %}
-    <div class="container-outside header">
+    <div class="container-outside breadcrumb-nav">
         <div class="container">
             <nav class="breadcrumb hidden-sm-down">
                 {% block breadcrumb_items %}

scipost/static/scipost/assets/css/_breadcrumb.scss

 .container-outside.breadcrumb-nav {
-    background-color: $gray-300;
+    background-color: $gray-200;
+
+    .breadcrumb {
+        background-color: transparent;
+    }
 }
 
 .breadcrumb {

scipost/static/scipost/assets/css/_grid.scss

@@ -32,8 +32,8 @@ footer.secondary {
     background-color: $white;
 }
 
-@media (min-width: 1300px) {
-    .container {
-        max-width: 1300px;
-    }
+.container {
+    max-width: 1500px;
+    padding-left: 30px;
+    padding-right: 30px;
 }

scipost/static/scipost/assets/css/_navbar.scss

@@ -4,12 +4,28 @@
  */
 .container-outside {
     &.main-nav {
-        background-color: #465d8e;
+        background-color: $scipost-lightblue;
+
+        .navbar {
+            background-color: $scipost-lightblue;
+
+            a {
+                color: $white;
+            }
+        }
     }
 
     &.sub-nav {
         background-color: $gray-200;
 
+        .navbar {
+            background-color: $gray-200;
+
+            a {
+                color: $scipost-lightblue;
+            }
+        }
+
         span.nav-link {
             color: #465d8e;
         }
@@ -18,34 +34,15 @@
             background-color: #f2f2f2;
 
             .navbar {
-                background-color: #f7f7f7;
+                background-color: #f2f2f2;
             }
         }
     }
 }
 
 .navbar {
-    // margin-bottom: 1.5rem;
-    // display: flex;
-    // flex-wrap: nowrap;
-    // overflow-x: scroll;
-
-    &.main-nav {
-        background-color: $scipost-lightblue;
-
-        a {
-            color: $white;
-        }
-    }
-
-    &.sub-nav {
-        background-color: $gray-300;
-
-        a {
-            color: $scipost-lightblue;
-        }
-    }
 
+    .nav-item.active a,
     a:hover {
         text-decoration: underline;
     }
@@ -157,17 +154,17 @@
     height: 100%;
 
     input[name="q"] {
-        width: 0;
-        background: transparent;
         position: relative;
-        border: 0;
         outline: none;
-        border-bottom: 2px solid #fff;
         border-radius: 0;
-        color: #fff;
         font-size: 110%;
-        margin: 0.3rem 0.5rem !important;
-        padding: 4px 0 !important;
+        margin: 0 !important;
+        padding: 0.5rem 0.75rem;
+        height: 100%;
+        border: 6px solid $gray-800;
+        border-left-width: 8px;
+        width: 150px;
+        transition: 0.05s;
     }
 
     &:active input[name="q"],
@@ -176,9 +173,9 @@
     input[name="q"]:active,
     input[name="q"]:focus,
     input[name="q"]:hover {
-        width: auto;
+        width: 200px;
     }
-    //
+
     [type="submit"] {
         background-color: $gray-800;
         color: $white;

scipost/static/scipost/assets/css/_type.scss

@@ -56,7 +56,7 @@ h5 {
     h1,
     h2 {
         padding: 15px;
-        background-color: $gray-300;
+        background-color: $gray-200;
         border-radius: $card-border-radius;
         border: 0;
         margin-top: 0;
@@ -129,6 +129,10 @@ hr.hr12 {
     margin-bottom: 0;
 }
 
+.fa {
+    min-width: 10px;
+    display: inline-block;
+}
 .fa[data-toggle="tooltip"] {
     font-size: 1.5em;
 }

scipost/templates/scipost/navbar.html

@@ -8,7 +8,7 @@
         <nav class="navbar main-nav navbar-expand-lg justify-content-between">
             <ul id="menu-navbar" class="navbar-nav">
               <li class="nav-item{% if request.path == '/' %} active{% endif %}">
-                <a href="{% url 'scipost:index' %}" class="nav-link"><i class="fa fa-home" style="min-width: 11px;"></i></a>
+                <a href="{% url 'scipost:index' %}" class="nav-link">Home</a>
               </li>
               <li class="nav-item{% if '/journals/' in request.path %} active{% endif %}">
                 <a href="{% url 'journals:journals' %}" class="nav-link">Journals</a>