updates to index jumbotron

This commit is contained in:
davegandy 2013-05-04 19:13:40 -04:00
parent 8d5063c248
commit cd6836ecbb
6 changed files with 101 additions and 78 deletions

View file

@ -1,22 +1,24 @@
<div class="jumbotron"> <div class="jumbotron jumbotron-index">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="span8"> <div class="span8">
<div class="hero-content"> <div class="hero-content">
<h1>Font Awesome</h1> <h1>Font Awesome</h1>
<p>The iconic font designed for<br>use with Twitter Bootstrap</p> <p>The iconic font designed for Bootstrap</p>
<div class="actions"> <div class="actions">
<a class="btn btn-primary btn-large" href="https://github.com/FortAwesome/Font-Awesome/zipball/master" <a class="btn btn-primary btn-large" href="{{ site.font-awesome.github.url }}/zipball/master"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);"> onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);">
<i class="icon-download icon-2x pull-left"></i> <i class="icon-download-alt icon-large"></i>&nbsp;&nbsp;
Download Font<br>Awesome {{ site.font-awesome.version }}</a> Download
<a class="btn btn-large btn-github" href="https://github.com/FortAwesome/Font-Awesome" target="_blank" <!--Download Font Awesome-->
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);"> </a>
<i class="icon-github icon-2x pull-left"></i>
View Project<br>on GitHub</a>
</div> </div>
<div class="shameless-self-promotion"> <div class="shameless-self-promotion">
Version {{ site.font-awesome.version }} • Created & Maintained by Dave Gandy <a href="{{ site.font-awesome.github.url }}" target="_blank"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);">
GitHub Project</a> &nbsp;&nbsp;&middot;&nbsp;&nbsp;
Version {{ site.font-awesome.version }} &nbsp;&nbsp;&middot;&nbsp;&nbsp;
Created &amp; Maintained by Dave Gandy
</div> </div>
</div> </div>
</div> </div>
@ -44,10 +46,10 @@
<!-- Carousel nav --> <!-- Carousel nav -->
<a class="carousel-control left" href="#iconCarousel" data-slide="prev" <a class="carousel-control left" href="#iconCarousel" data-slide="prev"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);"> onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);">
<i class="icon-arrow-left"></i></a> <i class="icon-circle-arrow-left"></i></a>
<a class="carousel-control right" href="#iconCarousel" data-slide="next" <a class="carousel-control right" href="#iconCarousel" data-slide="next"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);"> onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);">
<i class="icon-arrow-right"></i></a> <i class="icon-circle-arrow-right"></i></a>
</div> </div>
</div> </div>
</div> </div>

View file

@ -11,7 +11,7 @@
<title>{% if page.title %}{{ page.title }}{% endif %}</title> <title>{% if page.title %}{{ page.title }}{% endif %}</title>
<meta name="description" content="Font Awesome, the iconic font designed for use with Bootstrap"> <meta name="description" content="Font Awesome, the iconic font designed for use with Bootstrap">
<meta name="author" content="Dave Gandy"> <meta name="author" content="Dave Gandy">
<!--<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">--> <meta name="viewport" content="initial-scale=1; maximum-scale=1">
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
@ -53,7 +53,7 @@
</div> </div>
{% include footer.html %} {% include footer.html %}
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <script src="http://platform.twitter.com/widgets.js"></script>
<script src="{{ site.baseurl }}assets/js/jquery-1.7.1.min.js"></script> <script src="{{ site.baseurl }}assets/js/jquery-1.7.1.min.js"></script>
<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>

View file

