diff --git a/src/_includes/examples/buttons.html b/src/_includes/examples/buttons.html index b5a8aecee..e99f6a6db 100644 --- a/src/_includes/examples/buttons.html +++ b/src/_includes/examples/buttons.html @@ -25,7 +25,7 @@ Font Awesome
Version {{ site.fontawesome.version }}

- + Synchronizing Content...

@@ -49,7 +49,7 @@ Settings Font Awesome
Version {{ site.fontawesome.version }}
- + Synchronizing Content... {% endhighlight %} diff --git a/src/assets/img/houndstooth.svg b/src/assets/img/houndstooth.svg new file mode 100644 index 000000000..0485c53e1 --- /dev/null +++ b/src/assets/img/houndstooth.svg @@ -0,0 +1,11 @@ + + + + + + + + + + diff --git a/src/assets/less/site-3.0.0.less b/src/assets/less/site-3.0.0.less index af97ff13e..757e6e9df 100644 --- a/src/assets/less/site-3.0.0.less +++ b/src/assets/less/site-3.0.0.less @@ -4,6 +4,7 @@ @import "site/bootstrap/variables"; @import "site/bootstrap/navbar"; +@import "site/bootstrap/buttons"; @import "site/bootstrap/jumbotron"; @import "site/bootstrap/code"; @import "site/bootstrap/wells"; diff --git a/src/assets/less/site/bootstrap/buttons.less b/src/assets/less/site/bootstrap/buttons.less new file mode 100644 index 000000000..b61fea70d --- /dev/null +++ b/src/assets/less/site/bootstrap/buttons.less @@ -0,0 +1,3 @@ +.btn { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); } +.btn-default { text-shadow: 0 1px 0 #fff; } +.btn-primary, .btn-success, .btn-warning, .btn-danger, .btn-info { text-shadow: 0 1px 0 rgba(0,0,0,0.2); } \ No newline at end of file diff --git a/src/assets/less/site/bootstrap/jumbotron.less b/src/assets/less/site/bootstrap/jumbotron.less index 11b2fd106..3a8a22947 100644 --- a/src/assets/less/site/bootstrap/jumbotron.less +++ b/src/assets/less/site/bootstrap/jumbotron.less @@ -1,38 +1,44 @@ .jumbotron { - background: @red; - border-bottom: 1px solid @red-dark; + background-color: @jumbotron-bg; + #gradient > .directional(@jumbotron-bg, mix(@jumbotron-bg, @jumbotron-bg-dark, 50%), -40deg); + border-bottom: 1px solid @jumbotron-bg-dark; margin-bottom: 0; &, h1 { color: #fff; } padding: 30px 0; - #gradient > .directional(@red, mix(@red, @red-dark, 90%), -40deg); - // background-color: @red; + position: relative; - // &:after { - // content:''; - // display:block; - // position:absolute; - // top:0; - // right:0; - // bottom:0; - // left:0; - // background:url(../img/grain-tm400.png); - // opacity:.5; - // } + &:after { + content: ''; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: url(../img/houndstooth.svg); + background-size: 50px 50px; + opacity: .03; + } + .container { + position: relative; + z-index: 2; + } h1 { font-size: 80px; letter-spacing: -2px; line-height: 1; - text-shadow: 2px 2px 2px @red-dark; + text-shadow: 2px 2px 2px @jumbotron-bg-dark; } p { - color: mix(#fff, @red, 75%); + font-family: proxima-nova-sc-osf, "Helvetica Neue", Helvetica, Arial, sans-serif; + color: mix(#fff, @jumbotron-bg, 75%); margin-top: 15px; margin-bottom: 15px; font-size: 30px; line-height: 1.3; font-weight: lighter; - text-shadow: 1px 1px 1px @red-dark; + text-shadow: 1px 1px 1px @jumbotron-bg-dark; } .actions { margin-top: 25px;} // unsure if block below still in use @@ -56,19 +62,20 @@ } .btn-default { color: #fff; - background-color: @red; + background-color: @jumbotron-bg; border-color: #fff; + text-shadow: 0 1px 0 rgba(0,0,0,0.2); &:hover { background-color: #fff; - color: @red; + color: @jumbotron-bg; } } .shameless-self-promotion { font-size: 14px; margin-top: 25px; - color: mix(#fff, @red, 40%); - a { color: mix(#fff, @red, 70%); } - a:hover { color: mix(#fff, @red, 100%); } + color: mix(#fff, @jumbotron-bg, 40%); + a { color: mix(#fff, @jumbotron-bg, 70%); } + a:hover { color: mix(#fff, @jumbotron-bg, 100%); } } } diff --git a/src/assets/less/site/bootstrap/variables.less b/src/assets/less/site/bootstrap/variables.less index 85690a5fe..2ef191aad 100644 --- a/src/assets/less/site/bootstrap/variables.less +++ b/src/assets/less/site/bootstrap/variables.less @@ -4,8 +4,8 @@ // ------------------- // Links -@link-color: lighten(@red, 10%); -@link-hover-color: @red; +@link-color: lighten(@jumbotron-bg, 10%); +@link-hover-color: @jumbotron-bg; // Typography @font-family-sans-serif: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -34,7 +34,14 @@ @navbar-height: 40px; @navbar-inverse-brand-color: #fff; +@jumbotron-bg: @red; +@jumbotron-bg-dark: darken(@jumbotron-bg, 10%); +//@brand-primary: @blue-dark; +//@brand-success: @green; +//@brand-warning: @yellow-dark; +//@brand-danger: @red; +//@brand-info: @blue; // SITE VARIABLES // -------------- diff --git a/src/assets/less/site/footer.less b/src/assets/less/site/footer.less index 0b458467d..45a811bd5 100755 --- a/src/assets/less/site/footer.less +++ b/src/assets/less/site/footer.less @@ -1,7 +1,7 @@ #footer { // #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground); - background-color: @red; - border-top: 1px solid mix(@red, @red-dark, 50%); + background-color: @jumbotron-bg; + border-top: 1px solid mix(@jumbotron-bg, @jumbotron-bg-dark, 50%); a { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.25); @@ -15,7 +15,7 @@ padding-top: 40px; } - color: mix(@red, #fff, 35%); + color: mix(@jumbotron-bg, #fff, 35%); text-shadow: 0 -1px 0 rgba(0,0,0,.25); .project { margin-top: 10px; } } diff --git a/src/assets/less/site/jumbotron-carousel.less b/src/assets/less/site/jumbotron-carousel.less index 5af45d768..0cfe641a0 100644 --- a/src/assets/less/site/jumbotron-carousel.less +++ b/src/assets/less/site/jumbotron-carousel.less @@ -4,7 +4,7 @@ font-size: @size; text-align: center; line-height: @size + 5; - text-shadow: 2px 2px 2px @red-dark; + text-shadow: 2px 2px 2px @jumbotron-bg-dark; .carousel-control { top: @size + 23px; .square(30px); diff --git a/src/assets/less/site/responsive/screen-lg.less b/src/assets/less/site/responsive/screen-lg.less index 09786ad80..f65453403 100644 --- a/src/assets/less/site/responsive/screen-lg.less +++ b/src/assets/less/site/responsive/screen-lg.less @@ -22,7 +22,7 @@ font-size: 90px; } p { - font-size: 35px; + font-size: 28px; margin: 35px 0 20px; } } @@ -31,7 +31,7 @@ padding: 50px 0; h1 { font-size: 100px; } p { - font-size: 40px; + font-size: 32px; margin: 20px 0; } .btn-large {