From 6b1c9ee8d5d88c73714d1fc5f7f5d8f496cd525e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 9 Jun 2015 15:22:57 -0700 Subject: [PATCH] redo most of the css for the masthead, page headers, and ads --- docs/assets/scss/_ads.scss | 60 +++---------- docs/assets/scss/_homepage.scss | 153 ++++++++++++++++++-------------- docs/assets/scss/_layout.scss | 9 +- 3 files changed, 105 insertions(+), 117 deletions(-) diff --git a/docs/assets/scss/_ads.scss b/docs/assets/scss/_ads.scss index 80fd2f12c3..62d7961977 100644 --- a/docs/assets/scss/_ads.scss +++ b/docs/assets/scss/_ads.scss @@ -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; - // } - } } diff --git a/docs/assets/scss/_homepage.scss b/docs/assets/scss/_homepage.scss index a16cb67d73..55c3bdb0f5 100644 --- a/docs/assets/scss/_homepage.scss +++ b/docs/assets/scss/_homepage.scss @@ -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; + } } } diff --git a/docs/assets/scss/_layout.scss b/docs/assets/scss/_layout.scss index 0ec7f7e99b..3733ef7d5e 100644 --- a/docs/assets/scss/_layout.scss +++ b/docs/assets/scss/_layout.scss @@ -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 {