mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-12 00:08:59 +01:00
c064eef67b
- Simpler main nav on all pages - Back to purple masthead on homepage instead of dark graphite - Active link styles on the main nav - Cleaned up sidebar nav - New docs layout name - Homepage copy edits - Updated bright purple docs color
228 lines
3.6 KiB
SCSS
228 lines
3.6 KiB
SCSS
//
|
|
// Main navbar
|
|
//
|
|
|
|
.bd-navbar {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
margin-bottom: 0;
|
|
// background-color: $bd-graphite;
|
|
|
|
.nav-link {
|
|
color: $bd-graphite-light;
|
|
|
|
&.active,
|
|
&:hover,
|
|
&:focus {
|
|
color: $gray-dark;
|
|
background-color: transparent;
|
|
}
|
|
|
|
&.active {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Masthead (headings and download button)
|
|
//
|
|
|
|
.bd-masthead {
|
|
position: relative;
|
|
padding: ($grid-gutter-width / 2);
|
|
color: $bd-purple-light;
|
|
text-align: center;
|
|
background: -webkit-linear-gradient(135deg, darken($bd-purple, 15%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
|
|
background: linear-gradient(135deg, darken($bd-purple, 15%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
|
|
|
|
.bd-booticon {
|
|
margin: 0 auto 2rem;
|
|
color: $bd-purple-light;
|
|
border-color: $bd-purple-light;
|
|
}
|
|
|
|
h1 {
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
}
|
|
|
|
.lead {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 2rem;
|
|
font-size: 1rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.version {
|
|
margin-top: -1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
padding: 1rem 2rem;
|
|
font-size: 1.25rem;
|
|
font-weight: 500;
|
|
color: $bd-yellow;
|
|
border-color: $bd-yellow;
|
|
|
|
&:hover {
|
|
color: $bd-graphite;
|
|
background-color: $bd-yellow;
|
|
border-color: $bd-yellow;
|
|
}
|
|
}
|
|
|
|
.carbonad {
|
|
margin-bottom: -2rem !important;
|
|
}
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
padding-top: 8rem;
|
|
padding-bottom: 2rem;
|
|
|
|
.btn {
|
|
width: auto;
|
|
}
|
|
|
|
.carbonad {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
padding-bottom: 4rem;
|
|
|
|
.bd-header {
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 4rem;
|
|
}
|
|
|
|
.lead {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.carbonad {
|
|
margin-top: 3rem !important;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
.lead {
|
|
width: 85%;
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Homepage featurettes
|
|
//
|
|
|
|
.bd-featurette {
|
|
padding-top: 3rem;
|
|
padding-bottom: 3rem;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
color: #555;
|
|
// text-align: center;
|
|
background-color: #fff;
|
|
border-top: 1px solid #eee;
|
|
|
|
.highlight {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.bd-featurette-title {
|
|
margin-bottom: .5rem;
|
|
font-size: 2rem;
|
|
font-weight: normal;
|
|
color: #333;
|
|
|
|
+ .lead {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
.half-rule {
|
|
width: 6rem;
|
|
margin: 2.5rem 0;
|
|
}
|
|
.bd-featurette h4 {
|
|
margin-top: 1rem;
|
|
margin-bottom: .5rem;
|
|
font-weight: normal;
|
|
color: #333;
|
|
}
|
|
.bd-featurette-img {
|
|
display: block;
|
|
margin-bottom: 1.25rem;
|
|
color: #333;
|
|
}
|
|
.bd-featurette-img:hover {
|
|
color: $brand-primary;
|
|
text-decoration: none;
|
|
}
|
|
.bd-featurette-img img {
|
|
display: block;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
@media (min-width: 480px) {
|
|
.bd-featurette .img-responsive {
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.bd-featurette {
|
|
padding-top: 6rem;
|
|
padding-bottom: 6rem;
|
|
}
|
|
.bd-featurette-title {
|
|
font-size: 2.5rem;
|
|
}
|
|
.bd-featurette .lead {
|
|
max-width: 80%;
|
|
// margin-right: auto;
|
|
// margin-left: auto;
|
|
}
|
|
.bd-featurette .img-responsive {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Featured Expo sites
|
|
//
|
|
|
|
.bd-featured-sites {
|
|
margin-right: -1px;
|
|
margin-left: -1px;
|
|
}
|
|
.bd-featured-sites .col-xs-6 {
|
|
padding: 1px;
|
|
}
|
|
.bd-featured-sites .img-responsive {
|
|
margin-top: 0;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.bd-featured-sites .col-sm-3:first-child img {
|
|
border-top-left-radius: .25rem;
|
|
border-bottom-left-radius: .25rem;
|
|
}
|
|
.bd-featured-sites .col-sm-3:last-child img {
|
|
border-top-right-radius: .25rem;
|
|
border-bottom-right-radius: .25rem;
|
|
}
|
|
}
|