Skip to content

B
bootstrap
Commit 6b1c9ee8 authored by Mark Otto's avatar Mark Otto
Browse files
Options

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

parent 2d094f9d
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 114 deletions
docs/assets/scss/_ads.scss
View file @ 6b1c9ee8
......@@ -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;
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;
// }
margin-right: auto !important;
margin-left: auto !important;
border-radius: .25rem;
}
}
docs/assets/scss/_homepage.scss
View file @ 6b1c9ee8
......@@ -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;
.btn {
width: 100%;
padding: 1rem 2rem;
font-size: 1.25rem;
font-weight: 500;
color: $gray;
border-color: $gray;
&:hover {
color: #fff;
background-color: $gray;
}
}
.bd-masthead h1 {
font-size: 4rem;
.carbonad {
margin-bottom: -2rem !important;
}
.bd-masthead .lead {
font-size: 1.5rem;
@include media-breakpoint-up(sm) {
padding-top: 2rem;
padding-bottom: 2rem;
.btn {
width: auto;
}
.carbonad {
margin-bottom: 0 !important;
}
}
}
@media (min-width: 992px) {
.bd-masthead .lead {
width: 80%;
font-size: 2rem;
@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;
}
}
}
......
docs/assets/scss/_layout.scss
View file @ 6b1c9ee8
......@@ -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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment