several docs cleanup things

docs/_includes/nav-docs.html

@@ -3,53 +3,55 @@
     Bootstrap
   </a>
 
-  <div class="bs-docs-search">
+  <form class="bs-docs-search hidden-xs-down">
     <input type="text" class="form-control" id="search-input" placeholder="Search...">
     <ul class="dropdown-menu bs-docs-search-results" id="search-results"></ul>
-  </div>
-
-  {% for group in site.data.nav %}
-    {% assign link = group.pages | first %}
-    {% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}
-    {% assign active = nil %}
-
-    {% if page.url contains slug %}
-      {% assign active = 'active' %}
-    {% endif %}
-
-    <div class="bs-docs-toc-item {{ active }}">
-      <a class="bs-docs-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ link.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-'  }}">
-        {{ group.title }}
-      </a>
-
-      <ul class="nav bs-docs-sidenav">
-        {% for doc in group.pages %}
-          {% assign slug = doc.title | downcase | replace: ' ', '-' %}
-          {% assign active = nil %}
-
-          {% if page.url contains slug %}
-            {% assign active = 'active bs-docs-sidenav-active' %}
-          {% endif %}
-
-          <li class="{{ active }}">
-            <a href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' }}">
-              {{ doc.title }}
-            </a>
-
-            {% unless doc.sections == nil %}
-              <ul class="nav">
-                {% for section in doc.sections %}
-                  <li>
-                    <a href="#{{ section.title | downcase | replace: ' ', '-' }}">
-                      {{ section.title }}
-                    </a>
-                  </li>
-                {% endfor %}
-              </ul>
-            {% endunless %}
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-  {% endfor %}
+  </form>
+
+  <nav class="bs-docs-links hidden-xs-down">
+    {% for group in site.data.nav %}
+      {% assign link = group.pages | first %}
+      {% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}
+      {% assign active = nil %}
+
+      {% if page.url contains slug %}
+        {% assign active = 'active' %}
+      {% endif %}
+
+      <div class="bs-docs-toc-item {{ active }}">
+        <a class="bs-docs-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ link.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-'  }}">
+          {{ group.title }}
+        </a>
+
+        <ul class="nav bs-docs-sidenav">
+          {% for doc in group.pages %}
+            {% assign slug = doc.title | downcase | replace: ' ', '-' %}
+            {% assign active = nil %}
+
+            {% if page.url contains slug %}
+              {% assign active = 'active bs-docs-sidenav-active' %}
+            {% endif %}
+
+            <li class="{{ active }}">
+              <a href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' }}">
+                {{ doc.title }}
+              </a>
+
+              {% unless doc.sections == nil %}
+                <ul class="nav">
+                  {% for section in doc.sections %}
+                    <li>
+                      <a href="#{{ section.title | downcase | replace: ' ', '-' }}">
+                        {{ section.title }}
+                      </a>
+                    </li>
+                  {% endfor %}
+                </ul>
+              {% endunless %}
+            </li>
+          {% endfor %}
+        </ul>
+      </div>
+    {% endfor %}
+  </nav>
 </header>

docs/assets/scss/docs.scss

@@ -325,7 +325,7 @@ body {
   width: auto !important;
   height: auto !important;
   padding: 1.25rem !important;
-  margin: 2rem -2rem -2rem !important;
+  margin: 0 -1rem 2rem !important;
   overflow: hidden; /* clearfix */
   font-size: .8rem !important;
   line-height: 1rem !important;
@@ -378,7 +378,7 @@ body {
 //   color: $bs-purple !important;
 // }
 
-@media (min-width: 480px) {
+@include media-breakpoint-up(sm) {
   .carbonad {
     width: 330px !important;
     margin: 1.5rem auto !important;
@@ -390,14 +390,14 @@ body {
   }
 }
 
-@media (min-width: 768px) {
+@include media-breakpoint-up(md) {
   .carbonad {
     margin-right: 0 !important;
     margin-left: 0 !important;
   }
 }
 
-@media (min-width: 992px) {
+@include media-breakpoint-up(lg) {
   .carbonad {
     float: right;
     width: 330px !important;
@@ -552,7 +552,7 @@ body {
 .bs-docs-container {
   position: relative;
   max-width: 62rem;
-  padding: 1rem;
+  padding: 0 1rem 1rem;
   margin-right: auto;
   margin-left: auto;
 
@@ -700,10 +700,6 @@ body {
 }
 
 
-.bs-docs-sidenav {
-  display: none;
-}
-
 .bs-docs-toc-link {
   display: block;
   padding: 4px 20px;
@@ -789,10 +785,6 @@ body {
 //
 
 .bs-docs-content {
-  > h1 {
-    font-size: 4rem;
-  }
-  
   > h2 {
     margin-top: 3rem;
     font-weight: normal;
@@ -804,13 +796,19 @@ body {
 }
 
 .bs-docs-title {
-  margin-right: 23rem;
-
   + p {
-    margin-right: 23rem;
     font-size: 1.25rem;
     font-weight: 300;
   }
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 23rem;
+    font-size: 4rem;
+
+    + p {
+      margin-right: 23rem;
+    }
+  }
 }
 
 
@@ -954,14 +952,15 @@ body {
 
 .bs-example {
   position: relative;
-  padding: 1.5rem;
-  margin-top: 1rem;
-  margin-bottom: -1rem;
+  padding: 1rem;
+  margin: 1rem -1rem;
   border: solid #f7f7f9;
   border-width: .2rem 0 0;
   @include clearfix();
 
-  @media (min-width: 480px) {
+  @include media-breakpoint-up(sm) {
+    margin-bottom: -1rem;
+    padding: 1.5rem;
     border-width: .2rem;
   }
 
@@ -1211,10 +1210,14 @@ body {
 //
 
 .highlight {
-  padding: 1.5rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  padding: 1rem;
+  margin: -1rem -1rem 1rem;
   background-color: #f7f7f9;
+
+  @include media-breakpoint-up(sm) {
+    padding: 1.5rem;
+    margin: 1rem 0;
+  }
 }
 .highlight pre {
   padding: 0;