├── .gitignore ├── .rvmrc ├── CHANGELOG.mdown ├── Gemfile ├── Gemfile.lock ├── README.mdown ├── Rakefile ├── lib └── zocial.rb ├── stylesheets ├── _zocial.sass └── partials │ ├── _adjustments.sass │ ├── _base.sass │ ├── _colors.sass │ ├── _fonts.sass │ └── _mixins.sass ├── templates ├── css │ ├── config.rb │ ├── manifest.rb │ ├── zocial-min.css │ ├── zocial.css │ └── zocial.sass └── fonts │ ├── manifest.rb │ └── zocial │ ├── zocial-regular-webfont.eot │ ├── zocial-regular-webfont.svg │ ├── zocial-regular-webfont.ttf │ └── zocial-regular-webfont.woff ├── test ├── README.mdown ├── Rakefile ├── config.rb ├── config.ru ├── log │ └── compass-stats-20110311-000950.log ├── public │ ├── fonts │ │ └── zocial │ │ │ ├── zocial-regular-webfont.eot │ │ │ ├── zocial-regular-webfont.svg │ │ │ ├── zocial-regular-webfont.ttf │ │ │ └── zocial-regular-webfont.woff │ ├── images │ │ └── zocial-lite-preview.jpg │ └── stylesheets │ │ ├── stylesheet.css │ │ └── zocial.css ├── sass │ ├── stylesheet.sass │ └── zocial.sass ├── tmp │ └── restart.txt └── views │ ├── _layout.haml │ ├── index.haml │ └── layouts │ └── application.haml └── zocial.gemspec /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | .DS_Store 3 | *.gem 4 | -------------------------------------------------------------------------------- /.rvmrc: -------------------------------------------------------------------------------- 1 | rvm use ruby-1.9.2@zocial --create -------------------------------------------------------------------------------- /CHANGELOG.mdown: -------------------------------------------------------------------------------- 1 | # 0.0.3 2 | 3 | * Updated the $zocial-icon-default to "\0020" which an empty space 4 | * Updated to add the FULL Zocial font. That's right, the FULL Zocial font is now open sourced and Zocial "lite" is now deprecated and will no longer be supported. 5 | * Cleaned up and optimized the code base, mainly interesting to developers tracking the codebase 6 | * Updated tests 7 | * Updated static CSS templates 8 | 9 | # 0.0.2 10 | 11 | * Massive re-write of all the buttons styles to break them all out to a mixin 12 | * Architected the workflow of including those mixins 13 | 14 | # 0.0.1 15 | 16 | * The first version was more or less a post to Sass using Compass mixins with some other nice features such as fonts and better overall organization of the original code base in Sass. -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source :rubygems 2 | 3 | gem 'rake' 4 | gem 'compass', '~> 0.11.5' 5 | 6 | group :development do 7 | gem 'heroku' 8 | end 9 | 10 | group :serve do 11 | gem 'serve', '~> 1.5.0' 12 | gem 'haml', '~> 3.1.2' 13 | gem 'css_parser', '~> 1.1.9' 14 | gem 'maruku', '~> 0.6.0' 15 | end -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: http://rubygems.org/ 3 | specs: 4 | activesupport (3.1.0) 5 | multi_json (~> 1.0) 6 | addressable (2.2.6) 7 | chunky_png (1.2.1) 8 | compass (0.11.5) 9 | chunky_png (~> 1.2) 10 | fssm (>= 0.2.7) 11 | sass (~> 3.1) 12 | css_parser (1.1.9) 13 | fssm (0.2.7) 14 | haml (3.1.2) 15 | heroku (2.7.0) 16 | launchy (>= 0.3.2) 17 | rest-client (~> 1.6.1) 18 | rubyzip 19 | term-ansicolor (~> 1.0.5) 20 | i18n (0.6.0) 21 | launchy (2.0.5) 22 | addressable (~> 2.2.6) 23 | maruku (0.6.0) 24 | syntax (>= 1.0.0) 25 | mime-types (1.16) 26 | multi_json (1.0.3) 27 | rack (1.3.2) 28 | rack-test (0.6.1) 29 | rack (>= 1.0) 30 | rake (0.9.2) 31 | rest-client (1.6.7) 32 | mime-types (>= 1.16) 33 | rubyzip (0.9.4) 34 | sass (3.1.7) 35 | serve (1.5.1) 36 | activesupport (~> 3.0) 37 | i18n 38 | rack (~> 1.2) 39 | rack-test (~> 0.5) 40 | tilt (~> 1.3) 41 | tzinfo 42 | syntax (1.0.0) 43 | term-ansicolor (1.0.6) 44 | tilt (1.3.3) 45 | tzinfo (0.3.29) 46 | 47 | PLATFORMS 48 | ruby 49 | 50 | DEPENDENCIES 51 | compass (~> 0.11.5) 52 | css_parser (~> 1.1.9) 53 | haml (~> 3.1.2) 54 | heroku 55 | maruku (~> 0.6.0) 56 | rake 57 | serve (~> 1.5.0) 58 | -------------------------------------------------------------------------------- /README.mdown: -------------------------------------------------------------------------------- 1 | # Zocial, a CSS3 social buttons Sass framework. 2 | 3 | ## Zocial is a CSS3 social buttons set and vector icons with @font-face as a Sass mixin and usable as a Compass extension. 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 | This project includes buttons for: 8 | 9 | * Twitter 10 | * Facebook 11 | * Google+ 12 | * GitHub 13 | * RSS 14 | * Smashing Magazine 15 | * and MANY more ... 16 | 17 | ## Installation 18 | 19 | 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/). 20 | 21 | (sudo) gem install zocial 22 | 23 | Next, we need to require Zocial in the Compass config file of your project. 24 | 25 | require 'zocial' 26 | 27 | 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. 28 | 29 | # execute at the root of your project 30 | compass install zocial/fonts 31 | 32 | You should see something like this: 33 | 34 | -> % compass install zocial/fonts 35 | directory fonts/zocial/ 36 | create fonts/zocial/zocial-regular-webfont.eot 37 | create fonts/zocial/zocial-regular-webfont.svg 38 | create fonts/zocial/zocial-regular-webfont.ttf 39 | create fonts/zocial/zocial-regular-webfont.woff 40 | 41 | 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. 42 | 43 | ## Usage 44 | 45 | Zocial has a few defaults in place that you can override for your project. 46 | 47 | // Defaults 48 | $zocial-font-size: 1.8em 49 | $zocial-font-weight: bold 50 | $zocial-icon-font: zocial 51 | $zocial-icon-default: "\0020" 52 | $zocial-text-font: helvetica 53 | 54 | `$zocial-font-size` is set using ems and will vary in size based on your default font size. 55 | 56 | `$zocial-icon-font` is set to "zocial" by default. In a previous version, there was a "lite" version of the font offered as open source, but now the full Zocial font is now included as open source and you can use all the buttons zocial has to offer. 57 | 58 | `$zocial-icon-default` is set to an empty space by default. Feel free to update this if you plan to use a default button and want to set a default icon. 59 | 60 | `$zocial-text-font` is set to "helvetica" by default, but can set to [any of the fonts](https://github.com/adamstac/zocial/blob/master/stylesheets/partials/_fonts.sass) defined. In a future release, we plan to work on adding better options for using other fonts. Please be patient. 61 | 62 | ### Mixins 63 | 64 | Once you have Zocial's settings in place, it's time to mixin zocial. Zocial has two mixins, one for the free set (zocial-lite) and one for the full set (zocial-full) that can [purchased here](http://zocial.smcllns.com/). 65 | 66 | To use the free set that comes with this project, use this mixin: 67 | 68 | // SCSS 69 | @include zocial; 70 | 71 | // Sass 72 | +zocial 73 | 74 | ## HTML Markup 75 | 76 | 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 `` element. As you can see, each Zocial button gets the required `.zocial` class name plus the button name. 77 | 78 | 81 | 82 | Sign in with Twitter 83 | 84 | 85 | %button.zocial.twitter 86 | %span Sign in with Twitter 87 | %a(href="#" class="zocial twitter") 88 | %span Sign in with Twitter 89 | 90 | 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. 91 | 92 | 95 | 96 | Sign in with Twitter 97 | 98 | 99 | %button.zocial.icon.twitter 100 | %span Sign in with Twitter 101 | %a(href="#" class="zocial icon twitter") 102 | %span Sign in with Twitter 103 | 104 | ## Buttons classes 105 | 106 | The examples shown above illustrate how to use the Twitter Zocial button. Below are the full class options for the named buttons. 107 | 108 | * .twitter 109 | * .facebook 110 | * .googleplus 111 | * .github 112 | * .rss 113 | * .smashingmag 114 | 115 | ## Font Family Choices 116 | 117 | **Icon font:** 118 | 119 | * zocial 120 | 121 | **Text font:** 122 | 123 | * helvetica 124 | * arial (alias to helvetica) 125 | * lucida-grande 126 | * lucida (alias to lucida-grande) 127 | * tahoma 128 | * times 129 | * georgia 130 | 131 | ## License 132 | 133 | Copyright (c) 2011 [Sam Collins](http://smcllns.com/) ([@smcllns](http://twitter.com/smcllns)) and [Adam Stacoviak](http://adamstacoviak.com/) ([@adamstac](http://twitter.com/adamstac)) 134 | 135 | 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: 136 | 137 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 138 | 139 | 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. -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require './lib/zocial' 2 | 3 | namespace :sass do 4 | 5 | desc "Converts the Sass to SCSS" 6 | task :convert do 7 | puts "*** Converting Sass to SCSS ***" 8 | system "sass-convert stylesheets/*.sass stylesheets/*.scss" 9 | end 10 | 11 | end 12 | 13 | namespace :gem do 14 | 15 | desc "Build the gem" 16 | task :build do 17 | system "gem build *.gemspec" 18 | end 19 | 20 | desc "Build and release the gem" 21 | task :release => :build do 22 | system "gem push zocial-#{Zocial::VERSION}.gem" 23 | end 24 | 25 | end -------------------------------------------------------------------------------- /lib/zocial.rb: -------------------------------------------------------------------------------- 1 | require 'compass' 2 | Compass::Frameworks.register("zocial", :path => "#{File.dirname(__FILE__)}/..") 3 | 4 | module Zocial 5 | 6 | VERSION = "0.0.3" 7 | DATE = "2011-11-08" 8 | 9 | end -------------------------------------------------------------------------------- /stylesheets/_zocial.sass: -------------------------------------------------------------------------------- 1 | // Hello Compass. 2 | @import "compass" 3 | 4 | // Default variables 5 | $zocial-font-size: 1.8em !default 6 | $zocial-font-weight: bold !default 7 | $zocial-icon-font: zocial !default 8 | $zocial-icon-default: "\0020" !default 9 | $zocial-text-font: helvetica !default 10 | 11 | // Zocial is magic! 12 | @import "partials/fonts" 13 | @import "partials/base" 14 | @import "partials/adjustments" 15 | @import "partials/colors" 16 | @import "partials/mixins" -------------------------------------------------------------------------------- /stylesheets/partials/_adjustments.sass: -------------------------------------------------------------------------------- 1 | // Adjustments for light background buttons 2 | // 3 | // Lite 4 | // &.github, &.twitter, &.white 5 | // 6 | // Full 7 | // &.cloudapp, &.dropbox, &.gmail, &.instapaper, 8 | // &.openid, &.plancast, &.posterous, &.wikipedia 9 | .adjustment-1 10 | +box-shadow(inset 0 0.063em 0 rgba(#fff, 0.4), inset 0 0 0.063em rgba(#fff, 0.6), 0 0.063em 0 rgba(#fff, 0.3)) 11 | +text-shadow(0 1px 0 rgba(#fff, 0.8)) 12 | 13 | // Lite 14 | // &.github:hover > span, &.github:focus > span 15 | // &.twitter:focus > span 16 | // 17 | // Full 18 | // &.plancast:hover > span, &.plancast:focus > span, 19 | // &.posterous:hover > span, &.posterous:focus > span, 20 | // &.dropbox:hover > span, &.dropbox:focus > span, 21 | // &.openid:hover > span, &.openid:focus > span, 22 | // &.instapaper:hover > span, &.instapaper:focus > span, 23 | // &.wikipedia:hover > span, &.wikipedia:focus > span, 24 | // &.gmail:hover > span, &.gmail:focus > span 25 | .adjustment-2 26 | +background(linear-gradient(top, rgba(#fff, 0.5), rgba(#fff, 0.2) 49%, rgba(#000, 0.05) 51%, rgba(#000, 0.15))) 27 | 28 | // Lite 29 | // &.twitter:active > span, &.github:active > span 30 | // 31 | // Full 32 | // &.dropbox:active > span, &.gmail:active > span, &.instapaper:active > span, 33 | // &.openid:active > span, &.plancast:active > span, &.posterous:active > span, 34 | // &.wikipedia:active > span 35 | .adjustment-3 36 | +background(linear-gradient(bottom, rgba(#fff, 0), rgba(#fff, 0) 30%, rgba(#000, 0) 50%, rgba(#000, 0.1))) 37 | -------------------------------------------------------------------------------- /stylesheets/partials/_base.sass: -------------------------------------------------------------------------------- 1 | // Zocial base button architecture 2 | =zocial-base 3 | .zocial, .zocial > span 4 | +border-radius(0.2em) 5 | position: relative 6 | 7 | // Button Structure 8 | .zocial 9 | +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)) 10 | +font-family($zocial-text-font) 11 | +text-shadow(0 1px 0 rgba(#000,.5)) 12 | position: relative 13 | border: 1px solid rgba(#000,.2) 14 | border-bottom-color: rgba(#000,.4) 15 | color: #fff !important 16 | cursor: pointer 17 | display: inline-block 18 | font-size: $zocial-font-size 19 | outline: none 20 | padding: 0 21 | text-decoration: none !important 22 | 23 | // Tweak to styles for -moz 24 | button::-moz-focus-inner 25 | border: 0 26 | padding: 0 27 | 28 | // Add a class of "icon" to display as standalone icons instead 29 | &.icon 30 | width: 1.85em 31 | overflow: hidden 32 | 33 | & > span 34 | position: relative 35 | display: inline-block 36 | font-size: 80% 37 | font-weight: $zocial-font-weight 38 | line-height: 2em 39 | padding-right: 0.825em 40 | white-space: nowrap 41 | &:before 42 | +box-shadow(0.075em 0 0 rgba(#fff,.25)) 43 | +font-family($zocial-icon-font) 44 | border-right: 0.075em solid rgba(#000,.1) 45 | display: block 46 | float: left 47 | font-size: 125% 48 | font-style: normal 49 | font-weight: normal 50 | margin: 0.0675em 0.5em 0 0 51 | text-align: center 52 | width: 1.75em 53 | 54 | // Gradient default 55 | & > span 56 | +background(linear-gradient(top, rgba(#fff,.1), rgba(#fff,.05) 49%, rgba(#000,.05) 51%, rgba(#000,.1))) 57 | 58 | // Gradient hover and focus 59 | &:hover > span, &:focus > span 60 | +background(linear-gradient(top, rgba(#fff,.15), rgba(#fff,.15) 49%, rgba(#000,.1) 51%, rgba(#000,.15))) 61 | 62 | // Gradient active/clicked 63 | &:active > span 64 | +background(linear-gradient(bottom, rgba(#fff,.1), rgba(#fff, 0) 30%, rgba(#000, 0) 50%, rgba(#000,.1))) 65 | 66 | // Default button styles 67 | & > span:before 68 | content: $zocial-icon-default 69 | 70 | // Include zocial-base 71 | +zocial-base 72 | -------------------------------------------------------------------------------- /stylesheets/partials/_colors.sass: -------------------------------------------------------------------------------- 1 | // Include all colors 2 | =zocial-colors 3 | +zocial-white 4 | +zocial-black 5 | +zocial-red 6 | +zocial-green 7 | +zocial-blue 8 | 9 | // Colors 10 | =zocial-white 11 | .zocial.white 12 | @extend .adjustment-1 13 | background: #fff 14 | color: #000 !important 15 | & > span:before 16 | content: $zocial-icon-default 17 | color: #000 18 | 19 | =zocial-black 20 | .zocial.black 21 | background: #000 22 | color: #fff !important 23 | & > span:before 24 | content: $zocial-icon-default 25 | color: #fff 26 | 27 | =zocial-red 28 | .zocial.red 29 | background: red 30 | color: #fff !important 31 | & > span:before 32 | content: $zocial-icon-default 33 | color: #fff 34 | 35 | =zocial-green 36 | .zocial.green 37 | background: green 38 | color: #fff !important 39 | & > span:before 40 | content: $zocial-icon-default 41 | color: #fff 42 | 43 | =zocial-blue 44 | .zocial.blue 45 | background: blue 46 | color: #fff !important 47 | & > span:before 48 | content: $zocial-icon-default 49 | color: #fff -------------------------------------------------------------------------------- /stylesheets/partials/_fonts.sass: -------------------------------------------------------------------------------- 1 | // Font family mixin 2 | =font-family($zocial-text-font) 3 | @extend .ff-#{$zocial-text-font} 4 | 5 | // Example: 6 | // 7 | // body > header 8 | // +font-family(helvetica) 9 | // Options: zocial, zocial-lite, helvetica, arial (alias to helvetica), lucida, lucida-grande (alias to lucida), times, georgia 10 | 11 | // Zocial full 12 | @if $zocial-icon-font == "zocial" 13 | +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") 14 | .ff-zocial 15 | font-family: "Zocial", sans-serif 16 | 17 | // Zocial lite 18 | @if $zocial-icon-font == "zocial-lite" 19 | +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") 20 | .ff-zocial-lite 21 | font-family: "Zocial-Lite", sans-serif 22 | 23 | // Common font stack classes 24 | @if $zocial-text-font == "helvetica" 25 | .ff-helvetica 26 | font-family: Clean, "Helvetica-Neue", Helvetica, Arial, sans-serif 27 | .ff-arial 28 | @extend .ff-helvetica 29 | 30 | @if $zocial-text-font == "lucida" 31 | .ff-lucida-grande 32 | font-family: "Lucida Grande", Tahoma, sans-serif 33 | .ff-lucida 34 | @extend .ff-lucida-grande 35 | 36 | @if $zocial-text-font == "tahoma" 37 | .ff-tahoma 38 | font-family: Tahoma, "Lucida Grande", sans-serif 39 | 40 | @if $zocial-text-font == "times" 41 | .ff-times 42 | font-family: Times, "Times New Roman", serif 43 | 44 | @if $zocial-text-font == "georgia" 45 | .ff-georgia 46 | font-family: Georgia, Times, "Times New Roman", serif 47 | -------------------------------------------------------------------------------- /stylesheets/partials/_mixins.sass: -------------------------------------------------------------------------------- 1 | // Include all of zocial 2 | =zocial 3 | 4 | // Zocial, Sorted A-Z 5 | +zocial-amazon 6 | +zocial-android 7 | +zocial-aol 8 | +zocial-appstore 9 | +zocial-chrome 10 | +zocial-cloudapp 11 | +zocial-creativecommons 12 | +zocial-disqus 13 | +zocial-dribbble 14 | +zocial-dropbox 15 | +zocial-eventasaurus 16 | +zocial-eventbrite 17 | +zocial-evernote 18 | +zocial-facebook 19 | +zocial-flattr 20 | +zocial-forrst 21 | +zocial-foursquare 22 | +zocial-github 23 | +zocial-gmail 24 | +zocial-google 25 | +zocial-googleplus 26 | +zocial-gowalla 27 | +zocial-guest 28 | +zocial-html5 29 | +zocial-ie 30 | +zocial-instapaper 31 | +zocial-intensedebate 32 | +zocial-itunes 33 | +zocial-lastfm 34 | +zocial-linkedin 35 | +zocial-meetup 36 | +zocial-openid 37 | +zocial-paypal 38 | +zocial-plancast 39 | +zocial-posterous 40 | +zocial-rss 41 | +zocial-scribd 42 | +zocial-skype 43 | +zocial-smashingmag 44 | +zocial-songkick 45 | +zocial-soundcloud 46 | +zocial-spotify 47 | +zocial-tumblr 48 | +zocial-twitter 49 | +zocial-vimeo 50 | +zocial-wikipedia 51 | +zocial-wordpress 52 | +zocial-yahoo 53 | +zocial-yelp 54 | +zocial-youtube 55 | 56 | // Zocial full (paid), Sorted A-Z 57 | =zocial-amazon 58 | .zocial.amazon 59 | background: #FFAD1D 60 | color: #030037 !important 61 | text-shadow: 0 1px 0 rgba(#fff,.5) 62 | & > span:before 63 | content: "a" 64 | 65 | =zocial-android 66 | .zocial.android 67 | background: #A4C639 68 | & > span:before 69 | content: "&" 70 | 71 | =zocial-aol 72 | .zocial.aol 73 | background: #FF0000 74 | & > span:before 75 | content: "\"" 76 | 77 | =zocial-appstore 78 | .zocial.appstore 79 | background: #007DCB !important 80 | & > span:before 81 | content: "^" 82 | 83 | =zocial-chrome 84 | .zocial.chrome 85 | background: #006CD4 86 | & > span:before 87 | content: "[" 88 | 89 | =zocial-cloudapp 90 | .zocial.cloudapp 91 | @extend .adjustment-1 92 | background: #fff 93 | color: #312c2a !important 94 | & > span:before 95 | content: "c" 96 | 97 | =zocial-creativecommons 98 | .zocial.creativecommons 99 | background: #000 100 | & > span:before 101 | content: "C" 102 | 103 | =zocial-disqus 104 | .zocial.disqus 105 | background: #216892 106 | & > span:before 107 | content: "Q" 108 | 109 | =zocial-dribbble 110 | .zocial.dribbble 111 | background: #ea4c89 112 | & > span:before 113 | content: "D" 114 | 115 | =zocial-dropbox 116 | .zocial.dropbox 117 | @extend .adjustment-1 118 | background: #f5f5f5 119 | color: #312c2a !important 120 | &:hover > span, &:focus > span 121 | @extend .adjustment-2 122 | &:active > span 123 | @extend .adjustment-3 124 | & > span:before 125 | content: "d" 126 | color: #4EA4E3 127 | 128 | =zocial-eventasaurus 129 | .zocial.eventasaurus 130 | background: #8CCC33 131 | & > span:before 132 | content: "v" 133 | 134 | =zocial-eventbrite 135 | .zocial.eventbrite 136 | background: #FF5616 137 | & > span:before 138 | content: "|" 139 | 140 | =zocial-evernote 141 | .zocial.evernote 142 | background: #6BB130 143 | color: #fff !important 144 | & > span:before 145 | content: "E" 146 | 147 | =zocial-facebook 148 | .zocial.facebook 149 | background: #4863AE 150 | &> span:before 151 | content: "f" 152 | 153 | =zocial-flattr 154 | .zocial.flattr 155 | background: #8ABA42 156 | & > span:before 157 | content: "%" 158 | 159 | =zocial-forrst 160 | .zocial.forrst 161 | background: #1E360D 162 | & > span:before 163 | content: ":" 164 | color: #50894F 165 | 166 | =zocial-foursquare 167 | .zocial.foursquare 168 | background: #44A8E0 169 | & > span:before 170 | content: "4" 171 | 172 | =zocial-github 173 | .zocial.github 174 | @extend .adjustment-1 175 | color: #050505 !important 176 | background: #FBFBFB 177 | &:hover > span, &:focus > span 178 | @extend .adjustment-2 179 | &:active > span 180 | @extend .adjustment-3 181 | & > span:before 182 | content: "g" 183 | 184 | =zocial-gmail 185 | .zocial.gmail 186 | @extend .adjustment-1 187 | background: #efefef 188 | color: #222 !important 189 | &:hover > span, &:focus > span 190 | @extend .adjustment-2 191 | &:active > span 192 | @extend .adjustment-3 193 | & > span:before 194 | content: "m" 195 | color: #ff0000 196 | 197 | =zocial-google 198 | .zocial.google 199 | background: #4E6CF7 200 | & > span:before 201 | content: "G" 202 | 203 | =zocial-googleplus 204 | .zocial.googleplus 205 | background: #282626 206 | &:before 207 | content: "" 208 | display: block 209 | height: 0.2em 210 | margin-bottom: -0.1em 211 | width: 100% 212 | position: relative 213 | left: 0em 214 | top: 0 215 | +background(linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b)) 216 | +border-radius(0.2em 0.2em 0 0) 217 | border-bottom: 1px solid rgba(#000,.8) 218 | +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)) 219 | z-index: 0 220 | & > span:before 221 | content: "+" 222 | 223 | =zocial-gowalla 224 | .zocial.gowalla 225 | background: #FF720A 226 | & > span:before 227 | content: "@" 228 | 229 | =zocial-guest 230 | .zocial.guest 231 | background: #1B4D6D 232 | & > span:before 233 | content: "?" 234 | 235 | =zocial-html5 236 | .zocial.html5 237 | background: #FF3617 238 | & > span:before 239 | content: "5" 240 | 241 | =zocial-ie 242 | .zocial.ie 243 | background: #00A1D9 244 | & > span:before 245 | content: "6" 246 | 247 | =zocial-instapaper 248 | .zocial.instapaper 249 | @extend .adjustment-1 250 | color: #222 !important 251 | background: #eee 252 | &:hover > span, &:focus > span 253 | @extend .adjustment-2 254 | &:active > span 255 | @extend .adjustment-3 256 | & > span:before 257 | content: "I" 258 | 259 | =zocial-intensedebate 260 | .zocial.intensedebate 261 | background: #0099E1 262 | & > span:before 263 | content: "{" 264 | 265 | =zocial-itunes 266 | .zocial.itunes 267 | background: #222 268 | & > span:before 269 | content: "A" 270 | 271 | =zocial-lastfm 272 | .zocial.lastfm 273 | background: #dc1a23 274 | & > span:before 275 | content: "l" 276 | 277 | =zocial-linkedin 278 | .zocial.linkedin 279 | background: #0083A8 280 | & > span:before 281 | content: "L" 282 | 283 | =zocial-meetup 284 | .zocial.meetup 285 | background: #FF0026 286 | & > span:before 287 | content: "M" 288 | 289 | =zocial-openid 290 | .zocial.openid 291 | @extend .adjustment-1 292 | background: #f5f5f5 293 | color: #333 !important 294 | &:hover > span, &:focus > span 295 | @extend .adjustment-2 296 | &:active > span 297 | @extend .adjustment-3 298 | & > span:before 299 | content: "o" 300 | color: #FF921D 301 | 302 | =zocial-paypal 303 | .zocial.paypal 304 | background: #FF921D 305 | color: #032751 !important 306 | +text-shadow(0 1px 0 rgba(#fff,.5)) 307 | & > span:before 308 | content: "$" 309 | 310 | =zocial-plancast 311 | .zocial.plancast 312 | @extend .adjustment-1 313 | background: #E7EBED 314 | color: #333 !important 315 | &:hover > span, &:focus > span 316 | @extend .adjustment-2 317 | &:active > span 318 | @extend .adjustment-3 319 | & > span:before 320 | content: "P" 321 | 322 | =zocial-posterous 323 | .zocial.posterous 324 | @extend .adjustment-1 325 | background: #FFD959 326 | color: #BC7134 !important 327 | &:hover > span, &:focus > span 328 | @extend .adjustment-2 329 | &:active > span 330 | @extend .adjustment-3 331 | & > span:before 332 | content: "~" 333 | 334 | =zocial-rss 335 | .zocial.rss 336 | background: #FF7F25 337 | & > span:before 338 | content: "R" 339 | 340 | =zocial-scribd 341 | .zocial.scribd 342 | background: #231C1A 343 | & > span:before 344 | content: "}" 345 | color: #00D5EA !important 346 | 347 | =zocial-skype 348 | .zocial.skype 349 | background: #00A2ED 350 | & > span:before 351 | content: "S" 352 | 353 | =zocial-smashingmag 354 | .zocial.smashingmag 355 | background: #FF4F27 356 | & > span:before 357 | content: "*" 358 | 359 | =zocial-songkick 360 | .zocial.songkick 361 | background: #FF0050 362 | & > span:before 363 | content: "k" 364 | 365 | =zocial-soundcloud 366 | .zocial.soundcloud 367 | background: #FF4500 368 | & > span:before 369 | content: "s" 370 | 371 | =zocial-spotify 372 | .zocial.spotify 373 | background: #60AF00 374 | & > span:before 375 | content: "=zocial-" 376 | 377 | =zocial-tumblr 378 | .zocial.tumblr 379 | background: #374a61 380 | & > span:before 381 | content: "t" 382 | 383 | =zocial-twitter 384 | .zocial.twitter 385 | @extend .adjustment-1 386 | background: #E9F9FF 387 | color: #3C6B9C !important 388 | &:focus > span 389 | @extend .adjustment-2 390 | &:active > span 391 | @extend .adjustment-3 392 | & > span:before 393 | content: "T" 394 | 395 | =zocial-vimeo 396 | .zocial.vimeo 397 | background: #00A2CD 398 | & > span:before 399 | content: "V" 400 | 401 | =zocial-wikipedia 402 | .zocial.wikipedia 403 | @extend .adjustment-1 404 | background: #fff 405 | color: #000 !important 406 | &:hover > span, &:focus > span 407 | @extend .adjustment-2 408 | &:active > span 409 | @extend .adjustment-3 410 | & > span:before 411 | content: "," 412 | 413 | =zocial-wordpress 414 | .zocial.wordpress 415 | background: #464646 416 | & > span:before 417 | content: "w" 418 | 419 | =zocial-yahoo 420 | .zocial.yahoo 421 | background: #A200C2 422 | & > span:before 423 | content: "Y" 424 | 425 | =zocial-yelp 426 | .zocial.yelp 427 | background: #E60010 428 | & > span:before 429 | content: "y" 430 | 431 | =zocial-youtube 432 | .zocial.youtube 433 | background: #FF0000 434 | & > span:before 435 | content: "U" 436 | -------------------------------------------------------------------------------- /templates/css/config.rb: -------------------------------------------------------------------------------- 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/ -------------------------------------------------------------------------------- /templates/css/manifest.rb: -------------------------------------------------------------------------------- 1 | description "Zocial CSS" 2 | 3 | stylesheet 'zocial.css' 4 | stylesheet 'zocial-min.css' 5 | 6 | help %Q{ 7 | If you need help, ask Adam Stacoviak (@adamstac). 8 | } 9 | 10 | welcome_message %Q{ 11 | Welcome. You have installed Zocial's CSS. 12 | } -------------------------------------------------------------------------------- /templates/css/zocial-min.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:"Zocial";src:url('/fonts/zocial/zocial-regular-webfont.eot');src:url('/fonts/zocial/zocial-regular-webfont.eot?iefix') format('eot'),url('/fonts/zocial/zocial-regular-webfont.woff') format('woff'), url('/fonts/zocial/zocial-regular-webfont.ttf') format('truetype'), url('/fonts/zocial/zocial-regular-webfont.svg') format('svg')}.ff-zocial,.zocial > span:before{font-family:"Zocial",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 > span:before{content:"\0020"}.adjustment-1,.zocial.cloudapp,.zocial.dropbox,.zocial.github,.zocial.gmail,.zocial.instapaper,.zocial.openid,.zocial.plancast,.zocial.posterous,.zocial.twitter,.zocial.wikipedia{-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(255,255,255,0.8)}.adjustment-2,.zocial.dropbox:hover > span,.zocial.dropbox:focus > span,.zocial.github:hover > span,.zocial.github:focus > span,.zocial.gmail:hover > span,.zocial.gmail:focus > span,.zocial.instapaper:hover > span,.zocial.instapaper:focus > span,.zocial.openid:hover > span,.zocial.openid:focus > span,.zocial.plancast:hover > span,.zocial.plancast:focus > span,.zocial.posterous:hover > span,.zocial.posterous:focus > span,.zocial.twitter:focus > span,.zocial.wikipedia:hover > span,.zocial.wikipedia: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))}.adjustment-3,.zocial.dropbox:active > span,.zocial.github:active > span,.zocial.gmail:active > span,.zocial.instapaper:active > span,.zocial.openid:active > span,.zocial.plancast:active > span,.zocial.posterous:active > span,.zocial.twitter:active > span,.zocial.wikipedia: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.amazon{background:#ffad1d;color:#030037 !important;text-shadow:0 1px 0 rgba(255,255,255,0.5)}.zocial.amazon > span:before{content:"a"}.zocial.android{background:#a4c639}.zocial.android > span:before{content:"&"}.zocial.aol{background:red}.zocial.aol > span:before{content:'"'}.zocial.appstore{background:#007dcb !important}.zocial.appstore > span:before{content:"^"}.zocial.chrome{background:#006cd4}.zocial.chrome > span:before{content:"["}.zocial.cloudapp{background:#fff;color:#312c2a !important}.zocial.cloudapp > span:before{content:"c"}.zocial.creativecommons{background:#000}.zocial.creativecommons > span:before{content:"C"}.zocial.disqus{background:#216892}.zocial.disqus > span:before{content:"Q"}.zocial.dribbble{background:#ea4c89}.zocial.dribbble > span:before{content:"D"}.zocial.dropbox{background:#f5f5f5;color:#312c2a !important}.zocial.dropbox > span:before{content:"d";color:#4ea4e3}.zocial.eventasaurus{background:#8ccc33}.zocial.eventasaurus > span:before{content:"v"}.zocial.eventbrite{background:#ff5616}.zocial.eventbrite > span:before{content:"|"}.zocial.evernote{background:#6bb130;color:#fff !important}.zocial.evernote > span:before{content:"E"}.zocial.facebook{background:#4863ae}.zocial.facebook > span:before{content:"f"}.zocial.flattr{background:#8aba42}.zocial.flattr > span:before{content:"%"}.zocial.forrst{background:#1e360d}.zocial.forrst > span:before{content:":";color:#50894f}.zocial.foursquare{background:#44a8e0}.zocial.foursquare > span:before{content:"4"}.zocial.github{color:#050505 !important;background:#fbfbfb}.zocial.github > span:before{content:"g"}.zocial.gmail{background:#efefef;color:#222 !important}.zocial.gmail > span:before{content:"m";color:red}.zocial.google{background:#4e6cf7}.zocial.google > span:before{content:"G"}.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.googleplus > span:before{content:"+"}.zocial.gowalla{background:#ff720a}.zocial.gowalla > span:before{content:"@"}.zocial.guest{background:#1b4d6d}.zocial.guest > span:before{content:"?"}.zocial.html5{background:#ff3617}.zocial.html5 > span:before{content:"5"}.zocial.ie{background:#00a1d9}.zocial.ie > span:before{content:"6"}.zocial.instapaper{color:#222 !important;background:#eee}.zocial.instapaper > span:before{content:"I"}.zocial.intensedebate{background:#0099e1}.zocial.intensedebate > span:before{content:"{"}.zocial.itunes{background:#222}.zocial.itunes > span:before{content:"A"}.zocial.lastfm{background:#dc1a23}.zocial.lastfm > span:before{content:"l"}.zocial.linkedin{background:#0083a8}.zocial.linkedin > span:before{content:"L"}.zocial.meetup{background:#ff0026}.zocial.meetup > span:before{content:"M"}.zocial.openid{background:#f5f5f5;color:#333 !important}.zocial.openid > span:before{content:"o";color:#ff921d}.zocial.paypal{background:#ff921d;color:#032751 !important;text-shadow:0 1px 0 rgba(255,255,255,0.5)}.zocial.paypal > span:before{content:"$"}.zocial.plancast{background:#e7ebed;color:#333 !important}.zocial.plancast > span:before{content:"P"}.zocial.posterous{background:#ffd959;color:#bc7134 !important}.zocial.posterous > span:before{content:"~"}.zocial.rss{background:#ff7f25}.zocial.rss > span:before{content:"R"}.zocial.scribd{background:#231c1a}.zocial.scribd > span:before{content:"}";color:#00d5ea !important}.zocial.skype{background:#00a2ed}.zocial.skype > span:before{content:"S"}.zocial.smashingmag{background:#ff4f27}.zocial.smashingmag > span:before{content:"*"}.zocial.songkick{background:#ff0050}.zocial.songkick > span:before{content:"k"}.zocial.soundcloud{background:#ff4500}.zocial.soundcloud > span:before{content:"s"}.zocial.spotify{background:#60af00}.zocial.spotify > span:before{content:"=zocial-"}.zocial.tumblr{background:#374a61}.zocial.tumblr > span:before{content:"t"}.zocial.twitter{background:#e9f9ff;color:#3c6b9c !important}.zocial.twitter > span:before{content:"T"}.zocial.vimeo{background:#00a2cd}.zocial.vimeo > span:before{content:"V"}.zocial.wikipedia{background:#fff;color:#000 !important}.zocial.wikipedia > span:before{content:","}.zocial.wordpress{background:#464646}.zocial.wordpress > span:before{content:"w"}.zocial.yahoo{background:#a200c2}.zocial.yahoo > span:before{content:"Y"}.zocial.yelp{background:#e60010}.zocial.yelp > span:before{content:"y"}.zocial.youtube{background:red}.zocial.youtube > span:before{content:"U"} 2 | -------------------------------------------------------------------------------- /templates/css/zocial.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Zocial"; 3 | src: url('/fonts/zocial/zocial-regular-webfont.eot'); 4 | src: url('/fonts/zocial/zocial-regular-webfont.eot?iefix') format('eot'), url('/fonts/zocial/zocial-regular-webfont.woff') format('woff'), url('/fonts/zocial/zocial-regular-webfont.ttf') format('truetype'), url('/fonts/zocial/zocial-regular-webfont.svg') format('svg'); 5 | } 6 | 7 | .ff-zocial, .zocial > span:before { 8 | font-family: "Zocial", 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 > span:before { 99 | content: "\0020"; 100 | } 101 | 102 | .adjustment-1, .zocial.cloudapp, .zocial.dropbox, .zocial.github, .zocial.gmail, .zocial.instapaper, .zocial.openid, .zocial.plancast, .zocial.posterous, .zocial.twitter, .zocial.wikipedia { 103 | -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); 104 | -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); 105 | -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); 106 | 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); 107 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); 108 | } 109 | 110 | .adjustment-2, .zocial.dropbox:hover > span, .zocial.dropbox:focus > span, .zocial.github:hover > span, .zocial.github:focus > span, .zocial.gmail:hover > span, .zocial.gmail:focus > span, .zocial.instapaper:hover > span, .zocial.instapaper:focus > span, .zocial.openid:hover > span, .zocial.openid:focus > span, .zocial.plancast:hover > span, .zocial.plancast:focus > span, .zocial.posterous:hover > span, .zocial.posterous:focus > span, .zocial.twitter:focus > span, .zocial.wikipedia:hover > span, .zocial.wikipedia:focus > span { 111 | 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))); 112 | 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)); 113 | 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)); 114 | 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)); 115 | 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)); 116 | 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)); 117 | } 118 | 119 | .adjustment-3, .zocial.dropbox:active > span, .zocial.github:active > span, .zocial.gmail:active > span, .zocial.instapaper:active > span, .zocial.openid:active > span, .zocial.plancast:active > span, .zocial.posterous:active > span, .zocial.twitter:active > span, .zocial.wikipedia:active > span { 120 | 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))); 121 | 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)); 122 | 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)); 123 | 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)); 124 | 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)); 125 | 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)); 126 | } 127 | 128 | .zocial.amazon { 129 | background: #ffad1d; 130 | color: #030037 !important; 131 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 132 | } 133 | .zocial.amazon > span:before { 134 | content: "a"; 135 | } 136 | 137 | .zocial.android { 138 | background: #a4c639; 139 | } 140 | .zocial.android > span:before { 141 | content: "&"; 142 | } 143 | 144 | .zocial.aol { 145 | background: red; 146 | } 147 | .zocial.aol > span:before { 148 | content: '"'; 149 | } 150 | 151 | .zocial.appstore { 152 | background: #007dcb !important; 153 | } 154 | .zocial.appstore > span:before { 155 | content: "^"; 156 | } 157 | 158 | .zocial.chrome { 159 | background: #006cd4; 160 | } 161 | .zocial.chrome > span:before { 162 | content: "["; 163 | } 164 | 165 | .zocial.cloudapp { 166 | background: white; 167 | color: #312c2a !important; 168 | } 169 | .zocial.cloudapp > span:before { 170 | content: "c"; 171 | } 172 | 173 | .zocial.creativecommons { 174 | background: black; 175 | } 176 | .zocial.creativecommons > span:before { 177 | content: "C"; 178 | } 179 | 180 | .zocial.disqus { 181 | background: #216892; 182 | } 183 | .zocial.disqus > span:before { 184 | content: "Q"; 185 | } 186 | 187 | .zocial.dribbble { 188 | background: #ea4c89; 189 | } 190 | .zocial.dribbble > span:before { 191 | content: "D"; 192 | } 193 | 194 | .zocial.dropbox { 195 | background: #f5f5f5; 196 | color: #312c2a !important; 197 | } 198 | .zocial.dropbox > span:before { 199 | content: "d"; 200 | color: #4ea4e3; 201 | } 202 | 203 | .zocial.eventasaurus { 204 | background: #8ccc33; 205 | } 206 | .zocial.eventasaurus > span:before { 207 | content: "v"; 208 | } 209 | 210 | .zocial.eventbrite { 211 | background: #ff5616; 212 | } 213 | .zocial.eventbrite > span:before { 214 | content: "|"; 215 | } 216 | 217 | .zocial.evernote { 218 | background: #6bb130; 219 | color: white !important; 220 | } 221 | .zocial.evernote > span:before { 222 | content: "E"; 223 | } 224 | 225 | .zocial.facebook { 226 | background: #4863ae; 227 | } 228 | .zocial.facebook > span:before { 229 | content: "f"; 230 | } 231 | 232 | .zocial.flattr { 233 | background: #8aba42; 234 | } 235 | .zocial.flattr > span:before { 236 | content: "%"; 237 | } 238 | 239 | .zocial.forrst { 240 | background: #1e360d; 241 | } 242 | .zocial.forrst > span:before { 243 | content: ":"; 244 | color: #50894f; 245 | } 246 | 247 | .zocial.foursquare { 248 | background: #44a8e0; 249 | } 250 | .zocial.foursquare > span:before { 251 | content: "4"; 252 | } 253 | 254 | .zocial.github { 255 | color: #050505 !important; 256 | background: #fbfbfb; 257 | } 258 | .zocial.github > span:before { 259 | content: "g"; 260 | } 261 | 262 | .zocial.gmail { 263 | background: #efefef; 264 | color: #222222 !important; 265 | } 266 | .zocial.gmail > span:before { 267 | content: "m"; 268 | color: red; 269 | } 270 | 271 | .zocial.google { 272 | background: #4e6cf7; 273 | } 274 | .zocial.google > span:before { 275 | content: "G"; 276 | } 277 | 278 | .zocial.googleplus { 279 | background: #282626; 280 | } 281 | .zocial.googleplus:before { 282 | content: ""; 283 | display: block; 284 | height: 0.2em; 285 | margin-bottom: -0.1em; 286 | width: 100%; 287 | position: relative; 288 | left: 0em; 289 | top: 0; 290 | 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)); 291 | background: -webkit-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 292 | background: -moz-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 293 | background: -o-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 294 | background: -ms-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 295 | background: linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 296 | -moz-border-radius: 0.2em 0.2em 0 0; 297 | -webkit-border-radius: 0.2em 0.2em 0 0; 298 | -o-border-radius: 0.2em 0.2em 0 0; 299 | -ms-border-radius: 0.2em 0.2em 0 0; 300 | -khtml-border-radius: 0.2em 0.2em 0 0; 301 | border-radius: 0.2em 0.2em 0 0; 302 | border-bottom: 1px solid rgba(0, 0, 0, 0.8); 303 | -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); 304 | -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); 305 | -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); 306 | 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); 307 | z-index: 0; 308 | } 309 | .zocial.googleplus > span:before { 310 | content: "+"; 311 | } 312 | 313 | .zocial.gowalla { 314 | background: #ff720a; 315 | } 316 | .zocial.gowalla > span:before { 317 | content: "@"; 318 | } 319 | 320 | .zocial.guest { 321 | background: #1b4d6d; 322 | } 323 | .zocial.guest > span:before { 324 | content: "?"; 325 | } 326 | 327 | .zocial.html5 { 328 | background: #ff3617; 329 | } 330 | .zocial.html5 > span:before { 331 | content: "5"; 332 | } 333 | 334 | .zocial.ie { 335 | background: #00a1d9; 336 | } 337 | .zocial.ie > span:before { 338 | content: "6"; 339 | } 340 | 341 | .zocial.instapaper { 342 | color: #222222 !important; 343 | background: #eeeeee; 344 | } 345 | .zocial.instapaper > span:before { 346 | content: "I"; 347 | } 348 | 349 | .zocial.intensedebate { 350 | background: #0099e1; 351 | } 352 | .zocial.intensedebate > span:before { 353 | content: "{"; 354 | } 355 | 356 | .zocial.itunes { 357 | background: #222222; 358 | } 359 | .zocial.itunes > span:before { 360 | content: "A"; 361 | } 362 | 363 | .zocial.lastfm { 364 | background: #dc1a23; 365 | } 366 | .zocial.lastfm > span:before { 367 | content: "l"; 368 | } 369 | 370 | .zocial.linkedin { 371 | background: #0083a8; 372 | } 373 | .zocial.linkedin > span:before { 374 | content: "L"; 375 | } 376 | 377 | .zocial.meetup { 378 | background: #ff0026; 379 | } 380 | .zocial.meetup > span:before { 381 | content: "M"; 382 | } 383 | 384 | .zocial.openid { 385 | background: #f5f5f5; 386 | color: #333333 !important; 387 | } 388 | .zocial.openid > span:before { 389 | content: "o"; 390 | color: #ff921d; 391 | } 392 | 393 | .zocial.paypal { 394 | background: #ff921d; 395 | color: #032751 !important; 396 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 397 | } 398 | .zocial.paypal > span:before { 399 | content: "$"; 400 | } 401 | 402 | .zocial.plancast { 403 | background: #e7ebed; 404 | color: #333333 !important; 405 | } 406 | .zocial.plancast > span:before { 407 | content: "P"; 408 | } 409 | 410 | .zocial.posterous { 411 | background: #ffd959; 412 | color: #bc7134 !important; 413 | } 414 | .zocial.posterous > span:before { 415 | content: "~"; 416 | } 417 | 418 | .zocial.rss { 419 | background: #ff7f25; 420 | } 421 | .zocial.rss > span:before { 422 | content: "R"; 423 | } 424 | 425 | .zocial.scribd { 426 | background: #231c1a; 427 | } 428 | .zocial.scribd > span:before { 429 | content: "}"; 430 | color: #00d5ea !important; 431 | } 432 | 433 | .zocial.skype { 434 | background: #00a2ed; 435 | } 436 | .zocial.skype > span:before { 437 | content: "S"; 438 | } 439 | 440 | .zocial.smashingmag { 441 | background: #ff4f27; 442 | } 443 | .zocial.smashingmag > span:before { 444 | content: "*"; 445 | } 446 | 447 | .zocial.songkick { 448 | background: #ff0050; 449 | } 450 | .zocial.songkick > span:before { 451 | content: "k"; 452 | } 453 | 454 | .zocial.soundcloud { 455 | background: #ff4500; 456 | } 457 | .zocial.soundcloud > span:before { 458 | content: "s"; 459 | } 460 | 461 | .zocial.spotify { 462 | background: #60af00; 463 | } 464 | .zocial.spotify > span:before { 465 | content: "=zocial-"; 466 | } 467 | 468 | .zocial.tumblr { 469 | background: #374a61; 470 | } 471 | .zocial.tumblr > span:before { 472 | content: "t"; 473 | } 474 | 475 | .zocial.twitter { 476 | background: #e9f9ff; 477 | color: #3c6b9c !important; 478 | } 479 | .zocial.twitter > span:before { 480 | content: "T"; 481 | } 482 | 483 | .zocial.vimeo { 484 | background: #00a2cd; 485 | } 486 | .zocial.vimeo > span:before { 487 | content: "V"; 488 | } 489 | 490 | .zocial.wikipedia { 491 | background: white; 492 | color: black !important; 493 | } 494 | .zocial.wikipedia > span:before { 495 | content: ","; 496 | } 497 | 498 | .zocial.wordpress { 499 | background: #464646; 500 | } 501 | .zocial.wordpress > span:before { 502 | content: "w"; 503 | } 504 | 505 | .zocial.yahoo { 506 | background: #a200c2; 507 | } 508 | .zocial.yahoo > span:before { 509 | content: "Y"; 510 | } 511 | 512 | .zocial.yelp { 513 | background: #e60010; 514 | } 515 | .zocial.yelp > span:before { 516 | content: "y"; 517 | } 518 | 519 | .zocial.youtube { 520 | background: red; 521 | } 522 | .zocial.youtube > span:before { 523 | content: "U"; 524 | } 525 | -------------------------------------------------------------------------------- /templates/css/zocial.sass: -------------------------------------------------------------------------------- 1 | // Import Zocial 2 | @import "../../stylesheets/zocial" 3 | 4 | // Include all of Zocial 5 | +zocial -------------------------------------------------------------------------------- /templates/fonts/manifest.rb: -------------------------------------------------------------------------------- 1 | description "Zocial font" 2 | 3 | font 'zocial/zocial-regular-webfont.eot' 4 | font 'zocial/zocial-regular-webfont.svg' 5 | font 'zocial/zocial-regular-webfont.ttf' 6 | font 'zocial/zocial-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 font! 14 | } -------------------------------------------------------------------------------- /templates/fonts/zocial/zocial-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamstac/zocial/fe0fe91cf71c6c0871598a19cc6b482d072b446e/templates/fonts/zocial/zocial-regular-webfont.eot -------------------------------------------------------------------------------- /templates/fonts/zocial/zocial-regular-webfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 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 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /templates/fonts/zocial/zocial-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamstac/zocial/fe0fe91cf71c6c0871598a19cc6b482d072b446e/templates/fonts/zocial/zocial-regular-webfont.ttf -------------------------------------------------------------------------------- /templates/fonts/zocial/zocial-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamstac/zocial/fe0fe91cf71c6c0871598a19cc6b482d072b446e/templates/fonts/zocial/zocial-regular-webfont.woff -------------------------------------------------------------------------------- /test/README.mdown: -------------------------------------------------------------------------------- 1 | # Serve Bootstrap 2 | 3 | ## A simple Serve starting point 4 | 5 | This is a simple HTML prototype written in HAML that is designed to be viewed with Serve. 6 | 7 | Supports: 8 | 9 | * [Haml](http://haml-lang.com/) 10 | * [Sass](http://sass-lang.com/) 11 | * [Compass](https://github.com/chriseppstein/compass) 12 | * [Grid Coordinates](https://github.com/adamstac/grid-coordinates) 13 | * [jQuery](http://jquery.com/) 14 | * [Modernizr](http://www.modernizr.com/) 15 | 16 | ## What is Serve? 17 | 18 | [Serve](https://github.com/jlong/serve) is a rapid prototyping framework for Ruby or Rails-based applications. It is designed to compliment the Rails development setup and enforce a strict separation of concerns between designer and developer. Using Serve with Rails allows the designer to happily work in his own space creating an HTML prototype of the application, while the developer works on the Rails application and copies over the views from the prototype as needed. This allows the designer to focus on presentation and flow while the developer can focus on the implementation. 19 | 20 | ## How do I get started? 21 | 22 | Serve is distributed as a gem to make it easy to get up and running. This project uses [Bundler](http://gembundler.com/) for gem management. 23 | 24 | If you don't have Bundler installed, run the following at the command prompt: 25 | 26 | gem install bundler 27 | 28 | Now, to get started with using Serve and this Serve Bootstrap, fork the repo and pull down a copy to your local machine. It makes sense to store this where you store your other codes, for example: 29 | 30 | cd Code/path/to/codes 31 | git clone git@github.com:USERNAME/serve-bootstrap.git 32 | 33 | From inside the root of your newly cloned repo, run the following at the command prompt: 34 | 35 | bundle install 36 | 37 | After you've ran `bundle install` and Serve is installed, as well as the other required gems, you can start it up like this: 38 | 39 | serve 40 | 41 | This will start Serve on port 4000 and will now be able to view your working prototype in your web browser at this URL: [http://localhost:4000](http://localhost:4000) 42 | 43 | Click around. You will find that Serve enables you to prototype most functionality without writing a single line of backend code. 44 | 45 | ## Helper Rake Tasks 46 | 47 | There are a few helper Rake tasks that will aid you in clearing and compiling your Sass/Compass stylesheets. There is also a task to generate a new project at a specified directory so you can keep your copy of the Serve Bootstrap pristine. 48 | 49 | rake -T 50 | 51 | rake generate # Generate a new project at dir=foo 52 | rake styles:clear # Clear the styles 53 | rake styles:compile # Compile new styles 54 | rake styles:compile:production # Compile new styles for production 55 | rake styles:stats # Run compass stats 56 | rake styles:stats:log # Create a log of compass stats 57 | 58 | ## Rack and Passenger 59 | 60 | Astute users may notice that this project is also a simple Rack application. This means that it is easy to deploy it on Passenger or rack it up with the `rackup` command. For more information about using Serve and Passenger read "[Racking Up A Serve Project On Phusion Passenger](http://wiseheartdesign.com/articles/2010/05/26/racking-up-a-serve-project-on-phusion-passenger/)". 61 | 62 | 63 | ## License 64 | 65 | Copyright (c) 2011 Adam Stacoviak 66 | 67 | 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: 68 | 69 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 70 | 71 | 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. -------------------------------------------------------------------------------- /test/Rakefile: -------------------------------------------------------------------------------- 1 | require "rubygems" 2 | require "bundler" 3 | Bundler.setup 4 | 5 | namespace :styles do 6 | 7 | desc "Run compass stats" 8 | task :stats => ["stats:default"] 9 | 10 | namespace :stats do 11 | 12 | task :default do 13 | puts "*** Running compass stats ***" 14 | system "compass stats" 15 | end 16 | 17 | desc "Create a log of compass stats" 18 | task :log do 19 | t = DateTime.now 20 | filename = "compass-stats-#{t.strftime("%Y%m%d")}-#{t.strftime("%H%M%S")}.log" 21 | log_dir = "log" 22 | puts "*** Logging stats ***" 23 | system "compass stats > #{log_dir}/#{filename}" 24 | puts "Created #{log_dir}/#{filename}" 25 | end 26 | 27 | end 28 | 29 | desc "Clear the styles" 30 | task :clear => ["compile:clear"] 31 | 32 | desc "List the styles" 33 | task :list do 34 | system "ls -lh public/stylesheets" 35 | end 36 | 37 | desc "Compile new styles" 38 | task :compile => ["compile:default"] 39 | 40 | namespace :compile do 41 | 42 | task :clear do 43 | puts "*** Clearing styles ***" 44 | system "rm -Rfv public/stylesheets/*" 45 | end 46 | 47 | task :default => :clear do 48 | puts "*** Compiling styles ***" 49 | system "compass compile" 50 | end 51 | 52 | desc "Compile new styles for production" 53 | task :production => :clear do 54 | puts "*** Compiling styles ***" 55 | system "compass compile --output-style compressed --force" 56 | end 57 | 58 | end 59 | 60 | end 61 | 62 | desc "Generate a new project at dir=foo" 63 | task :generate do 64 | # Generate the new 'dir' if it's not already created 65 | system "mkdir #{(ENV['dir'])}" unless File.exists?(ENV['dir']) 66 | 67 | # Archive the current HEAD to 'dir' 68 | system "git archive HEAD | (cd #{ENV['dir']} && tar -xvf -)" 69 | 70 | puts "\n *** A new project has been generated at: #{(ENV['dir'])} ***" 71 | end -------------------------------------------------------------------------------- /test/config.rb: -------------------------------------------------------------------------------- 1 | # Compass Configuration 2 | 3 | # HTTP paths 4 | http_path = '/' 5 | http_stylesheets_path = '/stylesheets' 6 | http_images_path = '/images' 7 | http_javascripts_path = '/javascripts' 8 | fonts_path = '/fonts' 9 | 10 | # File system locations 11 | sass_dir = 'sass' 12 | css_dir = 'public/stylesheets' 13 | images_dir = 'public/images' 14 | javascripts_dir = 'public/javascripts' 15 | fonts_dir = 'fonts' 16 | 17 | # Set to true for easier debugging 18 | line_comments = false 19 | preferred_syntax = :sass 20 | 21 | # CSS output style - :nested, :expanded, :compact, or :compressed 22 | output_style = :expanded 23 | 24 | # Determine whether Compass asset helper functions generate relative 25 | # or absolute paths 26 | relative_assets = false 27 | 28 | # Learn more: http://compass-style.org/docs/tutorials/configuration-reference/ 29 | -------------------------------------------------------------------------------- /test/config.ru: -------------------------------------------------------------------------------- 1 | #\ -p 4000 2 | 3 | gem 'activesupport' 4 | gem 'serve' 5 | 6 | require 'serve' 7 | require 'serve/rack' 8 | 9 | require 'sass/plugin/rack' 10 | require 'compass' 11 | 12 | # The project root directory 13 | root = ::File.dirname(__FILE__) 14 | 15 | # Compass 16 | Compass.add_project_configuration(root + '/config.rb') 17 | Compass.configure_sass_plugin! 18 | 19 | # Rack Middleware 20 | use Rack::ShowStatus # Nice looking 404s and other messages 21 | use Rack::ShowExceptions # Nice looking errors 22 | 23 | # Because Heroku doesn't allow you to write to the file system, 24 | # if you're not using Heroku in production this condition won't be needed 25 | if ENV['RACK_ENV'] != "production" 26 | use Sass::Plugin::Rack # Compile Sass on the fly 27 | end 28 | 29 | # Rack Application 30 | if ENV['SERVER_SOFTWARE'] =~ /passenger/i 31 | # Passendger only needs the adapter 32 | run Serve::RackAdapter.new(root + '/views') 33 | else 34 | # We use Rack::Cascade and Rack::Directory on other platforms to handle static 35 | # assets 36 | run Rack::Cascade.new([ 37 | Serve::RackAdapter.new(root + '/views'), 38 | Rack::Directory.new(root + '/public') 39 | ]) 40 | end 41 | -------------------------------------------------------------------------------- /test/log/compass-stats-20110311-000950.log: -------------------------------------------------------------------------------- 1 |  exists public/stylesheets 2 | unchanged sass/stylesheet.sass 3 | | ----------------------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- | 4 | | Filename | Rules | Properties | Mixins Defs | Mixins Used | CSS Rules | CSS Properties | 5 | | ----------------------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- | 6 | | sass/_base.sass | 4 | 5 | 0 | 0 | -- | -- | 7 | | sass/_landscape.sass | 0 | 0 | 1 | 0 | -- | -- | 8 | | sass/_mobile-480.sass | 5 | 11 | 1 | 0 | -- | -- | 9 | | sass/_portrait.sass | 0 | 0 | 1 | 0 | -- | -- | 10 | | sass/_screen.sass | 6 | 11 | 0 | 1 | -- | -- | 11 | | sass/stylesheet.sass | 0 | 0 | 0 | 3 | DISABLED | DISABLED | 12 | | sass/partials/_color.sass | 0 | 0 | 0 | 0 | -- | -- | 13 | | sass/partials/_minimal-base-styles.sass | 59 | 40 | 0 | 2 | -- | -- | 14 | | sass/partials/_non-semantic-helper-classes.sass | 13 | 33 | 0 | 0 | -- | -- | 15 | | sass/partials/_typography.sass | 1 | 1 | 0 | 0 | -- | -- | 16 | | ----------------------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- | 17 | | Total (10 files): | 88 | 101 | 3 | 6 | 0 | 0 | 18 | | ----------------------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- | 19 | 20 | Install css_parser to enable stats on your css files: 21 | 22 | gem install css_parser 23 | -------------------------------------------------------------------------------- /test/public/fonts/zocial/zocial-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamstac/zocial/fe0fe91cf71c6c0871598a19cc6b482d072b446e/test/public/fonts/zocial/zocial-regular-webfont.eot -------------------------------------------------------------------------------- /test/public/fonts/zocial/zocial-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamstac/zocial/fe0fe91cf71c6c0871598a19cc6b482d072b446e/test/public/fonts/zocial/zocial-regular-webfont.ttf -------------------------------------------------------------------------------- /test/public/fonts/zocial/zocial-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamstac/zocial/fe0fe91cf71c6c0871598a19cc6b482d072b446e/test/public/fonts/zocial/zocial-regular-webfont.woff -------------------------------------------------------------------------------- /test/public/images/zocial-lite-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamstac/zocial/fe0fe91cf71c6c0871598a19cc6b482d072b446e/test/public/images/zocial-lite-preview.jpg -------------------------------------------------------------------------------- /test/public/stylesheets/stylesheet.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | font-size: 100%; 18 | font: inherit; 19 | vertical-align: baseline; 20 | } 21 | 22 | body { 23 | line-height: 1; 24 | } 25 | 26 | ol, ul { 27 | list-style: none; 28 | } 29 | 30 | table { 31 | border-collapse: collapse; 32 | border-spacing: 0; 33 | } 34 | 35 | caption, th, td { 36 | text-align: left; 37 | font-weight: normal; 38 | vertical-align: middle; 39 | } 40 | 41 | q, blockquote { 42 | quotes: none; 43 | } 44 | q:before, q:after, blockquote:before, blockquote:after { 45 | content: ""; 46 | content: none; 47 | } 48 | 49 | a img { 50 | border: none; 51 | } 52 | 53 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { 54 | display: block; 55 | } 56 | 57 | @font-face { 58 | font-family: "Zocial"; 59 | src: url('/fonts/zocial/zocial-regular-webfont.eot'); 60 | src: url('/fonts/zocial/zocial-regular-webfont.eot?iefix') format('eot'), url('/fonts/zocial/zocial-regular-webfont.woff') format('woff'), url('/fonts/zocial/zocial-regular-webfont.ttf') format('truetype'), url('/fonts/zocial/zocial-regular-webfont.svg') format('svg'); 61 | } 62 | 63 | .ff-zocial, .zocial > span:before { 64 | font-family: "Zocial", sans-serif; 65 | } 66 | 67 | .ff-helvetica, .ff-arial, .zocial { 68 | font-family: Clean, "Helvetica-Neue", Helvetica, Arial, sans-serif; 69 | } 70 | 71 | .zocial, .zocial > span { 72 | -moz-border-radius: 0.2em; 73 | -webkit-border-radius: 0.2em; 74 | -o-border-radius: 0.2em; 75 | -ms-border-radius: 0.2em; 76 | -khtml-border-radius: 0.2em; 77 | border-radius: 0.2em; 78 | position: relative; 79 | } 80 | 81 | .zocial { 82 | -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); 83 | -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); 84 | -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); 85 | 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); 86 | text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); 87 | position: relative; 88 | border: 1px solid rgba(0, 0, 0, 0.2); 89 | border-bottom-color: rgba(0, 0, 0, 0.4); 90 | color: white !important; 91 | cursor: pointer; 92 | display: inline-block; 93 | font-size: 1.8em; 94 | outline: none; 95 | padding: 0; 96 | text-decoration: none !important; 97 | } 98 | .zocial button::-moz-focus-inner { 99 | border: 0; 100 | padding: 0; 101 | } 102 | .zocial.icon { 103 | width: 1.85em; 104 | overflow: hidden; 105 | } 106 | .zocial > span { 107 | position: relative; 108 | display: inline-block; 109 | font-size: 80%; 110 | font-weight: bold; 111 | line-height: 2em; 112 | padding-right: 0.825em; 113 | white-space: nowrap; 114 | } 115 | .zocial > span:before { 116 | -moz-box-shadow: 0.075em 0 0 rgba(255, 255, 255, 0.25); 117 | -webkit-box-shadow: 0.075em 0 0 rgba(255, 255, 255, 0.25); 118 | -o-box-shadow: 0.075em 0 0 rgba(255, 255, 255, 0.25); 119 | box-shadow: 0.075em 0 0 rgba(255, 255, 255, 0.25); 120 | border-right: 0.075em solid rgba(0, 0, 0, 0.1); 121 | display: block; 122 | float: left; 123 | font-size: 125%; 124 | font-style: normal; 125 | font-weight: normal; 126 | margin: 0.068em 0.5em 0 0; 127 | text-align: center; 128 | width: 1.75em; 129 | } 130 | .zocial > span { 131 | 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))); 132 | 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)); 133 | 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)); 134 | 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)); 135 | 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)); 136 | 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)); 137 | } 138 | .zocial:hover > span, .zocial:focus > span { 139 | 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))); 140 | 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)); 141 | 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)); 142 | 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)); 143 | 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)); 144 | 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)); 145 | } 146 | .zocial:active > span { 147 | 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))); 148 | 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)); 149 | 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)); 150 | 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)); 151 | 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)); 152 | 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)); 153 | } 154 | .zocial > span:before { 155 | content: "\0020"; 156 | } 157 | 158 | .adjustment-1, .zocial.cloudapp, .zocial.dropbox, .zocial.github, .zocial.gmail, .zocial.instapaper, .zocial.openid, .zocial.plancast, .zocial.posterous, .zocial.twitter, .zocial.wikipedia, .zocial.white { 159 | -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); 160 | -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); 161 | -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); 162 | 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); 163 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); 164 | } 165 | 166 | .adjustment-2, .zocial.dropbox:hover > span, .zocial.dropbox:focus > span, .zocial.github:hover > span, .zocial.github:focus > span, .zocial.gmail:hover > span, .zocial.gmail:focus > span, .zocial.instapaper:hover > span, .zocial.instapaper:focus > span, .zocial.openid:hover > span, .zocial.openid:focus > span, .zocial.plancast:hover > span, .zocial.plancast:focus > span, .zocial.posterous:hover > span, .zocial.posterous:focus > span, .zocial.twitter:focus > span, .zocial.wikipedia:hover > span, .zocial.wikipedia:focus > span { 167 | 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))); 168 | 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)); 169 | 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)); 170 | 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)); 171 | 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)); 172 | 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)); 173 | } 174 | 175 | .adjustment-3, .zocial.dropbox:active > span, .zocial.github:active > span, .zocial.gmail:active > span, .zocial.instapaper:active > span, .zocial.openid:active > span, .zocial.plancast:active > span, .zocial.posterous:active > span, .zocial.twitter:active > span, .zocial.wikipedia:active > span { 176 | 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))); 177 | 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)); 178 | 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)); 179 | 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)); 180 | 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)); 181 | 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)); 182 | } 183 | 184 | .zocial.amazon { 185 | background: #ffad1d; 186 | color: #030037 !important; 187 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 188 | } 189 | .zocial.amazon > span:before { 190 | content: "a"; 191 | } 192 | 193 | .zocial.android { 194 | background: #a4c639; 195 | } 196 | .zocial.android > span:before { 197 | content: "&"; 198 | } 199 | 200 | .zocial.aol { 201 | background: red; 202 | } 203 | .zocial.aol > span:before { 204 | content: '"'; 205 | } 206 | 207 | .zocial.appstore { 208 | background: #007dcb !important; 209 | } 210 | .zocial.appstore > span:before { 211 | content: "^"; 212 | } 213 | 214 | .zocial.chrome { 215 | background: #006cd4; 216 | } 217 | .zocial.chrome > span:before { 218 | content: "["; 219 | } 220 | 221 | .zocial.cloudapp { 222 | background: white; 223 | color: #312c2a !important; 224 | } 225 | .zocial.cloudapp > span:before { 226 | content: "c"; 227 | } 228 | 229 | .zocial.creativecommons { 230 | background: black; 231 | } 232 | .zocial.creativecommons > span:before { 233 | content: "C"; 234 | } 235 | 236 | .zocial.disqus { 237 | background: #216892; 238 | } 239 | .zocial.disqus > span:before { 240 | content: "Q"; 241 | } 242 | 243 | .zocial.dribbble { 244 | background: #ea4c89; 245 | } 246 | .zocial.dribbble > span:before { 247 | content: "D"; 248 | } 249 | 250 | .zocial.dropbox { 251 | background: #f5f5f5; 252 | color: #312c2a !important; 253 | } 254 | .zocial.dropbox > span:before { 255 | content: "d"; 256 | color: #4ea4e3; 257 | } 258 | 259 | .zocial.eventasaurus { 260 | background: #8ccc33; 261 | } 262 | .zocial.eventasaurus > span:before { 263 | content: "v"; 264 | } 265 | 266 | .zocial.eventbrite { 267 | background: #ff5616; 268 | } 269 | .zocial.eventbrite > span:before { 270 | content: "|"; 271 | } 272 | 273 | .zocial.evernote { 274 | background: #6bb130; 275 | color: white !important; 276 | } 277 | .zocial.evernote > span:before { 278 | content: "E"; 279 | } 280 | 281 | .zocial.facebook { 282 | background: #4863ae; 283 | } 284 | .zocial.facebook > span:before { 285 | content: "f"; 286 | } 287 | 288 | .zocial.flattr { 289 | background: #8aba42; 290 | } 291 | .zocial.flattr > span:before { 292 | content: "%"; 293 | } 294 | 295 | .zocial.forrst { 296 | background: #1e360d; 297 | } 298 | .zocial.forrst > span:before { 299 | content: ":"; 300 | color: #50894f; 301 | } 302 | 303 | .zocial.foursquare { 304 | background: #44a8e0; 305 | } 306 | .zocial.foursquare > span:before { 307 | content: "4"; 308 | } 309 | 310 | .zocial.github { 311 | color: #050505 !important; 312 | background: #fbfbfb; 313 | } 314 | .zocial.github > span:before { 315 | content: "g"; 316 | } 317 | 318 | .zocial.gmail { 319 | background: #efefef; 320 | color: #222222 !important; 321 | } 322 | .zocial.gmail > span:before { 323 | content: "m"; 324 | color: red; 325 | } 326 | 327 | .zocial.google { 328 | background: #4e6cf7; 329 | } 330 | .zocial.google > span:before { 331 | content: "G"; 332 | } 333 | 334 | .zocial.googleplus { 335 | background: #282626; 336 | } 337 | .zocial.googleplus:before { 338 | content: ""; 339 | display: block; 340 | height: 0.2em; 341 | margin-bottom: -0.1em; 342 | width: 100%; 343 | position: relative; 344 | left: 0em; 345 | top: 0; 346 | 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)); 347 | background: -webkit-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 348 | background: -moz-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 349 | background: -o-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 350 | background: -ms-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 351 | background: linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 352 | -moz-border-radius: 0.2em 0.2em 0 0; 353 | -webkit-border-radius: 0.2em 0.2em 0 0; 354 | -o-border-radius: 0.2em 0.2em 0 0; 355 | -ms-border-radius: 0.2em 0.2em 0 0; 356 | -khtml-border-radius: 0.2em 0.2em 0 0; 357 | border-radius: 0.2em 0.2em 0 0; 358 | border-bottom: 1px solid rgba(0, 0, 0, 0.8); 359 | -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); 360 | -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); 361 | -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); 362 | 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); 363 | z-index: 0; 364 | } 365 | .zocial.googleplus > span:before { 366 | content: "+"; 367 | } 368 | 369 | .zocial.gowalla { 370 | background: #ff720a; 371 | } 372 | .zocial.gowalla > span:before { 373 | content: "@"; 374 | } 375 | 376 | .zocial.guest { 377 | background: #1b4d6d; 378 | } 379 | .zocial.guest > span:before { 380 | content: "?"; 381 | } 382 | 383 | .zocial.html5 { 384 | background: #ff3617; 385 | } 386 | .zocial.html5 > span:before { 387 | content: "5"; 388 | } 389 | 390 | .zocial.ie { 391 | background: #00a1d9; 392 | } 393 | .zocial.ie > span:before { 394 | content: "6"; 395 | } 396 | 397 | .zocial.instapaper { 398 | color: #222222 !important; 399 | background: #eeeeee; 400 | } 401 | .zocial.instapaper > span:before { 402 | content: "I"; 403 | } 404 | 405 | .zocial.intensedebate { 406 | background: #0099e1; 407 | } 408 | .zocial.intensedebate > span:before { 409 | content: "{"; 410 | } 411 | 412 | .zocial.itunes { 413 | background: #222222; 414 | } 415 | .zocial.itunes > span:before { 416 | content: "A"; 417 | } 418 | 419 | .zocial.lastfm { 420 | background: #dc1a23; 421 | } 422 | .zocial.lastfm > span:before { 423 | content: "l"; 424 | } 425 | 426 | .zocial.linkedin { 427 | background: #0083a8; 428 | } 429 | .zocial.linkedin > span:before { 430 | content: "L"; 431 | } 432 | 433 | .zocial.meetup { 434 | background: #ff0026; 435 | } 436 | .zocial.meetup > span:before { 437 | content: "M"; 438 | } 439 | 440 | .zocial.openid { 441 | background: #f5f5f5; 442 | color: #333333 !important; 443 | } 444 | .zocial.openid > span:before { 445 | content: "o"; 446 | color: #ff921d; 447 | } 448 | 449 | .zocial.paypal { 450 | background: #ff921d; 451 | color: #032751 !important; 452 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 453 | } 454 | .zocial.paypal > span:before { 455 | content: "$"; 456 | } 457 | 458 | .zocial.plancast { 459 | background: #e7ebed; 460 | color: #333333 !important; 461 | } 462 | .zocial.plancast > span:before { 463 | content: "P"; 464 | } 465 | 466 | .zocial.posterous { 467 | background: #ffd959; 468 | color: #bc7134 !important; 469 | } 470 | .zocial.posterous > span:before { 471 | content: "~"; 472 | } 473 | 474 | .zocial.rss { 475 | background: #ff7f25; 476 | } 477 | .zocial.rss > span:before { 478 | content: "R"; 479 | } 480 | 481 | .zocial.scribd { 482 | background: #231c1a; 483 | } 484 | .zocial.scribd > span:before { 485 | content: "}"; 486 | color: #00d5ea !important; 487 | } 488 | 489 | .zocial.skype { 490 | background: #00a2ed; 491 | } 492 | .zocial.skype > span:before { 493 | content: "S"; 494 | } 495 | 496 | .zocial.smashingmag { 497 | background: #ff4f27; 498 | } 499 | .zocial.smashingmag > span:before { 500 | content: "*"; 501 | } 502 | 503 | .zocial.songkick { 504 | background: #ff0050; 505 | } 506 | .zocial.songkick > span:before { 507 | content: "k"; 508 | } 509 | 510 | .zocial.soundcloud { 511 | background: #ff4500; 512 | } 513 | .zocial.soundcloud > span:before { 514 | content: "s"; 515 | } 516 | 517 | .zocial.spotify { 518 | background: #60af00; 519 | } 520 | .zocial.spotify > span:before { 521 | content: "=zocial-"; 522 | } 523 | 524 | .zocial.tumblr { 525 | background: #374a61; 526 | } 527 | .zocial.tumblr > span:before { 528 | content: "t"; 529 | } 530 | 531 | .zocial.twitter { 532 | background: #e9f9ff; 533 | color: #3c6b9c !important; 534 | } 535 | .zocial.twitter > span:before { 536 | content: "T"; 537 | } 538 | 539 | .zocial.vimeo { 540 | background: #00a2cd; 541 | } 542 | .zocial.vimeo > span:before { 543 | content: "V"; 544 | } 545 | 546 | .zocial.wikipedia { 547 | background: white; 548 | color: black !important; 549 | } 550 | .zocial.wikipedia > span:before { 551 | content: ","; 552 | } 553 | 554 | .zocial.wordpress { 555 | background: #464646; 556 | } 557 | .zocial.wordpress > span:before { 558 | content: "w"; 559 | } 560 | 561 | .zocial.yahoo { 562 | background: #a200c2; 563 | } 564 | .zocial.yahoo > span:before { 565 | content: "Y"; 566 | } 567 | 568 | .zocial.yelp { 569 | background: #e60010; 570 | } 571 | .zocial.yelp > span:before { 572 | content: "y"; 573 | } 574 | 575 | .zocial.youtube { 576 | background: red; 577 | } 578 | .zocial.youtube > span:before { 579 | content: "U"; 580 | } 581 | 582 | .zocial.white { 583 | background: white; 584 | color: black !important; 585 | } 586 | .zocial.white > span:before { 587 | content: "\0020"; 588 | color: black; 589 | } 590 | 591 | .zocial.black { 592 | background: black; 593 | color: white !important; 594 | } 595 | .zocial.black > span:before { 596 | content: "\0020"; 597 | color: white; 598 | } 599 | 600 | .zocial.red { 601 | background: red; 602 | color: white !important; 603 | } 604 | .zocial.red > span:before { 605 | content: "\0020"; 606 | color: white; 607 | } 608 | 609 | .zocial.green { 610 | background: green; 611 | color: white !important; 612 | } 613 | .zocial.green > span:before { 614 | content: "\0020"; 615 | color: white; 616 | } 617 | 618 | .zocial.blue { 619 | background: blue; 620 | color: white !important; 621 | } 622 | .zocial.blue > span:before { 623 | content: "\0020"; 624 | color: white; 625 | } 626 | 627 | body { 628 | background: #f0ecdf; 629 | color: #312c2a; 630 | font: 10px/16px "Baskerville Old Face", Georgia, serif; 631 | } 632 | 633 | .container { 634 | *zoom: 1; 635 | margin: 50px auto; 636 | width: 620px; 637 | } 638 | .container:after { 639 | content: ""; 640 | display: table; 641 | clear: both; 642 | } 643 | 644 | .headings, h1, h2 { 645 | text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0; 646 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); 647 | opacity: 0.9; 648 | background: url("http://zocial.smcllns.com/img/dingbat.png") no-repeat 50% bottom; 649 | letter-spacing: 1px; 650 | height: 80px; 651 | margin-top: 25px; 652 | margin-bottom: 30px; 653 | text-align: center; 654 | } 655 | .headings a, h1 a, h2 a { 656 | color: inherit; 657 | padding-bottom: 3px; 658 | text-decoration: none; 659 | } 660 | .headings a:hover, h1 a:hover, h2 a:hover { 661 | border-bottom: 1px solid rgba(49, 44, 42, 0.3); 662 | } 663 | 664 | h1 { 665 | font-size: 30px; 666 | } 667 | 668 | h2 { 669 | font-size: 12px; 670 | height: 80px; 671 | letter-spacing: 1px; 672 | margin-top: 25px; 673 | margin-bottom: 30px; 674 | } 675 | 676 | .buttons { 677 | -moz-box-shadow: #d9d6cd 0 0 10px 5px; 678 | -webkit-box-shadow: #d9d6cd 0 0 10px 5px; 679 | -o-box-shadow: #d9d6cd 0 0 10px 5px; 680 | box-shadow: #d9d6cd 0 0 10px 5px; 681 | background: white; 682 | padding: 50px; 683 | } 684 | 685 | .z-buttons { 686 | margin-bottom: 40px; 687 | } 688 | 689 | .z-buttons a, .z-buttons button, .z-icons a, .z-icons button { 690 | margin-right: 10px; 691 | margin-bottom: 15px; 692 | } 693 | .z-buttons button, .z-icons button { 694 | display: none; 695 | } 696 | -------------------------------------------------------------------------------- /test/public/stylesheets/zocial.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Zocial"; 3 | src: url('/fonts/zocial/zocial-regular-webfont.eot'); 4 | src: url('/fonts/zocial/zocial-regular-webfont.eot?iefix') format('eot'), url('/fonts/zocial/zocial-regular-webfont.woff') format('woff'), url('/fonts/zocial/zocial-regular-webfont.ttf') format('truetype'), url('/fonts/zocial/zocial-regular-webfont.svg') format('svg'); 5 | } 6 | 7 | .ff-zocial, .zocial > span:before { 8 | font-family: "Zocial", sans-serif; 9 | } 10 | 11 | .ff-times, .zocial { 12 | font-family: Times, "Times New Roman", 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.6em; 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 > span:before { 99 | content: "\0020"; 100 | } 101 | 102 | .adjustment-1, .zocial.cloudapp, .zocial.dropbox, .zocial.github, .zocial.gmail, .zocial.instapaper, .zocial.openid, .zocial.plancast, .zocial.posterous, .zocial.twitter, .zocial.wikipedia { 103 | -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); 104 | -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); 105 | -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); 106 | 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); 107 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); 108 | } 109 | 110 | .adjustment-2, .zocial.dropbox:hover > span, .zocial.dropbox:focus > span, .zocial.github:hover > span, .zocial.github:focus > span, .zocial.gmail:hover > span, .zocial.gmail:focus > span, .zocial.instapaper:hover > span, .zocial.instapaper:focus > span, .zocial.openid:hover > span, .zocial.openid:focus > span, .zocial.plancast:hover > span, .zocial.plancast:focus > span, .zocial.posterous:hover > span, .zocial.posterous:focus > span, .zocial.twitter:focus > span, .zocial.wikipedia:hover > span, .zocial.wikipedia:focus > span { 111 | 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))); 112 | 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)); 113 | 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)); 114 | 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)); 115 | 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)); 116 | 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)); 117 | } 118 | 119 | .adjustment-3, .zocial.dropbox:active > span, .zocial.github:active > span, .zocial.gmail:active > span, .zocial.instapaper:active > span, .zocial.openid:active > span, .zocial.plancast:active > span, .zocial.posterous:active > span, .zocial.twitter:active > span, .zocial.wikipedia:active > span { 120 | 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))); 121 | 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)); 122 | 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)); 123 | 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)); 124 | 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)); 125 | 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)); 126 | } 127 | 128 | .zocial.amazon { 129 | background: #ffad1d; 130 | color: #030037 !important; 131 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 132 | } 133 | .zocial.amazon > span:before { 134 | content: "a"; 135 | } 136 | 137 | .zocial.android { 138 | background: #a4c639; 139 | } 140 | .zocial.android > span:before { 141 | content: "&"; 142 | } 143 | 144 | .zocial.aol { 145 | background: red; 146 | } 147 | .zocial.aol > span:before { 148 | content: '"'; 149 | } 150 | 151 | .zocial.appstore { 152 | background: #007dcb !important; 153 | } 154 | .zocial.appstore > span:before { 155 | content: "^"; 156 | } 157 | 158 | .zocial.chrome { 159 | background: #006cd4; 160 | } 161 | .zocial.chrome > span:before { 162 | content: "["; 163 | } 164 | 165 | .zocial.cloudapp { 166 | background: white; 167 | color: #312c2a !important; 168 | } 169 | .zocial.cloudapp > span:before { 170 | content: "c"; 171 | } 172 | 173 | .zocial.creativecommons { 174 | background: black; 175 | } 176 | .zocial.creativecommons > span:before { 177 | content: "C"; 178 | } 179 | 180 | .zocial.disqus { 181 | background: #216892; 182 | } 183 | .zocial.disqus > span:before { 184 | content: "Q"; 185 | } 186 | 187 | .zocial.dribbble { 188 | background: #ea4c89; 189 | } 190 | .zocial.dribbble > span:before { 191 | content: "D"; 192 | } 193 | 194 | .zocial.dropbox { 195 | background: #f5f5f5; 196 | color: #312c2a !important; 197 | } 198 | .zocial.dropbox > span:before { 199 | content: "d"; 200 | color: #4ea4e3; 201 | } 202 | 203 | .zocial.eventasaurus { 204 | background: #8ccc33; 205 | } 206 | .zocial.eventasaurus > span:before { 207 | content: "v"; 208 | } 209 | 210 | .zocial.eventbrite { 211 | background: #ff5616; 212 | } 213 | .zocial.eventbrite > span:before { 214 | content: "|"; 215 | } 216 | 217 | .zocial.evernote { 218 | background: #6bb130; 219 | color: white !important; 220 | } 221 | .zocial.evernote > span:before { 222 | content: "E"; 223 | } 224 | 225 | .zocial.facebook { 226 | background: #4863ae; 227 | } 228 | .zocial.facebook > span:before { 229 | content: "f"; 230 | } 231 | 232 | .zocial.flattr { 233 | background: #8aba42; 234 | } 235 | .zocial.flattr > span:before { 236 | content: "%"; 237 | } 238 | 239 | .zocial.forrst { 240 | background: #1e360d; 241 | } 242 | .zocial.forrst > span:before { 243 | content: ":"; 244 | color: #50894f; 245 | } 246 | 247 | .zocial.foursquare { 248 | background: #44a8e0; 249 | } 250 | .zocial.foursquare > span:before { 251 | content: "4"; 252 | } 253 | 254 | .zocial.github { 255 | color: #050505 !important; 256 | background: #fbfbfb; 257 | } 258 | .zocial.github > span:before { 259 | content: "g"; 260 | } 261 | 262 | .zocial.gmail { 263 | background: #efefef; 264 | color: #222222 !important; 265 | } 266 | .zocial.gmail > span:before { 267 | content: "m"; 268 | color: red; 269 | } 270 | 271 | .zocial.google { 272 | background: #4e6cf7; 273 | } 274 | .zocial.google > span:before { 275 | content: "G"; 276 | } 277 | 278 | .zocial.googleplus { 279 | background: #282626; 280 | } 281 | .zocial.googleplus:before { 282 | content: ""; 283 | display: block; 284 | height: 0.2em; 285 | margin-bottom: -0.1em; 286 | width: 100%; 287 | position: relative; 288 | left: 0em; 289 | top: 0; 290 | 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)); 291 | background: -webkit-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 292 | background: -moz-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 293 | background: -o-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 294 | background: -ms-linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 295 | background: linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b); 296 | -moz-border-radius: 0.2em 0.2em 0 0; 297 | -webkit-border-radius: 0.2em 0.2em 0 0; 298 | -o-border-radius: 0.2em 0.2em 0 0; 299 | -ms-border-radius: 0.2em 0.2em 0 0; 300 | -khtml-border-radius: 0.2em 0.2em 0 0; 301 | border-radius: 0.2em 0.2em 0 0; 302 | border-bottom: 1px solid rgba(0, 0, 0, 0.8); 303 | -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); 304 | -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); 305 | -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); 306 | 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); 307 | z-index: 0; 308 | } 309 | .zocial.googleplus > span:before { 310 | content: "+"; 311 | } 312 | 313 | .zocial.gowalla { 314 | background: #ff720a; 315 | } 316 | .zocial.gowalla > span:before { 317 | content: "@"; 318 | } 319 | 320 | .zocial.guest { 321 | background: #1b4d6d; 322 | } 323 | .zocial.guest > span:before { 324 | content: "?"; 325 | } 326 | 327 | .zocial.html5 { 328 | background: #ff3617; 329 | } 330 | .zocial.html5 > span:before { 331 | content: "5"; 332 | } 333 | 334 | .zocial.ie { 335 | background: #00a1d9; 336 | } 337 | .zocial.ie > span:before { 338 | content: "6"; 339 | } 340 | 341 | .zocial.instapaper { 342 | color: #222222 !important; 343 | background: #eeeeee; 344 | } 345 | .zocial.instapaper > span:before { 346 | content: "I"; 347 | } 348 | 349 | .zocial.intensedebate { 350 | background: #0099e1; 351 | } 352 | .zocial.intensedebate > span:before { 353 | content: "{"; 354 | } 355 | 356 | .zocial.itunes { 357 | background: #222222; 358 | } 359 | .zocial.itunes > span:before { 360 | content: "A"; 361 | } 362 | 363 | .zocial.lastfm { 364 | background: #dc1a23; 365 | } 366 | .zocial.lastfm > span:before { 367 | content: "l"; 368 | } 369 | 370 | .zocial.linkedin { 371 | background: #0083a8; 372 | } 373 | .zocial.linkedin > span:before { 374 | content: "L"; 375 | } 376 | 377 | .zocial.meetup { 378 | background: #ff0026; 379 | } 380 | .zocial.meetup > span:before { 381 | content: "M"; 382 | } 383 | 384 | .zocial.openid { 385 | background: #f5f5f5; 386 | color: #333333 !important; 387 | } 388 | .zocial.openid > span:before { 389 | content: "o"; 390 | color: #ff921d; 391 | } 392 | 393 | .zocial.paypal { 394 | background: #ff921d; 395 | color: #032751 !important; 396 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 397 | } 398 | .zocial.paypal > span:before { 399 | content: "$"; 400 | } 401 | 402 | .zocial.plancast { 403 | background: #e7ebed; 404 | color: #333333 !important; 405 | } 406 | .zocial.plancast > span:before { 407 | content: "P"; 408 | } 409 | 410 | .zocial.posterous { 411 | background: #ffd959; 412 | color: #bc7134 !important; 413 | } 414 | .zocial.posterous > span:before { 415 | content: "~"; 416 | } 417 | 418 | .zocial.rss { 419 | background: #ff7f25; 420 | } 421 | .zocial.rss > span:before { 422 | content: "R"; 423 | } 424 | 425 | .zocial.scribd { 426 | background: #231c1a; 427 | } 428 | .zocial.scribd > span:before { 429 | content: "}"; 430 | color: #00d5ea !important; 431 | } 432 | 433 | .zocial.skype { 434 | background: #00a2ed; 435 | } 436 | .zocial.skype > span:before { 437 | content: "S"; 438 | } 439 | 440 | .zocial.smashingmag { 441 | background: #ff4f27; 442 | } 443 | .zocial.smashingmag > span:before { 444 | content: "*"; 445 | } 446 | 447 | .zocial.songkick { 448 | background: #ff0050; 449 | } 450 | .zocial.songkick > span:before { 451 | content: "k"; 452 | } 453 | 454 | .zocial.soundcloud { 455 | background: #ff4500; 456 | } 457 | .zocial.soundcloud > span:before { 458 | content: "s"; 459 | } 460 | 461 | .zocial.spotify { 462 | background: #60af00; 463 | } 464 | .zocial.spotify > span:before { 465 | content: "=zocial-"; 466 | } 467 | 468 | .zocial.tumblr { 469 | background: #374a61; 470 | } 471 | .zocial.tumblr > span:before { 472 | content: "t"; 473 | } 474 | 475 | .zocial.twitter { 476 | background: #e9f9ff; 477 | color: #3c6b9c !important; 478 | } 479 | .zocial.twitter > span:before { 480 | content: "T"; 481 | } 482 | 483 | .zocial.vimeo { 484 | background: #00a2cd; 485 | } 486 | .zocial.vimeo > span:before { 487 | content: "V"; 488 | } 489 | 490 | .zocial.wikipedia { 491 | background: white; 492 | color: black !important; 493 | } 494 | .zocial.wikipedia > span:before { 495 | content: ","; 496 | } 497 | 498 | .zocial.wordpress { 499 | background: #464646; 500 | } 501 | .zocial.wordpress > span:before { 502 | content: "w"; 503 | } 504 | 505 | .zocial.yahoo { 506 | background: #a200c2; 507 | } 508 | .zocial.yahoo > span:before { 509 | content: "Y"; 510 | } 511 | 512 | .zocial.yelp { 513 | background: #e60010; 514 | } 515 | .zocial.yelp > span:before { 516 | content: "y"; 517 | } 518 | 519 | .zocial.youtube { 520 | background: red; 521 | } 522 | .zocial.youtube > span:before { 523 | content: "U"; 524 | } 525 | -------------------------------------------------------------------------------- /test/sass/stylesheet.sass: -------------------------------------------------------------------------------- 1 | // Compass 2 | @import compass 3 | 4 | // CSS Reset 5 | @import compass/reset 6 | 7 | // Zocial 8 | @import "../../stylesheets/zocial" 9 | +zocial 10 | +zocial-colors 11 | 12 | body 13 | background: #f0ecdf 14 | color: #312c2a 15 | font: 10px/16px "Baskerville Old Face", Georgia, serif 16 | 17 | .container 18 | +pie-clearfix 19 | margin: 50px auto 20 | width: 620px 21 | 22 | .headings 23 | +text-shadow(rgba(#fff, .75) 0 1px 0) 24 | +opacity(.9) 25 | background: url("http://zocial.smcllns.com/img/dingbat.png") no-repeat 50% bottom 26 | letter-spacing: 1px 27 | height: 80px 28 | margin: 29 | top: 25px 30 | bottom: 30px 31 | text-align: center 32 | a 33 | color: inherit 34 | padding-bottom: 3px 35 | text-decoration: none 36 | &:hover 37 | border-bottom: 1px solid rgba(#312c2a, .3) 38 | 39 | h1 40 | @extend .headings 41 | font-size: 30px 42 | 43 | h2 44 | @extend .headings 45 | font-size: 12px 46 | height: 80px 47 | letter-spacing: 1px 48 | margin: 49 | top: 25px 50 | bottom: 30px 51 | 52 | 53 | .buttons 54 | +box-shadow(#d9d6cd 0 0 10px 5px) 55 | background: #fff 56 | padding: 50px 57 | 58 | .z-buttons 59 | margin-bottom: 40px 60 | 61 | .z-buttons, .z-icons 62 | a, button 63 | margin: 64 | right: 10px 65 | bottom: 15px 66 | button 67 | display: none -------------------------------------------------------------------------------- /test/sass/zocial.sass: -------------------------------------------------------------------------------- 1 | // Zocial 2 | $zocial-font-size: 1.6em 3 | $zocial-text-font: times 4 | @import "../../stylesheets/zocial" 5 | 6 | +zocial 7 | 8 | // Custom mixin boilerplate 9 | // =zocial-custom($zocial-class: tsw) 10 | // .zocial.#{$zocial-class} 11 | // background: #000 12 | // color: #000 !important 13 | // text-shadow: 0 1px 0 rgba(#000,.5) 14 | // & > span:before 15 | // content: "tsw" 16 | // 17 | // +zocial-custom -------------------------------------------------------------------------------- /test/tmp/restart.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamstac/zocial/fe0fe91cf71c6c0871598a19cc6b482d072b446e/test/tmp/restart.txt -------------------------------------------------------------------------------- /test/views/_layout.haml: -------------------------------------------------------------------------------- 1 | = render :template => "/layouts/application.haml" -------------------------------------------------------------------------------- /test/views/index.haml: -------------------------------------------------------------------------------- 1 | - @title = "Zocial: CSS3 Buttons, Sass Framework." 2 | 3 | %h1= @title 4 | 5 | .buttons 6 | .z-buttons 7 | %button.zocial.twitter 8 | %span Sign in with Twitter 9 | %a(href="#" class="zocial twitter") 10 | %span Sign in with Twitter 11 | %button.zocial.facebook 12 | %span Sign in with Facebook 13 | %a(href="#" class="zocial facebook") 14 | %span Sign in with Facebook 15 | %button.zocial.googleplus 16 | %span Sign in with Google+ 17 | %a(href="#" class="zocial googleplus") 18 | %span Sign in with Google+ 19 | %button.zocial.github 20 | %span Fork me on Github 21 | %a(href="#" class="zocial github") 22 | %span Fork me on Github 23 | %button.zocial.rss 24 | %span Subscribe to RSS 25 | %a(href="#" class="zocial rss") 26 | %span Subscribe to RSS 27 | %button.zocial.smashingmag 28 | %span Read this on Smashing Magazine 29 | %a(href="#" class="zocial smashingmag") 30 | %span Read this on Smashing Magazine 31 | -# Colors 32 | %a(href="#" class="zocial white") 33 | %span Sign in with White 34 | %a(href="#" class="zocial black") 35 | %span Sign in with Black 36 | %a(href="#" class="zocial red") 37 | %span Sign in with Red 38 | %a(href="#" class="zocial green") 39 | %span Sign in with Green 40 | %a(href="#" class="zocial blue") 41 | %span Sign in with Blue 42 | 43 | .z-icons 44 | %button.zocial.icon.twitter 45 | %span Sign in with Twitter 46 | %a(href="#" class="zocial icon twitter") 47 | %span Sign in with Twitter 48 | %button.zocial.icon.facebook 49 | %span Sign in with Facebook 50 | %a(href="#" class="zocial icon facebook") 51 | %span Sign in with Facebook 52 | %button.zocial.icon.googleplus 53 | %span Sign in with Google+ 54 | %a(href="#" class="zocial icon googleplus") 55 | %span Sign in with Google+ 56 | %button.zocial.icon.github 57 | %span Fork me on Github 58 | %a(href="#" class="zocial icon github") 59 | %span Fork me on Github 60 | %button.zocial.icon.rss 61 | %span Subscribe to RSS 62 | %a(href="#" class="zocial icon rss") 63 | %span Subscribe to RSS 64 | %button.zocial.icon.smashingmag 65 | %span Read this on Smashing Magazine 66 | %a(href="#" class="zocial icon smashingmag") 67 | %span Read this on Smashing Magazine 68 | -# Colors 69 | %a(href="#" class="zocial icon white") 70 | %span Sign in with White 71 | %a(href="#" class="zocial icon black") 72 | %span Sign in with Black 73 | %a(href="#" class="zocial icon red") 74 | %span Sign in with Red 75 | %a(href="#" class="zocial icon green") 76 | %span Sign in with Green 77 | %a(href="#" class="zocial icon blue") 78 | %span Sign in with Blue 79 | 80 | %h2 81 | %a(href="https://github.com/adamstac/zocial") Fork Me. I'm Open Sourced on Github. 82 | %span ~ Follow → 83 | %a(href="http://twitter.com/smcllns") @smcllns 84 | %span and 85 | %a(href="http://twitter.com/adamstac") @adamstac 86 | -------------------------------------------------------------------------------- /test/views/layouts/application.haml: -------------------------------------------------------------------------------- 1 | !!! 5 2 | %html{html_attrs} 3 | %head 4 | %title= @title 5 | %link{:href => "/stylesheets/stylesheet.css", :media => "all", :rel => "stylesheet", :type => "text/css"} 6 | %link{:href => "http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic", :rel => "stylesheet", :type => "text/css"} 7 | %body 8 | .container 9 | = yield -------------------------------------------------------------------------------- /zocial.gemspec: -------------------------------------------------------------------------------- 1 | require './lib/zocial' 2 | 3 | Gem::Specification.new do |s| 4 | # Release Specific Information 5 | s.version = Zocial::VERSION 6 | s.date = Zocial::DATE 7 | 8 | # Gem Details 9 | s.name = "zocial" 10 | s.description = %q{Zocial CSS3 button set and vector icons with @font-face} 11 | s.summary = %q{Zocial CSS3 button set and vector icons with @font-face as a Sass mixin and usable as a Compass extension} 12 | s.authors = ["Adam Stacoviak", "Sam Collins"] 13 | s.email = ["adam@stacoviak.com", "sam@eventasaur.us"] 14 | s.homepage = "https://github.com/adamstac/zocial" 15 | 16 | # Gem Files 17 | s.files = ["README.mdown"] 18 | s.files += Dir.glob("lib/**/*.*") 19 | s.files += Dir.glob("stylesheets/**/*.*") 20 | s.files += Dir.glob("templates/**/*.*") 21 | 22 | # Gem Bookkeeping 23 | s.required_rubygems_version = ">= 1.3.6" 24 | s.rubygems_version = %q{1.3.6} 25 | s.add_dependency("compass", [">= 0.11.5"]) 26 | end --------------------------------------------------------------------------------