From b728fe2bbd6222084f9fe049b1ba778b6a9bf496 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 5 Aug 2015 00:05:05 -0700 Subject: [PATCH] tweak homepage copy and layout --- docs/assets/css/docs.min.css | 30 +++++++++++++++++------------- docs/assets/css/docs.min.css.map | Bin 26324 -> 26428 bytes docs/assets/scss/_homepage.scss | 31 ++++++++++++++++++++----------- docs/assets/scss/docs.scss | 1 + docs/index.html | 27 ++++++++++++--------------- 5 files changed, 50 insertions(+), 39 deletions(-) diff --git a/docs/assets/css/docs.min.css b/docs/assets/css/docs.min.css index e3b396cdf..e24a6312c 100644 --- a/docs/assets/css/docs.min.css +++ b/docs/assets/css/docs.min.css @@ -254,11 +254,14 @@ .bd-masthead { position: relative; padding: 0.75rem; - text-align: center; } + color: #8e869d; + text-align: center; + background: -webkit-linear-gradient(to bottom, #2a2730, #3c3845); + background: linear-gradient(to bottom, #2a2730, #3c3845); } .bd-masthead .bd-booticon { margin: 0 auto 2rem; - color: #563d7c; - border-color: #563d7c; } + color: #9062d7; + border-color: #9062d7; } .bd-masthead h1 { font-weight: 300; line-height: 1; } @@ -275,16 +278,17 @@ padding: 1rem 2rem; font-size: 1.25rem; font-weight: 500; - color: #55595c; - border-color: #55595c; } + color: #ffe484; + border-color: #ffe484; } .bd-masthead .btn:hover { - color: #fff; - background-color: #55595c; } + color: #2a2730; + background-color: #ffe484; + border-color: #ffe484; } .bd-masthead .carbonad { margin-bottom: -2rem !important; } @media (min-width: 34em) { .bd-masthead { - padding-top: 2rem; + padding-top: 8rem; padding-bottom: 2rem; } .bd-masthead .btn { width: auto; } @@ -312,7 +316,6 @@ font-size: 1rem; line-height: 1.5; color: #555; - text-align: center; background-color: #fff; border-top: 1px solid #eee; } .bd-featurette .highlight { @@ -323,10 +326,13 @@ font-size: 2rem; font-weight: normal; color: #333; } + .bd-featurette-title + .lead { + font-size: 1.5rem; + margin-bottom: 2rem; } .half-rule { width: 6rem; - margin: 2.5rem auto; } + margin: 2.5rem 0; } .bd-featurette h4 { margin-top: 1rem; @@ -358,9 +364,7 @@ .bd-featurette-title { font-size: 2.5rem; } .bd-featurette .lead { - max-width: 80%; - margin-right: auto; - margin-left: auto; } + max-width: 80%; } .bd-featurette .img-responsive { margin-top: 0; } } diff --git a/docs/assets/css/docs.min.css.map b/docs/assets/css/docs.min.css.map index 3d8fe8e9653bc2c8e43bc0af4e92b969bdf3e9d7..1e42744a79937624793f299fd76cbb10566a57f7 100644 GIT binary patch delta 711 zcmYLGO-~b16wS1v#j%xI5EDz4wjhQVki-c!v*Es(H_vvM8HUnOG$w_rZPG7n`6#+E zapTI({Shumh{?pAJ2z^gVZmPg0q%6~w4Eu-ch0%z-gnN~cj40y;lq`8nO?ufZf|IIOwIGfM`bi&MKb-Rzt%*d!O@mFSYu>epY41kfA3b0RQ z21-*Q=kR?6;2GgyK6fb_|0ML(0UOxMS>uo$P_hNE<+^uS*5CTVd3@`QFl#PrLuE!g zS3b~&%0sP*BhyQY+2r}bZHCd}ZAvN>ph8{SI@f%n(IdQVO+Nf{g+Fy~v#>NR1to0* ze=9ffRWcT6sQ6`iF0`u_Wdk}YmTq6iNYV;+dC}KQRoDh81C$3DWP3SrsIuNfjp1?f zTTpt~S6{5sTDD4YEH!~AsrLc)2Fax)Yu| z6$0&b=jYwhg~$>0E490{Unw@yq40W#`tjJ3bF{FO5DSLa&i0P;aWxkhvlS00=S(+0 z4TVe$&Baliw=Ro@?UN?1SZUE3iZyIm^C($SJhl?oj3Ev^lU$SHlY2MtofUVkuKl|d Q-euq!)o8fpOt|GcWVTH?K28nlw`c!_;C?i`eVI!4@TU}-c_#W$$L88Fk zVmW+RUB~9iWxRbWf)_J$p@N3F%yP7?H&g-JxR%)pzc3pAQ&M;Jb)^N+8kaBuxMDzg zB&g^Z&3+3XvWa4sPQ}Jcqs9mxu}=4hZ&_iqrLBMFXlE7{2j0c38h<}b4)UjG_DJv`_l|d3EG@`u!k?!3*h`5=A?(}dBW!hGTg9VF0^ixQGIxDW z%fb(KP8M2l>-ftq;8SN7FF9$MPjC$%I0f05=$O}W{zWfzDEP{4vg^HSe2tv}ExxVR diff --git a/docs/assets/scss/_homepage.scss b/docs/assets/scss/_homepage.scss index 3f64106c9..e57cb70cd 100644 --- a/docs/assets/scss/_homepage.scss +++ b/docs/assets/scss/_homepage.scss @@ -92,12 +92,15 @@ .bd-masthead { position: relative; padding: ($grid-gutter-width / 2); + color: $bd-graphite-light; text-align: center; + background: -webkit-linear-gradient(to bottom, $bd-graphite, lighten($bd-graphite, 7.5%)); + background: linear-gradient(to bottom, $bd-graphite, lighten($bd-graphite, 7.5%)); .bd-booticon { margin: 0 auto 2rem; - color: $bd-purple; - border-color: $bd-purple; + color: $bd-purple-bright; + border-color: $bd-purple-bright; } h1 { @@ -122,12 +125,13 @@ padding: 1rem 2rem; font-size: 1.25rem; font-weight: 500; - color: $gray; - border-color: $gray; + color: $bd-yellow; + border-color: $bd-yellow; &:hover { - color: #fff; - background-color: $gray; + color: $bd-graphite; + background-color: $bd-yellow; + border-color: $bd-yellow; } } @@ -136,7 +140,7 @@ } @include media-breakpoint-up(sm) { - padding-top: 2rem; + padding-top: 8rem; padding-bottom: 2rem; .btn { @@ -187,7 +191,7 @@ font-size: 1rem; line-height: 1.5; color: #555; - text-align: center; + // text-align: center; background-color: #fff; border-top: 1px solid #eee; @@ -201,10 +205,15 @@ font-size: 2rem; font-weight: normal; color: #333; + + + .lead { + font-size: 1.5rem; + margin-bottom: 2rem; + } } .half-rule { width: 6rem; - margin: 2.5rem auto; + margin: 2.5rem 0; } .bd-featurette h4 { margin-top: 1rem; @@ -241,8 +250,8 @@ } .bd-featurette .lead { max-width: 80%; - margin-right: auto; - margin-left: auto; + // margin-right: auto; + // margin-left: auto; } .bd-featurette .img-responsive { margin-top: 0; diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 01666f74a..5ece3beff 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -28,6 +28,7 @@ // Local docs variables $bd-purple: #563d7c; +$bd-purple-bright: lighten(saturate($bd-purple, 25%), 25%); $bd-purple-light: #cdbfe3; $bd-graphite: #2a2730; $bd-graphite-light: lighten($bd-graphite, 40%); diff --git a/docs/index.html b/docs/index.html index 212e323c6..53280f91a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -18,32 +18,29 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
-

Easy to get started.

+

Easy to get started.

Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap CDN.

-
+
-
-

Package managers

-

Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm.

-{% highlight bash %} -$ npm install bootstrap -$ bower install bootstrap -$ meteor add twbs:bootstrap -$ composer require twbs/bootstrap -{% endhighlight %} +
+

Managed dependencies

+

Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our Gruntfile and readme.

+

+ View install methods +

-
+ +

Bootstrap CDN

-

Use the free Bootstrap CDN to hotlink the compiled CSS and JS.

+

When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the Max CDN folks.

{% highlight html %}