This commit is contained in:
davegandy 2013-05-04 21:41:26 -04:00
parent cd6836ecbb
commit 3c10a7964a
8 changed files with 108 additions and 103 deletions

View File

@ -20,6 +20,8 @@
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<ul class="the-icons"> <ul class="the-icons">
<li><a href="{{ site.baseurl }}icon/expand-alt"><i class="icon-expand-alt"></i> icon-expand-alt</a></li>
<li><a href="{{ site.baseurl }}icon/collapse-alt"><i class="icon-collapse-alt"></i> icon-collapse-alt</a></li>
<li><a href="{{ site.baseurl }}icon/smile"><i class="icon-smile"></i> icon-smile</a></li> <li><a href="{{ site.baseurl }}icon/smile"><i class="icon-smile"></i> icon-smile</a></li>
<li><a href="{{ site.baseurl }}icon/frown"><i class="icon-frown"></i> icon-frown</a></li> <li><a href="{{ site.baseurl }}icon/frown"><i class="icon-frown"></i> icon-frown</a></li>
<li><a href="{{ site.baseurl }}icon/meh"><i class="icon-meh"></i> icon-meh</a></li> <li><a href="{{ site.baseurl }}icon/meh"><i class="icon-meh"></i> icon-meh</a></li>

View File

@ -58,7 +58,7 @@
<script src="{{ site.baseurl }}assets/js/underscore.min.js"></script> <script src="{{ site.baseurl }}assets/js/underscore.min.js"></script>
<script src="{{ site.baseurl }}assets/js/backbone.min.js"></script> <script src="{{ site.baseurl }}assets/js/backbone.min.js"></script>
<script src="{{ site.baseurl }}assets/js/prettify.min.js"></script> <script src="{{ site.baseurl }}assets/js/prettify.min.js"></script>
<script src="{{ site.baseurl }}assets/js/bootstrap-222.min.js"></script> <script src="{{ site.baseurl }}assets/js/bootstrap-2.3.1.min.js"></script>
<script src="{{ site.baseurl }}assets/js/index/index.js"></script> <script src="{{ site.baseurl }}assets/js/index/index.js"></script>
</body> </body>

View File

@ -122,7 +122,7 @@ li [class^="icon-"],
li [class*=" icon-"], li [class*=" icon-"],
.nav li [class*=" icon-"] { .nav li [class*=" icon-"] {
display: inline-block; display: inline-block;
width: 1.25em; width: 1.2857142857142858em;
text-align: center; text-align: center;
} }
li [class^="icon-"].icon-large, li [class^="icon-"].icon-large,
@ -131,15 +131,16 @@ li [class*=" icon-"].icon-large,
.nav li [class*=" icon-"].icon-large { .nav li [class*=" icon-"].icon-large {
/* increased font size for icon-large */ /* increased font size for icon-large */
width: 1.5625em; width: 1.5714285714285714em;
} }
ul.icons { ul.icons-ul {
list-style-type: none; list-style-type: none;
text-indent: -0.75em; text-indent: -0.7142857142857143em;
margin-left: 2em;
} }
ul.icons li [class^="icon-"], ul.icons-ul > li [class^="icon-"],
ul.icons li [class*=" icon-"] { ul.icons-ul > li .icon-li {
width: .75em; width: 0.7142857142857143em;
} }
.icon-muted { .icon-muted {
color: #eeeeee; color: #eeeeee;

View File

@ -5478,27 +5478,27 @@ h6 {
font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
#iconCarousel { #iconCarousel {
font-size: 215px; font-size: 220px;
text-align: center; text-align: center;
line-height: 220px; line-height: 225px;
text-shadow: 2px 2px 3px #222222; text-shadow: 2px 2px 3px #222222;
} }
#iconCarousel a { #iconCarousel a {
color: #ffffff; color: #ffffff;
} }
#iconCarousel .carousel-control { #iconCarousel .carousel-control {
top: 248px; top: 253px;
width: 30px; width: 30px;
height: 30px; height: 30px;
background: none; background: none;
border-width: 0; border-width: 0;
font-size: 30px; font-size: 30px;
line-height: 25px; line-height: 25px;
left: 115px; left: 117px;
} }
#iconCarousel .carousel-control.right { #iconCarousel .carousel-control.right {
left: auto; left: auto;
right: 115px; right: 117px;
} }
.jumbotron { .jumbotron {
background: #9d261d; background: #9d261d;

View File

@ -8,21 +8,21 @@ $(function() {
$('pre').addClass('prettyprint'); $('pre').addClass('prettyprint');
window.prettyPrint && prettyPrint(); window.prettyPrint && prettyPrint();
// inject twitter & github counts // // inject twitter & github counts
$.ajax({ // $.ajax({
url: 'http://api.twitter.com/1/users/show.json', // url: 'http://api.twitter.com/1/users/show.json',
data: {screen_name: 'fortaweso_me'}, // data: {screen_name: 'fortaweso_me'},
dataType: 'jsonp', // dataType: 'jsonp',
success: function(data) { // success: function(data) {
$('#followers').html(data.followers_count); // $('#followers').html(data.followers_count);
} // }
}); // });
$.ajax({ // $.ajax({
url: 'https://api.github.com/repos/fortawesome/Font-Awesome', // url: 'https://api.github.com/repos/fortawesome/Font-Awesome',
dataType: 'jsonp', // dataType: 'jsonp',
success: function(data) { // success: function(data) {
$('#watchers').html(data.data.watchers); // $('#watchers').html(data.data.watchers);
$('#forks').html(data.data.forks); // $('#forks').html(data.data.forks);
} // }
}); // });
}); });

View File

@ -122,23 +122,25 @@ li, .nav li {
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] { [class*=" icon-"] {
display: inline-block; display: inline-block;
width: 1.25em; width: 18/14em;
text-align: center; text-align: center;
&.icon-large { &.icon-large {
/* increased font size for icon-large */ /* increased font size for icon-large */
width: 1.25*1.25em; width: 22/14em;
} }
} }
} }
ul.icons {
ul.icons-ul {
list-style-type: none; list-style-type: none;
text-indent: -.75em; text-indent: -10/14em;
margin-left: 28/14em;
li { > li {
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] { .icon-li {
width: .75em; width: 10/14em;
} }
} }
} }

View File

@ -18,7 +18,7 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
#iconCarousel { #iconCarousel {
a { color: @white; } a { color: @white; }
@size: 215px; @size: 220px;
font-size: @size; font-size: @size;
text-align: center; text-align: center;
line-height: @size + 5; line-height: @size + 5;
@ -30,10 +30,10 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
border-width: 0; border-width: 0;
font-size: 30px; font-size: 30px;
line-height: 25px; line-height: 25px;
left: @size - 100px; left: 300/2 - 33px;
&.right { &.right {
left: auto; left: auto;
right: @size - 100px; right: 300/2 - 33px;
} }
} }
} }

View File

@ -1,49 +1,10 @@
<!DOCTYPE html> ---
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> layout: base
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> title: Font Awesome Visual Test Cases
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> ---
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8" />
<title>Font Awesome Tests</title>
<meta name="description" content="">
<meta name="author" content="">
<!--<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">-->
<!--[if lt IE 9]> <section class="container">
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <h1 class="page-header">Visual Test Cases</h1>
<![endif]-->
<!-- CSS
================================================== -->
<link rel="stylesheet" href="assets/css/site.css">
<link rel="stylesheet" href="assets/css/prettify.css">
<link rel="stylesheet" href="assets/css/font-awesome.css">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30136587-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="container">
<h1>Visual tests</h1>
<h3>Icons <small>Icons should have proper alignment and not be clipped</small></h3> <h3>Icons <small>Icons should have proper alignment and not be clipped</small></h3>
<div class="row"> <div class="row">
@ -514,20 +475,65 @@
<h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3> <h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3>
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<ul class="icons"> <div style="border: solid 1px #d3d3d3;">
<li><i class="icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <ul class="icons-ul">
<li><i class="icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="icon-li icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="icon-li icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul> </ul>
</div> </div>
</div>
<div class="span6"> <div class="span6">
<ul class="icons"> <div style="border: solid 1px #d3d3d3;">
<li><i class="icon-double-angle-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <ul class="icons-ul">
<li><i class="icon-arrow-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="icon-li icon-double-angle-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-building icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="icon-li icon-arrow-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li icon-building icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul> </ul>
</div> </div>
</div> </div>
</div>
<div class="row">
<div class="span6">
<div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul lead">
<li><i class="icon-li icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
<div class="span6">
<div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul lead">
<li><i class="icon-li icon-double-angle-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-arrow-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li icon-building icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="span6">
<div style="border: solid 1px #d3d3d3;">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
<div class="span6">
<div style="border: solid 1px #d3d3d3;">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
<h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3> <h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3>
@ -575,10 +581,4 @@
<button class="btn btn-large"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button> <button class="btn btn-large"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button>
</div> </div>
</div> </section>
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/bootstrap-222.min.js"></script>
</body>
</html>