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="span3">
<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/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>

View File

@ -58,7 +58,7 @@
<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/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>
</body>

View File

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

View File

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

View File

@ -8,21 +8,21 @@ $(function() {
$('pre').addClass('prettyprint');
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: 'https://api.github.com/repos/fortawesome/Font-Awesome',
dataType: 'jsonp',
success: function(data) {
$('#watchers').html(data.data.watchers);
$('#forks').html(data.data.forks);
}
});
// // 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: 'https://api.github.com/repos/fortawesome/Font-Awesome',
// dataType: 'jsonp',
// success: function(data) {
// $('#watchers').html(data.data.watchers);
// $('#forks').html(data.data.forks);
// }
// });
});

View File

@ -122,23 +122,25 @@ li, .nav li {
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 1.25em;
width: 18/14em;
text-align: center;
&.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;
text-indent: -.75em;
text-indent: -10/14em;
margin-left: 28/14em;
li {
> li {
[class^="icon-"],
[class*=" icon-"] {
width: .75em;
.icon-li {
width: 10/14em;
}
}
}

View File

@ -18,7 +18,7 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
#iconCarousel {
a { color: @white; }
@size: 215px;
@size: 220px;
font-size: @size;
text-align: center;
line-height: @size + 5;
@ -30,10 +30,10 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
border-width: 0;
font-size: 30px;
line-height: 25px;
left: @size - 100px;
left: 300/2 - 33px;
&.right {
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]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[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">-->
---
layout: base
title: Font Awesome Visual Test Cases
---
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![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>
<section class="container">
<h1 class="page-header">Visual Test Cases</h1>
<h3>Icons <small>Icons should have proper alignment and not be clipped</small></h3>
<div class="row">
@ -514,20 +475,65 @@
<h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3>
<div class="row">
<div class="span6">
<ul class="icons">
<li><i class="icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<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-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul">
<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">
<ul class="icons">
<li><i class="icon-double-angle-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<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-building icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul">
<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 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>
@ -575,10 +581,4 @@
<button class="btn btn-large"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button>
</div>
</div>
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/bootstrap-222.min.js"></script>
</body>
</html>
</section>