Browse Source

adding film grain noise to navbar, jumbotron, and footer. png optimized for file size

davegandy 11 năm trước cách đây
mục cha
commit
cc3cef85a8

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


+ 1 - 0
src/assets/less/site-3.0.0.less

@@ -19,6 +19,7 @@
 @import "site/footer";
 @import "site/lazy";
 @import "site/carbonad";
+@import "site/textured-bg";
 
 @import "site/responsive/screen-lg";
 @import "site/responsive/screen-md";

+ 1 - 19
src/assets/less/site/bootstrap/jumbotron.less

@@ -1,29 +1,11 @@
 .jumbotron {
-  background-color: lighten(@jumbotron-bg, 1.5%);
+  background-color: @jumbotron-bg;
 //  #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: 50px 0 40px;
-  position: relative;
-
-  &: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;

+ 1 - 1
src/assets/less/site/bootstrap/variables.less

@@ -57,7 +57,7 @@
 
 
 
-@jumbotron-bg:          desaturate(#1d9d74, 0%);
+@jumbotron-bg:          lighten(#1d9d74, 1.5%);
 @jumbotron-bg-dark:     darken(@jumbotron-bg, 10%);
 
 @jumbotron-border:      mix(@jumbotron-bg, @jumbotron-bg-dark, 75%);

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

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

+ 18 - 0
src/assets/less/site/textured-bg.less

@@ -0,0 +1,18 @@
+.jumbotron, .navbar, #footer {
+  position: relative;
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: url(../img/grain-tm400.png);
+    opacity: .15;
+  }
+  .container {
+    position: relative;
+    z-index: 2;
+  }
+}