Permalink
Browse files

initial version

  • Loading branch information...
0 parents commit ebcc117ab2ff7bfc5a7fd978dd8b1bf47bad70ae @hagenburger committed Jan 17, 2011
Showing with 187 additions and 0 deletions.
  1. +3 −0 .gitignore
  2. +3 −0 Gemfile
  3. +20 −0 MIT-LICENSE
  4. +59 −0 README.md
  5. +2 −0 Rakefile
  6. +24 −0 github-badge.gemspec
  7. +11 −0 lib/github-badge.rb
  8. +5 −0 lib/github-badge/version.rb
  9. +60 −0 stylesheets/github-badge.scss
@@ -0,0 +1,3 @@
+pkg/*
+*.gem
+.bundle
@@ -0,0 +1,3 @@
+source :gemcutter
+
+gemspec
@@ -0,0 +1,20 @@
+Copyright (c) 2011 Nico Hagenburger
+
+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:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+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.
@@ -0,0 +1,59 @@
+github-badge
+============
+
+A 3d Github badge as Compass extension ([original blog post](http://www.hagenburger.net/BLOG/3d-Github-badge-with-pure-CSS3.html))
+
+
+Usage
+-----
+
+Make sure, you’re using [Sass](http://sass-lang.com/) and [Compass](http://compass-style.org/).
+
+HTML:
+
+ <a id="github" href="https://github.com/hagenburger">
+ <span>Fork me on GitHub!</span>
+ <span>Get free lemonade!</span>
+ </a>
+
+SCSS:
+
+ @import "compass";
+ @import "github-badge";
+
+ #github {
+ @include github-badge;
+ }
+
+
+Customization
+-------------
+
+ @import "compass";
+ @import "github-badge";
+
+ #github {
+ @include github-badge(
+ $background: image-url("background.png"),
+ $backside-backround: blue,
+ $text-color: #00f,
+ $backside-text-color: rgba(white, 0.5)
+ );
+ }
+
+
+Dependencies
+------------
+
+* Sass 3.1 (3.0 is not supported)
+* Compass 0.10 and 0.11
+
+
+Licence
+-------
+
+Released under the MIT Licence. See MIT-LICENCE for details.
+
+© [Nico Hagenburger](http://www.hagenburger.net/) 2011
+
+Follow [Nico on Twitter](http://twitter.com/hagenburger) or [Github](https://github.com/hagenburger).
@@ -0,0 +1,2 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks
@@ -0,0 +1,24 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path("../lib/github-badge/version", __FILE__)
+
+Gem::Specification.new do |s|
+ s.name = "github-badge"
+ s.version = Github::Badge::VERSION
+ s.platform = Gem::Platform::RUBY
+ s.authors = ['Nico Hagenburger']
+ s.email = ['gems@hagenburger.net']
+ s.homepage = "http://www.hagenburger.net/BLOG/3d-Github-badge-with-pure-CSS3.html"
+ s.summary = "A 3d Github badge as Compass extension"
+ s.description = "A 3d Github badge as Compass extension"
+
+ s.required_rubygems_version = ">= 1.3.6"
+
+ s.add_dependency "sass", ">= 3.1.0.alpha.0"
+ s.add_dependency "compass", ">= 0.10.0"
+
+ s.add_development_dependency "bundler", ">= 1.0.0"
+
+ s.files = `git ls-files`.split("\n")
+ s.executables = `git ls-files`.split("\n").map{|f| f =~ /^bin\/(.*)/ ? $1 : nil}.compact
+ s.require_path = 'lib'
+end
@@ -0,0 +1,11 @@
+base_directory = File.join(File.dirname(__FILE__), '..')
+Compass::Frameworks.register('github-badge', :path => base_directory)
+
+require 'sass'
+module Sass::Script::Functions
+ def compass_legacy_mode
+ version = Compass.version
+ legacy_mode = (version[:major].to_i == 0 and version[:minor].to_i < 11)
+ Sass::Script::Bool.new(legacy_mode)
+ end
+end
@@ -0,0 +1,5 @@
+module Github
+ module Badge
+ VERSION = "0.1.0"
+ end
+end
@@ -0,0 +1,60 @@
+@mixin github-badge($background: black, $backside-background: red, $text-color: white, $backside-text-color: $text-color) {
+ left: -65px;
+ height: 30px;
+ top: 40px;
+ position: absolute;
+ text-decoration: none;
+ width: 250px;
+ @include rotate(-45deg);
+ span {
+ background: $background;
+ color: $text-color;
+ font-size: 14px;
+ left: 0;
+ padding: 5px 0;
+ position: absolute;
+ text-align: center;
+ width: 250px;
+ @if compass-legacy-mode() {
+ @include box-shadow(rgba(red, 0.2), 1px, 1px, 10px);
+ }
+ @else {
+ color:green;
+ @include box-shadow(rgba(black, 0.2) 1px 1px 10px);
+ }
+ @include transition(opacity, 1s);
+ &:last-child {
+ // this is the backside
+ background: $backside-background;
+ color: $backside-text-color;
+ opacity: 0;
+ }
+ }
+ &:hover span {
+ &:first-child {
+ opacity: 0;
+ }
+ &:last-child {
+ opacity: 1;
+ }
+ }
+
+ @media all and (-webkit-transform-3d) {
+ span {
+ opacity: 1 !important;
+ -webkit-backface-visibility: hidden;
+ -webkit-transition: -webkit-transform 1s;
+ &:last-child {
+ -webkit-transform: rotateX(180deg);
+ }
+ }
+ &:hover span {
+ &:first-child {
+ -webkit-transform: rotateX(180deg);
+ }
+ &:last-child {
+ -webkit-transform: rotateX(360deg);
+ }
+ }
+ }
+}

0 comments on commit ebcc117

Please sign in to comment.