浏览代码

adding texture to jumbotrons

davegandy 11 年之前
父节点
当前提交
336ca1586a
共有 3 个文件被更改,包括 24 次插入23 次删除
  1. 二进制
      src/assets/img/grain-tm400.png
  2. 23 23
      src/assets/less/site/bootstrap/jumbotron.less
  3. 1 0
      src/assets/less/site/jumbotron-carousel.less

二进制
src/assets/img/grain-tm400.png


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

@@ -1,29 +1,29 @@
 .jumbotron {
 .jumbotron {
-  background-color: @jumbotron-bg;
+  background-color: lighten(@jumbotron-bg, 1.5%);
 //  #gradient > .directional(@jumbotron-bg, mix(@jumbotron-bg, @jumbotron-bg-dark, 0%), -40deg);
 //  #gradient > .directional(@jumbotron-bg, mix(@jumbotron-bg, @jumbotron-bg-dark, 0%), -40deg);
   border-top: 1px solid mix(@jumbotron-bg, @jumbotron-text, 90%);
   border-top: 1px solid mix(@jumbotron-bg, @jumbotron-text, 90%);
   border-bottom: 1px solid @jumbotron-border;
   border-bottom: 1px solid @jumbotron-border;
   margin-bottom: 0;
   margin-bottom: 0;
   &, h1 { color: @jumbotron-text; }
   &, h1 { color: @jumbotron-text; }
-  padding: 60px 0 40px;
+  padding: 50px 0 40px;
   position: relative;
   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 {
   h1 {
     font-size: 80px;
     font-size: 80px;
@@ -45,12 +45,12 @@
 }
 }
 
 
 .jumbotron-icon {
 .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;
   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 {
   h1 {
     color: @gray-darker;
     color: @gray-darker;
     font-size: 40px;
     font-size: 40px;

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

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