Skip to content

Commit

Permalink
adding social media buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@davegandy
davegandy committed Jun 4, 2012
1 parent 71b6237 commit fc9eafd
Show file tree
Hide file tree
Showing 4 changed files with 152 additions and 51 deletions.
62 changes: 53 additions & 9 deletions docs/assets/css/site.css
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
30 changes: 30 additions & 0 deletions docs/assets/js/index/index.js
View file
@@ -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({
Expand Down
50 changes: 39 additions & 11 deletions docs/assets/less/site.less
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -258,6 +280,12 @@ a[href^='http://'] {
}
}

.label,
.badge {
background-color: @grayLighter;
}


footer {
color: @gray;
border-top: 1px solid @grayLighter;
Expand Down
61 changes: 30 additions & 31 deletions docs/index.html
View file
Expand Up @@ -58,9 +58,9 @@ <h3><a class="brand" href="#"><i class="icon-flag"></i> Font Awesome</a></h3>
<div class="active item"><div><i class="icon-flag"></i></div></div>
<div class="item"><div><i class="icon-magic"></i></div></div>
<div class="item"><div><i class="icon-beaker"></i></div></div>
<div class="item"><div><i class="icon-briefcase"></i></div></div>
<div class="item"><div><i class="icon-bullhorn"></i></div></div>
<div class="item"><div><i class="icon-umbrella"></i></div></div>
<div class="item"><div><i class="icon-cut"></i></div></div>
<div class="item"><div><i class="icon-star-empty"></i></div></div>
<div class="item"><div><i class="icon-envelope"></i></div></div>
<div class="item"><div><i class="icon-leaf"></i></div></div>
Expand All @@ -85,38 +85,53 @@ <h1>Font Awesome</h1>
<p>The iconic font designed for use with Twitter Bootstrap</p>
<div class="actions">
<a class="btn btn-primary btn-large" href="https://github.com/FortAwesome/Font-Awesome/zipball/master"><i class="icon-download"></i>Download Font<br>Awesome v2.0</a>
<a class="btn btn-large btn-github" href="https://github.com/FortAwesome/Font-Awesome"><i class="icon-github"></i>View Project<br>on GitHub</a>
<a class="btn btn-large btn-github" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github"></i>View Project<br>on GitHub</a>
</div>
</div>
</div>

<section id="social-buttons">
<span class="watch">
<a class="btn" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github"></i> Watch</a>
<a id="watchers" class="count btn" href="https://github.com/FortAwesome/Font-Awesome">3900+</a>
</span>
<span class="fork">
<a class="btn" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github"></i> Fork</a>
<a id="forks" class="count btn" href="#">200+</a>
</span>
<span class="follow">
<a class="btn" href="http://twitter.com/fortaweso_me/" target="_blank"><i class="icon-twitter"></i> Follow @fortaweso_me</a>
<span class="arrow-right"></span><span id="followers" class="count btn">1000+</span>
</span>
</section>

<section id="why">
<div class="row">
<div class="span4">
<h3><i class="icon-bullhorn icon-large"></i> 70 New Icons in v2.0</h3>
<h3><i class="icon-bullhorn icon-large"></i> Desktop Font + Vectors</h3>
The full desktop font and a pdf of vectors are now included. Happy designing.
</div>
<div class="span4">
<h3><i class="icon-beaker icon-large"></i> 70 New Icons in v2.0</h3>
All requested by our active community on the <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>.
</div>
<div class="span4">
<h3><i class="icon-ok icon-large"></i> IE7 Support</h3>
Font Awesome v2.0 now even supports IE7. If you need it, you have my condolences.
</div>
</div>
<div class="row">
<div class="span4">
<h3><i class="icon-flag icon-large"></i> One font, 220 icons</h3>
In a single collection, Font Awesome is a pictographic language of web-related actions.
</div>
</div>
<div class="row">
<div class="span4">
<h3><i class="icon-gift icon-large"></i> Free for commercial use</h3>
The Font Awesome webfont and CSS libraries are completely free for commercial use.
</div>
<div class="span4">
<h3><i class="icon-pencil icon-large"></i> CSS control</h3>
Easily style icon color, size, shadow, and anything that's possible with CSS.
</div>
<div class="span4">
<h3><i class="icon-resize-full icon-large"></i> Infinite scalability</h3>
Scalable vector graphics means icons look awesome at any size.
<h3><i class="icon-search icon-large"></i> Screen reader compatible</h3>
Font Awesome won't trip up screen readers, unlike most icon fonts.
</div>
</div>
<div class="row">
Expand All @@ -125,12 +140,12 @@ <h3><i class="icon-thumbs-up icon-large"></i> Made for Twitter Bootstrap</h3>
Designed from scratch to be fully backwards compatible with <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap 2.0</a>.
</div>
<div class="span4">
<h3><i class="icon-search icon-large"></i> Screen reader compatible</h3>
Font Awesome won't trip up screen readers, unlike most icon fonts.
<h3><i class="icon-pencil icon-large"></i> CSS control</h3>
Easily style icon color, size, shadow, and anything that's possible with CSS.
</div>
<div class="span4">
<h3><i class="icon-twitter icon-large"></i> Follow on Twitter</h3>
Follow <a href="http://twitter.com/fortaweso_me/" target="_blank">@fortaweso_me</a> on Twitter for icon updates and styling tricks.
<h3><i class="icon-resize-full icon-large"></i> Infinite scalability</h3>
Scalable vector graphics means icons look awesome at any size.
</div>
</div>
</section>
Expand Down Expand Up @@ -1048,21 +1063,5 @@ <h3><%= iconName %></h3>
<script src="assets/js/tw-bs-201/bootstrap-typeahead.js"></script>
<script src="assets/js/index/index.js"></script>

<script type="text/javascript">
$(function(){
$('#iconCarousel').carousel({
interval: 5000
});

// tooltips
$('#why').tooltip({
selector: "a[rel=tooltip]",
placement: 'bottom'
})

// make code pretty
window.prettyPrint && prettyPrint();
});
</script>
</body>
</html>

0 comments on commit fc9eafd

Please sign in to comment.