seasons 0.9.3.beta1
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/seasons.rb +3 -0
- data/seasons.gemspec +41 -0
- data/stylesheets/seasons/_core.sass +309 -0
- data/stylesheets/seasons/_tools.sass +5 -0
- data/stylesheets/seasons/tools/_basic-functions.sass +80 -0
- data/stylesheets/seasons/tools/_css3.sass +535 -0
- data/stylesheets/seasons/tools/_grid-tools.sass +17 -0
- data/stylesheets/seasons/tools/_modular-scale.sass +310 -0
- data/stylesheets/seasons/tools/_reset.sass +192 -0
- data/templates/project/_chrome.scss +52 -0
- data/templates/project/_config.sass +84 -0
- data/templates/project/_skin.scss +44 -0
- data/templates/project/article.html +129 -0
- data/templates/project/img.jpg +0 -0
- data/templates/project/index.html +102 -0
- data/templates/project/manifest.rb +24 -0
- data/templates/project/resources.html +168 -0
- data/templates/project/style.sass +33 -0
- data/templates/project/toc.json +22 -0
- data/templates/project/treesaver-0.9.3b.js +129 -0
- metadata +97 -0
data/lib/seasons.rb
ADDED
data/seasons.gemspec
ADDED
@@ -0,0 +1,41 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
|
3
|
+
Gem::Specification.new do |s|
|
4
|
+
s.name = %q{seasons}
|
5
|
+
s.version = "0.9.3.beta1"
|
6
|
+
|
7
|
+
s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
|
8
|
+
s.authors = ["Scott Kellum"]
|
9
|
+
s.date = %q{2011-10-06}
|
10
|
+
s.description = %q{The Compass variant of the Seasons framework to style Treesaver.}
|
11
|
+
s.email = %w{scott@treesaver.net}
|
12
|
+
s.has_rdoc = false
|
13
|
+
s.files = [
|
14
|
+
"seasons.gemspec",
|
15
|
+
"lib/seasons.rb",
|
16
|
+
"stylesheets/seasons/_core.sass",
|
17
|
+
"stylesheets/seasons/_tools.sass",
|
18
|
+
"stylesheets/seasons/tools/_basic-functions.sass",
|
19
|
+
"stylesheets/seasons/tools/_css3.sass",
|
20
|
+
"stylesheets/seasons/tools/_grid-tools.sass",
|
21
|
+
"stylesheets/seasons/tools/_modular-scale.sass",
|
22
|
+
"stylesheets/seasons/tools/_reset.sass",
|
23
|
+
"templates/project/_chrome.scss",
|
24
|
+
"templates/project/_config.sass",
|
25
|
+
"templates/project/_skin.scss",
|
26
|
+
"templates/project/style.sass",
|
27
|
+
"templates/project/treesaver-0.9.3b.js",
|
28
|
+
"templates/project/toc.json",
|
29
|
+
"templates/project/resources.html",
|
30
|
+
"templates/project/index.html",
|
31
|
+
"templates/project/article.html",
|
32
|
+
"templates/project/img.jpg",
|
33
|
+
"templates/project/manifest.rb"
|
34
|
+
]
|
35
|
+
s.homepage = %q{http://www.treesaver.net/}
|
36
|
+
s.require_paths = ["lib"]
|
37
|
+
s.rubyforge_project = %q{seasons}
|
38
|
+
s.rubygems_version = %q{0.9.3.beta1}
|
39
|
+
s.summary = %q{The Compass variant of the Seasons framework to style Treesaver.}
|
40
|
+
s.add_dependency(%q<compass>, ["~> 0.11"])
|
41
|
+
end
|
@@ -0,0 +1,309 @@
|
|
1
|
+
///////////////////////////
|
2
|
+
// METRICS //
|
3
|
+
///////////////////////////
|
4
|
+
|
5
|
+
|
6
|
+
// DEFAULT GRID METRICS
|
7
|
+
$base-size: 16px !default
|
8
|
+
$size: 1em !default
|
9
|
+
$line-height: 1.2em !default
|
10
|
+
$module-w: 280px !default
|
11
|
+
$module-h: 280px !default
|
12
|
+
$gutter: 14px !default
|
13
|
+
// grid margins:
|
14
|
+
$margin: 20px !default
|
15
|
+
$top: 20px !default
|
16
|
+
$bottom: 20px !default
|
17
|
+
$columns: 12 !default
|
18
|
+
$text-column-span: 3 !default
|
19
|
+
|
20
|
+
|
21
|
+
// IMAGE + PAGE RATIOS
|
22
|
+
=ratio($width, $height, $cols: $columns)
|
23
|
+
@for $i from 1 through $cols
|
24
|
+
.r#{$width}x#{$height}.w#{$i}, .container.w#{$i} [ratio="#{$width}x#{$height}"] img // Grid ratio, figure ratio.
|
25
|
+
width: grid($i) // Width spans all columns
|
26
|
+
height: round(grid($i) * ( $height / $width )) // Height is the proportion of the width.
|
27
|
+
|
28
|
+
+ratios // Run the code above. Ratios are defined in _config.sass
|
29
|
+
|
30
|
+
// GRID MEASURMENTS
|
31
|
+
@for $i from 1 through $columns // loop defines columns. c1, c2, c3 . . .
|
32
|
+
.c#{$i}
|
33
|
+
margin-left: grid($i) - $module-w
|
34
|
+
@for $i from 1 through $columns // loop defines widths. w1, w2, w3 . . .
|
35
|
+
.w#{$i}
|
36
|
+
width: grid($i)
|
37
|
+
|
38
|
+
// Vertical grid
|
39
|
+
$vertical-grid: false !default
|
40
|
+
$rows: 10 !default
|
41
|
+
@if $vertical-grid // Generate only if $vertical-grid is true. This code is usually not nessisary.
|
42
|
+
@for $i from 1 through $rows // loop defines rows. r1, r2, r3 . . .
|
43
|
+
.r#{$i}
|
44
|
+
position: absolute
|
45
|
+
top: (grid($i, $module-h) - $module-h) + $top
|
46
|
+
@for $i from 1 through $rows // loop defines heights. h1, h2, h3 . . .
|
47
|
+
.h#{$i}
|
48
|
+
height: grid($i, $module-h)
|
49
|
+
|
50
|
+
// Lightbox sizes
|
51
|
+
.lightbox .container
|
52
|
+
&[class*="single"]
|
53
|
+
width: grid($text-column-span)
|
54
|
+
&[class*="double"]
|
55
|
+
width: grid($text-column-span * 2)
|
56
|
+
&[class*="triple"]
|
57
|
+
width: grid($text-column-span * 3)
|
58
|
+
&[class*="quad"]
|
59
|
+
width: grid($text-column-span * 4)
|
60
|
+
|
61
|
+
// COLUMN WIDTHS
|
62
|
+
.column
|
63
|
+
width: grid($text-column-span)
|
64
|
+
@include type($size, $line-height)
|
65
|
+
|
66
|
+
// GRID+FIGURE MEASUREMENTS
|
67
|
+
.grid
|
68
|
+
position: absolute
|
69
|
+
overflow: hidden
|
70
|
+
z-index: 1
|
71
|
+
// Helps reduce flickr when paging
|
72
|
+
-webkit-backface-visibility: hidden
|
73
|
+
// Sometimes Safari forgets this one
|
74
|
+
-webkit-font-smoothing: subpixel-antialiased
|
75
|
+
|
76
|
+
// CLEAR MIN-MAX FOR FIXED GRIDS
|
77
|
+
.fixed.grid, .sizetocontainer.grid
|
78
|
+
max-width: none
|
79
|
+
max-height: none
|
80
|
+
min-width: none
|
81
|
+
min-height: none
|
82
|
+
|
83
|
+
|
84
|
+
///////////////////////////
|
85
|
+
// GENERAL FUNCTIONALITY //
|
86
|
+
///////////////////////////
|
87
|
+
|
88
|
+
|
89
|
+
// Hide things
|
90
|
+
html.js, html.no-js // Using this to up the priority of .hidden down the cascade.
|
91
|
+
.hidden
|
92
|
+
display: none
|
93
|
+
|
94
|
+
// Positioning of Chrome
|
95
|
+
.chrome, .viewer
|
96
|
+
position: absolute
|
97
|
+
display: block
|
98
|
+
|
99
|
+
.chrome
|
100
|
+
bottom: 0
|
101
|
+
top: 0
|
102
|
+
left: 0
|
103
|
+
right: 0
|
104
|
+
|
105
|
+
|
106
|
+
// DESKTOP SCROLLING CONTAINER SUPPORT
|
107
|
+
$scroll-support: true !default
|
108
|
+
@if $scroll-support
|
109
|
+
.container.scroll
|
110
|
+
position: absolute
|
111
|
+
overflow: auto
|
112
|
+
overflow-x: hidden
|
113
|
+
.grid .scroll-fade:after // gradient to indicate overflow
|
114
|
+
content: "\0020"
|
115
|
+
position: absolute
|
116
|
+
bottom: 0
|
117
|
+
left: 0
|
118
|
+
right: 0
|
119
|
+
height: 40px
|
120
|
+
z-index: 3
|
121
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba($page, 0)), to(rgba($page, 1)))
|
122
|
+
background-image: -webkit-linear-gradient(top, rgba($page, 0), rgba($page, 1))
|
123
|
+
background-image: -moz-linear-gradient(top, rgba($page, 0), rgba($page, 1))
|
124
|
+
background-image: -ms-linear-gradient(top, rgba($page, 0), rgba($page, 1))
|
125
|
+
background-image: -o-linear-gradient(top, rgba($page, 0), rgba($page, 1))
|
126
|
+
background-image: linear-gradient(top, rgba($page, 0), rgba($page, 1))
|
127
|
+
.container .scroll // allow scrolling
|
128
|
+
overflow: auto
|
129
|
+
width: 100%
|
130
|
+
height: 100%
|
131
|
+
padding-bottom: 40px
|
132
|
+
// FORCE SCROLLBAR FOR SAFARI IN LION -- http://simurai.com/post/8083942390/force-lion-scrollbar
|
133
|
+
::-webkit-scrollbar
|
134
|
+
-webkit-appearance: none
|
135
|
+
width: 6px
|
136
|
+
::-webkit-scrollbar-thumb
|
137
|
+
border-radius: 3px
|
138
|
+
background-color: rgba(0,0,0,.5)
|
139
|
+
// Make The Scrollbars Smaller On Touch Devices
|
140
|
+
.touch ::-webkit-scrollbar
|
141
|
+
width: 3px
|
142
|
+
|
143
|
+
// TYPOGRAPHY RESET
|
144
|
+
html, body
|
145
|
+
+type($base-size, $line-height)
|
146
|
+
font-family: $font
|
147
|
+
color: $text
|
148
|
+
background-color: $body
|
149
|
+
overflow: hidden
|
150
|
+
|
151
|
+
// Make sure headlines look good and always fit
|
152
|
+
h1, h2, h3, h4, h5, h6
|
153
|
+
text-rendering: optimizeLegibility
|
154
|
+
word-wrap: break-word
|
155
|
+
|
156
|
+
// Hyphenate paragraphs
|
157
|
+
$hyphenate: true !default
|
158
|
+
@if $hyphenate
|
159
|
+
p
|
160
|
+
+hyphens(auto)
|
161
|
+
|
162
|
+
|
163
|
+
// COLUMNS
|
164
|
+
.column, .container
|
165
|
+
position: absolute
|
166
|
+
overflow: hidden
|
167
|
+
top: $top
|
168
|
+
bottom: $bottom
|
169
|
+
|
170
|
+
// Set min height so no one-line columns appear
|
171
|
+
.column
|
172
|
+
min-height: $line-height * 3
|
173
|
+
|
174
|
+
// Page Opacity
|
175
|
+
$page-opacity: true !default
|
176
|
+
@if $page-opacity
|
177
|
+
#previousPage, #nextPage
|
178
|
+
opacity: 0.5
|
179
|
+
|
180
|
+
// TRIM LEFT OR RIGHT PAGE MARGINS
|
181
|
+
.grid.trimleft
|
182
|
+
padding-left: 0
|
183
|
+
.grid.trimright
|
184
|
+
padding-right: 0
|
185
|
+
|
186
|
+
// FIGURE PLACEMENT
|
187
|
+
figure
|
188
|
+
display: block
|
189
|
+
|
190
|
+
.colapsed
|
191
|
+
position: absolute
|
192
|
+
.topfix
|
193
|
+
top: 0
|
194
|
+
.rightfix
|
195
|
+
right: 0
|
196
|
+
.bottomfix
|
197
|
+
bottom: 0
|
198
|
+
top: auto
|
199
|
+
.leftfix
|
200
|
+
left: 0
|
201
|
+
|
202
|
+
.overflow
|
203
|
+
overflow: visible
|
204
|
+
|
205
|
+
// RESOURCES
|
206
|
+
.error, .loading
|
207
|
+
position: absolute
|
208
|
+
&#nextPage, &#previousPage
|
209
|
+
display: none
|
210
|
+
|
211
|
+
.hidden, .microdata
|
212
|
+
display: none
|
213
|
+
|
214
|
+
.group
|
215
|
+
position: absolute
|
216
|
+
top: 0
|
217
|
+
bottom: 0
|
218
|
+
padding: 0
|
219
|
+
|
220
|
+
// CENTER CONTENT
|
221
|
+
.center, .center *
|
222
|
+
text-align: center
|
223
|
+
|
224
|
+
// DISABLES CAPTIONS FOR CONTAINER
|
225
|
+
.nocap .caption
|
226
|
+
display: none
|
227
|
+
|
228
|
+
// Caption placement
|
229
|
+
$caption-placement: true !default
|
230
|
+
@if $caption-placement
|
231
|
+
// Add padding to captions when in a fill grid
|
232
|
+
.fill .caption
|
233
|
+
padding-left: $margin
|
234
|
+
padding-right: $margin
|
235
|
+
// INSET CAPTION ADVANCED PLACEMENT
|
236
|
+
.caption
|
237
|
+
&.left
|
238
|
+
text-align: left
|
239
|
+
&.right
|
240
|
+
right: 0
|
241
|
+
text-align: right
|
242
|
+
.insetcap
|
243
|
+
.caption
|
244
|
+
position: absolute
|
245
|
+
&.ul .caption
|
246
|
+
top: 0
|
247
|
+
left: 0
|
248
|
+
&.ur .caption
|
249
|
+
top: 0
|
250
|
+
right: 0
|
251
|
+
&.ll .caption
|
252
|
+
bottom: 0
|
253
|
+
left: 0
|
254
|
+
&.lr .caption
|
255
|
+
bottom: 0
|
256
|
+
right: 0
|
257
|
+
|
258
|
+
// SUPPORT FULL-BLEED FIGURES *ABITRARY CROPS BEWARE*
|
259
|
+
// !IMPORTANT FLAGS NESSISARY TO OVERRIDE TREESAVER
|
260
|
+
$fullbleed: true !default
|
261
|
+
@if $fullbleed
|
262
|
+
.fullbleed
|
263
|
+
position: absolute
|
264
|
+
bottom: 0 !important
|
265
|
+
top: 0 !important
|
266
|
+
left: 0 !important
|
267
|
+
right: 0 !important
|
268
|
+
width: auto
|
269
|
+
|
270
|
+
|
271
|
+
// MOBILE OPTIMIZATIONS
|
272
|
+
// Tweaks to make things run more smoothly on mobile devices
|
273
|
+
.os-ipad, .os-iphone
|
274
|
+
&, .grid
|
275
|
+
// iOS doesn't subpixel AA anyway, defining as normal AA speeds things up.
|
276
|
+
-webkit-font-smoothing: antialiased
|
277
|
+
|
278
|
+
|
279
|
+
// Online/offline elements
|
280
|
+
$offline-elements: true !default
|
281
|
+
@if $offline-elements
|
282
|
+
html.offline
|
283
|
+
.no-offline, [data-requires~="no-offline"]
|
284
|
+
display: none
|
285
|
+
[data-requires~="offline"]
|
286
|
+
display: block
|
287
|
+
|
288
|
+
html.no-offline
|
289
|
+
[data-requires~="no-offline"]
|
290
|
+
display: block
|
291
|
+
[data-requires~="offline"]
|
292
|
+
display: none
|
293
|
+
|
294
|
+
// Debug tools
|
295
|
+
// used to highlihgt elements for placement.
|
296
|
+
$debug: true !default
|
297
|
+
@if $debug
|
298
|
+
.r
|
299
|
+
+r
|
300
|
+
.g
|
301
|
+
+g
|
302
|
+
.b
|
303
|
+
+b
|
304
|
+
.c
|
305
|
+
+c
|
306
|
+
.m
|
307
|
+
+m
|
308
|
+
.y
|
309
|
+
+y
|
@@ -0,0 +1,80 @@
|
|
1
|
+
// TYPOGRAPHIC TOOLS
|
2
|
+
=type($size, $line-height)
|
3
|
+
font-size: $size
|
4
|
+
line-height: $line-height
|
5
|
+
|
6
|
+
=solid($lineheight)
|
7
|
+
font-size: $lineheight
|
8
|
+
line-height: 1em
|
9
|
+
|
10
|
+
=caps($letterspace: 0.1em)
|
11
|
+
text-transform: uppercase
|
12
|
+
letter-spacing: $letterspace
|
13
|
+
|
14
|
+
=letterpress($color)
|
15
|
+
text-shadow: 0 -1px 0 darken($color, 15%), 0 1px 0 lighten($color, 15%)
|
16
|
+
|
17
|
+
|
18
|
+
// CENTER AND FILL BACKGROUND
|
19
|
+
=background-fill
|
20
|
+
background-repeat: no-repeat
|
21
|
+
background-position: center center fixed
|
22
|
+
+prefix(background-size, cover)
|
23
|
+
|
24
|
+
|
25
|
+
// @FONT-FACE (FONTSPRING SYNTAX)
|
26
|
+
=font($name, $url, $weight: normal, $style: normal)
|
27
|
+
@font-face
|
28
|
+
font-family: '$name'
|
29
|
+
font-weight: $weight
|
30
|
+
font-style: $style
|
31
|
+
src: url('#{$url}.eot?') format('eot'), url('#{$url}.woff') format('woff'), url('#{$url}.ttf') format('truetype')
|
32
|
+
|
33
|
+
|
34
|
+
// CLEARFIX
|
35
|
+
=clearfix
|
36
|
+
&:before, &:after
|
37
|
+
content: "\0020"
|
38
|
+
display: block
|
39
|
+
height: 0
|
40
|
+
overflow: hidden
|
41
|
+
&:after
|
42
|
+
content: "\0020"
|
43
|
+
display: block
|
44
|
+
height: 0
|
45
|
+
overflow: hidden
|
46
|
+
clear: both
|
47
|
+
&
|
48
|
+
zoom: 1
|
49
|
+
|
50
|
+
// REMOVE GRID
|
51
|
+
=remove
|
52
|
+
min-width: 99999px
|
53
|
+
width: 99999px
|
54
|
+
|
55
|
+
|
56
|
+
// SOME BASIC SPRITE STYLING
|
57
|
+
=sprite($width, $height, $offset-x, $offset-y, $url: $sprite-file)
|
58
|
+
display: block
|
59
|
+
overflow: hidden
|
60
|
+
text-indent: -999px
|
61
|
+
background-image: url('../img/sprites.png')
|
62
|
+
background-position: ($offset-x * -1) ($offset-y * -1)
|
63
|
+
background-repeat: no-repeat
|
64
|
+
width: $width
|
65
|
+
height: $height
|
66
|
+
|
67
|
+
|
68
|
+
// DEBUG TOOLS
|
69
|
+
=r
|
70
|
+
background: #ff9999 !important
|
71
|
+
=g
|
72
|
+
background: #99ff99 !important
|
73
|
+
=b
|
74
|
+
background: #9999ff !important
|
75
|
+
=c
|
76
|
+
background: #99ffff !important
|
77
|
+
=m
|
78
|
+
background: #ff99ff !important
|
79
|
+
=y
|
80
|
+
background: #ffff99 !important
|