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">
<h2 class="page-header">New Styles in {{ site.fontawesome.minor_version }}</h2>
<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>
<div class="well well-transparent">
<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
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="col-md-4">
<h4><a href="#stacked">Stacked Icons</a></h4>
<div class="well well-transparent">
<div class="margin-top-sm margin-bottom-sm">
@ -39,7 +39,7 @@
</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>
<div class="well well-transparent">
<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">
<h1>{{ jumbotron_h1 }}</h1>
<p>{{ jumbotron_p }}</p>

View File

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

View File

@ -15,50 +15,53 @@
<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 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 %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fixed-width"></i>&nbsp; Icons</a></li>
<li class="divider"></li>
<li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-shield fa-fixed-width"></i>&nbsp; New Icons in {{ site.fontawesome.version }}</a></li>
<li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fixed-width"></i>&nbsp; Web Application Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fixed-width"></i>&nbsp; Currency Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-alt fa-fixed-width"></i>&nbsp; Text Editor Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-hand-right fa-fixed-width"></i>&nbsp; Directional Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-sign fa-fixed-width"></i>&nbsp; Video Player Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fixed-width"></i>&nbsp; Brand Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fixed-width"></i>&nbsp; Medical Icons</a></li>
</ul>
<li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "icons" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fixed-width"></i>&nbsp; Icons</a></li>
<li class="divider"></li>
<li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-shield fa-fixed-width"></i>&nbsp; New Icons in {{ site.fontawesome.version }}</a></li>
<li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fixed-width"></i>&nbsp; Web Application Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fixed-width"></i>&nbsp; Currency Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-alt fa-fixed-width"></i>&nbsp; Text Editor Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-hand-right fa-fixed-width"></i>&nbsp; Directional Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-sign fa-fixed-width"></i>&nbsp; Video Player Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fixed-width"></i>&nbsp; Brand Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fixed-width"></i>&nbsp; Medical Icons</a></li>
</ul>
</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 %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="divider"></li>
<li><a href="{{ page.relative_path }}examples/#new-styles">New Styles</a></li>
<li><a href="{{ page.relative_path }}examples/#inline-icons">Inline Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#larger-icons">Larger Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</a></li>
<li><a href="{{ page.relative_path }}examples/#buttons">Buttons</a></li>
<li><a href="{{ page.relative_path }}examples/#button-groups">Button Groups</a></li>
<li><a href="{{ page.relative_path }}examples/#button-dropdowns">Button Dropdowns</a></li>
<li><a href="{{ page.relative_path }}examples/#bulleted-lists">Bulleted Lists</a></li>
<li><a href="{{ page.relative_path }}examples/#navigation">Navigation</a></li>
<li><a href="{{ page.relative_path }}examples/#form-inputs">Form Inputs</a></li>
<li><a href="{{ page.relative_path }}examples/#animated-spinner">Animated Spinner</a></li>
<li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped</a></li>
<li><a href="{{ page.relative_path }}examples/#stacked">Stacked</a></li>
<li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
</ul>
<li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "examples" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="divider"></li>
<li><a href="{{ page.relative_path }}examples/#new-styles">New Styles</a></li>
<li><a href="{{ page.relative_path }}examples/#inline-icons">Inline Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#larger-icons">Larger Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</a></li>
<li><a href="{{ page.relative_path }}examples/#buttons">Buttons</a></li>
<li><a href="{{ page.relative_path }}examples/#button-groups">Button Groups</a></li>
<li><a href="{{ page.relative_path }}examples/#button-dropdowns">Button Dropdowns</a></li>
<li><a href="{{ page.relative_path }}examples/#bulleted-lists">Bulleted Lists</a></li>
<li><a href="{{ page.relative_path }}examples/#navigation">Navigation</a></li>
<li><a href="{{ page.relative_path }}examples/#form-inputs">Form Inputs</a></li>
<li><a href="{{ page.relative_path }}examples/#animated-spinner">Animated Spinner</a></li>
<li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped</a></li>
<li><a href="{{ page.relative_path }}examples/#stacked">Stacked</a></li>
<li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
</ul>
</li>
<li class="hidden-sm{% if page.navbar_active == "whats-new" %} active{% endif %}">
<a href="{{ page.relative_path }}whats-new/">What's New</a>
</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 == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
</ul>

View File

@ -1,4 +1,4 @@
<div id="why" class="feature-list">
<section id="why" class="feature-list">
<div class="row">
<div class="col-md-4 col-sm-6">
<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.
</div>
</div>
</div>
</section>

View File

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

View File

@ -9,7 +9,7 @@
.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 {
// 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
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 %}
{% include jumbotron.html %}