responsive screen-lg updated

src/_includes/examples/new.html

@@ -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">

src/_includes/jumbotron.html

@@ -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>

src/_includes/license.html

@@ -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>

src/_includes/navbar.html

@@ -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>

src/_includes/why.html

@@ -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>

src/assets/less/site-3.0.0.less

@@ -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";

src/assets/less/site/navbar.less → src/assets/less/site/bootstrap/navbar.less

@@ -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;

src/assets/less/site/responsive/screen-lg.less

@@ -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;
+  }
+}

src/examples.html

@@ -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 %}