harsh 0.0.3 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +12 -10
- data/lib/harsh.rb +1 -1
- data/stylesheets/_harsh.sass +5 -5
- metadata +4 -4
data/README.md
CHANGED
@@ -4,6 +4,8 @@ Compass extension for randomly generated CSS3 gradients with harsh color stops
|
|
4
4
|
|
5
5
|
<img src="http://i.imgur.com/bFpC1.png" width="300px" height="200px">
|
6
6
|
|
7
|
+
You can find a bunch of examples on my [website](http://www.bookcasey.com/harsh)
|
8
|
+
|
7
9
|
## Installation
|
8
10
|
|
9
11
|
From the command line:
|
@@ -21,10 +23,10 @@ Installing into your project:
|
|
21
23
|
## Arguments
|
22
24
|
|
23
25
|
# Mixin for backgrounds
|
24
|
-
|
26
|
+
@include harsh($color, $background, $transparency, $number-of-gradients, $angle, $nuance, $nuance-strength)
|
25
27
|
|
26
28
|
# Mixin for text (only works in webkit)
|
27
|
-
|
29
|
+
@include harsh-text($color, $transparency, $number-of-gradients, $angle, $nuance, $nuance-strength, $background)
|
28
30
|
|
29
31
|
### color
|
30
32
|
|
@@ -63,27 +65,27 @@ Sets maximum percent colors will be changed by `nuance`. `0` will result in no c
|
|
63
65
|
## [Examples](http://www.bookcasey.com/harsh)
|
64
66
|
|
65
67
|
.random
|
66
|
-
|
68
|
+
@include harsh()
|
67
69
|
|
68
70
|
.background-color
|
69
|
-
|
71
|
+
@include harsh(white, rgb(200,50,50), .95)
|
70
72
|
|
71
73
|
.bright
|
72
|
-
|
74
|
+
@include harsh(random, white, .05)
|
73
75
|
|
74
76
|
.dull
|
75
|
-
|
77
|
+
@include harsh($transparency: .95)
|
76
78
|
|
77
79
|
.specify-colors
|
78
|
-
|
80
|
+
@include harsh(#FF0000 blue rgb(50,200,50))
|
79
81
|
|
80
82
|
.horizontal
|
81
|
-
|
83
|
+
@include harsh($angle: top)
|
82
84
|
|
83
85
|
.angled
|
84
|
-
|
86
|
+
@include harsh($angle: -32deg)
|
85
87
|
|
86
88
|
.nuance
|
87
|
-
|
89
|
+
@include harsh(salmon, $nuance-strength: 50)
|
88
90
|
|
89
91
|
|
data/lib/harsh.rb
CHANGED
@@ -3,7 +3,7 @@ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
|
|
3
3
|
Compass::Frameworks.register('harsh', :path => extension_path)
|
4
4
|
|
5
5
|
module Sass::Script::Functions
|
6
|
-
def
|
6
|
+
def harsh_random(type = Sass::Script::String.new("number"), max = Sass::Script::Number.new(100)) ## https://gist.github.com/1561650 Chris E.
|
7
7
|
if type.value == "color"
|
8
8
|
Sass::Script::Color.new(:red => rand(255), :green => rand(255), :blue => rand(255))
|
9
9
|
else
|
data/stylesheets/_harsh.sass
CHANGED
@@ -23,13 +23,13 @@
|
|
23
23
|
@function gradient-builder($color, $transparency, $angle, $nuance, $nuance-strength)
|
24
24
|
$base-color: base-finder($color, $nuance, $nuance-strength)
|
25
25
|
$transparent-color: fade-out($base-color, $transparency)
|
26
|
-
$colorstop:
|
26
|
+
$colorstop: harsh_random()*1%
|
27
27
|
$gradient: linear-gradient(angle-finder($angle), $transparent-color $colorstop, transparent $colorstop+.000001) //.001 to fix Compass bug/error where second color stop isn't larger than first
|
28
28
|
@return $gradient
|
29
29
|
|
30
30
|
@function base-finder($color, $nuance, $nuance-strength)
|
31
31
|
@if $color == random
|
32
|
-
@return
|
32
|
+
@return harsh_random(color)
|
33
33
|
@else if type-of($color) == color
|
34
34
|
@if $nuance
|
35
35
|
@return nuance($color, $nuance, $nuance-strength)
|
@@ -38,15 +38,15 @@
|
|
38
38
|
|
39
39
|
@function angle-finder($angle) //http://dev.w3.org/csswg/css3-images/#linear-gradients
|
40
40
|
@if $angle == random
|
41
|
-
@return
|
41
|
+
@return harsh_random()*1% harsh_random()*1%
|
42
42
|
@if $angle == random-fixed
|
43
|
-
@return
|
43
|
+
@return harsh_random()*1deg
|
44
44
|
@else
|
45
45
|
@return $angle
|
46
46
|
|
47
47
|
@function nuance($color, $nuance, $nuance-strength)
|
48
48
|
@if $nuance
|
49
|
-
@return saturate(desaturate(lighten(darken($color,
|
49
|
+
@return saturate(desaturate(lighten(darken($color, harsh_random(number, $nuance-strength)*1% ),harsh_random(number, $nuance-strength)*1%),harsh_random(number, $nuance-strength)*1%),harsh_random(number, $nuance-strength)*1%)
|
50
50
|
@else
|
51
51
|
@return $color
|
52
52
|
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: harsh
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0
|
4
|
+
version: 1.0.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
12
|
+
date: 2013-01-13 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: compass
|
@@ -28,7 +28,7 @@ dependencies:
|
|
28
28
|
- !ruby/object:Gem::Version
|
29
29
|
version: 0.10.0.rc3
|
30
30
|
description: Compass extension for randomly generated CSS3 gradients with harsh color
|
31
|
-
stops
|
31
|
+
stops
|
32
32
|
email: casey.m.olson@gmail.com
|
33
33
|
executables: []
|
34
34
|
extensions: []
|
@@ -61,5 +61,5 @@ rubygems_version: 1.8.24
|
|
61
61
|
signing_key:
|
62
62
|
specification_version: 3
|
63
63
|
summary: Compass extension for randomly generated CSS3 gradients with harsh color
|
64
|
-
stops
|
64
|
+
stops
|
65
65
|
test_files: []
|