adding unofficial github buttons

This commit is contained in:
Mark Otto 2011-11-01 13:56:00 -07:00
parent f459f826af
commit 2534fee753
3 changed files with 85 additions and 2 deletions

View File

@ -39,6 +39,44 @@ body > .navbar-fixed .brand:hover {
}
/* Github buttons
-------------------------------------------------- */
.github-btn + .github-btn {
margin-left: 10px;
}
.github-btn {
display: inline-block;
height: 20px;
overflow: hidden;
}
.github-btn .btn,
.github-btn .count {
float: left;
padding: 1px 5px 1px 4px;
font-size: 11px;
font-weight: normal;
line-height: 16px;
color: #555;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.github-btn .btn {
box-shadow: none;
}
.github-btn .github-ico {
float: left;
margin-right: 4px;
opacity: .75;
}
.github-btn .count {
display: inline-block;
margin-left: 2px;
background-color: #fff;
border: 1px solid #ddd;
}
/* Jumbotrons
-------------------------------------------------- */
.jumbotron {
@ -59,7 +97,7 @@ body > .navbar-fixed .brand:hover {
font-weight: 300;
line-height: 36px;
}
.jumbotron .btn {
.jumbotron .btn-large {
font-size: 20px;
padding: 14px 24px;
margin-right: 5px;
@ -146,6 +184,7 @@ body > .navbar-fixed .brand:hover {
font-weight: normal;
color: #999;
}
.quick-links .github-btn,
.quick-links .tweet-btn,
.quick-links .follow-btn {
position: relative;

Binary file not shown.

After

Width:  |  Height:  |  Size: 398 B

View File

@ -57,6 +57,7 @@
<a href="#" class="btn primary btn-large">Download on GitHub</a>
Currently v2.0.0
</p>
<div class="benefits">
<h4>Feature highlights</h4>
<ul>
@ -79,9 +80,29 @@
<li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li>
<li class="divider">&middot;</li>
<li>
<span class="github-btn github-watchers">
<a href="https://github.com/twitter/bootstrap" class="btn">
<img class="github-ico" src="assets/img/github-16px.png">
Watch
</a>
<span class="count"></span>
</span>
<span class="github-btn github-forks">
<a href="https://github.com/twitter/bootstrap" class="btn">
<img class="github-ico" src="assets/img/github-16px.png">
Fork
</a>
<span class="count"></span>
</span>
</li>
<!--
<li><strong>Authors</strong></li>
<li><a href="http://twitter.com/mdo">@mdo</a></li>
<li><a href="http://twitter.com/fat">@fat</a></li>
-->
<li class="divider">&middot;</li>
<li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
@ -200,7 +221,7 @@
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script>
@ -209,5 +230,28 @@
<script src="../js/bootstrap-twipsy.js"></script>
<script src="../js/bootstrap-scrollspy.js"></script>
<script src="assets/js/application.js"></script>
<script type="text/javascript">
$(document).ready(function($){
window.repoCallback = function (obj) {
// Variables
var watchers = obj['repository']['watchers'];
var forks = obj['repository']['forks'];
// Echo out the counts in correct elements
$('.github-watchers .count').html(watchers);
$('.github-forks .count').html(forks);
// Debug log
// console.log("Watchers:" + watchers);
// console.log("Forks:" + forks);
}
$.ajax("http://github.com/api/v2/json/repos/show/twitter/bootstrap?callback=repoCallback", {dataType: "jsonp"});
});
</script>
</body>
</html>