Add a slight background noise (v0.2.2)

The background noise makes the document look more like it's written on
paper.

The noise images are provided by the noisy-uris project:
https://github.com/markdurrant/noisy-uris

To avoid making another HTTP request, the images are base64 encoded, and
`@extend` is used to avoid duplicating the images.
This commit is contained in:
Benjamin Woodruff 2013-11-04 14:07:40 -05:00
parent 316d53e25b
commit 97219d360c
3 changed files with 21 additions and 6 deletions

3
.gitmodules vendored Normal file
View file

@ -0,0 +1,3 @@
[submodule "noisy-uris"]
path = noisy-uris
url = git://github.com/markdurrant/noisy-uris.git

1
noisy-uris Submodule

@ -0,0 +1 @@
Subproject commit b5f2dd634eccf0dc153577f0a98dcca83fe06eff

View file

@ -1,12 +1,15 @@
// version 0.2.1
// version 0.2.2
@import "normalize"
@import "noisy-uris/sass_vars/base-noise-uris"
@import "noisy-uris/sass_vars/dark-noise-uris"
@import "noisy-uris/sass_vars/light-noise-uris"
@import "//fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700"
@import "//fonts.googleapis.com/css?family=Source+Code+Pro:400,400italic,700,700italic"
// colors
$background: #EEE
$background: #F8F8F8
$foreground: #111
$footnote-color: #666
$indent-color: #BBB
@ -15,10 +18,14 @@ $block-border-color: $rule-color
$block-background: #DDD
$table-rule-color: #222
%background-noise
background-image: url($base-noise-005)
// typography
body
font-family: "Libre Baskerville", Baskerville, Georgia, serif
@extend %background-noise
background-color: $background
color: $foreground
@media (max-width: 400px)
@ -186,7 +193,8 @@ a, a:link, a:visited, a:hover
code
font-family: "Source Code Pro", "Consolas", "Monaco", monospace
font-size: 85%
background: $block-background
@extend %background-noise
background-color: $block-background
border: 1px solid $block-border-color
padding: 0px 0.15em 0px 0.15em
-webkit-border-radius: 3px
@ -238,10 +246,12 @@ tr
font-weight: 700
&.odd
background: #EEEEEE
@extend %background-noise
background-color: #EEEEEE
&.even
background: #CCCCCC
@extend %background-noise
background-color: #CCCCCC
tbody:last-child // last row
border-bottom: 1px solid $table-rule-color
@ -265,7 +275,8 @@ figure
text-align: center
padding: 0px
width: 100%
background: $block-background
@extend %background-noise
background-color: $block-background
border: 1px solid $block-border-color
-webkit-border-radius: 8px
-moz-border-radius: 8px