responsive screen-lg updated

This commit is contained in:
davegandy 2013-10-06 11:59:04 -04:00
parent 30d83f7517
commit de05be2a8b
13 changed files with 111 additions and 53 deletions

View File

@ -1,7 +1,7 @@
<{% if page.navbar_active == "examples" %}div{% else %}section{% endif %} id="new-styles"> <{% if page.navbar_active == "examples" %}div{% else %}section{% endif %} id="new-styles">
<h2 class="page-header">New Styles in {{ site.fontawesome.minor_version }}</h2> <h2 class="page-header">New Styles in {{ site.fontawesome.minor_version }}</h2>
<div class="row"> <div class="row">
<div class="col-md-4 col-sm-6"> <div class="col-md-4">
<h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4> <h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4>
<div class="well well-transparent"> <div class="well well-transparent">
<i class="fa fa-shield"></i>&nbsp; normal<br> <i class="fa fa-shield"></i>&nbsp; normal<br>
@ -12,7 +12,7 @@
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4">
<h4><a href="#stacked">Stacked Icons</a></h4> <h4><a href="#stacked">Stacked Icons</a></h4>
<div class="well well-transparent"> <div class="well well-transparent">
<div class="margin-top-sm margin-bottom-sm"> <div class="margin-top-sm margin-bottom-sm">
@ -39,7 +39,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 col-sm-offset-3"> <div class="col-md-4">
<h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4> <h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4>
<div class="well well-transparent"> <div class="well well-transparent">
<ul class="fa-ul"> <ul class="fa-ul">

View File

@ -1,4 +1,4 @@
<div class="jumbotron hidden-print"> <div class="jumbotron jumbotron-ad hidden-print">
<div class="container"> <div class="container">
<h1>{{ jumbotron_h1 }}</h1> <h1>{{ jumbotron_h1 }}</h1>
<p>{{ jumbotron_p }}</p> <p>{{ jumbotron_p }}</p>

View File

@ -6,7 +6,7 @@
{% endcapture %} {% endcapture %}
{% include stripe-ad.html %} {% include stripe-ad.html %}
<div> <section>
<div class="alert alert-info"> <div class="alert alert-info">
<ul class="fa-ul margin-bottom-none"> <ul class="fa-ul margin-bottom-none">
<li> <li>
@ -15,7 +15,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </section>
<section> <section>
<h2 class="page-header">Font License</h2> <h2 class="page-header">Font License</h2>

View File

@ -15,7 +15,7 @@
<li class="hidden-sm {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li> <li class="hidden-sm {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li>
<li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ page.relative_path }}get-started/">Get Started</a></li> <li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ page.relative_path }}get-started/">Get Started</a></li>
<li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li> <li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li>
<li class="dropdown dropdown-split-right hidden-phone{% if page.navbar_active == "icons" %} active{% endif %}"> <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "icons" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
@ -33,7 +33,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li> <li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="dropdown dropdown-split-right hidden-phone{% if page.navbar_active == "examples" %} active{% endif %}"> <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "examples" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
@ -59,6 +59,9 @@
<li class="hidden-sm{% if page.navbar_active == "whats-new" %} active{% endif %}"> <li class="hidden-sm{% if page.navbar_active == "whats-new" %} active{% endif %}">
<a href="{{ page.relative_path }}whats-new/">What's New</a> <a href="{{ page.relative_path }}whats-new/">What's New</a>
</li> </li>
<li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "whats-new" %} active{% endif %}">
<a href="{{ page.relative_path }}whats-new/">New</a>
</li>
<li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li> <li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li>
<li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li> <li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
</ul> </ul>

View File

@ -1,4 +1,4 @@
<div id="why" class="feature-list"> <section id="why" class="feature-list">
<div class="row"> <div class="row">
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa fa-flag"></i> One Font, {{ icons | size }} Icons</h4> <h4><i class="fa fa-flag"></i> One Font, {{ icons | size }} Icons</h4>
@ -38,4 +38,4 @@
Font Awesome won't trip up screen readers, unlike other icon fonts. Font Awesome won't trip up screen readers, unlike other icon fonts.
</div> </div>
</div> </div>
</div> </section>

View File

@ -2,11 +2,12 @@
--- ---
@import "bootstrap-{{ site.bootstrap.version }}/bootstrap"; @import "bootstrap-{{ site.bootstrap.version }}/bootstrap";
@import "site/variables"; @import "site/bootstrap/variables";
@import "site/navbar"; @import "site/bootstrap/navbar";
@import "site/jumbotron"; @import "site/bootstrap/jumbotron";
@import "site/code"; @import "site/bootstrap/code";
@import "site/wells"; @import "site/bootstrap/wells";
@import "site/layout"; @import "site/layout";
@import "site/social-buttons"; @import "site/social-buttons";
@import "site/jumbotron-carousel"; @import "site/jumbotron-carousel";
@ -17,3 +18,5 @@
@import "site/footer"; @import "site/footer";
@import "site/lazy"; @import "site/lazy";
@import "site/carbonad"; @import "site/carbonad";
@import "site/responsive/screen-lg";

View File

@ -9,7 +9,7 @@
.fa-flag { padding-right: 3px; } .fa-flag { padding-right: 3px; }
} }
//.navbar .nav > li > a { padding: 12px 10px 9px; } .navbar-nav > li > a { padding: 12px 10px 9px; }
//.navbar-nav > li > a { //.navbar-nav > li > a {
// padding-top: 16px; // padding-top: 16px;

View File

@ -0,0 +1,52 @@
@media (min-width: @screen-lg) {
#icon-carousel {
@size: 290px;
font-size: @size;
line-height: @size + 5;
.carousel-control {
top: @size + 20px;
.square(30px);
font-size: 40px;
line-height: 35px;
left: 370/2 - 40px;
&.right {
right: 370/2 - 40px;
}
}
}
.jumbotron-ad {
padding: 65px 0 50px;
h1 {
margin-top: 25px;
font-size: 90px;
}
p {
font-size: 35px;
margin: 35px 0 20px;
}
}
.jumbotron-carousel {
padding: 50px 0;
h1 { font-size: 100px; }
p {
font-size: 40px;
margin: 20px 0;
}
.btn-large {
font-size: 30px;
padding: 21px 35px;
}
.shameless-self-promotion {
margin-top: 30px;
}
}
.stripe-ad .lead { margin-top: 7px; }
.lead {
font-size: 26px;
line-height: 36px;
}
}

View File

@ -4,7 +4,7 @@ title: Font Awesome Examples
navbar_active: examples navbar_active: examples
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa fa-magic fa-large"></i>&nbsp; Examples{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-magic fa-lg"></i>&nbsp; Examples{% endcapture %}
{% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %} {% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}