deblan-mirror/Fork-Awesome
1
0
Fork 0
mirror of https://github.com/ForkAwesome/Fork-Awesome synced 2024-05-01 14:22:45 +02:00
Code Issues Projects Releases Wiki Activity

adding social media buttons

Browse source
This commit is contained in:
Dave Gandy 2012-06-04 15:10:35 -04:00
parent 71b6237fc6
commit fc9eafddea
4 changed files with 152 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
docs/assets/css/site.css
View file

@ -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;

30
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({

50
docs/assets/less/site.less
View file

@ -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;

61
docs/index.html
View file

@ -58,9 +58,9 @@
<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>
@ -85,38 +85,53 @@
<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">
@ -125,12 +140,12 @@
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>
@ -1048,21 +1063,5 @@
<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>