Adding Kickstarter widget

src/_includes/jumbotron-carousel.html

@@ -1,7 +1,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">
@@ -20,9 +20,11 @@
           Created by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
         </div>
       </div>
-      <div class="col-md-4 col-sm-4">
-        <div id="icon-carousel" class="carousel slide">
-          <!-- Carousel items -->
+      <div class="col-md-3 col-sm-4">
+        <div id="kickstarter-widget" class="kickstarter-widget-index">
+          {% include kickstarter-widget.html %}
+        </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>
@@ -40,7 +42,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>
@@ -51,7 +52,7 @@
             <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
             <span class="sr-only">Next</span>
           </a>
-        </div>
+        </div> -->
       </div>
     </div>
 

src/_includes/jumbotron.html

@@ -1,19 +1,17 @@
 <div class="jumbotron jumbotron-ad hidden-print">
   <div class="container">
 
-    {% if page.in_page_nav %}
-    <div class="col-md-9">
-      <h1>{{ jumbotron_h1 }}</h1>
-      <p>{{ jumbotron_p }}</p>
+    <div class="jumbotron-kickstarter">
+      <div class="jumbotron-text">
+        <h1>{{ jumbotron_h1 }}</h1>
+        <p>{{ jumbotron_p }}</p>
+      </div>
+      <div class="jumbotron-ks-ad">
+        <div id="kickstarter-widget" class="kickstarter-widget-index">
+          {% include kickstarter-widget.html %}
+        </div>
+      </div>
     </div>
 
-    <div class="col-md-3">
-      {{ jumbotron_nav }}
-    </div>
-    {% else %}
-    <h1>{{ jumbotron_h1 }}</h1>
-    <p>{{ jumbotron_p }}</p>
-    {% endif %}
   </div>
-
 </div>

src/_includes/kickstarter-widget.html

@@ -0,0 +1 @@
+<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>

src/_includes/newsletter-subscribe.html

@@ -0,0 +1,16 @@
+<form id="newsletter" method="post" action="https://formkeep.com/f/ba101f5b69f0">
+  <div class="row">
+    <div class="col-md-4 col-md-offset-2 col-sm-6">
+      <div class="form-group margin-bottom">
+        <input name="email" type="email" class="form-control" id="email" placeholder="Enter your email address&hellip;" required>
+      </div>
+    </div>
+    <div class="col-md-4 col-sm-6">
+      <button type="submit" class="btn btn-success btn-block margin-bottom-lg"
+          data-toggle="popover" data-trigger="hover" data-placement="top" title="Stay up to date with the Awesome"
+          data-content="We'll send you updates on new Font Awesome releases, icons, and other stuff that we're working on. We won't spam you. Scout's honor.">
+        Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+</form>

src/_includes/stripe-social.html

@@ -1,22 +1,6 @@
 <div id="social-buttons" class="hidden-print">
   <div class="container">
-    <form id="newsletter" method="post" action="https://formkeep.com/f/ba101f5b69f0">
-      <div class="row">
-        <div class="col-md-4 col-md-offset-2 col-sm-6">
-          <div class="form-group margin-bottom">
-            <input name="email" type="email" class="form-control" id="email" placeholder="Enter your email address&hellip;" required>
-          </div>
-        </div>
-        <div class="col-md-4 col-sm-6">
-          <button type="submit" class="btn btn-success btn-block margin-bottom-lg"
-              data-toggle="popover" data-trigger="hover" data-placement="top" title="Stay up to date with the Awesome"
-              data-content="We'll send you updates on new Font Awesome releases, icons, and other stuff that we're working on. We won't spam you. Scout's honor.">
-            Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i>
-          </button>
-        </div>
-      </div>
-    </form>
-
+    {% include newsletter-subscribe.html %}
     <ul class="list-inline">
       <li>
         <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
@@ -25,7 +9,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/{{ site.fontawesome.twitter }}" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @{{ site.fontawesome.twitter }}</a>
+        <a href="https://twitter.com/{{ site.fontawesome.twitter }}" class="twitter-follow-button" data-link-color="#000000" data-show-count="true">Follow @{{ site.fontawesome.twitter }}</a>
       </li>
       <li class="tweet-btn hidden-phone">
         <a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ site.fontawesome.url }}" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="{{ site.fontawesome.legacy_url }}" data-count="horizontal" data-via="{{ site.fontawesome.twitter }}" data-related="{{ site.fontawesome.author.twitter }}:Creator of Font Awesome">Tweet</a>

src/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();

src/assets/less/site.less

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

src/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);
+}

src/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;
+    }
+  }
+}

src/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;
+  }
+
 }

src/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;
+  }
+
 }

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

@@ -45,5 +45,10 @@
 
   .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; }
 }

src/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;
+    }
+  }
 }