seasons 0.9.3.beta12 → 0.9.3.beta13

Sign up to get free protection for your applications and to get access to all the features.
data/seasons.gemspec CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |s|
4
4
  s.name = %q{seasons}
5
- s.version = "0.9.3.beta12"
5
+ s.version = "0.9.3.beta13"
6
6
 
7
7
  s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
8
8
  s.authors = ["Scott Kellum"]
@@ -16,12 +16,8 @@ Gem::Specification.new do |s|
16
16
  "stylesheets/seasons/_core.sass",
17
17
  "stylesheets/seasons/_tools.sass",
18
18
  "stylesheets/seasons/tools/_basic-functions.sass",
19
- "stylesheets/seasons/tools/_color-schemer.sass",
20
19
  "stylesheets/seasons/tools/_css3.sass",
21
- "stylesheets/seasons/tools/_flexbox.sass",
22
20
  "stylesheets/seasons/tools/_grid-tools.sass",
23
- "stylesheets/seasons/tools/_math.scss",
24
- "stylesheets/seasons/tools/_modular-scale.sass",
25
21
  "stylesheets/seasons/tools/_relative-pixels.sass",
26
22
  "stylesheets/seasons/tools/_reset.sass",
27
23
  "stylesheets/seasons/plugin/_ad.sass",
