rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

redo most of the css for the masthead, page headers, and ads

Browse Source
This commit is contained in:
Mark Otto 2015-06-09 15:22:57 -07:00
parent 2d094f9d0f
commit 6b1c9ee8d5
3 changed files with 105 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
docs/assets/scss/_ads.scss
View File

@ -6,20 +6,20 @@
width: auto !important;
height: auto !important;
padding: 1.25rem !important;
margin: 0 -1rem 2rem !important;
overflow: hidden; /* clearfix */
margin: 0 -1.5rem 2rem !important;
overflow: hidden; // clearfix
font-size: .8rem !important;
line-height: 1rem !important;
color: $gray !important;
text-align: left;
background: #f5f5f5 !important;
border: 0 !important;
// border: solid #e5e5e5 !important;
// border-width: 1px 0 !important;
}
.carbonad-img {
margin: 0 !important;
}
.carbonad-text,
.carbonad-tag {
display: block !important;
@ -29,13 +29,16 @@
margin-left: 145px !important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.carbonad-text {
padding-top: 0 !important;
}
.carbonad-tag {
color: inherit !important;
text-align: left !important;
}
.carbonad-text a,
.carbonad-tag a {
color: $gray !important;
@ -44,58 +47,17 @@
color: $brand-primary !important;
}
}
.carbonad #azcarbon > img {
display: none; // hide what I assume are tracking images
}
// In the lighter page headers
// .bd-header .carbonad {
// color: #777;
// background-color: #fff !important;
// border-color: #eee !important;
// }
// .bd-header .carbonad-text a,
// .bd-header .carbonad-tag a {
// color: $bd-purple !important;
// }
@include media-breakpoint-up(sm) {
.carbonad {
width: 330px !important;
margin: 1.5rem auto !important;
border-width: 1px !important;
padding: 1rem !important;
margin-right: auto !important;
margin-left: auto !important;
border-radius: .25rem;
}
.bd-masthead .carbonad {
margin: 3rem auto 0 !important;
}
}
@include media-breakpoint-up(md) {
.carbonad {
margin-right: 0 !important;
margin-left: 0 !important;
}
}
@include media-breakpoint-up(lg) {
.carbonad {
float: right;
width: 330px !important;
padding: 1rem !important;
margin: .5rem 0 1rem 2rem !important;
}
.bd-masthead {
.carbonad {
float: none;
margin: 0 auto !important;
// color: $bd-purple-light !important;
// background: transparent !important;
// border: 1px solid #866ab3 !important;
}
// .carbonad-text a,
// .carbonad-tag a {
// color: #fff !important;
// }
}
}

153
docs/assets/scss/_homepage.scss
View File

@ -50,23 +50,33 @@
.bd-header-mark {
float: left;
padding-top: .6em;
padding-bottom: .6em;
padding-top: .6rem;
padding-bottom: .6rem;
font-size: 1.25rem;
font-weight: 500;
}
}
.bd-header-nav {
float: right;
padding-bottom: 1rem;
margin-bottom: 2rem;
border-bottom: .0625rem solid #eee;
.nav-link {
float: left;
display: inline-block;
padding: 1.2rem .75rem;
&:hover {
background-color: transparent;
}
}
@include media-breakpoint-up(sm) {
float: right;
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
}
@ -76,77 +86,88 @@
.bd-masthead {
position: relative;
padding: 2rem 0;
// color: #cdbfe3;
padding: ($grid-gutter-width / 2);
text-align: center;
// text-shadow: 0 1px 0 rgba(0,0,0,.1);
// background-color: #6f5499;
// @include gradient-vertical($bd-purple, #6f5499);
// background-image: linear-gradient(135deg, #a8b7be, #cdd1d4, #d4d5d7, #cecfd1);
}
.bd-masthead .bd-booticon {
margin: 0 auto 2rem;
color: $gray;
border-color: $gray;
}
.bd-masthead h1 {
font-weight: 300;
line-height: 1;
// color: #fff;
}
.bd-masthead .lead {
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
font-size: 1.25rem;
// color: #fff;
}
.bd-masthead .version {
margin-top: -1rem;
margin-bottom: 2rem;
// color: #9783b9;
}
.bd-masthead .btn {
width: 100%;
padding: 1rem 2rem;
font-size: 1.25rem;
font-weight: 500;
color: $gray;
border-color: $gray;
.bd-booticon {
margin: 0 auto 2rem;
color: $bd-purple;
border-color: $bd-purple;
}
&:hover {
color: #fff;
background-color: $gray;
h1 {
font-weight: 300;
line-height: 1;
}
}
@media (min-width: 480px) {
.bd-masthead .btn {
width: auto;
.lead {
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
font-size: 1.25rem;
}
}
@media (min-width: 768px) {
.bd-masthead {
padding: 2rem 0 4rem;
// padding: 5rem 0;
.version {
margin-top: -1rem;
margin-bottom: 2rem;
}
.bd-header {
margin-bottom: 4rem;
}
.bd-masthead h1 {
font-size: 4rem;
}
.bd-masthead .lead {
font-size: 1.5rem;
}
}
@media (min-width: 992px) {
.bd-masthead .lead {
width: 80%;
font-size: 2rem;
.btn {
width: 100%;
padding: 1rem 2rem;
font-size: 1.25rem;
font-weight: 500;
color: $gray;
border-color: $gray;
&:hover {
color: #fff;
background-color: $gray;
}
}
.carbonad {
margin-bottom: -2rem !important;
}
@include media-breakpoint-up(sm) {
padding-top: 2rem;
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: 80%;
font-size: 2rem;
}
}
}

9
docs/assets/scss/_layout.scss
View File

@ -9,12 +9,17 @@
margin-right: auto;
margin-left: auto;
@media (min-width: 768px) {
@include media-breakpoint-up(md) {
padding: 2rem;
}
@media (min-width: 992px) {
@include media-breakpoint-up(lg) {
padding: 4rem;
.carbonad {
float: right !important;
margin: .5rem 0 1rem 2rem !important;
}
}
> table {