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

This commit is contained in:
davegandy 2013-10-15 07:58:25 -04:00
parent 2899b8a25f
commit cc3cef85a8
6 changed files with 22 additions and 21 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

View File

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

View File

@ -1,29 +1,11 @@
.jumbotron { .jumbotron {
background-color: lighten(@jumbotron-bg, 1.5%); background-color: @jumbotron-bg;
// #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: 50px 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/grain-tm400.png);
// background-size: 600px 600px;
opacity: .15;
}
.container {
position: relative;
z-index: 2;
}
h1 { h1 {
font-size: 80px; font-size: 80px;

View File

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

View File

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

View File

@ -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;
}
}