zocial 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
data/README.mdown ADDED
@@ -0,0 +1,125 @@
1
+ # Zocial: CSS3 Buttons, Sass Framework.
2
+
3
+ ## Zocial is a CSS3 button set and vector icons with @font-face bundled as a Sass framework.
4
+
5
+ HUGE thanks to [Sam Collins](http://twitter.com/smcllns) for all his hard work on the original CSS3 button set and the Zocial icons font! Without his work, this project would not exist.
6
+
7
+ You can find the CSS only version (no Sass) and the full font set at [zocial.smcllns.com](http://zocial.smcllns.com/). This project comes with a free subset of that font set, and includes:
8
+
9
+ * Twitter
10
+ * Facebook
11
+ * Google+
12
+ * GitHub
13
+ * RSS
14
+ * Smashing Magazine
15
+
16
+ ![Zocial-Lite Preview](https://github.com/adamstac/zocial/raw/master/test/public/images/zocial-lite-preview.jpg)
17
+
18
+ ## Installation
19
+
20
+ The first step is to install the Ruby gem. If you are not yet setup to work with Sass and Compass, please see the [getting started guide](http://thesassway.com/beginner/getting-started-with-sass-and-compass) at [The Sass Way](http://thesassway.com/).
21
+
22
+ (sudo) gem install zocial
23
+
24
+ Next, we need to require Zocial in the Compass config file of your project.
25
+
26
+ require 'zocial'
27
+
28
+ Next is a very crucial step ... getting the fonts installed to your project. This is the step you'll get hung up on if you didn't do the previous steps. Head back to the terminal and run this command from the root of the project you're installing Zocial to.
29
+
30
+ # execute at the root of your project
31
+ compass install zocial/fonts
32
+
33
+ You should see something like this:
34
+
35
+ -> % compass install zocial/fonts
36
+ directory fonts/zocial/
37
+ create fonts/zocial/zocial-lite-regular-webfont.eot
38
+ create fonts/zocial/zocial-lite-regular-webfont.svg
39
+ create fonts/zocial/zocial-lite-regular-webfont.ttf
40
+ create fonts/zocial/zocial-lite-regular-webfont.woff
41
+
42
+ Once you've done this, your project will be ready to use Zocial! The next step is to "mixin" Zocial which is covered in the usage section.
43
+
44
+ ## Usage
45
+
46
+ Zocial Buttons is delivered with a few default variables in place you can override to fine tune Zocial for your project.
47
+
48
+ // Defaults
49
+ $zocial-font-size: 1.8em
50
+ $zocial-icon-font: zocial-lite
51
+ $zocial-icon-default: "-"
52
+ $zocial-text-font: helvetica
53
+
54
+ Based on the default variables, you can set `$zocial-icon-font` to `zocial` if you own the full set. This will also unfurl the styles for the full set as well as Zocial-Lite. Keep in mind that if you use the full set in your project, you are still bound by the license terms of the full set even though this framework is open source.
55
+
56
+ You can also set the `$zocial-font-size` to something larger or smaller than the default of 1.8em.
57
+
58
+ Last but not least, you can set the `$zocial-text-font` to something other than Helvetica. The font family choices are listed below. In a future release, we plan to work on adding better options for using other fonts. Please be patient.
59
+
60
+ ## HTML Markup
61
+
62
+ Here's a snippet of example HTML markup in both HTML and Haml. The caveat or gotcha that most people stumble over is the required nested `<span>` element. As you can see, each Zocial button gets the required `.zocial` class name plus the button name.
63
+
64
+ <button class="zocial icon twitter">
65
+ <span>Sign in with Twitter</span>
66
+ </button>
67
+ <a class="zocial icon twitter" href="#">
68
+ <span>Sign in with Twitter</span>
69
+ </a>
70
+
71
+ %button.zocial.icon.twitter
72
+ %span Sign in with Twitter
73
+ %a(href="#" class="zocial icon twitter")
74
+ %span Sign in with Twitter
75
+
76
+ To use just the icon version of the Zocial button, all you need to do is add the class name `.icon` to the above markup. Here's is the repeated code, but this time adding the `.icon` class.
77
+
78
+ <button class="zocial twitter">
79
+ <span>Sign in with Twitter</span>
80
+ </button>
81
+ <a class="zocial twitter" href="#">
82
+ <span>Sign in with Twitter</span>
83
+ </a>
84
+
85
+ %button.zocial.icon.twitter
86
+ %span Sign in with Twitter
87
+ %a(href="#" class="zocial icon twitter")
88
+ %span Sign in with Twitter
89
+
90
+ ## Buttons classes
91
+
92
+ The examples shown above illustrate how to use the Twitter Zocial button. Below are the full class options for the named buttons.
93
+
94
+ * .twitter
95
+ * .facebook
96
+ * .googleplus
97
+ * .github
98
+ * .rss
99
+ * .smashingmag
100
+
101
+ ## Font Family Choices
102
+
103
+ **Icon font:**
104
+
105
+ * zocial-lite
106
+
107
+ **Text font:**
108
+
109
+ * helvetica
110
+ * arial (alias to helvetica)
111
+ * lucida-grande
112
+ * lucida (alias to lucida-grande)
113
+ * tahoma
114
+ * times
115
+ * georgia
116
+
117
+ ## License
118
+
119
+ Copyright (c) 2011 [Sam Collins](http://smcllns.com/) ([@smcllns](http://twitter.com/smcllns)) and [Adam Stacoviak](http://adamstacoviak.com/) ([@adamstac](http://twitter.com/adamstac))
120
+
121
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
122
+
123
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
124
+
125
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/lib/zocial.rb ADDED
@@ -0,0 +1,9 @@
1
+ require 'compass'
2
+ Compass::Frameworks.register("zocial", :path => "#{File.dirname(__FILE__)}/..")
3
+
4
+ module Zocial
5
+
6
+ VERSION = "0.0.1"
7
+ DATE = "2011-09-24"
8
+
9
+ end
@@ -0,0 +1,41 @@
1
+ @import "compass"
2
+
3
+ // Font family mixin
4
+ =font-family($zocial-text-font)
5
+ @extend .ff-#{$zocial-text-font}
6
+
7
+ // Zovial fonts
8
+ @if $zocial-icon-font == "zocial"
9
+ +font-face("Zocial", font-files("zocial/zocial-regular-webfont.woff", woff, "zocial/zocial-regular-webfont.ttf", truetype, "zocial/zocial-regular-webfont.svg", svg), "zocial/zocial-regular-webfont.eot")
10
+ .ff-zocial
11
+ font-family: "Zocial", sans-serif
12
+
13
+ @if $zocial-icon-font == "zocial-lite"
14
+ +font-face("Zocial-Lite", font-files("zocial/zocial-lite-regular-webfont.woff", woff, "zocial/zocial-lite-regular-webfont.ttf", truetype, "zocial/zocial-lite-regular-webfont.svg", svg), "zocial/zocial-lite-regular-webfont.eot")
15
+ .ff-zocial-lite
16
+ font-family: "Zocial-Lite", sans-serif
17
+
18
+ // Font stack classes
19
+ @if $zocial-text-font == "helvetica"
20
+ .ff-helvetica
21
+ font-family: Clean, "Helvetica-Neue", Helvetica, Arial, sans-serif
22
+ .ff-arial
23
+ @extend .ff-helvetica
24
+
25
+ @if $zocial-text-font == "lucida"
26
+ .ff-lucida-grande
27
+ font-family: "Lucida Grande", Tahoma, sans-serif
28
+ .ff-lucida
29
+ @extend .ff-lucida-grande
30
+
31
+ @if $zocial-text-font == "tahoma"
32
+ .ff-tahoma
33
+ font-family: Tahoma, "Lucida Grande", sans-serif
34
+
35
+ @if $zocial-text-font == "times"
36
+ .ff-times
37
+ font-family: times, "Times New Roman", serif
38
+
39
+ @if $zocial-text-font == "georgia"
40
+ .ff-georgia
41
+ font-family: georgia, times, "Times New Roman", serif
@@ -0,0 +1,463 @@
1
+ // Defaults
2
+ $zocial-font-size: 1.8em !default
3
+ $zocial-icon-font: zocial-lite !default
4
+ $zocial-icon-default: "-" !default
5
+ $zocial-text-font: helvetica !default
6
+
7
+ @import "fonts"
8
+
9
+ =zocial
10
+ .zocial, .zocial > span
11
+ +border-radius(0.2em)
12
+ position: relative
13
+
14
+ // Button Structure
15
+ .zocial
16
+ +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))
17
+ +font-family($zocial-text-font)
18
+ +text-shadow(0 1px 0 rgba(#000,.5))
19
+ position: relative
20
+ border: 1px solid rgba(#000,.2)
21
+ border-bottom-color: rgba(#000,.4)
22
+ color: #fff !important
23
+ cursor: pointer
24
+ display: inline-block
25
+ font-size: $zocial-font-size
26
+ outline: none
27
+ padding: 0
28
+ text-decoration: none !important
29
+
30
+ // Misc
31
+ button::-moz-focus-inner
32
+ border: 0
33
+ padding: 0
34
+
35
+ // These buttons can be displayed as standalone icons if you also add a class of "icon"
36
+ &.icon
37
+ width: 1.85em
38
+ overflow: hidden
39
+
40
+ & > span
41
+ position: relative
42
+ display: inline-block
43
+ font-size: 80%
44
+ font-weight: bold
45
+ line-height: 2em
46
+ padding-right: 0.825em
47
+ white-space: nowrap
48
+ &:before
49
+ +box-shadow(0.075em 0 0 rgba(#fff,.25))
50
+ +font-family($zocial-icon-font)
51
+ border-right: 0.075em solid rgba(#000,.1)
52
+ display: block
53
+ float: left
54
+ font-size: 125%
55
+ font-style: normal
56
+ font-weight: normal
57
+ margin: 0.0675em 0.5em 0 0
58
+ text-align: center
59
+ width: 1.75em
60
+
61
+ // Gradient default
62
+ & > span
63
+ +background(linear-gradient(top, rgba(#fff,.1), rgba(#fff,.05) 49%, rgba(#000,.05) 51%, rgba(#000,.1)))
64
+
65
+ // Gradient hover and focus
66
+ &:hover > span, &:focus > span
67
+ +background(linear-gradient(top, rgba(#fff,.15), rgba(#fff,.15) 49%, rgba(#000,.1) 51%, rgba(#000,.15)))
68
+
69
+ // Gradient active/clicked
70
+ &:active > span
71
+ +background(linear-gradient(bottom, rgba(#fff,.1), rgba(#fff, 0) 30%, rgba(#000, 0) 50%, rgba(#000,.1)))
72
+
73
+ // Adjustments for light background buttons
74
+ &.white, &.twitter, &.github
75
+ +text-shadow(0 1px 0 rgba(#fff,.8))
76
+ +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))
77
+
78
+ &.github:hover > span, &.twitter:focus > span, &.github:focus > span
79
+ +background(linear-gradient(top, rgba(#fff,.5), rgba(#fff,.2) 49%, rgba(#000,.05) 51%, rgba(#000,.15)))
80
+
81
+ &.twitter:active > span, &.github:active > span
82
+ +background(linear-gradient(bottom, rgba(#fff,0), rgba(#fff,0) 30%, rgba(#000, 0) 50%, rgba(#000,.1)))
83
+
84
+ // Assumes full set if the icon-font is zocial
85
+ @if $zocial-icon-font == "zocial"
86
+ // Adjustments for light background buttons
87
+ &.plancast, &.posterous, &.dropbox, &.openid, &.instapaper, &.wikipedia, &.cloudapp, &.gmail
88
+ +text-shadow(0 1px 0 rgba(#fff,.8))
89
+ +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))
90
+
91
+ &.plancast:hover > span, &.posterous:hover > span, &.dropbox:hover > span, &.openid:hover > span, &.instapaper:hover > span, &.github:hover > span, &.wikipedia:hover > span, &.gmail:hover > span,
92
+ &.plancast:focus > span, &.posterous:focus > span, &.dropbox:focus > span, &.openid:focus > span, &.instapaper:focus > span, &.github:focus > span, &.wikipedia:focus > span, &.gmail:focus > span
93
+ +background(linear-gradient(top, rgba(#fff,.5), rgba(#fff,.2) 49%, rgba(#000,.05) 51%, rgba(#000,.15)))
94
+
95
+ &.plancast:active > span, &.posterous:active > span, &.dropbox:active > span, &.openid:active > span, &.instapaper:active > span, &.wikipedia:active > span, &.gmail:active > span
96
+ +background(linear-gradient(bottom, rgba(#fff,0), rgba(#fff,0) 30%, rgba(#000, 0) 50%, rgba(#000,.1)))
97
+
98
+
99
+ // Default
100
+ & > span:before
101
+ content: $zocial-icon-default
102
+
103
+ // Basic colors + content
104
+ &.white
105
+ background: #fff
106
+ color: #000 !important
107
+ & > span:before
108
+ content: $zocial-icon-default
109
+ color: #000
110
+ &.black
111
+ background: #000
112
+ color: #fff !important
113
+ & > span:before
114
+ content: $zocial-icon-default
115
+ color: #fff
116
+ &.red
117
+ background: red
118
+ color: #fff !important
119
+ & > span:before
120
+ content: $zocial-icon-default
121
+ color: #fff
122
+ &.green
123
+ background: green
124
+ color: #fff !important
125
+ & > span:before
126
+ content: $zocial-icon-default
127
+ color: #fff
128
+ &.blue
129
+ background: blue
130
+ color: #fff !important
131
+ & > span:before
132
+ content: $zocial-icon-default
133
+ color: #fff
134
+
135
+ // Icons
136
+ &.facebook > span:before
137
+ content: "f"
138
+ &.github > span:before
139
+ content: "g"
140
+ &.googleplus > span:before
141
+ content: "+"
142
+ &.rss > span:before
143
+ content: "R"
144
+ &.smashingmag > span:before
145
+ content: "*"
146
+ &.twitter > span:before
147
+ content: "T"
148
+
149
+ // Assumes full set if the icon-font is zocial
150
+ @if $zocial-icon-font == "zocial"
151
+ &.google > span:before
152
+ content: "G"
153
+
154
+ &.linkedin > span:before
155
+ content: "L"
156
+
157
+ &.meetup > span:before
158
+ content: "M"
159
+
160
+ &.plancast > span:before
161
+ content: "P"
162
+
163
+ &.soundcloud > span:before
164
+ content: "s"
165
+
166
+ &.tumblr > span:before
167
+ content: "t"
168
+
169
+ &.dribbble > span:before
170
+ content: "D"
171
+
172
+ &.forrst > span:before
173
+ content: ":"
174
+ color: #50894F
175
+
176
+ &.dropbox > span:before
177
+ content: "d"
178
+ color: #4EA4E3
179
+
180
+ &.posterous > span:before
181
+ content: "~"
182
+
183
+ &.flattr > span:before
184
+ content: "%"
185
+
186
+ &.spotify > span:before
187
+ content: "="
188
+
189
+ &.foursquare > span:before
190
+ content: "4"
191
+
192
+ &.intensedebate > span:before
193
+ content: "{"
194
+
195
+ &.wordpress > span:before
196
+ content: "w"
197
+
198
+ &.yahoo > span:before
199
+ content: "Y"
200
+
201
+ &.openid > span:before
202
+ content: "o"
203
+ color: #FF921D
204
+
205
+ &.guest > span:before
206
+ content: "?"
207
+
208
+ &.instapaper > span:before
209
+ content: "I"
210
+
211
+ &.android > span:before
212
+ content: "&"
213
+
214
+ &.itunes > span:before
215
+ content: "A"
216
+
217
+ &.paypal > span:before
218
+ content: "$"
219
+
220
+ &.appstore > span:before
221
+ content: "^"
222
+
223
+ &.creativecommons > span:before
224
+ content: "C"
225
+
226
+ &.disqus > span:before
227
+ content: "Q"
228
+
229
+ &.eventasaurus > span:before
230
+ content: "v"
231
+
232
+ &.eventbrite > span:before
233
+ content: "|"
234
+
235
+ &.chrome > span:before
236
+ content: "["
237
+
238
+ &.html5 > span:before
239
+ content: "5"
240
+
241
+ &.songkick > span:before
242
+ content: "k"
243
+
244
+ &.vimeo > span:before
245
+ content: "V"
246
+
247
+ &.youtube > span:before
248
+ content: "U"
249
+
250
+ &.gowalla > span:before
251
+ content: "@"
252
+
253
+ &.skype > span:before
254
+ content: "S"
255
+
256
+ &.aol > span:before
257
+ content: "\""
258
+
259
+ &.wikipedia > span:before
260
+ content: ","
261
+
262
+ &.yelp > span:before
263
+ content: "y"
264
+
265
+ &.evernote > span:before
266
+ content: "E"
267
+
268
+ &.ie > span:before
269
+ content: "6"
270
+
271
+ &.cloudapp > span:before
272
+ content: "c"
273
+
274
+ &.gmail > span:before
275
+ content: "m"
276
+ color: #ff0000
277
+
278
+ &.amazon > span:before
279
+ content: "a"
280
+
281
+ &.lastfm > span:before
282
+ content: "l"
283
+
284
+ // Colors
285
+ &.github
286
+ color: #050505 !important
287
+ background: #FBFBFB
288
+ &.googleplus
289
+ background: #282626
290
+ &.googleplus:before
291
+ content: ""
292
+ display: block
293
+ height: 0.2em
294
+ margin-bottom: -0.1em
295
+ width: 100%
296
+ position: relative
297
+ left: 0em
298
+ top: 0
299
+ +background(linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b))
300
+ +border-radius(0.2em 0.2em 0 0)
301
+ border-bottom: 1px solid rgba(#000,.8)
302
+ +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))
303
+ z-index: 0
304
+ &.facebook
305
+ background: #4863AE
306
+ &.rss
307
+ background: #FF7F25
308
+ &.smashingmag
309
+ background: #FF4F27
310
+ &.twitter
311
+ background: #E9F9FF
312
+ color: #3C6B9C !important
313
+
314
+ // Assumes full set if the icon-font is zocial
315
+ @if $zocial-icon-font == "zocial"
316
+ &.openid
317
+ background: #f5f5f5
318
+ color: #333 !important
319
+
320
+ &.guest
321
+ background: #1B4D6D
322
+
323
+ &.instapaper
324
+ color: #222 !important
325
+ background: #eee
326
+
327
+ &.android
328
+ background: #A4C639
329
+
330
+ &.itunes
331
+ background: #222
332
+
333
+ &.paypal
334
+ background: #FF921D
335
+ color: #032751 !important
336
+ +text-shadow(0 1px 0 rgba(#fff,.5))
337
+
338
+ &.appstore
339
+ background: #007DCB !important
340
+
341
+ &.creativecommons
342
+ background: #000
343
+
344
+ &.disqus
345
+ background: #216892
346
+
347
+ &.gowalla
348
+ background: #FF720A
349
+
350
+ &.skype
351
+ background: #00A2ED
352
+
353
+ &.aol
354
+ background: #FF0000
355
+
356
+ &.wikipedia
357
+ background: #fff
358
+ color: #000 !important
359
+
360
+ &.yelp
361
+ background: #E60010
362
+
363
+ &.scribd > span:before
364
+ content: "}"
365
+ color: #00D5EA !important
366
+
367
+ &.scribd
368
+ background: #231C1A
369
+
370
+ &.eventasaurus
371
+ background: #8CCC33
372
+
373
+ &.eventbrite
374
+ background: #FF5616
375
+
376
+ &.chrome
377
+ background: #006CD4
378
+
379
+ &.html5
380
+ background: #FF3617
381
+
382
+ &.songkick
383
+ background: #FF0050
384
+
385
+ &.vimeo
386
+ background: #00A2CD
387
+
388
+ &.youtube
389
+ background: #FF0000
390
+
391
+ &.yahoo
392
+ background: #A200C2
393
+
394
+ &.intensedebate
395
+ background: #0099E1
396
+
397
+ &.wordpress
398
+ background: #464646
399
+
400
+ &.linkedin
401
+ background: #0083A8
402
+
403
+ &.google
404
+ background: #4E6CF7
405
+
406
+ &.meetup
407
+ background: #FF0026
408
+
409
+ &.plancast
410
+ background: #E7EBED
411
+ color: #333 !important
412
+
413
+ &.soundcloud
414
+ background: #FF4500
415
+
416
+ &.tumblr
417
+ background: #374a61
418
+
419
+ &.foursquare
420
+ background: #44A8E0
421
+
422
+ &.dribbble
423
+ background: #ea4c89
424
+
425
+ &.forrst
426
+ background: #1E360D
427
+
428
+ &.dropbox
429
+ background: #f5f5f5
430
+ color: #312c2a !important
431
+
432
+ &.posterous
433
+ background: #FFD959
434
+ color: #BC7134 !important
435
+
436
+ &.flattr
437
+ background: #8ABA42
438
+
439
+ &.spotify
440
+ background: #60AF00
441
+
442
+ &.evernote
443
+ background: #6BB130
444
+ color: #fff !important
445
+
446
+ &.ie
447
+ background: #00A1D9
448
+
449
+ &.cloudapp
450
+ background: #fff
451
+ color: #312c2a !important
452
+
453
+ &.gmail
454
+ background: #efefef
455
+ color: #222 !important
456
+
457
+ &.amazon
458
+ background: #FFAD1D
459
+ color: #030037 !important
460
+ text-shadow: 0 1px 0 rgba(#fff,.5)
461
+
462
+ &.lastfm
463
+ background: #dc1a23
@@ -0,0 +1,19 @@
1
+ # Compass Configuration
2
+
3
+ # HTTP paths
4
+ http_path = '/'
5
+ fonts_path = '/fonts'
6
+
7
+ # File system locations
8
+ sass_dir = '/'
9
+ css_dir = '/'
10
+ fonts_dir = 'fonts'
11
+
12
+ # Set to true for easier debugging
13
+ line_comments = false
14
+ preferred_syntax = :sass
15
+
16
+ # CSS output style - :nested, :expanded, :compact, or :compressed
17
+ output_style = :expanded
18
+
19
+ # Learn more: http://compass-style.org/docs/tutorials/configuration-reference/
@@ -0,0 +1,11 @@
1
+ description "Zocial CSS"
2
+
3
+ stylesheet 'zocial.css'
4
+
5
+ help %Q{
6
+ If you need help, ask Adam Stacoviak (@adamstac).
7
+ }
8
+
9
+ welcome_message %Q{
10
+ Welcome. You have installed Zocial's CSS.
11
+ }
@@ -0,0 +1 @@
1
+ @font-face{font-family:"Zocial-Lite";src:url('/fonts/zocial/zocial-lite-regular-webfont.eot');src:url('/fonts/zocial/zocial-lite-regular-webfont.eot?iefix') format('eot'),url('/fonts/zocial/zocial-lite-regular-webfont.woff') format('woff'), url('/fonts/zocial/zocial-lite-regular-webfont.ttf') format('truetype'), url('/fonts/zocial/zocial-lite-regular-webfont.svg') format('svg')}.ff-zocial-lite,.zocial > span:before{font-family:"Zocial-Lite",sans-serif}.ff-helvetica,.ff-arial,.zocial{font-family:Clean,"Helvetica-Neue",Helvetica,Arial,sans-serif}.zocial,.zocial > span{-moz-border-radius:0.2em;-webkit-border-radius:0.2em;-o-border-radius:0.2em;-ms-border-radius:0.2em;-khtml-border-radius:0.2em;border-radius:0.2em;position:relative}.zocial{-moz-box-shadow:inset 0 0.063em 0 rgba(255,255,255,0.4),inset 0 0 0.063em rgba(255,255,255,0.6),0 0.063em 0 rgba(255,255,255,0.3);-webkit-box-shadow:inset 0 0.063em 0 rgba(255,255,255,0.4),inset 0 0 0.063em rgba(255,255,255,0.6),0 0.063em 0 rgba(255,255,255,0.3);-o-box-shadow:inset 0 0.063em 0 rgba(255,255,255,0.4),inset 0 0 0.063em rgba(255,255,255,0.6),0 0.063em 0 rgba(255,255,255,0.3);box-shadow:inset 0 0.063em 0 rgba(255,255,255,0.4),inset 0 0 0.063em rgba(255,255,255,0.6),0 0.063em 0 rgba(255,255,255,0.3);text-shadow:0 1px 0 rgba(0,0,0,0.5);position:relative;border:1px solid rgba(0,0,0,0.2);border-bottom-color:rgba(0,0,0,0.4);color:#fff !important;cursor:pointer;display:inline-block;font-size:1.8em;outline:none;padding:0;text-decoration:none !important}.zocial button::-moz-focus-inner{border:0;padding:0}.zocial.icon{width:1.85em;overflow:hidden}.zocial > span{position:relative;display:inline-block;font-size:80%;font-weight:bold;line-height:2em;padding-right:0.825em;white-space:nowrap}.zocial > span:before{-moz-box-shadow:0.075em 0 0 rgba(255,255,255,0.25);-webkit-box-shadow:0.075em 0 0 rgba(255,255,255,0.25);-o-box-shadow:0.075em 0 0 rgba(255,255,255,0.25);box-shadow:0.075em 0 0 rgba(255,255,255,0.25);border-right:0.075em solid rgba(0,0,0,0.1);display:block;float:left;font-size:125%;font-style:normal;font-weight:normal;margin:0.068em 0.5em 0 0;text-align:center;width:1.75em}.zocial > span{background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255,255,255,0.1)), color-stop(49%, rgba(255,255,255,0.05)), color-stop(51%, rgba(0,0,0,0.05)), color-stop(100%, rgba(0,0,0,0.1)));background:-webkit-linear-gradient(top, rgba(255,255,255,0.1),rgba(255,255,255,0.05) 49%,rgba(0,0,0,0.05) 51%,rgba(0,0,0,0.1));background:-moz-linear-gradient(top, rgba(255,255,255,0.1),rgba(255,255,255,0.05) 49%,rgba(0,0,0,0.05) 51%,rgba(0,0,0,0.1));background:-o-linear-gradient(top, rgba(255,255,255,0.1),rgba(255,255,255,0.05) 49%,rgba(0,0,0,0.05) 51%,rgba(0,0,0,0.1));background:-ms-linear-gradient(top, rgba(255,255,255,0.1),rgba(255,255,255,0.05) 49%,rgba(0,0,0,0.05) 51%,rgba(0,0,0,0.1));background:linear-gradient(top, rgba(255,255,255,0.1),rgba(255,255,255,0.05) 49%,rgba(0,0,0,0.05) 51%,rgba(0,0,0,0.1))}.zocial:hover > span,.zocial:focus > span{background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255,255,255,0.15)), color-stop(49%, rgba(255,255,255,0.15)), color-stop(51%, rgba(0,0,0,0.1)), color-stop(100%, rgba(0,0,0,0.15)));background:-webkit-linear-gradient(top, rgba(255,255,255,0.15),rgba(255,255,255,0.15) 49%,rgba(0,0,0,0.1) 51%,rgba(0,0,0,0.15));background:-moz-linear-gradient(top, rgba(255,255,255,0.15),rgba(255,255,255,0.15) 49%,rgba(0,0,0,0.1) 51%,rgba(0,0,0,0.15));background:-o-linear-gradient(top, rgba(255,255,255,0.15),rgba(255,255,255,0.15) 49%,rgba(0,0,0,0.1) 51%,rgba(0,0,0,0.15));background:-ms-linear-gradient(top, rgba(255,255,255,0.15),rgba(255,255,255,0.15) 49%,rgba(0,0,0,0.1) 51%,rgba(0,0,0,0.15));background:linear-gradient(top, rgba(255,255,255,0.15),rgba(255,255,255,0.15) 49%,rgba(0,0,0,0.1) 51%,rgba(0,0,0,0.15))}.zocial:active > span{background:-webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, rgba(255,255,255,0.1)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.1)));background:-webkit-linear-gradient(bottom, rgba(255,255,255,0.1),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1));background:-moz-linear-gradient(bottom, rgba(255,255,255,0.1),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1));background:-o-linear-gradient(bottom, rgba(255,255,255,0.1),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1));background:-ms-linear-gradient(bottom, rgba(255,255,255,0.1),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1));background:linear-gradient(bottom, rgba(255,255,255,0.1),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1))}.zocial.twitter,.zocial.github{text-shadow:0 1px 0 rgba(255,255,255,0.8);-moz-box-shadow:inset 0 0.063em 0 rgba(255,255,255,0.4),inset 0 0 0.063em rgba(255,255,255,0.6),0 0.063em 0 rgba(255,255,255,0.3);-webkit-box-shadow:inset 0 0.063em 0 rgba(255,255,255,0.4),inset 0 0 0.063em rgba(255,255,255,0.6),0 0.063em 0 rgba(255,255,255,0.3);-o-box-shadow:inset 0 0.063em 0 rgba(255,255,255,0.4),inset 0 0 0.063em rgba(255,255,255,0.6),0 0.063em 0 rgba(255,255,255,0.3);box-shadow:inset 0 0.063em 0 rgba(255,255,255,0.4),inset 0 0 0.063em rgba(255,255,255,0.6),0 0.063em 0 rgba(255,255,255,0.3)}.zocial.github:hover > span,.zocial.twitter:focus > span,.zocial.github:focus > span{background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255,255,255,0.5)), color-stop(49%, rgba(255,255,255,0.2)), color-stop(51%, rgba(0,0,0,0.05)), color-stop(100%, rgba(0,0,0,0.15)));background:-webkit-linear-gradient(top, rgba(255,255,255,0.5),rgba(255,255,255,0.2) 49%,rgba(0,0,0,0.05) 51%,rgba(0,0,0,0.15));background:-moz-linear-gradient(top, rgba(255,255,255,0.5),rgba(255,255,255,0.2) 49%,rgba(0,0,0,0.05) 51%,rgba(0,0,0,0.15));background:-o-linear-gradient(top, rgba(255,255,255,0.5),rgba(255,255,255,0.2) 49%,rgba(0,0,0,0.05) 51%,rgba(0,0,0,0.15));background:-ms-linear-gradient(top, rgba(255,255,255,0.5),rgba(255,255,255,0.2) 49%,rgba(0,0,0,0.05) 51%,rgba(0,0,0,0.15));background:linear-gradient(top, rgba(255,255,255,0.5),rgba(255,255,255,0.2) 49%,rgba(0,0,0,0.05) 51%,rgba(0,0,0,0.15))}.zocial.twitter:active > span,.zocial.github:active > span{background:-webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, rgba(255,255,255,0)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.1)));background:-webkit-linear-gradient(bottom, rgba(255,255,255,0),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1));background:-moz-linear-gradient(bottom, rgba(255,255,255,0),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1));background:-o-linear-gradient(bottom, rgba(255,255,255,0),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1));background:-ms-linear-gradient(bottom, rgba(255,255,255,0),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1));background:linear-gradient(bottom, rgba(255,255,255,0),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1))}.zocial > span:before{content:"\00a0"}.zocial.white{background:#fff;color:#000 !important}.zocial.white > span:before{content:"\00a0";color:#000}.zocial.black{background:#000;color:#fff !important}.zocial.black > span:before{content:"\00a0";color:#fff}.zocial.red{background:red;color:#fff !important}.zocial.red > span:before{content:"\00a0";color:#fff}.zocial.green{background:green;color:#fff !important}.zocial.green > span:before{content:"\00a0";color:#fff}.zocial.blue{background:blue;color:#fff !important}.zocial.blue > span:before{content:"\00a0";color:#fff}.zocial.facebook > span:before{content:"f"}.zocial.github > span:before{content:"g"}.zocial.googleplus > span:before{content:"+"}.zocial.rss > span:before{content:"R"}.zocial.smashingmag > span:before{content:"*"}.zocial.twitter > span:before{content:"T"}.zocial.github{color:#050505 !important;background:#fbfbfb}.zocial.googleplus{background:#282626}.zocial.googleplus:before{content:"";display:block;height:0.2em;margin-bottom:-0.1em;width:100%;position:relative;left:0em;top:0;background:-webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #d20e1b), color-stop(25%, #d20e1b), color-stop(25%, #3156e6), color-stop(50%, #3156e6), color-stop(50%, #2aa134), color-stop(75%, #2aa134), color-stop(75%, #ecb01b), color-stop(100%, #ecb01b));background:-webkit-linear-gradient(left, #d20e1b,#d20e1b 25%,#3156e6 25%,#3156e6 50%,#2aa134 50%,#2aa134 75%,#ecb01b 75%,#ecb01b);background:-moz-linear-gradient(left, #d20e1b,#d20e1b 25%,#3156e6 25%,#3156e6 50%,#2aa134 50%,#2aa134 75%,#ecb01b 75%,#ecb01b);background:-o-linear-gradient(left, #d20e1b,#d20e1b 25%,#3156e6 25%,#3156e6 50%,#2aa134 50%,#2aa134 75%,#ecb01b 75%,#ecb01b);background:-ms-linear-gradient(left, #d20e1b,#d20e1b 25%,#3156e6 25%,#3156e6 50%,#2aa134 50%,#2aa134 75%,#ecb01b 75%,#ecb01b);background:linear-gradient(left, #d20e1b,#d20e1b 25%,#3156e6 25%,#3156e6 50%,#2aa134 50%,#2aa134 75%,#ecb01b 75%,#ecb01b);-moz-border-radius:0.2em 0.2em 0 0;-webkit-border-radius:0.2em 0.2em 0 0;-o-border-radius:0.2em 0.2em 0 0;-ms-border-radius:0.2em 0.2em 0 0;-khtml-border-radius:0.2em 0.2em 0 0;border-radius:0.2em 0.2em 0 0;border-bottom:1px solid rgba(0,0,0,0.8);-moz-box-shadow:inset 0 0.063em 0 rgba(255,255,255,0.4),inset 0 0 0.063em rgba(255,255,255,0.6),0 0.063em 0 rgba(255,255,255,0.3);-webkit-box-shadow:inset 0 0.063em 0 rgba(255,255,255,0.4),inset 0 0 0.063em rgba(255,255,255,0.6),0 0.063em 0 rgba(255,255,255,0.3);-o-box-shadow:inset 0 0.063em 0 rgba(255,255,255,0.4),inset 0 0 0.063em rgba(255,255,255,0.6),0 0.063em 0 rgba(255,255,255,0.3);box-shadow:inset 0 0.063em 0 rgba(255,255,255,0.4),inset 0 0 0.063em rgba(255,255,255,0.6),0 0.063em 0 rgba(255,255,255,0.3);z-index:0}.zocial.facebook{background:#4863ae}.zocial.rss{background:#ff7f25}.zocial.smashingmag{background:#ff4f27}.zocial.twitter{background:#e9f9ff;color:#3c6b9c !important}
@@ -0,0 +1,229 @@
1
+ @font-face {
2
+ font-family: "Zocial-Lite";
3
+ src: url('/fonts/zocial/zocial-lite-regular-webfont.eot');
4
+ src: url('/fonts/zocial/zocial-lite-regular-webfont.eot?iefix') format('eot'), url('/fonts/zocial/zocial-lite-regular-webfont.woff') format('woff'), url('/fonts/zocial/zocial-lite-regular-webfont.ttf') format('truetype'), url('/fonts/zocial/zocial-lite-regular-webfont.svg') format('svg');
5
+ }
6
+
7
+ .ff-zocial-lite, .zocial > span:before {
8
+ font-family: "Zocial-Lite", sans-serif;
9
+ }
10
+
11
+ .ff-helvetica, .ff-arial, .zocial {
12
+ font-family: Clean, "Helvetica-Neue", Helvetica, Arial, sans-serif;
13
+ }
14
+
15
+ .zocial, .zocial > span {
16
+ -moz-border-radius: 0.2em;
17
+ -webkit-border-radius: 0.2em;
18
+ -o-border-radius: 0.2em;
19
+ -ms-border-radius: 0.2em;
20
+ -khtml-border-radius: 0.2em;
21
+ border-radius: 0.2em;
22
+ position: relative;
23
+ }
24
+
25
+ .zocial {
26
+ -moz-box-shadow: inset 0 0.063em 0 rgba(255, 255, 255, 0.4), inset 0 0 0.063em rgba(255, 255, 255, 0.6), 0 0.063em 0 rgba(255, 255, 255, 0.3);
27
+ -webkit-box-shadow: inset 0 0.063em 0 rgba(255, 255, 255, 0.4), inset 0 0 0.063em rgba(255, 255, 255, 0.6), 0 0.063em 0 rgba(255, 255, 255, 0.3);
28
+ -o-box-shadow: inset 0 0.063em 0 rgba(255, 255, 255, 0.4), inset 0 0 0.063em rgba(255, 255, 255, 0.6), 0 0.063em 0 rgba(255, 255, 255, 0.3);
29
+ box-shadow: inset 0 0.063em 0 rgba(255, 255, 255, 0.4), inset 0 0 0.063em rgba(255, 255, 255, 0.6), 0 0.063em 0 rgba(255, 255, 255, 0.3);
30
+ text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
31
+ position: relative;
32
+ border: 1px solid rgba(0, 0, 0, 0.2);
33
+ border-bottom-color: rgba(0, 0, 0, 0.4);
34
+ color: white !important;
35
+ cursor: pointer;
36
+ display: inline-block;
37
+ font-size: 1.8em;
38
+ outline: none;
39
+ padding: 0;
40
+ text-decoration: none !important;
41
+ }
42
+ .zocial button::-moz-focus-inner {
43
+ border: 0;
44
+ padding: 0;
45
+ }
46
+ .zocial.icon {
47
+ width: 1.85em;
48
+ overflow: hidden;
49
+ }
50
+ .zocial > span {
51
+ position: relative;
52
+ display: inline-block;
53
+ font-size: 80%;
54
+ font-weight: bold;
55
+ line-height: 2em;
56
+ padding-right: 0.825em;
57
+ white-space: nowrap;
58
+ }
59
+ .zocial > span:before {
60
+ -moz-box-shadow: 0.075em 0 0 rgba(255, 255, 255, 0.25);
61
+ -webkit-box-shadow: 0.075em 0 0 rgba(255, 255, 255, 0.25);
62
+ -o-box-shadow: 0.075em 0 0 rgba(255, 255, 255, 0.25);
63
+ box-shadow: 0.075em 0 0 rgba(255, 255, 255, 0.25);
64
+ border-right: 0.075em solid rgba(0, 0, 0, 0.1);
65
+ display: block;
66
+ float: left;
67
+ font-size: 125%;
68
+ font-style: normal;
69
+ font-weight: normal;
70
+ margin: 0.068em 0.5em 0 0;
71
+ text-align: center;
72
+ width: 1.75em;
73
+ }
74
+ .zocial > span {
75
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(49%, rgba(255, 255, 255, 0.05)), color-stop(51%, rgba(0, 0, 0, 0.05)), color-stop(100%, rgba(0, 0, 0, 0.1)));
76
+ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05) 49%, rgba(0, 0, 0, 0.05) 51%, rgba(0, 0, 0, 0.1));
77
+ background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05) 49%, rgba(0, 0, 0, 0.05) 51%, rgba(0, 0, 0, 0.1));
78
+ background: -o-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05) 49%, rgba(0, 0, 0, 0.05) 51%, rgba(0, 0, 0, 0.1));
79
+ background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05) 49%, rgba(0, 0, 0, 0.05) 51%, rgba(0, 0, 0, 0.1));
80
+ background: linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05) 49%, rgba(0, 0, 0, 0.05) 51%, rgba(0, 0, 0, 0.1));
81
+ }
82
+ .zocial:hover > span, .zocial:focus > span {
83
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.15)), color-stop(49%, rgba(255, 255, 255, 0.15)), color-stop(51%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.15)));
84
+ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 49%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0.15));
85
+ background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 49%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0.15));
86
+ background: -o-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 49%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0.15));
87
+ background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 49%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0.15));
88
+ background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 49%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0.15));
89
+ }
90
+ .zocial:active > span {
91
+ background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(30%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
92
+ background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1));
93
+ background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1));
94
+ background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1));
95
+ background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1));
96
+ background: linear-gradient(bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1));
97
+ }
98
+ .zocial.twitter, .zocial.github {
99
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
100
+ -moz-box-shadow: inset 0 0.063em 0 rgba(255, 255, 255, 0.4), inset 0 0 0.063em rgba(255, 255, 255, 0.6), 0 0.063em 0 rgba(255, 255, 255, 0.3);
101
+ -webkit-box-shadow: inset 0 0.063em 0 rgba(255, 255, 255, 0.4), inset 0 0 0.063em rgba(255, 255, 255, 0.6), 0 0.063em 0 rgba(255, 255, 255, 0.3);
102
+ -o-box-shadow: inset 0 0.063em 0 rgba(255, 255, 255, 0.4), inset 0 0 0.063em rgba(255, 255, 255, 0.6), 0 0.063em 0 rgba(255, 255, 255, 0.3);
103
+ box-shadow: inset 0 0.063em 0 rgba(255, 255, 255, 0.4), inset 0 0 0.063em rgba(255, 255, 255, 0.6), 0 0.063em 0 rgba(255, 255, 255, 0.3);
104
+ }
105
+ .zocial.github:hover > span, .zocial.twitter:focus > span, .zocial.github:focus > span {
106
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(49%, rgba(255, 255, 255, 0.2)), color-stop(51%, rgba(0, 0, 0, 0.05)), color-stop(100%, rgba(0, 0, 0, 0.15)));
107
+ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2) 49%, rgba(0, 0, 0, 0.05) 51%, rgba(0, 0, 0, 0.15));
108
+ background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2) 49%, rgba(0, 0, 0, 0.05) 51%, rgba(0, 0, 0, 0.15));
109
+ background: -o-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2) 49%, rgba(0, 0, 0, 0.05) 51%, rgba(0, 0, 0, 0.15));
110
+ background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2) 49%, rgba(0, 0, 0, 0.05) 51%, rgba(0, 0, 0, 0.15));
111
+ background: linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2) 49%, rgba(0, 0, 0, 0.05) 51%, rgba(0, 0, 0, 0.15));
112
+ }
113
+ .zocial.twitter:active > span, .zocial.github:active > span {
114
+ background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
115
+ background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1));
116
+ background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1));
117
+ background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1));
118
+ background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1));
119
+ background: linear-gradient(bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1));
120
+ }
121
+ .zocial > span:before {
122
+ content: "\00a0";
123
+ }
124
+ .zocial.white {
125
+ background: white;
126
+ color: black !important;
127
+ }
128
+ .zocial.white > span:before {
129
+ content: "\00a0";
130
+ color: black;
131
+ }
132
+ .zocial.black {
133
+ background: black;
134
+ color: white !important;
135
+ }
136
+ .zocial.black > span:before {
137
+ content: "\00a0";
138
+ color: white;
139
+ }
140
+ .zocial.red {
141
+ background: red;
142
+ color: white !important;
143
+ }
144
+ .zocial.red > span:before {
145
+ content: "\00a0";
146
+ color: white;
147
+ }
148
+ .zocial.green {
149
+ background: green;
150
+ color: white !important;
151
+ }
152
+ .zocial.green > span:before {
153
+ content: "\00a0";
154
+ color: white;
155
+ }
156
+ .zocial.blue {
157
+ background: blue;
158
+ color: white !important;
159
+ }
160
+ .zocial.blue > span:before {
161
+ content: "\00a0";
162
+ color: white;
163
+ }
164
+ .zocial.facebook > span:before {
165
+ content: "f";
166
+ }
167
+ .zocial.github > span:before {
168
+ content: "g";
169
+ }
170
+ .zocial.googleplus > span:before {
171
+ content: "+";
172
+ }
173
+ .zocial.rss > span:before {
174
+ content: "R";
175
+ }
176
+ .zocial.smashingmag > span:before {
177
+ content: "*";
178
+ }
179
+ .zocial.twitter > span:before {
180
+ content: "T";
181
+ }
182
+ .zocial.github {
183
+ color: #050505 !important;
184
+ background: #fbfbfb;
185
+ }
186
+ .zocial.googleplus {
187
+ background: #282626;
188
+ }
189
+ .zocial.googleplus:before {
190
+ content: "";
191
+ display: block;
192
+ height: 0.2em;
193
+ margin-bottom: -0.1em;
194
+ width: 100%;
195
+ position: relative;
196
+ left: 0em;
197
+ top: 0;
198
+ background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #d20e1b), color-stop(25%, #d20e1b), color-stop(25%, #3156e6), color-stop(50%, #3156e6), color-stop(50%, #2aa134), color-stop(75%, #2aa134), color-stop(75%, #ecb01b), color-stop(100%, #ecb01b));
199
+ background: -webkit-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b);
200
+ background: -moz-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b);
201
+ background: -o-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b);
202
+ background: -ms-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b);
203
+ background: linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b);
204
+ -moz-border-radius: 0.2em 0.2em 0 0;
205
+ -webkit-border-radius: 0.2em 0.2em 0 0;
206
+ -o-border-radius: 0.2em 0.2em 0 0;
207
+ -ms-border-radius: 0.2em 0.2em 0 0;
208
+ -khtml-border-radius: 0.2em 0.2em 0 0;
209
+ border-radius: 0.2em 0.2em 0 0;
210
+ border-bottom: 1px solid rgba(0, 0, 0, 0.8);
211
+ -moz-box-shadow: inset 0 0.063em 0 rgba(255, 255, 255, 0.4), inset 0 0 0.063em rgba(255, 255, 255, 0.6), 0 0.063em 0 rgba(255, 255, 255, 0.3);
212
+ -webkit-box-shadow: inset 0 0.063em 0 rgba(255, 255, 255, 0.4), inset 0 0 0.063em rgba(255, 255, 255, 0.6), 0 0.063em 0 rgba(255, 255, 255, 0.3);
213
+ -o-box-shadow: inset 0 0.063em 0 rgba(255, 255, 255, 0.4), inset 0 0 0.063em rgba(255, 255, 255, 0.6), 0 0.063em 0 rgba(255, 255, 255, 0.3);
214
+ box-shadow: inset 0 0.063em 0 rgba(255, 255, 255, 0.4), inset 0 0 0.063em rgba(255, 255, 255, 0.6), 0 0.063em 0 rgba(255, 255, 255, 0.3);
215
+ z-index: 0;
216
+ }
217
+ .zocial.facebook {
218
+ background: #4863ae;
219
+ }
220
+ .zocial.rss {
221
+ background: #ff7f25;
222
+ }
223
+ .zocial.smashingmag {
224
+ background: #ff4f27;
225
+ }
226
+ .zocial.twitter {
227
+ background: #e9f9ff;
228
+ color: #3c6b9c !important;
229
+ }
@@ -0,0 +1,3 @@
1
+ // Zocial
2
+ @import "../../stylesheets/zocial"
3
+ +zocial
@@ -0,0 +1,14 @@
1
+ description "Zocial Lite font"
2
+
3
+ font 'zocial/zocial-lite-regular-webfont.eot'
4
+ font 'zocial/zocial-lite-regular-webfont.svg'
5
+ font 'zocial/zocial-lite-regular-webfont.ttf'
6
+ font 'zocial/zocial-lite-regular-webfont.woff'
7
+
8
+ help %Q{
9
+ If you need help, ask Adam Stacoviak (@adamstac).
10
+ }
11
+
12
+ welcome_message %Q{
13
+ Congrats! You have installed the Zocial Lite font!
14
+ }
@@ -0,0 +1,37 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3
+ <svg xmlns="http://www.w3.org/2000/svg">
4
+ <metadata>
5
+ This is a custom SVG webfont generated by Font Squirrel.
6
+ Copyright : Copyright 2011 Adobe Systems Incorporated All rights reserved
7
+ Designer : Sam Collins
8
+ Foundry : PYRS Fontlab Ltd Made with FontLab
9
+ </metadata>
10
+ <defs>
11
+ <font id="ZocialLiteRegular" horiz-adv-x="512" >
12
+ <font-face units-per-em="2048" ascent="1661" descent="-387" />
13
+ <missing-glyph horiz-adv-x="500" />
14
+ <glyph unicode=" " />
15
+ <glyph unicode="*" horiz-adv-x="2048" d="M0 1253q0 51 33 93.5t84 54.5l403 96q-129 -147 -129 -344q0 -379 518 -580q57 -23 110.5 -50t112 -68t94.5 -95.5t36 -113.5q0 -88 -72 -137.5t-164 -49.5q-119 0 -248 46.5t-215 123.5l-162 -366q115 -63 295 -125q-20 -4 -64 -17.5t-79 -20.5t-66 -7q-51 0 -93 32.5 t-54 84.5l-336 1407q-4 24 -4 36zM858 1159q0 78 71.5 120t155.5 42q100 0 225.5 -36t180.5 -95l125 348q-184 98 -381 129q4 0 92 24.5t146.5 37t87.5 12.5q51 0 93 -33t54 -84l336 -1407q4 -25 4 -37q0 -51 -33 -93t-84 -54l-297 -70q96 143 97 311q0 227 -144.5 374 t-378.5 224q-350 119 -350 287z" />
16
+ <glyph unicode="+" horiz-adv-x="2424" d="M0 -43q0 178 182.5 317.5t440.5 139.5h110q-86 82 -86 176q0 59 33 119q-20 -2 -59 -2q-213 0 -348.5 133t-135.5 327q0 186 168 325.5t383 139.5h635l-141 -102h-201q96 -37 150.5 -139.5t54.5 -227.5q0 -190 -180 -332q-76 -59 -98.5 -94t-22.5 -86q0 -39 55 -98 t111 -100q125 -88 173 -180.5t48 -231.5q0 -184 -168 -320.5t-455 -136.5q-272 0 -460.5 102.5t-188.5 270.5zM229 25q0 -141 120 -240.5t298 -99.5q244 0 353.5 90t109.5 239q0 39 -8 66q-6 23 -14.5 42t-24.5 38.5t-28.5 33t-40.5 33.5l-42 31l-51 36q-37 26 -53 36 q-80 25 -158 24q-184 2 -322.5 -96t-138.5 -233zM365 1169q23 -162 124 -278.5t224 -118.5q121 -4 192.5 106.5t51 272.5t-122 274.5t-224.5 116.5t-194 -104.5t-51 -268.5zM1501 1120v103h410v409h102v-409h412v-103h-412v-411h-102v411h-410z" />
17
+ <glyph unicode="R" horiz-adv-x="2048" d="M0 -32.5q0 112.5 80 192.5t192.5 80t192.5 -80t80 -193q0 -115 -80 -193.5t-192.5 -78.5t-192.5 80t-80 192.5zM0 653v391q367 0 678 -181t492.5 -492.5t181.5 -677.5h-394q0 397 -280 678q-283 282 -678 282zM0 1348v393q416 0 795 -163t653 -437.5t437 -653t163 -794.5 h-393q0 336 -131 643t-353.5 528t-528.5 352.5t-642 131.5z" />
18
+ <glyph unicode="T" horiz-adv-x="2398" d="M8 498q176 -170 432 -170q268 0 455 192q-13 -2 -27 -2l-88 21q-57 27 -57 82q0 61 96 104q-21 -2 -41 -2q-71 0 -132 28q-79 36 -120 117q53 59 164 66q-233 53 -268 237q83 21 120 21h7l20 -2q-90 47 -149 121q-56 69 -56 150q0 6 1 12v18q369 -137 614 -270 q68 -37 180 -146q49 131 90 219t118 194.5t167 164.5q-6 -37 -37 -72q80 74 186 90q-8 -53 -124 -98q12 4 44.5 17.5t54 20.5t50.5 14t49 7q35 0 35 -24q0 -18 -39 -38t-99.5 -37t-66.5 -20q22 2 44 3q162 0 290 -122q145 -138 186 -333q33 -12 84 -12q125 0 197 45 q-59 -139 -260 -156q80 -33 196 -33q49 0 74 4q-99 -107 -272 -106h-12q-59 -240 -243.5 -422t-421.5 -270t-484 -88q-289 0 -539 122t-418 353z" />
19
+ <glyph unicode="f" horiz-adv-x="1673" d="M369 662v391h315v196q0 213 138.5 362.5t334.5 149.5h313v-391h-313q-31 0 -55.5 -33.5t-24.5 -83.5v-200h393v-391h-393v-949h-393v949h-315z" />
20
+ <glyph unicode="g" horiz-adv-x="1923" d="M0 -96q0 -129 127 -221.5t307 -92.5t308 92.5t128 221.5q0 131 -128 223t-308 92q-2 0 -6 -1t-6 -1q-48 46 -48 98t48 109q145 8 245.5 112.5t100.5 247.5q0 57 -14 103q57 10 90 28v236q-99 -66 -223 -66h-15q-94 63 -207 64q-154 0 -262 -106.5t-108 -258.5 q0 -96 49 -178t131 -131q-57 -73 -57 -151q0 -75 53 -154q-94 -43 -149.5 -112.5t-55.5 -153.5zM248 788.5q0 67.5 44 115.5t103 48q61 0 104.5 -48t43.5 -115.5t-43 -115.5t-105 -48q-59 0 -103 48t-44 115.5zM254 -96q0 55 52 93t128 38t129 -38t53 -93q0 -53 -53 -92 t-129 -39t-128 39t-52 92zM932 1472.5q0 69.5 48 117.5t117.5 48t119 -48t49.5 -117.5t-49.5 -118.5t-119 -49t-117.5 49t-48 118.5zM971 147v981h274v-981h-274zM1341 920h113v-582v-2q8 -61 40 -105.5t71 -65t76.5 -32.5t62.5 -14h27q141 0 188 67l4 203q-86 -27 -133 -27 q-10 0 -18 2q-47 7 -56 33l-8 27q0 6 -2 8v488h186v208h-186v191h-252v-191h-113v-208z" />
21
+ <glyph unicode="&#xa0;" />
22
+ <glyph unicode="&#x2000;" horiz-adv-x="880" />
23
+ <glyph unicode="&#x2001;" horiz-adv-x="1761" />
24
+ <glyph unicode="&#x2002;" horiz-adv-x="880" />
25
+ <glyph unicode="&#x2003;" horiz-adv-x="1761" />
26
+ <glyph unicode="&#x2004;" horiz-adv-x="585" />
27
+ <glyph unicode="&#x2005;" horiz-adv-x="440" />
28
+ <glyph unicode="&#x2006;" horiz-adv-x="292" />
29
+ <glyph unicode="&#x2007;" horiz-adv-x="292" />
30
+ <glyph unicode="&#x2008;" horiz-adv-x="219" />
31
+ <glyph unicode="&#x2009;" horiz-adv-x="352" />
32
+ <glyph unicode="&#x200a;" horiz-adv-x="96" />
33
+ <glyph unicode="&#x202f;" horiz-adv-x="352" />
34
+ <glyph unicode="&#x205f;" horiz-adv-x="440" />
35
+ <glyph unicode="&#xe000;" horiz-adv-x="500" d="M0 0v0v0v0v0z" />
36
+ </font>
37
+ </defs></svg>
metadata ADDED
@@ -0,0 +1,76 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: zocial
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ prerelease:
6
+ platform: ruby
7
+ authors:
8
+ - Adam Stacoviak
9
+ - Sam Collins
10
+ autorequire:
11
+ bindir: bin
12
+ cert_chain: []
13
+ date: 2011-09-24 00:00:00.000000000Z
14
+ dependencies:
15
+ - !ruby/object:Gem::Dependency
16
+ name: compass
17
+ requirement: &70222067780580 !ruby/object:Gem::Requirement
18
+ none: false
19
+ requirements:
20
+ - - ! '>='
21
+ - !ruby/object:Gem::Version
22
+ version: 0.11.5
23
+ type: :runtime
24
+ prerelease: false
25
+ version_requirements: *70222067780580
26
+ description: Zocial CSS3 button set and vector icons with @font-face
27
+ email:
28
+ - adam@stacoviak.com
29
+ - sam@eventasaur.us
30
+ executables: []
31
+ extensions: []
32
+ extra_rdoc_files: []
33
+ files:
34
+ - README.mdown
35
+ - lib/zocial.rb
36
+ - stylesheets/_fonts.sass
37
+ - stylesheets/_zocial.sass
38
+ - templates/css/config.rb
39
+ - templates/css/manifest.rb
40
+ - templates/css/zocial-min.css
41
+ - templates/css/zocial.css
42
+ - templates/css/zocial.sass
43
+ - templates/fonts/manifest.rb
44
+ - templates/fonts/zocial/zocial-lite-regular-webfont.eot
45
+ - templates/fonts/zocial/zocial-lite-regular-webfont.svg
46
+ - templates/fonts/zocial/zocial-lite-regular-webfont.ttf
47
+ - templates/fonts/zocial/zocial-lite-regular-webfont.woff
48
+ homepage: https://github.com/adamstac/zocial
49
+ licenses: []
50
+ post_install_message:
51
+ rdoc_options: []
52
+ require_paths:
53
+ - lib
54
+ required_ruby_version: !ruby/object:Gem::Requirement
55
+ none: false
56
+ requirements:
57
+ - - ! '>='
58
+ - !ruby/object:Gem::Version
59
+ version: '0'
60
+ segments:
61
+ - 0
62
+ hash: -1930045921893056838
63
+ required_rubygems_version: !ruby/object:Gem::Requirement
64
+ none: false
65
+ requirements:
66
+ - - ! '>='
67
+ - !ruby/object:Gem::Version
68
+ version: 1.3.6
69
+ requirements: []
70
+ rubyforge_project:
71
+ rubygems_version: 1.8.10
72
+ signing_key:
73
+ specification_version: 3
74
+ summary: Zocial CSS3 button set and vector icons with @font-face as a Sass mixin and
75
+ usable as a Compass extension
76
+ test_files: []