adding kickstarter widget

accessibility/index.html

@@ -175,12 +175,20 @@
 <div class="jumbotron jumbotron-ad hidden-print">
   <div class="container">
 
-    
+    <div class="jumbotron-kickstarter">
+      <div class="jumbotron-text">
         <h1><i class="fa fa-universal-access" aria-hidden="true"></i>&nbsp; Accessibility</h1>
         <p>Make your icons awesome for all of your users</p>
+      </div>
+      <div class="jumbotron-ks-ad">
+        <div id="kickstarter-widget" class="kickstarter-widget-index">
+          <iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
 
         </div>
+      </div>
+    </div>
 
+  </div>
 </div>
 
 

assets/js/site.js

@@ -44,6 +44,12 @@ $(function () {
       url: "https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=fontawesome-banner",
       btn_text: "Check out the Kickstarter",
     },
+    {
+      quote: "Save 50% with the early backer price until Monday! Just $20!",
+      class: "kickstarter",
+      url: "https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=fontawesome-banner",
+      btn_text: "Font Awesome 5 Kickstarter",
+    },
   ];
 
   selectAd();

assets/less/site.less

@@ -32,6 +32,7 @@
 @import "site/sumome";
 @import "site/algolia";
 @import "site/kickstarter";
+@import "site/newsletter";
 
 @import "site/views";
 @import "site/store";

assets/less/site/kickstarter.less

@@ -1,3 +1,13 @@
 .btn-kickstarter {
   .button-variant(#fff, #489fdf, mix(#000,#489fdf,10%));
 }
+
+#kickstarter-widget {
+  margin: -30px auto -70px;
+  width: 220px;
+}
+
+.jumbotron-ad .well {
+  background-color: rgba(255,255,255,.3);
+  border-color: rgba(255,255,255,.15);
+}

assets/less/site/newsletter.less

@@ -0,0 +1,14 @@
+.jumbotron-ad #newsletter {
+  .btn {
+    color: @jumbotron-color;
+    border-color: mix(@jumbotron-color, @jumbotron-bg, 75%);
+    background-color: transparent;
+    text-shadow: 0 1px 0 rgba(0,0,0,0.15);
+    &:hover {
+      background-color: mix(@jumbotron-color, @jumbotron-bg, 95%);
+      border-color: mix(@jumbotron-color, @jumbotron-bg, 95%);
+      color: @jumbotron-bg;
+      text-shadow: 0 -1px 0 @jumbotron-color;
+    }
+  }
+}

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

@@ -55,4 +55,11 @@
   }
 
   .hide-lg { display: none; }
+
+  .jumbotron-ad #newsletter {
+    margin-top: 30px;
+    margin-right: 250px;
+    margin-bottom: -70px;
+  }
+
 }

assets/less/site/responsive/screen-sm-up.less

@@ -15,4 +15,12 @@
     }
   }
 
+  .jumbotron-kickstarter {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+
 }

assets/less/site/responsive/screen-sm.less

@@ -46,4 +46,9 @@
   .hide-sm { display: none; }
   .v-get-started .get-started-cdn { padding: 5px 22px 22px 22px; }
 
+
+  // .jumbotron-ks-ad { flex-basis: 25%; }
+  // .jumbotron-text { flex-basis: 75%; }
+  .jumbotron-ks-ad { width: 220px; }
+  .jumbotron-text { width: 500px; }
 }

assets/less/site/responsive/screen-xs.less

@@ -92,4 +92,12 @@
   .signup-button .btn { white-space: normal; }
   .v-get-started .get-started-cdn { padding: 5px 22px 22px 22px; }
 
+  #kickstarter-widget {
+    margin: 0 auto -40px;
+  }
+  .jumbotron-carousel {
+    #kickstarter-widget {
+      margin-top: 20px;
+    }
+  }
 }

cheatsheet/index.html

@@ -175,12 +175,20 @@
 <div class="jumbotron jumbotron-ad hidden-print">
   <div class="container">
 
-    
+    <div class="jumbotron-kickstarter">
+      <div class="jumbotron-text">
         <h1><i class="fa fa-list-ul" aria-hidden="true"></i>&nbsp; Cheatsheet</h1>
         <p>The complete Font Awesome 4.7.0 icon reference</p>
+      </div>
+      <div class="jumbotron-ks-ad">
+        <div id="kickstarter-widget" class="kickstarter-widget-index">
+          <iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
 
         </div>
+      </div>
+    </div>
 
+  </div>
 </div>
 
 <div id="social-buttons" class="hidden-print">
@@ -200,7 +208,7 @@
       </button>
     </div>
   </div>
-    </form>
+</form>
 
     <ul class="list-inline">
       <li>
@@ -210,7 +218,7 @@
         <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
       </li>
       <li class="follow-btn">
-        <a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
+        <a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @fontawesome</a>
       </li>
       <li class="tweet-btn hidden-phone">
         <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>

community/index.html

@@ -175,12 +175,20 @@
 <div class="jumbotron jumbotron-ad hidden-print">
   <div class="container">
 
-    
+    <div class="jumbotron-kickstarter">
+      <div class="jumbotron-text">
         <h1><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>&nbsp; Community</h1>
         <p>Lots of ways to get involved with Font Awesome</p>
+      </div>
+      <div class="jumbotron-ks-ad">
+        <div id="kickstarter-widget" class="kickstarter-widget-index">
+          <iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
 
         </div>
+      </div>
+    </div>
 
+  </div>
 </div>
 
 <div id="social-buttons" class="hidden-print">
@@ -200,7 +208,7 @@
       </button>
     </div>
   </div>
-    </form>
+</form>
 
     <ul class="list-inline">
       <li>
@@ -210,7 +218,7 @@
         <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
       </li>
       <li class="follow-btn">
-        <a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
+        <a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @fontawesome</a>
       </li>
       <li class="tweet-btn hidden-phone">
         <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>

examples/index.html

@@ -175,12 +175,20 @@
 <div class="jumbotron jumbotron-ad hidden-print">
   <div class="container">
 
-    
+    <div class="jumbotron-kickstarter">
+      <div class="jumbotron-text">
         <h1><i class="fa fa-magic" aria-hidden="true"></i>&nbsp; Examples</h1>
         <p>Lots of easy ways to use Font Awesome</p>
+      </div>
+      <div class="jumbotron-ks-ad">
+        <div id="kickstarter-widget" class="kickstarter-widget-index">
+          <iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
 
         </div>
+      </div>
+    </div>
 
+  </div>
 </div>
 
 <div id="social-buttons" class="hidden-print">
@@ -200,7 +208,7 @@
       </button>
     </div>
   </div>
-    </form>
+</form>
 
     <ul class="list-inline">
       <li>
@@ -210,7 +218,7 @@
         <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
       </li>
       <li class="follow-btn">
-        <a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
+        <a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @fontawesome</a>
       </li>
       <li class="tweet-btn hidden-phone">
         <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>

get-started/index.html

@@ -175,12 +175,20 @@
 <div class="jumbotron jumbotron-ad hidden-print">
   <div class="container">
 
-    
+    <div class="jumbotron-kickstarter">
+      <div class="jumbotron-text">
         <h1><i class="fa fa-cogs" aria-hidden="true"></i>&nbsp; Get Started</h1>
         <p>Easy ways to get Font Awesome 4.7.0 onto your website</p>
+      </div>
+      <div class="jumbotron-ks-ad">
+        <div id="kickstarter-widget" class="kickstarter-widget-index">
+          <iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
 
         </div>
+      </div>
+    </div>
 
+  </div>
 </div>
 
 

icons.yml

@@ -2270,7 +2270,7 @@ icons:
     id:         gavel
     unicode:    f0e3
     created:    2.0
-    label:
+    filter:
       - judge
       - lawyer
       - opinion
@@ -2283,7 +2283,7 @@ icons:
     id:         tachometer
     unicode:    f0e4
     created:    2.0
-    label:
+    filter:
       - speedometer
       - fast
     aliases:

icons/index.html

@@ -175,12 +175,20 @@
 <div class="jumbotron jumbotron-ad hidden-print">
   <div class="container">
 
-    
+    <div class="jumbotron-kickstarter">
+      <div class="jumbotron-text">
         <h1><i class="fa fa-flag" aria-hidden="true"></i>&nbsp; The Icons</h1>
         <p>The complete set of 675 icons in Font Awesome 4.7.0</p>
+      </div>
+      <div class="jumbotron-ks-ad">
+        <div id="kickstarter-widget" class="kickstarter-widget-index">
+          <iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
 
         </div>
+      </div>
+    </div>
 
+  </div>
 </div>
 
 <div id="social-buttons" class="hidden-print">
@@ -200,7 +208,7 @@
       </button>
     </div>
   </div>
-    </form>
+</form>
 
     <ul class="list-inline">
       <li>
@@ -210,7 +218,7 @@
         <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
       </li>
       <li class="follow-btn">
-        <a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
+        <a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @fontawesome</a>
       </li>
       <li class="tweet-btn hidden-phone">
         <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>

index.html

@@ -172,7 +172,7 @@
     <div class="jumbotron jumbotron-carousel hidden-print">
   <div class="container">
     <div class="row">
-      <div class="col-md-8 col-sm-8 text-center">
+      <div class="col-md-9 col-sm-8 text-center">
         <h1>Font Awesome</h1>
         <p>The iconic font and CSS toolkit</p>
         <div class="actions">
@@ -191,9 +191,12 @@
           Created by <a href="http://twitter.com/davegandy">Dave Gandy</a>
         </div>
       </div>
-      <div class="col-md-4 col-sm-4">
+      <div class="col-md-3 col-sm-4">
-        <div id="icon-carousel" class="carousel slide">
+        <div id="kickstarter-widget" class="kickstarter-widget-index">
-          <!-- Carousel items -->
+          <iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
+
+        </div>
+        <!-- <div id="icon-carousel" class="carousel slide">
           <div class="carousel-inner">
             <div class="active item"><div><i class="fa fa-font-awesome" aria-hidden="true"></i><span class="sr-only">flag icon</span></div></div>
             <div class="item"><div><i class="fa fa-handshake-o" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div>
@@ -211,7 +214,6 @@
             <div class="item"><div><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sr-only">thumbs up icon</span></div></div>
             <div class="item"><div><i class="fa fa-pied-piper-alt" aria-hidden="true"></i><span class="sr-only">pied piper icon</span></div></div>
           </div>
-          <!-- Carousel nav -->
           <a class="carousel-control left" href="#icon-carousel" data-slide="prev"
              onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);">
             <i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
@@ -222,7 +224,7 @@
             <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
             <span class="sr-only">Next</span>
           </a>
-        </div>
+        </div> -->
       </div>
     </div>
 
@@ -246,7 +248,7 @@
       </button>
     </div>
   </div>
-    </form>
+</form>
 
     <ul class="list-inline">
       <li>
@@ -256,7 +258,7 @@
         <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
       </li>
       <li class="follow-btn">
-        <a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
+        <a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @fontawesome</a>
       </li>
       <li class="tweet-btn hidden-phone">
         <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>

license/index.html

@@ -175,12 +175,20 @@
 <div class="jumbotron jumbotron-ad hidden-print">
   <div class="container">
 
-    
+    <div class="jumbotron-kickstarter">
+      <div class="jumbotron-text">
         <h1><i class="fa fa-gavel" aria-hidden="true"></i>&nbsp; License</h1>
         <p>The full details of how Font Awesome is licensed</p>
+      </div>
+      <div class="jumbotron-ks-ad">
+        <div id="kickstarter-widget" class="kickstarter-widget-index">
+          <iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
 
         </div>
+      </div>
+    </div>
 
+  </div>
 </div>
 
 <div id="social-buttons" class="hidden-print">
@@ -200,7 +208,7 @@
       </button>
     </div>
   </div>
-    </form>
+</form>
 
     <ul class="list-inline">
       <li>
@@ -210,7 +218,7 @@
         <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
       </li>
       <li class="follow-btn">
-        <a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
+        <a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @fontawesome</a>
       </li>
       <li class="tweet-btn hidden-phone">
         <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>

store/index.html

@@ -175,12 +175,20 @@
 <div class="jumbotron jumbotron-ad hidden-print">
   <div class="container">
 
-    
+    <div class="jumbotron-kickstarter">
+      <div class="jumbotron-text">
         <h1><i class="fa fa-shopping-cart fa-lg valign-baseline" aria-hidden="true"></i>&nbsp; Awesome Swag</h1>
         <p>Show your love &amp; support of Font Awesome with official merchandise!</p>
+      </div>
+      <div class="jumbotron-ks-ad">
+        <div id="kickstarter-widget" class="kickstarter-widget-index">
+          <iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
 
         </div>
+      </div>
+    </div>
 
+  </div>
 </div>
 
 

whats-new/index.html

@@ -175,12 +175,20 @@
 <div class="jumbotron jumbotron-ad hidden-print">
   <div class="container">
 
-    
+    <div class="jumbotron-kickstarter">
+      <div class="jumbotron-text">
         <h1><i class="fa fa-lightbulb-o" aria-hidden="true"></i>&nbsp; What's New</h1>
         <p>What's New in the latest version &mdash; Font Awesome 4.7</p>
+      </div>
+      <div class="jumbotron-ks-ad">
+        <div id="kickstarter-widget" class="kickstarter-widget-index">
+          <iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>
 
         </div>
+      </div>
+    </div>
 
+  </div>
 </div>
 
 <div id="social-buttons" class="hidden-print">
@@ -200,7 +208,7 @@
       </button>
     </div>
   </div>
-    </form>
+</form>
 
     <ul class="list-inline">
       <li>
@@ -210,7 +218,7 @@
         <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
       </li>
       <li class="follow-btn">
-        <a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
+        <a href="https://twitter.com/fontawesome" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @fontawesome</a>
       </li>
       <li class="tweet-btn hidden-phone">
         <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>