Permalink
Browse files

Fixes for icon, nicer dropbox blue, and better sample page

  • Loading branch information...
Sam Collins
Sam Collins committed Jan 28, 2012
1 parent 5835e5e commit d71b9e70dc76875793c1daf60f1f52f1880fb779
Showing with 66 additions and 40 deletions.
  1. +7 −3 css/zocial.css
  2. +59 −37 sample.html
View
@@ -20,7 +20,7 @@
letter-spacing: 0;
padding: 0;
position: relative;
- text-decoration: none !important;
+ text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
display: inline-block;
}
@@ -119,7 +119,7 @@
.zocial.tumblr > span:before {content: "t";}
.zocial.dribbble > span:before {content: "D";}
.zocial.forrst > span:before {content: ":"; color: #50894F;}
-.zocial.dropbox > span:before {content: "d"; color: #4EA4E3;}
+.zocial.dropbox > span:before {content: "d"; color: #1F75CC;}
.zocial.posterous > span:before {content: "~";}
.zocial.flattr > span:before {content: "%";}
.zocial.spotify > span:before {content: "=";}
@@ -200,7 +200,7 @@
.zocial.foursquare {background: #44A8E0;}
.zocial.dribbble {background: #ea4c89;}
.zocial.forrst {background: #1E360D;}
-.zocial.dropbox {background: #f5f5f5; color: #312c2a !important;}
+.zocial.dropbox {background: #FFF; color: #312c2a !important;}
.zocial.posterous {background: #FFD959; color: #BC7134 !important;}
.zocial.flattr {background: #8ABA42;}
.zocial.spotify {background: #60AF00;}
@@ -264,4 +264,8 @@ button::-moz-focus-inner {
.zocial.icon {
width: 1.85em;
overflow: hidden;
+}
+.zocial.icon > span:before {
+ width: 1.85em;
+ padding: 0;
}
View
@@ -4,72 +4,94 @@
<link rel="stylesheet" type="text/css" href="css/zocial.css" />
<style>
html {
- background: #fff;
- border: 1px solid #eee;
- margin: 0 auto;
- padding: 2em 0;
- width: 600px;
+ background: #f0f0eb;
font-family: "Helvetica Neue", sans-serif;
}
+ body {
+ margin: 0 auto 2em;
+ padding: 2em 1em;
+ width: 600px;
+ background: #FFF;
+ box-shadow: 0 1px 1px rgba(0,0,0,0.5);
+ }
body .zocial {
margin: 8px 4px;
font-size: 16px;
}
+ h2 {
+ font-weight: normal;
+ font-size: 17px;
+ padding: 1em 0 0.75em;
+ border-bottom: 1px solid #eee;
+ color: #AAA;
+ }
</style>
</head>
<body>
<h1>Zocial Buttons Sample</h1>
- <h2>Buttons</h2>
+ <h2>The Popular Kids</h2>
<a href="#" class="zocial facebook"><span>Sign in with Facebook</span></a>
<a href="#" class="zocial googleplus"><span>Sign in with Google+</span></a>
<a href="#" class="zocial twitter"><span>Sign in with Twitter</span></a>
- <a href="#" class="zocial google"><span>Sign in with Google</span></a>
<a href="#" class="zocial linkedin"><span>Sign in with LinkedIn</span></a>
- <a href="#" class="zocial paypal"><span>Pay with Paypal</span></a>
- <a href="#" class="zocial amazon"><span>Sign in with Amazon</span></a>
+
+ <h2>The Cool Kids</h2>
<a href="#" class="zocial dropbox"><span>Sync with Dropbox</span></a>
<a href="#" class="zocial evernote"><span>Clip to Evernote</span></a>
- <a href="#" class="zocial skype"><span>Call me on Skype</span></a>
- <a href="#" class="zocial guest"><span>Sign in as guest</span></a>
- <a href="#" class="zocial spotify"><span>Play on Spotify</span></a>
- <a href="#" class="zocial lastfm"><span>Sign in with Last.fm</span></a>
- <a href="#" class="zocial songkick"><span>Sign in with Songkick</span></a>
<a href="#" class="zocial forrst"><span>Follow me on Forrst</span></a>
<a href="#" class="zocial dribbble"><span>Sign in with Dribbble</span></a>
<a href="#" class="zocial cloudapp"><span>Sign in to CloudApp</span></a>
<a href="#" class="zocial github"><span>Fork me on Github</span></a>
+ <a href="#" class="zocial spotify"><span>Play on Spotify</span></a>
+ <a href="#" class="zocial instapaper"><span>Read It Later</span></a>
+ <a href="#" class="zocial soundcloud"><span>Follow me on Soundcloud</span></a>
+ <a href="#" class="zocial tumblr"><span>Follow me on Tumblr</span></a>
+ <a href="#" class="zocial smashing"><span>Read on Smashing Magazine</span></a>
+ <a href="#" class="zocial appstore"><span>Available on the Mac App Store</span></a>
<a href="#" class="zocial itunes"><span>Download on iTunes</span></a>
<a href="#" class="zocial android"><span>Download on Android</span></a>
+
+ <h2>The Not-So-Cool But Have-To-Be-Invited Kids</h2>
+ <a href="#" class="zocial paypal"><span>Pay with Paypal</span></a>
+ <a href="#" class="zocial amazon"><span>Sign in with Amazon</span></a>
+ <a href="#" class="zocial skype"><span>Call me on Skype</span></a>
+ <a href="#" class="zocial lastfm"><span>Sign in with Last.fm</span></a>
+ <a href="#" class="zocial yelp"><span>Write a review on Yelp</span></a>
+ <a href="#" class="zocial foursquare"><span>Check in with foursquare</span></a>
+
+ <h2>The Older (but Solid) Kids</h2>
+ <a href="#" class="zocial wikipedia"><span>View on Wikipedia</span></a>
<a href="#" class="zocial disqus"><span>Sign in with Disqus</span></a>
- <a href="#" class="zocial yahoo"><span>Sign in with Yahoo</span></a>
+ <a href="#" class="zocial intensedebate"><span>Sign in with IntenseDebate</span></a>
+ <a href="#" class="zocial google"><span>Sign in with Google</span></a>
+ <a href="#" class="zocial gmail"><span>Sign in with Gmail</span></a>
<a href="#" class="zocial vimeo"><span>Upload to Vimeo</span></a>
- <a href="#" class="zocial chrome"><span>Add to Chrome</span></a>
- <a href="#" class="zocial ie"><span>Get a new browser</span></a>
- <a href="#" class="zocial html5"><span>Made from HTML5</span></a>
- <a href="#" class="zocial instapaper"><span>Read It Later</span></a>
<a href="#" class="zocial scribd"><span>Read more on Scribd</span></a>
- <a href="#" class="zocial wikipedia"><span>View on Wikipedia</span></a>
- <a href="#" class="zocial flattr"><span>Tip with Flattr</span></a>
- <a href="#" class="zocial tumblr"><span>Follow me on Tumblr</span></a>
- <a href="#" class="zocial posterous"><span>Subscribe to my Posterous</span></a>
- <a href="#" class="zocial gowalla"><span>Check in with Gowalla</span></a>
- <a href="#" class="zocial foursquare"><span>Check in with foursquare</span></a>
- <a href="#" class="zocial yelp"><span>Write a review on Yelp</span></a>
- <a href="#" class="zocial soundcloud"><span>Follow me on Soundcloud</span></a>
- <a href="#" class="zocial smashing"><span>Read on Smashing Magazine</span></a>
+ <a href="#" class="zocial youtube"><span>Subscribe on YouTube</span></a>
<a href="#" class="zocial wordpress"><span>Sign in with WordPress</span></a>
- <a href="#" class="zocial intensedebate"><span>Sign in with IntenseDebate</span></a>
- <a href="#" class="zocial openid"><span>Sign in with OpenID</span></a>
- <a href="#" class="zocial gmail"><span>Sign in with Gmail</span></a>
+ <a href="#" class="zocial songkick"><span>Sign in with Songkick</span></a>
+ <a href="#" class="zocial posterous"><span>Sign in with Posterous</span></a>
<a href="#" class="zocial eventbrite"><span>Sign in with Eventbrite</span></a>
- <a href="#" class="zocial eventasaurus"><span>Sign in with Eventasaurus</span></a>
- <a href="#" class="zocial meetup"><span>Sign in with Meetup.com</span></a>
+ <a href="#" class="zocial flattr"><span>Tip with Flattr</span></a>
<a href="#" class="zocial plancast"><span>Follow me on Plancast</span></a>
- <a href="#" class="zocial youtube"><span>Subscribe on YouTube</span></a>
- <a href="#" class="zocial appstore"><span>Available on the Mac App Store</span></a>
+
+
+ <h2>The Kids That Kinda Smell but Some People Don't Mind</h2>
+ <a href="#" class="zocial yahoo"><span>Submit resume for CEO</span></a>
+ <a href="#" class="zocial ie"><span>Download Internet Explorer 5</span></a>
+ <a href="#" class="zocial meetup"><span>Report bugs with Meetup.com</span></a>
+ <a href="#" class="zocial openid"><span>Learn how-to-use OpenID</span></a>
+ <a href="#" class="zocial html5"><span>Register now for HTML6</span></a>
+
+ <h2>The Kids That Nobody Normally Notices</h2>
+ <a href="#" class="zocial guest"><span>Sign in as guest</span></a>
<a href="#" class="zocial creativecommons"><span>View Creative Commons Licence</span></a>
<a href="#" class="zocial rss"><span>Subscribe to RSS</span></a>
+ <a href="#" class="zocial chrome"><span>Add to Chrome</span></a>
+
+ <h2>The He's-My-Son-So-Of-Course-He's-Here Kid</h2>
+ <a href="#" class="zocial eventasaurus"><span>Sign up for Eventasaurus</span></a>
<h2>Icons</h2>
<a href="#" class="zocial icon facebook"><span>Sign in with Facebook</span></a>
@@ -122,7 +144,7 @@ <h2>Icons</h2>
<a href="#" class="zocial icon creativecommons"><span>View Creative Commons Licence</span></a>
<a href="#" class="zocial icon rss"><span>Subscribe to RSS</span></a>
- <p>See a demo and more sample code at <a href="http://zocial.smcllns.com">zocial.smcllns.com</a> &mdash; <a href="http://twitter.com/smcllns">@smcllns</a></p>
-
+ <p>See a demo and more sample code at <a href="http://zocial.smcllns.com">zocial.smcllns.com</a> &mdash; ask questions to <a href="http://twitter.com/smcllns">@smcllns</a></p>
+
</body>
</html>

0 comments on commit d71b9e7

Please sign in to comment.