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:
parent
316d53e25b
commit
97219d360c
3 changed files with 21 additions and 6 deletions
3
.gitmodules
vendored
Normal file
3
.gitmodules
vendored
Normal file
|
@ -0,0 +1,3 @@
|
|||
[submodule "noisy-uris"]
|
||||
path = noisy-uris
|
||||
url = git://github.com/markdurrant/noisy-uris.git
|
1
noisy-uris
Submodule
1
noisy-uris
Submodule
|
@ -0,0 +1 @@
|
|||
Subproject commit b5f2dd634eccf0dc153577f0a98dcca83fe06eff
|
23
styling.sass
23
styling.sass
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue