tweak homepage copy and layout
This commit is contained in:
Mark Otto
parent
95b0ec18f4
commit
b728fe2bbd
|
|
@ -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; } }
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
|
|
|
|||
|
|
@ -18,32 +18,29 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
|
|||
|
||||
<div class="bd-featurette">
|
||||
<div class="container">
|
||||
<h2 class="bs-docs-featurette-title">Easy to get started.</h2>
|
||||
<h2 class="bd-featurette-title">Easy to get started.</h2>
|
||||
<p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the <a href="#">Bootstrap CDN</a>.</p>
|
||||
|
||||
<hr class="half-rule">
|
||||
<!-- <hr class="half-rule"> -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h4>Package managers</h4>
|
||||
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm.</p>
|
||||
{% highlight bash %}
|
||||
$ npm install bootstrap
|
||||
$ bower install bootstrap
|
||||
$ meteor add twbs:bootstrap
|
||||
$ composer require twbs/bootstrap
|
||||
{% endhighlight %}
|
||||
<div class="col-sm-6">
|
||||
<h4>Managed dependencies</h4>
|
||||
<p>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.</p>
|
||||
<p>
|
||||
<a class="btn btn-primary" href="">View install methods</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<!-- <div class="col-sm-4">
|
||||
<h4>Custom builds</h4>
|
||||
<p>Need just a part of Bootstrap? Download a custom build of the compiled CSS and JS.</p>
|
||||
<a class="btn btn-secondary" href="#">Reboot</a>
|
||||
<a class="btn btn-secondary" href="#">Grid system</a>
|
||||
<a class="btn btn-secondary" href="#">Flexbox</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
</div> -->
|
||||
<div class="col-sm-6">
|
||||
<h4>Bootstrap CDN</h4>
|
||||
<p>Use the free Bootstrap CDN to hotlink the compiled CSS and JS.</p>
|
||||
<p>When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the Max CDN folks.</p>
|
||||
{% highlight html %}
|
||||
<link rel="stylesheet" href="{{ site.cdn.css }}">
|
||||
<script src="{{ site.cdn.js }}"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue