From 0b4efcda9084183b4f8e60cf039707e25a40361a Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 12 Dec 2013 14:57:43 -0800
Subject: [PATCH] more docs homepage cleanup
---
docs-assets/css/docs.css | 93 ++++++++++++++++++++++++++++------------
index.html | 24 ++++++-----
2 files changed, 79 insertions(+), 38 deletions(-)
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 0b96a9663a..5befa3e754 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -235,7 +235,6 @@ body {
margin: 0 auto 30px;
}
.bs-masthead h1 {
- font-size: 60px;
font-weight: 300;
line-height: 1;
}
@@ -265,6 +264,9 @@ body {
padding-top: 80px;
padding-bottom: 80px;
}
+ .bs-masthead h1 {
+ font-size: 60px;
+ }
.bs-masthead .lead {
font-size: 24px;
}
@@ -272,8 +274,6 @@ body {
@media (min-width: 992px) {
.bs-masthead .lead {
- margin-left: 12.5%;
- margin-right: 12.5%;
font-size: 30px;
}
.bs-masthead .btn-outline {
@@ -309,7 +309,6 @@ body {
@media (min-width: 768px) {
.bs-header {
- /*font-size: 21px;*/
text-align: left;
}
.bs-header h1 {
@@ -375,7 +374,7 @@ body {
/* Homepage variation */
.bs-docs-home .carbonad {
- margin: 0 -15px 40px !important;
+ margin: 0 -30px -31px !important;
}
@media (min-width: 480px) {
@@ -394,9 +393,6 @@ body {
.carbonad {
margin: 0 !important;
}
- .bs-docs-home .carbonad {
- margin: 0 auto !important;
- }
}
@media (min-width: 992px) {
@@ -420,8 +416,8 @@ body {
*/
.bs-featurette {
- padding-top: 100px;
- padding-bottom: 100px;
+ padding-top: 40px;
+ padding-bottom: 40px;
font-size: 16px;
line-height: 1.5;
color: #555;
@@ -435,33 +431,74 @@ body {
}
.bs-featurette-title {
- font-size: 40px;
+ font-size: 30px;
font-weight: normal;
color: #333;
margin-bottom: 5px;
}
-.bs-featurette .lead {
- margin-left: auto;
- margin-right: auto;
- max-width: 80%;
-}
-
-.bs-featurette h3,
-.bs-featurette h4 {
- color: #333;
- font-weight: normal;
+.half-rule {
+ width: 100px;
+ margin: 40px auto;
}
.bs-featurette h3 {
+ font-weight: normal;
+ color: #333;
margin-bottom: 5px;
}
-/*.bs-featurette h4 {
- margin-top: 0;
- margin-bottom: 0;
+.bs-featurette-img {
+ display: block;
+ margin-bottom: 20px;
+ color: #333;
}
-*/
-.half-rule {
- max-width: 100px;
- margin: 40px auto;
+.bs-featurette-img:hover {
+ text-decoration: none;
+ color: #428bca;
+}
+.bs-featurette-img img {
+ display: block;
+ margin-bottom: 15px;
+}
+
+/* Featured sites */
+.bs-featured-sites {
+ margin-left: -1px;
+ margin-right: -1px;
+}
+.bs-featured-sites .col-sm-3 {
+ padding-left: 1px;
+ padding-right: 1px;
+}
+
+@media (min-width: 480px) {
+ .bs-featurette .img-responsive {
+ margin-top: 30px;
+ }
+}
+@media (min-width: 768px) {
+ .bs-featurette {
+ padding-top: 100px;
+ padding-bottom: 100px;
+ }
+ .bs-featurette-title {
+ font-size: 40px;
+ }
+ .bs-featurette .lead {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 80%;
+ }
+ .bs-featured-sites .col-sm-3:first-child img {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ }
+ .bs-featured-sites .col-sm-3:last-child img {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+
+ .bs-featurette .img-responsive {
+ margin-top: 0;
+ }
}
diff --git a/index.html b/index.html
index b916883d40..d689cf9e85 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@ base_url: "./"
<div class="container">
<span class="bs-booticon bs-booticon-lg">B</span>
<h1>Bootstrap</h1>
- <p class="lead">The most popular front-end framework for building on the web.</p>
+ <p class="lead">The most popular front-end framework for designing and building on the web.</p>
<p class="lead">
<a href="{{ site.download_dist }}" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}']);" data-content="Quickly get started with Bootstrap's precompiled CSS, JavaScript, and fonts.">Download Bootstrap</a>
<a href="{{ site.download_source }}" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version source }}']);" data-content="Download Bootstrap's LESS, JavaScript, font, and documentation source code.">Download source</a>
@@ -57,22 +57,26 @@ base_url: "./"
<hr class="half-rule">
- <div class="row">
+ <div class="row bs-featured-sites">
<div class="col-sm-3">
- <img src="http://expo.getbootstrap.com/screenshots/coinbase.jpg" alt="" class="img-responsive img-thumbnail">
- <h4>Coinbase</h4>
+ <a href="http://expo.getbootstrap.com/" class="bs-featurette-img">
+ <img src="http://expo.getbootstrap.com/screenshots/coinbase.jpg" alt="" class="img-responsive">
+ </a>
</div>
<div class="col-sm-3">
- <img src="http://expo.getbootstrap.com/screenshots/localcrime.jpg" alt="" class="img-responsive img-thumbnail">
- <h4>Localcrime</h4>
+ <a href="http://expo.getbootstrap.com/" class="bs-featurette-img">
+ <img src="http://expo.getbootstrap.com/screenshots/localcrime.jpg" alt="" class="img-responsive">
+ </a>
</div>
<div class="col-sm-3">
- <img src="http://expo.getbootstrap.com/screenshots/fortrabbit.jpg" alt="" class="img-responsive img-thumbnail">
- <h4>Fortrabbit</h4>
+ <a href="http://expo.getbootstrap.com/" class="bs-featurette-img">
+ <img src="http://expo.getbootstrap.com/screenshots/fortrabbit.jpg" alt="" class="img-responsive">
+ </a>
</div>
<div class="col-sm-3">
- <img src="http://expo.getbootstrap.com/screenshots/sentry.jpg" alt="" class="img-responsive img-thumbnail">
- <h4>Sentry</h4>
+ <a href="http://expo.getbootstrap.com/" class="bs-featurette-img">
+ <img src="http://expo.getbootstrap.com/screenshots/sentry.jpg" alt="" class="img-responsive">
+ </a>
</div>
</div>
--
GitLab