3 files changed, 33 insertions, 43 deletions

diff --git a/docs/examples/cover/cover.css b/docs/examples/cover/cover.css
index f2492c980..823662d6b 100644
--- a/docs/examples/cover/cover.css
+++ b/docs/examples/cover/cover.css
@@ -16,7 +16,7 @@ a:hover {
   color: #333;
   text-shadow: none; /* Prevent inheritence from `body` */
   background-color: #fff;
-  border: 1px solid #fff;
+  border: .05rem solid #fff;
 }
 
 
@@ -32,7 +32,7 @@ body {
 body {
   color: #fff;
   text-align: center;
-  text-shadow: 0 1px 3px rgba(0,0,0,.5);
+  text-shadow: 0 .05rem .1rem rgba(0,0,0,.5);
 }
 
 /* Extra markup and styles for table-esque vertical and horizontal centering */
@@ -41,8 +41,8 @@ body {
   width: 100%;
   height: 100%; /* For at least Firefox */
   min-height: 100%;
-  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
-          box-shadow: inset 0 0 100px rgba(0,0,0,.5);
+  -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
+          box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
 }
 .site-wrapper-inner {
   display: table-cell;
@@ -55,51 +55,44 @@ body {
 
 /* Padding for spacing */
 .inner {
-  padding: 30px;
+  padding: 2rem;
 }
 
 
 /*
  * Header
  */
-.masthead-brand {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
 
-.masthead-nav > li {
-  display: inline-block;
+.masthead {
+  margin-bottom: 2rem;
 }
-.masthead-nav > li + li {
-  margin-left: 20px;
+
+.masthead-brand {
+  margin-bottom: 0;
 }
-.masthead-nav > li > a {
-  padding-right: 0;
-  padding-left: 0;
-  font-size: 16px;
+
+.nav-masthead .nav-link {
+  padding: .25rem 0;
   font-weight: bold;
-  color: #fff; /* IE8 proofing */
-  color: rgba(255,255,255,.75);
-  border-bottom: 2px solid transparent;
-}
-.masthead-nav > li > a:hover,
-.masthead-nav > li > a:focus {
+  color: rgba(255,255,255,.5);
   background-color: transparent;
-  border-bottom-color: #a9a9a9;
-  border-bottom-color: rgba(255,255,255,.25);
+  border-bottom: .25rem solid transparent;
 }
-.masthead-nav > .active > a,
-.masthead-nav > .active > a:hover,
-.masthead-nav > .active > a:focus {
+
+.nav-masthead .nav-link + .nav-link {
+  margin-left: 1rem;
+}
+
+.nav-masthead .active {
   color: #fff;
   border-bottom-color: #fff;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48em) {
   .masthead-brand {
     float: left;
   }
-  .masthead-nav {
+  .nav-masthead {
     float: right;
   }
 }
@@ -110,10 +103,10 @@ body {
  */
 
 .cover {
-  padding: 0 20px;
+  padding: 0 1.5rem;
 }
 .cover .btn-lg {
-  padding: 10px 20px;
+  padding: .75rem 1.25rem;
   font-weight: bold;
 }
 
@@ -123,7 +116,6 @@ body {
  */
 
 .mastfoot {
-  color: #999; /* IE8 proofing */
   color: rgba(255,255,255,.5);
 }
 
@@ -132,7 +124,7 @@ body {
  * Affix and center
  */
 
-@media (min-width: 768px) {
+@media (min-width: 40em) {
   /* Pull out the header and footer */
   .masthead {
     position: fixed;
@@ -154,10 +146,10 @@ body {
   }
 }
 
-@media (min-width: 992px) {
+@media (min-width: 62em) {
   .masthead,
   .mastfoot,
   .cover-container {
-    width: 700px;
+    width: 42rem;
   }
 }
diff --git a/docs/examples/cover/index.html b/docs/examples/cover/index.html
index 3bdc4487a..e636b2341 100644
--- a/docs/examples/cover/index.html
+++ b/docs/examples/cover/index.html
@@ -31,12 +31,10 @@
           <div class="masthead clearfix">
             <div class="inner">
               <h3 class="masthead-brand">Cover</h3>
-              <nav>
-                <ul class="nav masthead-nav">
-                  <li class="active"><a href="#">Home</a></li>
-                  <li><a href="#">Features</a></li>
-                  <li><a href="#">Contact</a></li>
-                </ul>
+              <nav class="nav nav-masthead">
+                <a class="nav-link active" href="#">Home</a>
+                <a class="nav-link" href="#">Features</a>
+                <a class="nav-link" href="#">Contact</a>
               </nav>
             </div>
           </div>
diff --git a/docs/examples/narrow-jumbotron/narrow-jumbotron.css b/docs/examples/narrow-jumbotron/narrow-jumbotron.css
index 517c82c18..323db95fd 100644
--- a/docs/examples/narrow-jumbotron/narrow-jumbotron.css
+++ b/docs/examples/narrow-jumbotron/narrow-jumbotron.css
@@ -60,7 +60,7 @@ body {
 }
 
 /* Responsive: Portrait tablets and up */
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48em) {
   /* Remove the padding we set earlier */
   .header,
   .marketing,