Skip to content
GitLab
Commit 6b1c9ee8 authored by Mark Otto's avatar Mark Otto
Browse files

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
+102 -114
docs/assets/scss/_ads.scss
+ 11
- 49
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
+ 84
- 63
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
+ 7
- 2
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 {
......
Supports Markdown
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