From fc9eafddeafbc67e05313a19809173e92181c4b4 Mon Sep 17 00:00:00 2001 From: Dave Gandy Date: Mon, 4 Jun 2012 15:10:35 -0400 Subject: [PATCH] adding social media buttons --- docs/assets/css/site.css | 62 ++++++++++++++++++++++++++++++----- docs/assets/js/index/index.js | 30 +++++++++++++++++ docs/assets/less/site.less | 50 +++++++++++++++++++++------- docs/index.html | 61 +++++++++++++++++----------------- 4 files changed, 152 insertions(+), 51 deletions(-) diff --git a/docs/assets/css/site.css b/docs/assets/css/site.css index c0b187580..ef64b5257 100644 --- a/docs/assets/css/site.css +++ b/docs/assets/css/site.css @@ -4525,20 +4525,14 @@ h6 { border-width: 3px; font-size: 17px; line-height: 28px; - left: 94.66666666666667px; + left: 100.66666666666667px; } #iconCarousel .carousel-control.right { left: auto; - right: 94.66666666666667px; -} -a[href^='http://']:after { - font-family: FontAwesome; - content: "\0020 \f08e"; -} -a[href^='http://']:after:hover { - text-decoration: none; + right: 100.66666666666667px; } .hero-unit { + margin-bottom: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; @@ -4674,6 +4668,52 @@ a[href^='http://']:after:hover { text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25); color: #333333; } +#social-buttons { + margin-bottom: 25px; + text-align: center; +} +#social-buttons .btn { + font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: bold; + font-size: 14px; + padding: 3px 10px 0; + line-height: 21px; +} +#social-buttons .count.btn { + font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: normal; + background-color: #ffffff; + background-image: -moz-linear-gradient(top, #ffffff, #ffffff); + background-image: -ms-linear-gradient(top, #ffffff, #ffffff); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff)); + background-image: -webkit-linear-gradient(top, #ffffff, #ffffff); + background-image: -o-linear-gradient(top, #ffffff, #ffffff); + background-image: linear-gradient(top, #ffffff, #ffffff); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0); + border-color: #ffffff #ffffff #d9d9d9; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + *background-color: #ffffff; + /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} +#social-buttons .count.btn:hover, +#social-buttons .count.btn:active, +#social-buttons .count.btn.active, +#social-buttons .count.btn.disabled, +#social-buttons .count.btn[disabled] { + background-color: #ffffff; + *background-color: #f2f2f2; +} +#social-buttons .count.btn:active, +#social-buttons .count.btn.active { + background-color: #e6e6e6 \9; +} +#social-buttons .watch, +#social-buttons .fork { + margin-right: 30px; +} .the-icons { list-style-type: none; margin-left: 0; @@ -4846,6 +4886,10 @@ a[href^='http://']:after:hover { .modal .modal-body .icon1 > div.thumbnail > div i { font-size: 12px; } +.label, +.badge { + background-color: #eeeeee; +} footer { color: #555555; border-top: 1px solid #eeeeee; diff --git a/docs/assets/js/index/index.js b/docs/assets/js/index/index.js index fa249c769..a38948fee 100644 --- a/docs/assets/js/index/index.js +++ b/docs/assets/js/index/index.js @@ -1,4 +1,34 @@ $(function() { + // start the icon carousel + $('#iconCarousel').carousel({ + interval: 5000 + }); + + // make code pretty + window.prettyPrint && prettyPrint(); + + // inject twitter & github counts + $.ajax({ + url: 'http://api.twitter.com/1/users/show.json', + data: {screen_name: 'fortaweso_me'}, + dataType: 'jsonp', + success: function(data) { + $('#followers').html(data.followers_count); + } + }); + $.ajax({ + url: 'http://github.com/api/v2/json/repos/show/FortAwesome/Font-Awesome', + dataType: 'jsonp', + success: function(data) { + $('#watchers').html(data.repository.watchers); + $('#forks').html(data.repository.forks); + } + }); + + + + + var firstInHistory = true; var MainView = Backbone.View.extend({ diff --git a/docs/assets/less/site.less b/docs/assets/less/site.less index 4cf2cfdee..b16691b1b 100644 --- a/docs/assets/less/site.less +++ b/docs/assets/less/site.less @@ -38,25 +38,26 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; } border-width: 3px; font-size: 17px; line-height: 28px; - left: @size / 3 + 3; + left: @size / 3 + 9; &.right { left: auto; - right: @size / 3 + 3; + right: @size / 3 + 9; } } } -a[href^='http://'] { - &:after { - font-family: FontAwesome; - content: "\0020 \f08e"; - &:hover { - text-decoration: none; - } - } -} +//a[href^='http://'] { +// &:after { +// font-family: FontAwesome; +// content: "\0020 \f08e"; +// &:hover { +// text-decoration: none; +// } +// } +//} .hero-unit { + margin-bottom: 20px; .border-radius(20px); // #gradient > .radial( lighten(@red, 10%), @red); background-color: @red; @@ -127,6 +128,27 @@ a[href^='http://'] { } } +#social-buttons { + margin-bottom: 25px; + text-align: center; + .btn { + font-family: @serifFontFamily; + font-weight: bold; + font-size: @baseFontSize; + padding: 3px 10px 0; + line-height: @baseLineHeight; + } + .count.btn { + font-family: @sansFontFamily; + font-weight: normal; + .buttonBackground(@white, @white); + } + .watch, .fork { + margin-right: 30px; + } +} + + .the-icons { list-style-type: none; margin-left: 0; @@ -258,6 +280,12 @@ a[href^='http://'] { } } +.label, +.badge { + background-color: @grayLighter; +} + + footer { color: @gray; border-top: 1px solid @grayLighter; diff --git a/docs/index.html b/docs/index.html index bc8cef3d0..71ebbdd73 100644 --- a/docs/index.html +++ b/docs/index.html @@ -58,9 +58,9 @@
+
-
@@ -85,38 +85,53 @@

The iconic font designed for use with Twitter Bootstrap

Download Font
Awesome v2.0 - View Project
on GitHub + View Project
on GitHub
+
+ + Watch + 3900+ + + + Fork + 200+ + + +
+
-

70 New Icons in v2.0

+

Desktop Font + Vectors

+ The full desktop font and a pdf of vectors are now included. Happy designing. +
+
+

70 New Icons in v2.0

All requested by our active community on the Font Awesome GitHub project.

IE7 Support

Font Awesome v2.0 now even supports IE7. If you need it, you have my condolences.
+
+

One font, 220 icons

In a single collection, Font Awesome is a pictographic language of web-related actions.
-
-

Free for commercial use

The Font Awesome webfont and CSS libraries are completely free for commercial use.
-

CSS control

- Easily style icon color, size, shadow, and anything that's possible with CSS. -
-
-

Infinite scalability

- Scalable vector graphics means icons look awesome at any size. +

Screen reader compatible

+ Font Awesome won't trip up screen readers, unlike most icon fonts.
@@ -125,12 +140,12 @@ Designed from scratch to be fully backwards compatible with Twitter Bootstrap 2.0.
-

Screen reader compatible

- Font Awesome won't trip up screen readers, unlike most icon fonts. +

CSS control

+ Easily style icon color, size, shadow, and anything that's possible with CSS.
-

Follow on Twitter

- Follow @fortaweso_me on Twitter for icon updates and styling tricks. +

Infinite scalability

+ Scalable vector graphics means icons look awesome at any size.
@@ -1048,21 +1063,5 @@ -