Commit feeaaa6f authored by Mark Otto's avatar Mark Otto
Browse files

refactor homepage jumbotron masthead doodad

parent 07aed1ab
8 merge requests!8635ignore Gruntfile.js in jekyll,!8339Fix broken links to navbar component in docs examples,!8157Close Me: Docs "Customize and Download" button fix,!7964commit fixes #7792,!8656Added rel="stylesheet" to CDN-Examples,!8527Inner properties move 1,!8245Interactive color picker - Closed: request against wrong branch,!7865Patch 2
Showing with 49 additions and 59 deletions
+49 -59
...@@ -29,10 +29,13 @@ hr { ...@@ -29,10 +29,13 @@ hr {
margin-bottom: 30px; margin-bottom: 30px;
} }
.bs-docs-dl-options h4 { .bs-docs-dl-options h4 {
margin-top: 15px; margin-top: 15px;
margin-bottom: 5px; margin-bottom: 5px;
} }
/* /*
.bs-docs-container, .bs-docs-container,
.bs-home-container { .bs-home-container {
...@@ -40,6 +43,7 @@ hr { ...@@ -40,6 +43,7 @@ hr {
padding-right: 15px; padding-right: 15px;
} }
*/ */
/* Side notes for calling out things */ /* Side notes for calling out things */
.bs-docs-sidenote { .bs-docs-sidenote {
margin: 20px 0; margin: 20px 0;
...@@ -59,50 +63,23 @@ hr { ...@@ -59,50 +63,23 @@ hr {
} }
/* Sections
-------------------------------------------------- */
/* Padding for in-page bookmarks */
/*section,*/
.bs-docs-section {
padding-top: 30px;
}
/* Few stylistic typography tweaks */
/*section > .page-header,
section > .lead {
color: #5a5a5a;
}
section > ul li {
margin-bottom: 5px;
}*/
/* Homepage masthead
/* Jumbotrons
-------------------------------------------------- */ -------------------------------------------------- */
.bs-docs-header { .bs-masthead {
margin-bottom: 20px;
padding-top: 30px;
color: #b94a48;
border-bottom: 5px solid #b94a48;
}
/* Base class */
.bs-docs-jumbotron {
position: relative; position: relative;
margin-bottom: 20px; margin-bottom: 20px;
padding: 30px 15px; padding: 30px 15px;
text-align: center; text-align: center;
} }
.bs-docs-jumbotron h1 { .bs-masthead h1 {
font-size: 50px; font-size: 50px;
line-height: 1; line-height: 1;
} }
/* Download button */ /* Download button */
.bs-docs-jumbotron .btn { .bs-masthead .btn {
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
padding: 18px 24px; padding: 18px 24px;
...@@ -111,42 +88,42 @@ section > ul li { ...@@ -111,42 +88,42 @@ section > ul li {
background-color: #fff; background-color: #fff;
border-color: #e5e5e5; border-color: #e5e5e5;
} }
.bs-docs-jumbotron .btn:hover, .bs-masthead .btn:hover,
.bs-docs-jumbotron .btn:active { .bs-masthead .btn:active {
color: #fff; /* redeclare to override the `.jumbotron a` */ color: #fff; /* redeclare to override the `.jumbotron a` */
background-color: #b94a48; background-color: #b94a48;
border-color: #b94a48; border-color: #b94a48;
} }
/* Textual links in masthead */ /* Textual links */
.masthead-links { .bs-masthead-links {
margin: 20px 0; margin: 20px 0;
list-style: none; list-style: none;
} }
.masthead-links li { .bs-masthead-links li {
display: inline; display: inline;
color: #999; color: #999;
} }
.masthead-links li + li { .bs-masthead-links li + li {
margin-left: 20px; margin-left: 20px;
} }
/* Special grid styles /* Docs pages and sections
-------------------------------------------------- */ -------------------------------------------------- */
.show-grid { /* Page headers */
margin-bottom: 15px; .bs-docs-header {
} margin-bottom: 20px;
.show-grid .col { padding-top: 30px;
padding-top: 10px; color: #b94a48;
padding-bottom: 10px; border-bottom: 5px solid #b94a48;
background-color: #eee;
border: 1px solid #ddd;
} }
.show-grid .col:hover {
background-color: #ddd; /* Padding for in-page bookmarks */
.bs-docs-section {
padding-top: 30px;
} }
...@@ -240,6 +217,24 @@ section > ul li { ...@@ -240,6 +217,24 @@ section > ul li {
/* Special grid styles
-------------------------------------------------- */
.show-grid {
margin-bottom: 15px;
}
.show-grid .col {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}
.show-grid .col:hover {
background-color: #ddd;
}
/* Bootstrap code examples /* Bootstrap code examples
-------------------------------------------------- */ -------------------------------------------------- */
...@@ -716,23 +711,18 @@ input.focused { ...@@ -716,23 +711,18 @@ input.focused {
} }
/* Tweak display of docs jumbotrons */ /* Tweak display of docs jumbotrons */
.masthead { .bs-masthead {
padding-top: 100px; padding-top: 100px;
padding-bottom: 100px; padding-bottom: 100px;
} }
.masthead h1 { .bs-masthead h1 {
font-size: 100px; font-size: 100px;
} }
.masthead p { .bs-masthead p {
margin-left: 15%; margin-left: 15%;
margin-right: 15%; margin-right: 15%;
font-size: 30px; font-size: 30px;
} }
.subhead {
padding-top: 60px;
padding-bottom: 60px;
text-align: left;
}
.bs-navbar-top-example .navbar-fixed-top, .bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom { .bs-navbar-bottom-example .navbar-fixed-bottom {
......
...@@ -3,8 +3,8 @@ layout: home ...@@ -3,8 +3,8 @@ layout: home
title: Bootstrap title: Bootstrap
--- ---
<div class="bs-docs-jumbotron masthead"> <div class="container">
<div class="container"> <div class="bs-masthead">
<h1>Bootstrap</h1> <h1>Bootstrap</h1>
<p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p> <p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
...@@ -14,7 +14,7 @@ title: Bootstrap ...@@ -14,7 +14,7 @@ title: Bootstrap
{% include social-buttons.html %} {% include social-buttons.html %}
<ul class="masthead-links"> <ul class="bs-masthead-links">
<li> <li>
<a href="./customize/" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Customize']);">Customize</a> <a href="./customize/" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Customize']);">Customize</a>
</li> </li>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment