Browse Source

adding texture to jumbotrons

davegandy 11 years ago
parent
commit
336ca1586a

BIN
src/assets/img/grain-tm400.png


+ 23 - 23
src/assets/less/site/bootstrap/jumbotron.less

@@ -1,29 +1,29 @@
 .jumbotron {
-  background-color: @jumbotron-bg;
+  background-color: lighten(@jumbotron-bg, 1.5%);
 //  #gradient > .directional(@jumbotron-bg, mix(@jumbotron-bg, @jumbotron-bg-dark, 0%), -40deg);
   border-top: 1px solid mix(@jumbotron-bg, @jumbotron-text, 90%);
   border-bottom: 1px solid @jumbotron-border;
   margin-bottom: 0;
   &, h1 { color: @jumbotron-text; }
-  padding: 60px 0 40px;
+  padding: 50px 0 40px;
   position: relative;
 
-//  &:after {
-//    content: '';
-//    display: block;
-//    position: absolute;
-//    top: 0;
-//    right: 0;
-//    bottom: 0;
-//    left: 0;
-//    background: url(../img/houndstooth.svg);
-//    background-size: 50px 50px;
-//    opacity: .5;
-//  }
-//  .container {
-//    position: relative;
-//    z-index: 2;
-//  }
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: url(../img/grain-tm400.png);
+//    background-size: 600px 600px;
+    opacity: .15;
+  }
+  .container {
+    position: relative;
+    z-index: 2;
+  }
 
   h1 {
     font-size: 80px;
@@ -45,12 +45,12 @@
 }
 
 .jumbotron-icon {
-  padding: 20px 0 30px;
-  #gradient > .directional(@gray-lighter, mix(@gray-lighter, @gray-light, 90%), -40deg);
+  padding: 30px 0 25px;
+  background-color: @gray-lighter;
   color: @gray-darker;
-  &, h1 { text-shadow: 1px 1px 1px #fff; }
-  border-bottom: solid 1px mix(@gray-light, @gray-lighter, 50%);
-
+  &, h1 { text-shadow: 0 1px 0 #fff; }
+  border-bottom-color: mix(@gray-light, @gray-lighter, 25%);
+  border-top-color: mix(#fff, @gray-lighter, 50%);
   h1 {
     color: @gray-darker;
     font-size: 40px;

+ 1 - 0
src/assets/less/site/jumbotron-carousel.less

@@ -1,5 +1,6 @@
 #icon-carousel {
   @size: 220px;
+  margin-top: @buffer-md;
   font-size: @size;
   text-align: center;
   line-height: @size + 5;