Improve full width usage of content. (#141)

Author: hoetmaaiers

pydata_sphinx_theme/docs-navbar.html

@@ -2,7 +2,7 @@
 <div class="container-xl">
 
     {% if logo %}
-    <a class="col-5 col-md-3 navbar-brand" href="{{ pathto(master_doc) }}">
+    <a class="navbar-brand" href="{{ pathto(master_doc) }}">
       <img src="{{ pathto('_static/' + logo, 1) }}" class="logo" alt="logo">
     </a>
     {% endif %}

pydata_sphinx_theme/static/css/index.css

@@ -3,9 +3,14 @@
 }
 
 .navbar-brand {
+  position: relative;
+  height: 45px;
+  width: auto;
+  
   img {
+    max-width: 100%;
+    height: 100%;
     width: auto;
-    height: 45px;
   }
 }
 
@@ -29,4 +34,4 @@
 
 .navbar-header a {
   padding: 0 15px;
-}
+}

src/scss/_navbar.scss

@@ -1,24 +1,22 @@
-// override bootstrap variables
+// Override bootstrap variables
 $spacer: 1rem;
-
-// include core Bootstrap
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1400px
+);
+
+// Include core Bootstrap
 @import '../../node_modules/bootstrap/scss/bootstrap';
 
-// import custom fonts
+// Import custom fonts
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:400|Lato:400');
 
 @import './base';
 @import './navbar';
 
-@media (min-width: 1500px) {
-  .container,
-  .container-sm,
-  .container-md,
-  .container-lg,
-  .container-xl {
-    max-width: 1400px;
-  }
-}
+// Custom css, TODO: to be refactored in different partials
 .deprecated {
   margin-bottom: 10px;
   margin-top: 10px;