@@ -47,7 +43,7 @@ Gem::Specification.new do |s|
47
43
  s.homepage = %q{http://www.treesaver.net/}
48
44
  s.require_paths = ["lib"]
49
45
  s.rubyforge_project = %q{seasons}
50
- s.rubygems_version = %q{0.9.3.beta9}
46
+ s.rubygems_version = %q{1.7.2}
51
47
  s.summary = %q{The Compass variant of the Seasons framework to style Treesaver.}
52
48
  s.add_dependency(%q<compass>, ["~> 0.11"])
53
49
  end
@@ -141,14 +141,14 @@ $scroll-support: true !default
141
141
  height: 100%
142
142
  padding-bottom: 40px
143
143
  // FORCE SCROLLBAR FOR SAFARI IN LION -- http://simurai.com/post/8083942390/force-lion-scrollbar
144
- ::-webkit-scrollbar
144
+ ::-webkit-scrollbar, ::-moz-scrollbar, ::scrollbar
145
145
  -webkit-appearance: none
146
146
  width: 6px
147
- ::-webkit-scrollbar-thumb
147
+ ::-webkit-scrollbar-thumb, ::-moz-scrollbar-thumb, ::scrollbar-thumb
148
148
  border-radius: 3px
149
149
  background-color: rgba(0,0,0,.5)
150
150
  // Make The Scrollbars Smaller On Touch Devices
151
- .touch ::-webkit-scrollbar
151
+ .touch ::-webkit-scrollbar, .touch ::-moz-scrollbar, .touch ::-scrollbar
152
152
  width: 3px
153
153
 
154
154
  // TYPOGRAPHY RESET
@@ -1,9 +1,5 @@
1
1
  @import tools/basic-functions
2
- @import tools/color-schemer
3
2
  @import tools/css3
4
- @import tools/flexbox
5
3
  @import tools/grid-tools
6
- @import tools/math
7
- @import tools/modular-scale
8
4
  @import tools/relative-pixels
9
5
  @import tools/reset
@@ -15,71 +15,74 @@ $cover_width: 250px
15
15
  border: none
16
16
 
17
17
  // All the mobile grid styles here.
18
+
19
+ // SHRINK IMAGES + PAGES
20
+ =ratio($width, $height, $cols: $columns)
21
+ // Force resize images
22
+ .mobile.grid .container [ratio="#{$width}x#{$height}"] img
23
+ width: 280px
24
+ height: 280px * ( $height / $width )
25
+
26
+ // Detect smallscreen devices
27
+ //@media screen and (device-width: 480px) and (orientation: landscape), screen and (device-width: 320px) and (orientation: portrait)
18
28
  .smallscreen.mobile
19
29
  .viewer
20
- padding: 0
21
- margin: 0
22
- left: 0
23
- right: 0
24
- top: 0
25
- bottom: 0
30
+ padding: 0 !important
31
+ margin: 0 !important
32
+ left: 0 !important
33
+ right: 0 !important
34
+ top: 0 !important
35
+ bottom: 0 !important
26
36
  background: $page
27
- .grid:not(.fixed)
37
+ .grid:not(.fixed):not(.sizetocontainer):not(.mobile):not(.cover):not(.ad)
28
38
  +remove
29
39
  .mobile.grid
30
40
  opacity: 1 !important
31
41
  margin: 0
32
42
  width: 280px
33
43
  min-width: 280px
34
- padding: 20px
44
+ padding: 18px
35
45
  .column, .container
36
46
  width: 280px
37
47
  min-width: 280px
38
-
39
-
40
- // SHRINK IMAGES + PAGES
41
- =ratio($width, $height, $cols: $columns)
42
- // Force resize images
43
- .mobile.grid .container [ratio="#{$width}x#{$height}"] img
44
- width: 280px
45
- height: 280px * ( $height / $width )
46
-
47
- // Pull in the ratios defined in the skin
48
- +ratios
49
-
50
- // MOBILE COVERS
51
- // If you grid is named "cover" it will be resized to be optimized for mobile devices.
52
- .smallscreen.mobile
53
- // Large mobile cover
54
- .cover.fixed.w3col.grid, .cover.fixed.w3col.grid *
55
- margin: 0
56
- padding: 0
57
- width: $cover_width
58
- height: $cover_width * ( 4 / 3 )
59
- min-width: $cover_width
60
- min-height: $cover_width * ( 4 / 3 )
61
- .img
62
- top: 0
63
- // Small mobile cover
64
- .cover.fixed.w2col.grid, .cover.fixed.w2col.grid *
65
- margin: 0
66
- padding: 0
67
- width: $cover_width/2
68
- height: $cover_width/2 * ( 4 / 3 )
69
- min-width: $cover_width/2
70
- min-height: $cover_width/2 * ( 4 / 3 )
71
- .img
72
- top: 0
73
- .cover.grid
74
- margin: 0 ( ( $cover_width - 320px ) / 8 )
75
- .fixed.grid, .sizetocontainer.grid
76
- max-width: none
77
- max-height: none
78
- min-width: none
79
- min-height: none
80
- // FALLBACK IMAGES
81
- .mobile.grid .keeptogether.fallback img
82
- width: 40px
83
- height: 40px
48
+
49
+
50
+ // Pull in the ratios defined in the skin
51
+ +ratios
52
+
53
+ // MOBILE COVERS
54
+ // If you grid is named "cover" it will be resized to be optimized for mobile devices.
55
+ html.mobile.smallscreen
56
+ // Large mobile cover
57
+ .cover.fixed.w3col.grid, .cover.fixed.w3col.grid *
58
+ margin: 0
59
+ padding: 0
60
+ width: $cover_width
61
+ height: $cover_width * ( 4 / 3 )
62
+ min-width: $cover_width
63
+ min-height: $cover_width * ( 4 / 3 )
64
+ .img
65
+ top: 0
66
+ // Small mobile cover
67
+ .cover.fixed.w2col.grid, .cover.fixed.w2col.grid *
68
+ margin: 0
69
+ padding: 0
70
+ width: $cover_width/2
71
+ height: $cover_width/2 * ( 4 / 3 )
72
+ min-width: $cover_width/2
73
+ min-height: $cover_width/2 * ( 4 / 3 )
74
+ .img
75
+ top: 0
76
+ .cover.grid
77
+ margin: 0 ( ( $cover_width - 320px ) / 8 )
78
+ .fixed.grid, .sizetocontainer.grid
79
+ max-width: none
80
+ max-height: none
81
+ min-width: none
82
+ min-height: none
83
+ // FALLBACK IMAGES
84
+ .mobile.grid .keeptogether.fallback img
85
+ width: 40px
86
+ height: 40px
84
87
 
85
88
  $seasons-mobile-loaded: true
@@ -43,20 +43,44 @@ $prefixes: -webkit- -moz- -ms- -o- !default
43
43
  =appearance($value)
44
44
  +prefix(appearance, $value)
45
45
 
46
+ =appearance($value)
47
+ +prefix(appearance, $value)
48
+
49
+ =aspect-ratio($value)
50
+ +prefix(aspect-ratio, $value)
51
+
46
52
  =backface-visibility($value)
47
53
  +prefix(backface-visibility, $value)
48
54
 
49
55
  =background-clip($value)
50
- +prefix(background-clip, $value)
56
+ +prefix(background-clip, $value, -webkit-)
51
57
 
52
58
  =background-composite($value)
53
59
  +prefix(background-composite, $value)
54
60
 
61
+ =background-inline-policy($value)
62
+ +prefix(background-inline-policy, $value)
63
+
55
64
  =background-origin($value)
56
- +prefix(background-origin, $value)
65
+ +prefix(background-origin, $value, -webkit-)
66
+
67
+ =background-position-x($value)
68
+ +prefix(background-position-x, $value, -ms-)
69
+
70
+ =background-position-y($value)
71
+ +prefix(background-position-y, $value, -ms-)
57
72
 
58
73
  =background-size($value)
59
- +prefix(background-size, $value)
74
+ +prefix(background-size, $value, -webkit-)
75
+
76
+ =behavior($value)
77
+ +prefix(behavior, $value)
78
+
79
+ =binding($value)
80
+ +prefix(binding, $value)
81
+
82
+ =block-progression($value)
83
+ +prefix(block-progression, $value)
60
84
 
61
85
  =border-after($value)
62
86
  +prefix(border-after, $value)
@@ -491,7 +515,7 @@ $prefixes: -webkit- -moz- -ms- -o- !default
491
515
  // OTHER CSS3 TOOLS
492
516
  =corner-radius($top, $left, $borderradius)
493
517
  -moz-border-radius-#{$top}#{$left}: $borderradius
494
- -webkit-border-#{$top}-#{$left}-radius: $borderradius
518
+ border-#{$top}-#{$left}-radius: $borderradius
495
519
  -o-border-#{$top}-#{$left}-radius: $borderradius
496
520
  border-#{$top}-#{$left}-radius: $borderradius
497
521
 
@@ -8,11 +8,12 @@ $reset: true !default
8
8
  // HTML5 Doctor...................http://html5doctor.com
9
9
  // and the HTML5 Boilerplate......http://html5boilerplate.com
10
10
 
11
- html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video
11
+ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video, button
12
12
  margin: 0
13
13
  padding: 0
14
14
  border: 0
15
15
  outline: 0
16
+ font-size: 1em
16
17
  vertical-align: baseline
17
18
  background: transparent
18
19
  cursor: default
@@ -4,41 +4,25 @@
4
4
  // This must be a fixed unit of measurement, usually correlating to your text size.
5
5
  $base-size: 16px
6
6
 
7
- // RATIO
8
- // Choose a ratio you wish to use with the modular scale, not nessisary if you don't plan on using modular scales.
9
- $ratio: $fourth
10
-
11
7
  // FONT-SIZE
12
8
  $size: 1em
13
9
 
14
10
  // LINE HEIGHT
15
11
  // Basing the modular scale off of ems for this. ms(n) refers to the position on a built-in modular scale where "n" is the position. However you can use any value you like.
16
- $line-height: ms(1, 1em)
12
+ $line-height: 1.5em
17
13
 
18
14
  // GRID MEASUREMENTS
19
15
  // Grid module measurements. See Mark Boulton’s write up on grids http://www.markboulton.co.uk/journal/comments/rethinking-css-grids
20
- $module-w: ms(5, 1em) // module width
21
- $module-h: ms(4, 1em) // module height
22
- $gutter: ms(1, 1em) // gutters
16
+ $module-w: 4.5em // module width
17
+ $module-h: $module-w // module height
18
+ $gutter: 1.5em // gutters
23
19
  // grid margins:
24
- $margin: ms(1, 1em) // side margins
25
- $top: ms(2, 1em) // default top margin (for text and containers)
26
- $bottom: ms(3, 1em) // default bottom margin (for text and containers)
20
+ $margin: $gutter // side margins
21
+ $top: 2em // default top margin (for text and containers)
22
+ $bottom: 3em // default bottom margin (for text and containers)
27
23
  // number of modules across to calculate:
28
24
  $columns: 12 // # of columns you want to calculate for
29
25
 
30
- // COLORS
31
- // calculated by a built in color schemer, write your own color schemes as you wish.
32
- $base-color: #237ADE // base or primary color
33
- $color-scheme: analogic // complement, triad, tetrad, analogic or accented-analogic
34
- $color-angle: 30 // color offset ammount.
35
-
36
- // Output of color scemer, set to your own values if you want.
37
- $primary: color-schemer(primary)
38
- $secondary: color-schemer(secondary)
39
- $tertiary: color-schemer(tertiary)
40
- $quadrary: color-schemer(quadrary)
41
-
42
26
  $text: #333
43
27
  $page: #fff
44
28
  $body: #666
metadata CHANGED
@@ -6,8 +6,8 @@ version: !ruby/object:Gem::Version
6
6
  - 0
7
7
  - 9
8
8
  - 3
9
- - beta12
10
- version: 0.9.3.beta12
9
+ - beta13
10
+ version: 0.9.3.beta13
11
11
  platform: ruby
12
12
  authors:
13
13
  - Scott Kellum
@@ -46,12 +46,8 @@ files:
46
46
  - stylesheets/seasons/_core.sass
47
47
  - stylesheets/seasons/_tools.sass
48
48
  - stylesheets/seasons/tools/_basic-functions.sass
49
- - stylesheets/seasons/tools/_color-schemer.sass
50
49
  - stylesheets/seasons/tools/_css3.sass
51
- - stylesheets/seasons/tools/_flexbox.sass
52
50
  - stylesheets/seasons/tools/_grid-tools.sass
53
- - stylesheets/seasons/tools/_math.scss
54
- - stylesheets/seasons/tools/_modular-scale.sass
55
51
  - stylesheets/seasons/tools/_relative-pixels.sass
56
52
  - stylesheets/seasons/tools/_reset.sass
57
53
  - stylesheets/seasons/plugin/_ad.sass
@@ -1,180 +0,0 @@
1
- // Define color schemes quickly
2
-
3
- // Color schemes to choose from
4
- // mono
5
- // complement
6
- // triad
7
- // tetrad
8
- // analogic
9
- // accented-analogic
10
-
11
- $color-location: primary !default
12
- $base-color: #f00 !default
13
- $color-scheme: mono !default
14
- $hue-offset: 20 !default
15
- $brightness-offset: 10% !default
16
- $color-theory: rgb !default
17
- $equalize: false !default
18
-
19
- // Normalizer credit to Mason Wendell: https://github.com/canarymason/The-Coding-Designers-Survival-Kit/blob/master/sass/partials/lib/variables/_color_schemes.sass
20
- @function equalize($color)
21
- @return hsl(hue($color), 100%, 50%)
22
-
23
- // Complement based on Claude Boutet's color wheel
24
- @function boutet-complement($color)
25
- $hue: round(hue($color)/ 10) // find and round hue
26
- // Manually adjusted values until these can be mathmatically explained.
27
- @if $hue == 0
28
- @return adjust-hue(invert($color), -60) // Start with red
29
- @if $hue == 1
30
- @return adjust-hue(invert($color), -50)
31
- @if $hue == 2
32
- @return adjust-hue(invert($color), -40)
33
- @if $hue == 3
34
- @return adjust-hue(invert($color), -25)
35
- @if $hue == 4
36
- @return adjust-hue(invert($color), 0)
37
- @if $hue == 5
38
- @return adjust-hue(invert($color), 25)
39
- @if $hue == 6
40
- @return adjust-hue(invert($color), 38)
41
- @if $hue == 7
42
- @return adjust-hue(invert($color), 44)
43
- @if $hue == 8
44
- @return adjust-hue(invert($color), 52)
45
- @if $hue == 9
46
- @return adjust-hue(invert($color), 58)
47
- @if $hue == 10
48
- @return adjust-hue(invert($color), 59)
49
- @if $hue == 11
50
- @return adjust-hue(invert($color), 60)
51
- @if $hue == 12
52
- @return adjust-hue(invert($color), 60) // Green is halfway through the Boutet scale.
53
- @if $hue == 13
54
- @return adjust-hue(invert($color), 55)
55
- @if $hue == 14
56
- @return adjust-hue(invert($color), 50)
57
- @if $hue == 15
58
- @return adjust-hue(invert($color), 45)
59
- @if $hue == 16
60
- @return adjust-hue(invert($color), 40)
61
- @if $hue == 17
62
- @return adjust-hue(invert($color), 35)
63
- @if $hue == 18
64
- @return adjust-hue(invert($color), 30)
65
- @if $hue == 19
66
- @return adjust-hue(invert($color), 25)
67
- @if $hue == 20
68
- @return adjust-hue(invert($color), 20)
69
- @if $hue == 21
70
- @return adjust-hue(invert($color), 15)
71
- @if $hue == 22
72
- @return adjust-hue(invert($color), -5)
73
- @if $hue == 23
74
- @return adjust-hue(invert($color), -8)
75
- @if $hue == 24
76
- @return adjust-hue(invert($color), -17)
77
- @if $hue == 25
78
- @return adjust-hue(invert($color), -25)
79
- @if $hue == 26
80
- @return adjust-hue(invert($color), -30)
81
- @if $hue == 27
82
- @return adjust-hue(invert($color), -35)
83
- @if $hue == 28
84
- @return adjust-hue(invert($color), -40)
85
- @if $hue == 29
86
- @return adjust-hue(invert($color), -43)
87
- @if $hue == 30
88
- @return adjust-hue(invert($color), -46)
89
- @if $hue == 31
90
- @return adjust-hue(invert($color), -49)
91
- @if $hue == 32
92
- @return adjust-hue(invert($color), -52)
93
- @if $hue == 33
94
- @return adjust-hue(invert($color), -54)
95
- @if $hue == 34
96
- @return adjust-hue(invert($color), -57)
97
- @if $hue == 35
98
- @return adjust-hue(invert($color), -60)
99
-
100
- // Add percentage of white to a color
101
- @function tint($color, $percent)
102
- @return mix(white, $color, $percent)
103
-
104
- // Add percentage of black to a color
105
- @function shade($color, $percent)
106
- @return mix(black, $color, $percent)
107
-
108
- @function color-schemer($color-location, $base-color, $color-scheme, $hue-offset)
109
- // Primary, just return the base-color.
110
- @if $equalize
111
- $base-color: equalize($base-color)
112
- @if $color-location == primary
113
- @return $base-color
114
- // Secondary colors
115
- @if $color-location == secondary
116
- @if $color-scheme == mono
117
- @return lighten($base-color, $brightness-offset)
118
- @if $color-scheme == complement
119
- @if $color-theory == boutet
120
- @return boutet-complement($base-color)
121
- @return complement($base-color)
122
- @if $color-scheme == triad
123
- @if $color-theory == boutet
124
- @return adjust-hue(boutet-complement($base-color), $hue-offset)
125
- @return adjust-hue(complement($base-color), $hue-offset)
126
- @if $color-scheme == tetrad
127
- @return adjust-hue($base-color, $hue-offset)
128
- @if $color-scheme == analogic
129
- @return adjust-hue($base-color, $hue-offset)
130
- @if $color-scheme == accented-analogic
131
- @return adjust-hue($base-color, $hue-offset)
132
- @warn "Oops! You didn’t properly define $color-scheme (complement, triad...)"
133
- // Tertiary colors
134
- @if $color-location == tertiary
135
- @if $color-scheme == mono
136
- @return lighten($base-color, $brightness-offset * 2)
137
- @if $color-scheme == complement
138
- @return lighten($base-color, $brightness-offset)
139
- @if $color-scheme == triad
140
- @if $color-theory == boutet
141
- @return adjust-hue(boutet-complement($base-color), -$hue-offset)
142
- @return adjust-hue(complement($base-color), -$hue-offset)
143
- @if $color-scheme == tetrad
144
- @if $color-theory == boutet
145
- @return boutet-complement($base-color)
146
- @return complement($base-color)
147
- @if $color-scheme == analogic
148
- @return adjust-hue($base-color, -$hue-offset)
149
- @if $color-scheme == accented-analogic
150
- @return adjust-hue($base-color, -$hue-offset)
151
- @warn "Oops! You didn’t properly define $color-scheme (complement, triad...)"
152
- // Quadrary colors
153
- @if $color-location == quadrary
154
- @if $color-scheme == mono
155
- @return darken($base-color, $brightness-offset)
156
- @if $color-scheme == complement
157
- @return darken($base-color, $brightness-offset)
158
- @if $color-scheme == triad
159
- @return darken($base-color, $brightness-offset)
160
- @if $color-scheme == tetrad
161
- @if $color-theory == boutet
162
- @return adjust-hue(boutet-complement($base-color), $hue-offset)
163
- @return adjust-hue(complement($base-color), $hue-offset)
164
- @if $color-scheme == analogic
165
- @return darken($base-color, $brightness-offset)
166
- @if $color-scheme == accented-analogic
167
- @if $color-theory == boutet
168
- @return boutet-complement($base-color)
169
- @return complement($base-color)
170
- @warn "Oops! You didn’t properly define $color-scheme (complement, triad...)"
171
- @warn "Oops! You didn’t properly define $color-location (primary, secondary...)"
172
-
173
- // Write your basic color scheme
174
- $primary: color-schemer(primary) !default
175
- $secondary: color-schemer(secondary) !default
176
- $tertiary: color-schemer(tertiary) !default
177
- $quadrary: color-schemer(quadrary) !default
178
-
179
- // Tell other files that this is loaded.
180
- $color-schemer-loaded: true
@@ -1,65 +0,0 @@
1
- // Original gist https://gist.github.com/280797
2
-
3
- $prefixes: -webkit- -moz- -ms- -o- !default
4
-
5
- =prefix($property, $value, $prefixes)
6
- @each $prefix in $prefixes
7
- #{$prefix}#{$property}: $value
8
- #{$property}: $value
9
-
10
- =prefix-value($property, $value, $prefixes)
11
- @each $prefix in $prefixes
12
- #{$property}: #{$prefix}$value
13
- #{$property}: $value
14
-
15
- =display-box($property: display-box, $value: box)
16
- +prefix-value($property, $value)
17
-
18
- // Value: horizontal | vertical | inline-axis | block-axis | inherit
19
- // Initial: inline-axis
20
- // Default: horizontal
21
- =box-orient($property: box-orient, $value: horizontal)
22
- +prefix($property, $value)
23
-
24
- // Value: normal | reverse | inherit
25
- // Initial: normal
26
- // Default: reverse
27
- =box-direction($property: box-direction, $value: reverse)
28
- +prefix($property, $value)
29
-
30
- // Value: <integer>
31
- // Initial: 1
32
- // Default: 2
33
- =box-ordinal-group($property: box-ordinal-group, $value: 2)
34
- +prefix($property, $value)
35
-
36
- // Value: start | end | center | baseline | stretch
37
- // Initial: stretch
38
- // Default: start
39
- =box-align($property: box-align, $value: start)
40
- +prefix($property, $value)
41
-
42
- // Value: <number>
43
- // Initial: 0.0
44
- // Default: 1
45
- =box-flex($property: box-flex, $value: 1)
46
- +prefix($property, $value)
47
-
48
- // Value: <integer>
49
- // Initial: 1
50
- // Default: 2
51
- =box-flex-group($property: box-flex-group, $value: 2)
52
- +prefix($property, $value)
53
-
54
- // Value: start | end | center | justify
55
- // Initial: start
56
- // Default: center
57
- =box-pack($property: box-pack, $value: center)
58
- +prefix($property, $value)
59
-
60
- // I don't see this working in any browser currently...
61
- // Value: single | multiple
62
- // Initial: single
63
- // Default: multiple
64
- =box-lines($property: box-lines, $value: multiple)
65
- +prefix($property, $value)
@@ -1,275 +0,0 @@
1
- // SASSY MATH
2
-
3
- @charset "UTF-8";
4
-
5
- //////////////////////////////
6
- // Variables
7
- //////////////////////////////
8
- $pi: 3.1415926535897932384626433832795028841971693993751;
9
- $π: $pi;
10
- $e: 2.71828182845904523536028747135266249775724709369995;
11
-
12
- $iter: 50;
13
-
14
- //////////////////////////////
15
- // Random Number
16
- // Working from http://xkcd.com/221/
17
- // Chosen by fair dice roll.
18
- // Guarenteed to be random.
19
- //////////////////////////////
20
- @function rand() {
21
- @return 4;
22
- }
23
-
24
- //////////////////////////////
25
- // Percent
26
- //////////////////////////////
27
- @function percent($number) {
28
- @return $number * 0.01;
29
- }
30
-
31
- //////////////////////////////
32
- // Golden Ratio
33
- //////////////////////////////
34
- @function golden() {
35
- @return 1/2 + sqrt(5) / 2;
36
- }
37
- @function ϕ() {
38
- @return golden();
39
- }
40
-
41
- $golden: golden();
42
- $gold: $golden;
43
- $ϕ: $golden;
44
-
45
- //////////////////////////////
46
- // Exponent
47
- //////////////////////////////
48
- @function exponent($base, $exponent) {
49
- // reset value
50
- $value: $base;
51
- // positive intergers get multiplied
52
- @if $exponent > 1 {
53
- @for $i from 2 through $exponent {
54
- $value: $value * $base; } }
55
- // negitive intergers get divided. A number divided by itself is 1
56
- @if $exponent < 1 {
57
- @for $i from 0 through -$exponent {
58
- $value: $value / $base; } }
59
- // return the last value written
60
- @return $value;
61
- }
62
-
63
- @function pow($base, $exponent) {
64
- @return exponent($base, $exponent);
65
- }
66
-
67
- //////////////////////////////
68
- // Factorial
69
- //////////////////////////////
70
- @function factorial($number) {
71
- // reset value
72
- $value: 1;
73
- // positive intergers get multiplied
74
- @if $number > 0 {
75
- @for $i from 1 through $number {
76
- $value: $value * $i;
77
- }
78
- }
79
- @return $value;
80
- }
81
-
82
- @function fact($number) {
83
- @return factorial($number);
84
- }
85
-
86
-
87
- //////////////////////////////
88
- // Polynomial Approximation
89
- //////////////////////////////
90
- // Maclaurin series can be used to estimate Sine and Consine
91
- @function maclaurin($start, $key, $number) {
92
- $value: $start;
93
- $add: 0;
94
-
95
- @for $i from 1 through $iter {
96
- @if $add == 0 {
97
- $value: $value - ( exponent($number, $key) / factorial($key) );
98
- $add: 1;
99
- }
100
- @else {
101
- $value: $value + ( exponent($number, $key) / factorial($key) );
102
- $add: 0;
103
- }
104
-
105
- $key: $key + 2;
106
- }
107
-
108
- @return $value;
109
- }
110
- // Taylor series can be used to estiamte ln
111
- @function taylor($number) {
112
- @return taylor;
113
- }
114
-
115
- //////////////////////////////
116
- // Basic Trig Functions
117
- //////////////////////////////
118
- @function sin($number, $unit: 'deg') {
119
- @if $unit == 'deg' {
120
- $number: deg-to-rad($number);
121
- }
122
- @return maclaurin($number, 3, $number);
123
- }
124
-
125
- @function cos($number, $unit: 'deg') {
126
- @if $unit == 'deg' {
127
- $number: deg-to-rad($number);
128
- }
129
- @return maclaurin(1, 2, $number);
130
- }
131
-
132
- // Trig Identity: Tangent = Sine divided by Cosine.
133
- @function tan($number, $unit: 'deg') {
134
- @if $unit == 'deg' {
135
- $number: deg-to-rad($number);
136
- }
137
- @return sin($number) / cos($number);
138
- }
139
-
140
- //////////////////////////////
141
- // Reciprocal Trig Functions
142
- //////////////////////////////
143
- @function csc($number, $unit: 'deg') {
144
- @if $unit == 'deg' {
145
- $number: deg-to-rad($number);
146
- }
147
- @return 1 / sin($number);
148
- }
149
-
150
- @function scs($number, $unit: 'deg') {
151
- @if $unit == 'deg' {
152
- $number: deg-to-rad($number);
153
- }
154
- @return 1 / cos($number);
155
- }
156
-
157
- @function cot($number, $unit: 'deg') {
158
- @if $unit == 'deg' {
159
- $number: deg-to-rad($number);
160
- }
161
- @return 1 / tan($number);
162
- }
163
-
164
- //////////////////////////////
165
- // Hyperbolic Functions
166
- //////////////////////////////
167
- @function sinh($number) {
168
- $top: exponent($e, (2 * $number)) - 1;
169
- $bottom: 2 * exponent($e, $number);
170
- @return $top / $bottom;
171
- }
172
-
173
- @function cosh($number) {
174
- $top: exponent($e, (2 * $number)) + 1;
175
- $bottom: 2 * exponent($e, $number);
176
- @return $top / $bottom;
177
- }
178
-
179
- @function tanh($number) {
180
- $top: exponent($e, (2 * $number)) - 1;
181
- $bottom: exponent($e, (2 * $number)) + 1;
182
- @return $top / $bottom;
183
- }
184
-
185
- //////////////////////////////
186
- // Reciprocal Hyperbolic Functions
187
- //////////////////////////////
188
- @function csch($number) {
189
- @return 1 / sinh($number);
190
- }
191
-
192
- @function sech($number) {
193
- @return 1 / cosh($number);
194
- }
195
-
196
- @function coth($number) {
197
- @return 1/ tanh($number);
198
- }
199
-
200
-
201
- @function log($number) {
202
- @return $number;
203
- }
204
-
205
- @function ln($number) {
206
- @if $number > 0 and $number < 1 {
207
- $value: 0;
208
- @for $i from 1 through $iter {
209
- $value: $value + ( pow(-1, $i) * pow(-1 * (1 - $number), $i)) / $i;
210
- }
211
- $value: -1 * $value;
212
-
213
- @return $value;
214
- }
215
- @else if $number == 1 {
216
- @return 0;
217
- }
218
- @else {
219
- @return ERROR;
220
- @warn ln input must be greater than zero and less than or equal to 1;
221
- }
222
- }
223
-
224
-
225
- //////////////////////////////
226
- // Degree/Radian Conversion
227
- //////////////////////////////
228
- @function deg-to-rad($number) {
229
- @return $number * $pi / 180deg;
230
- }
231
-
232
- @function rad-to-deg($number) {
233
- @return $number * 180deg / $pi;
234
- }
235
-
236
- //////////////////////////////
237
- // Root Functions
238
- //////////////////////////////
239
- // Basic General-Purpose Root Function
240
- @function n-root($number, $n) {
241
- @if $number < 1 {
242
- @return ERROR;
243
- @warn ROOT ERROR;
244
- }
245
- // If a whole number, generate it quickly
246
- @for $i from 1 through $number {
247
- @if exponent($i, $n) == $number {
248
- @return $i;
249
- }
250
- }
251
- // Else, run through other options
252
- @for $i from 1 through $number * 1000 / 2 {
253
- @if round(exponent($i / 1000, $n) * 100) == round($number * 100) {
254
- @return $i / 1000;
255
- }
256
- }
257
- }
258
-
259
- @function root($number, $n) {
260
- @return n-root($number, $n);
261
- }
262
-
263
- // Square Roots
264
- @function √($number) {
265
- @return sqrt($number);
266
- }
267
-
268
- @function sqrt($number) {
269
- $guess: rand();
270
- $root: $guess;
271
- @for $i from 1 through $iter {
272
- $root: $root - (pow($root, 2) - $number) / (2 * $root);
273
- }
274
- @return $root;
275
- }
@@ -1,313 +0,0 @@
1
- // SASSY MODULAR-SCALE
2
- // https://github.com/scottkellum/modular-scale
3
-
4
- // Ratios
5
- $golden: 1.618
6
- $gold: $golden
7
- $octave: (2 / 1)
8
- $major-seventh: (15 / 8)
9
- $minor-seventh: (16 / 9)
10
- $major-sixth: (5 / 3)
11
- $minor-sixth: (8 / 5)
12
- $fifth: (3 / 2)
13
- $fourth: (4 / 3)
14
- $major-third: (5 / 4)
15
- $minor-third: (6 / 5)
16
- $major-second: (9 / 8)
17
- $minor-second: (16 / 15)
18
-
19
- // Defaults
20
- $ratio: $golden !default
21
- $base-size: 12px !default
22
- $property: font-size !default
23
- $class-slug: ms !default
24
-
25
- // Modular Scale function
26
- @function modular-scale($multiple, $base-size, $ratio)
27
- // return the $base-size if $multiple is zero
28
- @if $multiple == 0
29
- @if type-of($base-size) == 'list'
30
- $base-size: sort-list($base-size)
31
- @return nth($base-size, 1)
32
- // return just the simple $base-size value if it's not a list
33
- @return $base-size
34
-
35
- // if multiple base-sizes are passed in as a list
36
- // and multiple ratios are passed in as a list
37
- // calculate values in using each base-size / ratio combination
38
- @if type-of($base-size) == 'list' and type-of($ratio) == 'list'
39
- @if unit(ms-multibase-multiratio($multiple, $base-size, $ratio)) == 'px'
40
- @return round(ms-multibase-multiratio($multiple, $base-size, $ratio))
41
- @return ms-multibase-multiratio($multiple, $base-size, $ratio)
42
-
43
- // if multiple base-sizes are passed in as a list
44
- // calculate values in using each base-size
45
- @if type-of($base-size) == 'list' and type-of($ratio) == 'number'
46
- @if unit(ms-multibase($multiple, $base-size, $ratio)) == 'px'
47
- @return round(ms-multibase($multiple, $base-size, $ratio))
48
- @return ms-multibase($multiple, $base-size, $ratio)
49
-
50
- // if multiple ratios are passed in as a list
51
- // calculate values in using each ratio
52
- @if type-of($base-size) == 'number' and type-of($ratio) == 'list'
53
- @if unit(ms-multiratio($multiple, $base-size, $ratio)) == 'px'
54
- @return round(ms-multiratio($multiple, $base-size, $ratio))
55
- @return ms-multiratio($multiple, $base-size, $ratio)
56
-
57
- // If there are no lists just run the simple function
58
- @if unit(exponent($ratio, $multiple) * $base-size) == 'px'
59
- @return round(exponent($ratio, $multiple) * $base-size)
60
- @return exponent($ratio, $multiple) * $base-size
61
-
62
-
63
- // calculate values in using each base-size / ratio combination
64
- @function ms-multibase-multiratio($multiple, $base-size, $ratio)
65
- // start with an empty list to place all values in
66
- $scale-values: ()
67
- // make sure base sizes are in ascending order
68
- $base-size: sort-list($base-size)
69
- // take each base-size in turn
70
- $k: 1
71
- @while $k <= length($base-size)
72
- // add each $base-size to the list except the first
73
- @if $k > 1
74
- $scale-values: append($scale-values, nth($base-size, $k))
75
- // take each ratio in turn
76
- $j: 1
77
- @while $j <= length($ratio)
78
- // reset $modular-scale for each set
79
- $modular-scale: nth($base-size, $k)
80
- // do the scale for each base-size using this ratio
81
- @if $multiple > 0
82
- // up $multiple times
83
- // and add the result to $scale-values
84
- @for $i from 1 through $multiple
85
- $modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k)
86
- $scale-values: append($scale-values, $modular-scale)
87
- // and down until the value is lower than the lowest $base-size
88
- // and add the result to $scale-values
89
- $i: -1
90
- $modular-scale: nth($base-size, $k)
91
- @while $modular-scale >= nth($base-size, 1)
92
- $modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k)
93
- $scale-values: append($scale-values, $modular-scale)
94
- $i: $i - 1
95
- @if $multiple < 0
96
- // do the scale down for each set to below 1px
97
- $i: -1
98
- $modular-scale: nth($base-size, $k)
99
- @while $modular-scale > 1
100
- $modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k)
101
- $scale-values: append($scale-values, $modular-scale)
102
- $i: $i - 1
103
- $j: $j + 1
104
- $k: $k + 1
105
- // return trimmed and sorted final list
106
- @return trim-sort($multiple, $scale-values, $base-size)
107
-
108
-
109
- // calculate values in using each base-size
110
- @function ms-multibase($multiple, $base-size, $ratio)
111
- // start with an empty list to place all values in
112
- $scale-values: ()
113
- // make sure base sizes are in ascending order
114
- $base-size: sort-list($base-size)
115
- // take each base-size in turn
116
- $k: 1
117
- @while $k <= length($base-size)
118
- // add each $base-size to the list except the first
119
- @if $k > 1
120
- $scale-values: append($scale-values, nth($base-size, $k))
121
- // reset $modular-scale for each set
122
- $modular-scale: nth($base-size, $k)
123
- // do the scale for each base-size using this ratio
124
- @if $multiple > 0
125
- // up $multiple times
126
- // and add the result to $scale-values
127
- @for $i from 1 through $multiple
128
- $modular-scale: exponent($ratio, $i) * nth($base-size, $k)
129
- $scale-values: append($scale-values, $modular-scale)
130
- // and down until the value is lower than the lowest $base-size
131
- // and add the result to $scale-values
132
- $i: -1
133
- $modular-scale: nth($base-size, $k)
134
- @while $modular-scale >= nth($base-size, 1)
135
- $modular-scale: exponent($ratio, $i) * nth($base-size, $k)
136
- $scale-values: append($scale-values, $modular-scale)
137
- $i: $i - 1
138
- @if $multiple < 0
139
- // do the scale down for each set to below 1px
140
- $i: -1
141
- $modular-scale: nth($base-size, $k)
142
- @while $modular-scale > 1
143
- $modular-scale: exponent($ratio, $i) * nth($base-size, $k)
144
- $scale-values: append($scale-values, $modular-scale)
145
- $i: $i - 1
146
- $k: $k + 1
147
- // return trimmed and sorted final list
148
- @return trim-sort($multiple, $scale-values, $base-size)
149
-
150
-
151
- // calculate values in using each ratio
152
- @function ms-multiratio($multiple, $base-size, $ratio)
153
- // start with an empty list to place all values in
154
- $scale-values: ()
155
- // If $multiple is a positive integer (up the scale)
156
- @if $multiple > 0
157
- // take each ratio in turn
158
- $j: 1
159
- @while $j <= length($ratio)
160
- // reset $modular-scale for each set
161
- $modular-scale: $base-size
162
- // do the scale using this ratio thru the multiple, and add the result to $scale-values
163
- @for $i from 1 through $multiple
164
- $modular-scale: exponent(nth($ratio, $j), $i) * $base-size
165
- $scale-values: append($scale-values, $modular-scale)
166
- $j: $j + 1
167
- // sort acsending
168
- $scale-values: sort-list($scale-values)
169
- // return the final value using the laced list
170
- @return nth($scale-values, $multiple)
171
- // If $multiple is a negative integer (down the scale)
172
- @if $multiple < 0
173
- // take each ratio in turn
174
- $j: 1
175
- @while $j <= length($ratio)
176
- // reset $modular-scale for each set
177
- $modular-scale: $base-size
178
- // do the scale using this ratio thru the multiple, and add the result to $scale-values
179
- @for $i from 1 through ($multiple * -1)
180
- $modular-scale: exponent(nth($ratio, $j), -$i) * $base-size
181
- $scale-values: append($scale-values, $modular-scale)
182
- $j: $j + 1
183
- // sort decending
184
- $scale-values: sort-list($scale-values, 'dec')
185
- // return the final value using the laced list
186
- @return nth($scale-values, $multiple * -1)
187
-
188
-
189
- // trim and sort the final list
190
- @function trim-sort($multiple, $scale-values, $base-size)
191
- @if $multiple > 0
192
- // trim list so we can count from the lowest $base-size
193
- $scale-values: trim-list($scale-values, nth($base-size, 1))
194
- // sort acsending
195
- $scale-values: sort-list($scale-values)
196
- // return the final value using the laced list
197
- @return nth($scale-values, $multiple)
198
- @else
199
- // trim list so we can count from the lowest $base-size
200
- $scale-values: trim-list($scale-values, nth($base-size, 1), 'dec')
201
- // sort acsending
202
- $scale-values: sort-list($scale-values, 'dec')
203
- // return the final value using the laced list
204
- @return nth($scale-values, -$multiple)
205
-
206
-
207
- /////////////////////////////////////////////////////////////////////////
208
-
209
- // Shortcut
210
- @function ms($multiple, $base-size, $ratio)
211
- // Return the value from the Modular Scale function
212
- @return modular-scale($multiple, $base-size, $ratio)
213
-
214
- // Mixin
215
- // Deprecated. Use the modular-scale() function instead
216
- =modular-scale($property, $multiple, $base-size, $ratio)
217
- // Print the $property and return the value from the Modular Scale function
218
- @warn "The modular-scale mixin is deprecated. Instead use the function: width: modular-scale(3)"
219
- #{$property}: modular-scale($multiple, $base-size, $ratio)
220
-
221
- // Classes Mixin
222
- =modular-scale-classes($multiple, $property, $class-slug, $base-size, $ratio)
223
- // Loop from 0 through the value of $multiple and generate a range of classes
224
- @for $i from 0 through $multiple
225
- .#{$class-slug}-#{$i}
226
- // Print the $property and return the value from the Modular Scale function
227
- #{$property}: modular-scale($i, $base-size, $ratio)
228
-
229
-
230
- /////////////////////////////////////////////////////////////////////////
231
-
232
-
233
- // Sass exponent support
234
- @function exponent($base, $exponent)
235
- // reset value
236
- $value: $base
237
- // positive intergers get multiplied
238
- @if $exponent > 1
239
- @for $i from 2 through $exponent
240
- $value: $value * $base
241
- // negitive intergers get divided. A number divided by itself is 1
242
- @if $exponent < 1
243
- @for $i from 0 through -$exponent
244
- $value: $value / $base
245
- // return the last value written
246
- @return $value
247
-
248
-
249
- // Sass list sorting support
250
- @function sort-list($list, $dir: 'asc')
251
- // built-in list sorting in Sass would make this go away.
252
- // declare some empty lists to put our new order and temporary values
253
- $new-order: ()
254
- $temp: ()
255
- // fill $temp with the contents of $list
256
- $temp: join($temp, $list)
257
- // if sorting ascending
258
- @if $dir == 'asc'
259
- // loop through all values in $list
260
- @for $i from 1 through length($list)
261
- // impossibly high starter value to compare
262
- $low: 1000000
263
- // check for lowest value in $temp
264
- @for $j from 1 through length($temp)
265
- @if nth($temp, $j) < $low
266
- $low: nth($temp, $j)
267
- // add lowest value to $new-order
268
- $new-order: append($new-order, $low)
269
- // empty $temp for the next comparison
270
- $temp: ()
271
- // re-populate $temp with remaining values to sort
272
- @for $k from 1 through length($list)
273
- @if nth($list, $k) > $low
274
- $temp: append($temp, nth($list, $k))
275
- @if $dir == 'dec'
276
- // loop through all values in $list
277
- @for $i from 1 through length($list)
278
- // 0 starter value
279
- $high: 0
280
- // check for highest value in $temp
281
- @for $j from 1 through length($temp)
282
- @if nth($temp, $j) > $high
283
- $high: nth($temp, $j)
284
- $new-order: append($new-order, $high)
285
- // empty $temp for the next comparison
286
- $temp: ()
287
- // re-populate $temp with remaining values to sort
288
- @for $k from 1 through length($list)
289
- @if nth($list, $k) < $high
290
- $temp: append($temp, nth($list, $k))
291
- @return $new-order
292
-
293
-
294
- // Sass list trimming support
295
- @function trim-list($list, $start, $dir: 'asc')
296
- // built-in list trimming in Sass would make this go away.
297
- // declare some empty lists to put our trimmed values
298
- $trimmed: ()
299
- // if sorting ascending
300
- @if $dir == 'asc'
301
- // loop through all values in $list
302
- @for $i from 1 through length($list)
303
- @if nth($list, $i) >= $start
304
- $trimmed: append($trimmed, nth($list, $i))
305
- @if $dir == 'dec'
306
- // loop through all values in $list
307
- @for $i from 1 through length($list)
308
- @if nth($list, $i) <= $start
309
- $trimmed: append($trimmed, nth($list, $i))
310
- @return $trimmed
311
-
312
- // Other libraries can easily query if this function is avalible
313
- $modular-scale-loaded: true