From 0d7115928bae457ebfbabc18c62d5c779d2c039b Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 4 Dec 2014 01:10:26 -0800
Subject: [PATCH] convert narrow jumbotron to rems
---
docs/examples/narrow-jumbotron/index.html | 12 +++++--
.../narrow-jumbotron/narrow-jumbotron.css | 36 +++++++++----------
2 files changed, 27 insertions(+), 21 deletions(-)
diff --git a/docs/examples/narrow-jumbotron/index.html b/docs/examples/narrow-jumbotron/index.html
index 959072226b..f23ec5e07a 100644
--- a/docs/examples/narrow-jumbotron/index.html
+++ b/docs/examples/narrow-jumbotron/index.html
@@ -26,9 +26,15 @@
<div class="header">
<nav>
<ul class="nav nav-pills pull-right">
- <li role="presentation" class="active"><a href="#">Home</a></li>
- <li role="presentation"><a href="#">About</a></li>
- <li role="presentation"><a href="#">Contact</a></li>
+ <li class="nav-item active">
+ <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Contact</a>
+ </li>
</ul>
</nav>
<h3 class="text-muted">Project name</h3>
diff --git a/docs/examples/narrow-jumbotron/narrow-jumbotron.css b/docs/examples/narrow-jumbotron/narrow-jumbotron.css
index fb7c49ab10..517c82c189 100644
--- a/docs/examples/narrow-jumbotron/narrow-jumbotron.css
+++ b/docs/examples/narrow-jumbotron/narrow-jumbotron.css
@@ -1,62 +1,62 @@
/* Space out content a bit */
body {
- padding-top: 20px;
- padding-bottom: 20px;
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
- padding-right: 15px;
- padding-left: 15px;
+ padding-right: 1rem;
+ padding-left: 1rem;
}
/* Custom page header */
.header {
- border-bottom: 1px solid #e5e5e5;
+ border-bottom: .05rem solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
- padding-bottom: 19px;
+ padding-bottom: 1.5rem;
margin-top: 0;
margin-bottom: 0;
- line-height: 40px;
+ line-height: 3rem;
}
/* Custom page footer */
.footer {
- padding-top: 19px;
+ padding-top: 1.5rem;
color: #777;
- border-top: 1px solid #e5e5e5;
+ border-top: .05rem solid #e5e5e5;
}
/* Customize container */
-@media (min-width: 768px) {
+@media (min-width: 48em) {
.container {
- max-width: 730px;
+ max-width: 46rem;
}
}
.container-narrow > hr {
- margin: 30px 0;
+ margin: 2rem 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
- border-bottom: 1px solid #e5e5e5;
+ border-bottom: .05rem solid #e5e5e5;
}
.jumbotron .btn {
- padding: 14px 24px;
- font-size: 21px;
+ padding: .75rem 1.5rem;
+ font-size: 1.5rem;
}
/* Supporting marketing content */
.marketing {
- margin: 40px 0;
+ margin: 3rem 0;
}
.marketing p + h4 {
- margin-top: 28px;
+ margin-top: 1.5rem;
}
/* Responsive: Portrait tablets and up */
@@ -70,7 +70,7 @@ body {
}
/* Space out the masthead */
.header {
- margin-bottom: 30px;
+ margin-bottom: 2rem;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
--
GitLab