@ -5478,31 +5478,37 @@ 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: 280px; font-size: 215px;
text-align: center; text-align: center;
line-height: 285px; line-height: 220px;
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: 313px; top: 248px;
width: 23px; width: 30px;
height: 23px; height: 30px;
border-width: 3px; background: none;
font-size: 17px; border-width: 0;
font-size: 30px;
line-height: 25px; line-height: 25px;
left: 117px; left: 115px;
} }
#iconCarousel .carousel-control.right { #iconCarousel .carousel-control.right {
left: auto; left: auto;
right: 117px; right: 115px;
} }
.jumbotron { .jumbotron {
background: #9d261d; background: #9d261d;
border-bottom: 1px solid #721c15; border-bottom: 1px solid #721c15;
padding: 48px 0; background-color: #99251c;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(-40deg, #9d261d, #99251c);
background-image: -webkit-linear-gradient(-40deg, #9d261d, #99251c);
background-image: -o-linear-gradient(-40deg, #9d261d, #99251c);
background-image: linear-gradient(-40deg, #9d261d, #99251c);
text-shadow: 2px 2px 2px #333333; text-shadow: 2px 2px 2px #333333;
} }
.jumbotron, .jumbotron,
@ -5519,9 +5525,10 @@ h6 {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 30px; font-size: 30px;
line-height: 1.3; line-height: 1.3;
font-weight: lighter;
} }
.jumbotron .actions { .jumbotron .actions {
margin-top: 30px; margin-top: 25px;
} }
.jumbotron ul { .jumbotron ul {
margin-left: 50px; margin-left: 50px;
@ -5538,22 +5545,39 @@ h6 {
.jumbotron .btn-large { .jumbotron .btn-large {
font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 24px;
padding: 13px 23px 13px 22px; padding: 17px 30px;
margin-right: 10px; letter-spacing: -1px;
text-align: left;
} }
.jumbotron .hero-content { .jumbotron .hero-content {
text-align: center; text-align: center;
} }
.jumbotron .shameless-self-promotion { .jumbotron .shameless-self-promotion {
font-size: 12px; font-size: 14px;
margin-top: 15px; margin-top: 25px;
color: #ce938e; color: #c47d77;
text-shadow: none; text-shadow: none;
} }
.jumbotron .carbonad { .jumbotron .shameless-self-promotion a {
text-shadow: none; color: #e2bebb;
}
.jumbotron .shameless-self-promotion a:hover {
color: #ffffff;
}
.jumbotron-index {
padding: 40px 0;
}
.jumbotron-index h1 {
font-size: 80px;
letter-spacing: -2px;
line-height: 1;
margin: 0 0 15px;
}
.jumbotron-index p {
margin-top: 15px;
margin-bottom: 15px;
font-size: 30px;
line-height: 1.3;
} }
.jumbotron-ad { .jumbotron-ad {
padding: 20px 0; padding: 20px 0;
@ -5703,10 +5727,6 @@ section {
#social-buttons .fork { #social-buttons .fork {
margin-right: 30px; margin-right: 30px;
} }
.carbonad-horizontal {
width: 310px;
margin: 20px auto 10px;
}
.the-icons { .the-icons {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;

Binary file not shown.

File diff suppressed because one or more lines are too long

View file

@ -6,8 +6,6 @@
@import "lazy.less"; @import "lazy.less";
.navbar .brand { .navbar .brand {
// padding: 11px 20px 9px;
// color: @white;
font-family: @serifFontFamily; font-family: @serifFontFamily;
.icon-flag { padding-right: 3px; } .icon-flag { padding-right: 3px; }
} }
@ -20,22 +18,22 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
#iconCarousel { #iconCarousel {
a { color: @white; } a { color: @white; }
// border: solid 1px @white; @size: 215px;
@size: 280px;
font-size: @size; font-size: @size;
text-align: center; text-align: center;
line-height: @size + 5; line-height: @size + 5;
text-shadow: 2px 2px 3px @grayDarker; text-shadow: 2px 2px 3px @grayDarker;
.carousel-control { .carousel-control {
top: @size + 33px; top: @size + 33px;
.square(23px); .square(30px);
border-width: 3px; background: none;
font-size: 17px; border-width: 0;
font-size: 30px;
line-height: 25px; line-height: 25px;
left: @size / 2 - 23; left: @size - 100px;
&.right { &.right {
left: auto; left: auto;
right: @size / 2 - 23; right: @size - 100px;
} }
} }
} }
@ -43,10 +41,9 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
.jumbotron { .jumbotron {
background: @red; background: @red;
border-bottom: 1px solid @redDark; border-bottom: 1px solid @redDark;
padding: 48px 0;
// #gradient > .radial( lighten(@red, 10%), @red);
// background-color: @red;
&, h1 { color: @white; } &, h1 { color: @white; }
#gradient > .directional(@red, mix(@red, @redDark, 90%), -40deg);
// background-color: @red;
// &:after { // &:after {
// content:''; // content:'';
@ -70,8 +67,9 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
margin-bottom: 15px; margin-bottom: 15px;
font-size: 30px; font-size: 30px;
line-height: 1.3; line-height: 1.3;
font-weight: lighter;
} }
.actions { margin-top: 30px;} .actions { margin-top: 25px;}
text-shadow: 2px 2px 2px @grayDark; text-shadow: 2px 2px 2px @grayDark;
ul { ul {
margin-left: 50px; margin-left: 50px;
@ -85,38 +83,40 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
text-shadow: 1px 1px 1px @grayDark; text-shadow: 1px 1px 1px @grayDark;
} }
} }
// a { color: #fffeb8; }
.btn-large { .btn-large {
//// .buttonBackground(@white, #bbb);
font-family: @serifFontFamily; font-family: @serifFontFamily;
//// color: @grayDark;
// margin-top: 15px;
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 24px;
padding: 13px 23px 13px 22px; padding: 17px 30px;
// padding-left: 24px + 40; letter-spacing: -1px;
margin-right: 10px;
// .border-radius(8px);
// position: relative;
text-align: left;
// i {
// position: absolute;
// top: 8px;
// left: 15px;
// font-size: 46px;
// }
} }
.hero-content { .hero-content {
// width: 620px;
text-align: center; text-align: center;
} }
.shameless-self-promotion { .shameless-self-promotion {
font-size: 12px; font-size: 14px;
margin-top: 15px; margin-top: 25px;
color: mix(@white, @red, 50%); color: mix(@white, @red, 40%);
text-shadow: none; text-shadow: none;
a { color: mix(@white, @red, 70%); }
a:hover { color: mix(@white, @red, 100%); }
}
}
.jumbotron-index {
padding: 40px 0;
h1 {
font-size: 80px;
letter-spacing: -2px;
line-height: 1;
margin: 0 0 15px;
}
p {
margin-top: 15px;
margin-bottom: 15px;
font-size: 30px;
line-height: 1.3;
} }
.carbonad { text-shadow: none; }
} }
.jumbotron-ad { .jumbotron-ad {
@ -219,11 +219,6 @@ section {
} }
} }
.carbonad-horizontal {
width: 310px;
margin: 20px auto 10px;
}
.the-icons { .the-icons {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;