From 63787fc5b3986f544d069005df69d91b34f78d45 Mon Sep 17 00:00:00 2001
From: davegandy <dave@davegandy.com>
Date: Thu, 6 Jun 2013 13:59:03 -0230
Subject: [PATCH] responsive for tablet & phone

---
 source/_includes/footer.html                  |   9 +-
 source/_includes/jumbotron-slider.html        |   2 +-
 source/_includes/navbar.html                  | 112 ++++++++++--------
 source/_includes/whats-new.html               |   2 -
 source/_includes/why.html                     |   4 -
 source/assets/less/responsive-767px-max.less  |  46 +++++++
 .../assets/less/responsive-768px-979px.less   |  49 ++++++++
 source/assets/less/site.less                  |   6 +-
 source/assets/less/sticky-footer.less         |   2 +-
 source/assets/less/variables.less             |   2 +-
 source/community.html                         |   2 +-
 11 files changed, 168 insertions(+), 68 deletions(-)

diff --git a/source/_includes/footer.html b/source/_includes/footer.html
index e388e1b23..a780feaad 100644
--- a/source/_includes/footer.html
+++ b/source/_includes/footer.html
@@ -1,13 +1,16 @@
 <footer class="footer hidden-print">
   <div class="container text-center">
     <div>
-      <i class="icon-flag"></i> Font Awesome {{ site.fontawesome.version }} &middot;
+      <i class="icon-flag"></i> Font Awesome {{ site.fontawesome.version }}
+      <span class="hidden-phone">&middot;</span><br class="visible-phone">
       Created and Maintained by Dave Gandy &middot;
       <a href="http://twitter.com/byscuits">@byscuits</a>
     </div>
     <div>
-      Font Awesome font licensed under <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.version }}</a> &middot;
-      Code licensed under <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.version }}</a> &middot;
+      Font Awesome font licensed under <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.version }}</a>
+      <span class="hidden-phone">&middot;</span><br class="visible-phone">
+      Code licensed under <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.version }}</a>
+      <span class="hidden-phone hidden-tablet">&middot;</span><br class="visible-phone visible-tablet">
       Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a>
     </div>
     <div>
diff --git a/source/_includes/jumbotron-slider.html b/source/_includes/jumbotron-slider.html
index 4d4797cb9..faf4a0f6c 100644
--- a/source/_includes/jumbotron-slider.html
+++ b/source/_includes/jumbotron-slider.html
@@ -16,7 +16,7 @@
             <a href="{{ site.fontawesome.github.url }}"
                onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);">
               GitHub Project</a> &nbsp;&nbsp;&middot;&nbsp;&nbsp;
-            Version {{ site.fontawesome.version }} &nbsp;&nbsp;&middot;&nbsp;&nbsp;
+            Version {{ site.fontawesome.version }} <span class="hidden-phone">&nbsp;&nbsp;&middot;&nbsp;&nbsp;</span><br class="visible-phone">
             Created &amp; Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
           </div>
         </div>
diff --git a/source/_includes/navbar.html b/source/_includes/navbar.html
index 2535e4859..99e1f5819 100644
--- a/source/_includes/navbar.html
+++ b/source/_includes/navbar.html
@@ -1,59 +1,69 @@
 <div class="navbar navbar-inverse navbar-static-top hidden-print">
   <div class="navbar-inner">
     <div class="container">
+      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </a>
+
       <a class="brand" href="{{ page.relative_path }}"><i class="icon-flag"></i> Font Awesome</a>
-      <ul class="nav">
-        <li{% if page.navbar_active == "home" %} class="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{% if page.navbar_active == "icons" %} active{% endif %}">
-        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-          <i class="icon-caret-down"></i>
-        </a>
-        <ul class="dropdown-menu pull-right">
-          <li><a href="{{ page.relative_path }}icons/"><i class="icon-flag icon-fixed-width"></i>&nbsp; Icons</a></li>
-          <li class="divider"></li>
-          <li><a href="{{ page.relative_path }}icons/#new"><i class="icon-shield icon-fixed-width"></i>&nbsp; New Icons in {{ site.fontawesome.version }}</a></li>
-          <li><a href="{{ page.relative_path }}icons/#web-application"><i class="icon-camera-retro icon-fixed-width"></i>&nbsp; Web Application Icons</a></li>
-          <li><a href="{{ page.relative_path }}icons/#currency"><i class="icon-won icon-fixed-width"></i>&nbsp; Currency Icons</a></li>
-          <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="icon-file-text-alt icon-fixed-width"></i>&nbsp; Text Editor Icons</a></li>
-          <li><a href="{{ page.relative_path }}icons/#directional"><i class="icon-hand-right icon-fixed-width"></i>&nbsp; Directional Icons</a></li>
-          <li><a href="{{ page.relative_path }}icons/#video-player"><i class="icon-play-sign icon-fixed-width"></i>&nbsp; Video Player Icons</a></li>
-          <li><a href="{{ page.relative_path }}icons/#brand"><i class="icon-github icon-fixed-width"></i>&nbsp; Brand Icons</a></li>
-          <li><a href="{{ page.relative_path }}icons/#medical"><i class="icon-medkit icon-fixed-width"></i>&nbsp; Medical Icons</a></li>
+      <div class="nav-collapse collapse">
+        <ul class="nav">
+          <li class="hidden-tablet {% 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="icon-caret-down"></i>
+            </a>
+            <ul class="dropdown-menu pull-right">
+              <li><a href="{{ page.relative_path }}icons/"><i class="icon-flag icon-fixed-width"></i>&nbsp; Icons</a></li>
+              <li class="divider"></li>
+              <li><a href="{{ page.relative_path }}icons/#new"><i class="icon-shield icon-fixed-width"></i>&nbsp; New Icons in {{ site.fontawesome.version }}</a></li>
+              <li><a href="{{ page.relative_path }}icons/#web-application"><i class="icon-camera-retro icon-fixed-width"></i>&nbsp; Web Application Icons</a></li>
+              <li><a href="{{ page.relative_path }}icons/#currency"><i class="icon-won icon-fixed-width"></i>&nbsp; Currency Icons</a></li>
+              <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="icon-file-text-alt icon-fixed-width"></i>&nbsp; Text Editor Icons</a></li>
+              <li><a href="{{ page.relative_path }}icons/#directional"><i class="icon-hand-right icon-fixed-width"></i>&nbsp; Directional Icons</a></li>
+              <li><a href="{{ page.relative_path }}icons/#video-player"><i class="icon-play-sign icon-fixed-width"></i>&nbsp; Video Player Icons</a></li>
+              <li><a href="{{ page.relative_path }}icons/#brand"><i class="icon-github icon-fixed-width"></i>&nbsp; Brand Icons</a></li>
+              <li><a href="{{ page.relative_path }}icons/#medical"><i class="icon-medkit icon-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="icon-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{% if page.navbar_active == "whats-new" %} class="active"{% endif %}><a href="{{ page.relative_path }}whats-new/">
+          <span class="hidden-tablet">What's </span>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>
-        </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{% if page.navbar_active == "examples" %} active{% endif %}">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-            <i class="icon-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{% if page.navbar_active == "whats-new" %} class="active"{% endif %}><a href="{{ page.relative_path }}whats-new/">What's 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>
-      <ul class="nav pull-right">
-        <li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
-      </ul>
+        <ul class="nav pull-right">
+          <li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
+        </ul>
+      </div>
     </div>
   </div>
 </div>
diff --git a/source/_includes/whats-new.html b/source/_includes/whats-new.html
index e24562f06..a46e5bb77 100644
--- a/source/_includes/whats-new.html
+++ b/source/_includes/whats-new.html
@@ -24,8 +24,6 @@
       <a href="{{ page.relative_path }}examples/#stacked">stacking icons</a>, and better
       <a href="{{ page.relative_path }}examples/#bulleted-lists">bulleted lists</a>.
     </div>
-  </div>
-  <div class="row">
     <div class="span4 margin-bottom-large">
       <h4><i class="icon-magic"></i> Pixel Perfection at 14px</h4>
       Version 3.0 was re-created from the ground up to be razor sharp at Bootstrap's default 14px.
diff --git a/source/_includes/why.html b/source/_includes/why.html
index 44501e4c6..ce3b87d13 100644
--- a/source/_includes/why.html
+++ b/source/_includes/why.html
@@ -12,8 +12,6 @@
       <h4><i class="icon-fullscreen"></i> Infinite Scalability</h4>
       Scalable vector graphics means every icon looks awesome at any size.
     </div>
-  </div>
-  <div class="row">
     <div class="span4">
       <h4><i class="icon-microphone"></i> Free, as in Speech</h4>
       Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>.
@@ -26,8 +24,6 @@
       <h4><i class="icon-eye-open"></i> Perfect on Retina Displays</h4>
       Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
     </div>
-  </div>
-  <div class="row">
     <div class="span4">
       <h4><i class="icon-thumbs-up-alt"></i> Made for Bootstrap</h4>
       Designed from scratch to be fully compatible with <a href="{{ site.bootstrap.url }}">Bootstrap {{ site.bootstrap.version }}</a>.
diff --git a/source/assets/less/responsive-767px-max.less b/source/assets/less/responsive-767px-max.less
index 28f14f2af..924d9a95a 100755
--- a/source/assets/less/responsive-767px-max.less
+++ b/source/assets/less/responsive-767px-max.less
@@ -4,6 +4,52 @@
 
 
 @media (max-width: 767px) {
+  .jumbotron, footer, #social-buttons {
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-right: -20px;
+    margin-left: -20px;
+  }
 
+  #iconCarousel {
+    @size: 220px;
+    width: 352px;
+    margin: 30px auto 0;
+    .carousel-control {
+      top: @size / 2;
+      .square(44px);
+      font-size: 44px;
+      line-height: 44px;
+      left: 0;
+      &.right { right: 0; }
+    }
+  }
 
+  .jumbotron-index {
+    h1 { font-size: 50px; }
+    p { font-size: 20px; }
+    .btn-large {
+      font-size: 20px;
+      padding: 14px 26px;
+    }
+    .shameless-self-promotion { font-size: 12px; }
+  }
+
+  .jumbotron-ad {
+    h1 { font-size: 48px; }
+    p {
+      font-size: 24px;
+      margin-bottom: 20px;
+    }
+  }
+
+  .stripe-ad .lead {
+    margin: 0 0 30px;
+  }
+
+  .sticky-footer(170px, 40px, 40px, 60px); // sets default values for sticky footer
+  .footer {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
 }
diff --git a/source/assets/less/responsive-768px-979px.less b/source/assets/less/responsive-768px-979px.less
index fcf5908ed..d4095fe62 100755
--- a/source/assets/less/responsive-768px-979px.less
+++ b/source/assets/less/responsive-768px-979px.less
@@ -5,5 +5,54 @@
 
 @media (min-width: 768px) and (max-width: 979px) {
 
+  #iconCarousel {
+    @size: 200px;
+    font-size: @size;
+    line-height: @size + 5;
+    .carousel-control {
+      top: @size + 30px;
+      .square(30px);
+      font-size: 40px;
+      line-height: 40px;
+      left: 228/2 - 40px;
+      &.right {
+        right: 228/2 - 40px;
+      }
+    }
+  }
 
+  .jumbotron-index {
+    padding: 50px 0;
+    h1 { font-size: 65px; }
+    p { font-size: 25px; }
+    .shameless-self-promotion { font-size: 12px; }
+  }
+
+  .jumbotron-ad {
+    p { font-size: 28px; }
+  }
+
+  .stripe-ad {
+    .lead {
+      margin: 0;
+      font-size: 19px;
+    }
+    @ad-width: 302px;
+    .span8 { width: 476px + 228px - @ad-width; }
+    .span4 { width: @ad-width; }
+  }
+
+  #why, #whats-new {
+    .span4 { width: 352px; }
+  }
+
+  .the-icons {
+    .span3 { width: 228px; }
+  }
+
+  .sticky-footer(110px, 40px, 40px, 60px); // sets default values for sticky footer
+  .footer {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
 }
diff --git a/source/assets/less/site.less b/source/assets/less/site.less
index 458cf1c2b..e9f820f46 100644
--- a/source/assets/less/site.less
+++ b/source/assets/less/site.less
@@ -15,7 +15,7 @@
 
 .navbar .nav > li > a { padding: 12px 10px 9px; }
 .navbar .nav.pull-right { margin-right: -10px; }
-.navbar, .jumbotron, #social-buttons { min-width: 990px; } // necessary fix for non-responsive layouts
+//.navbar, .jumbotron, #social-buttons { min-width: 990px; } // necessary fix for non-responsive layouts
 
 h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
 
@@ -255,9 +255,7 @@ section { margin-top: 40px; }
 }
 
 #why, #whats-new {
-  .row {
-    margin-bottom: 20px;
-  }
+  .span4 { margin-bottom: 20px; }
   h4 {
     [class^="icon-"]:before,
     [class*=" icon-"]:before {
diff --git a/source/assets/less/sticky-footer.less b/source/assets/less/sticky-footer.less
index 72d519ab5..3b71ee3a9 100755
--- a/source/assets/less/sticky-footer.less
+++ b/source/assets/less/sticky-footer.less
@@ -12,6 +12,6 @@ html, body {
   height: 100%;
 }
 
-.footer { min-width: 990px; } // necessary fix for non-responsive layouts
+//.footer { min-width: 990px; } // necessary fix for non-responsive layouts
 
 .sticky-footer(90px, 40px, 40px, 60px); // sets default values for sticky footer
diff --git a/source/assets/less/variables.less b/source/assets/less/variables.less
index 74c091810..5b692ae1a 100755
--- a/source/assets/less/variables.less
+++ b/source/assets/less/variables.less
@@ -219,7 +219,7 @@
 
 // Navbar
 // -------------------------
-@navbarCollapseWidth:             979px;
+@navbarCollapseWidth:             767px;
 @navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
 
 @navbarHeight:                    40px;
diff --git a/source/community.html b/source/community.html
index 6132b7a10..c3c466e47 100644
--- a/source/community.html
+++ b/source/community.html
@@ -4,7 +4,7 @@ title: The Font Awesome Community
 navbar_active: community
 relative_path: ../
 ---
-{% capture jumbotron_h1 %}<i class="icon-thumbs-up icon-large"></i>&nbsp; Community{% endcapture %}
+{% capture jumbotron_h1 %}<i class="icon-thumbs-up-alt icon-large"></i>&nbsp; Community{% endcapture %}
 {% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %}
 
 {% include jumbotron.html %}