Adding no results text, udpating algolia logo

Gemfile.lock

@@ -62,6 +62,3 @@ DEPENDENCIES
   safe_yaml (~> 1.0.4)
   sass (~> 3.0)
   therubyracer
-
-BUNDLED WITH
-   1.10.6

src/_includes/navbar.html

@@ -19,7 +19,7 @@
         <span class="sr-only">Toggle navigation</span>
         <i class="fa fa-bars fa-lg"></i>
       </button>
-      <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fae fae-logo"></i></a>
+      <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fas fas-logo"></i></a>
     </div>
 
     <div class="navbar-collapse collapse">

src/assets/js/site.js

@@ -1,64 +1,76 @@
 $(function () {
-    $("#newsletter").validate();
+  $("#newsletter").validate();
 
-    var ads = [
-        {
-            quote: "Take your icon game to the next level. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
-            class: "fonticons",
-            url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.4_update",
-            btn_text: "Gimme Some!"
-        },
-        {
-            quote: "Make your icons load 10x faster! Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
-            class: "fonticons",
-            url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.4_update",
-            btn_text: "Gimme Some!"
-        },
-        {
-            quote: "Looking for other great icon sets? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
-            class: "fonticons",
-            url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.4_update",
-            btn_text: "Gimme Some!"
-        },
-        {
-            quote: "Want to add your own icon? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
-            class: "fonticons",
-            url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.4_update",
-            btn_text: "Gimme Some!"
-        },
+  var ads = [
+    {
+      quote: "Take your icon game to the next level. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+      class: "fonticons",
+      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.4_update",
+      btn_text: "Gimme Some!"
+    },
+    {
+      quote: "Make your icons load 10x faster! Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+      class: "fonticons",
+      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.4_update",
+      btn_text: "Gimme Some!"
+    },
+    {
+      quote: "Looking for other great icon sets? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+      class: "fonticons",
+      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.4_update",
+      btn_text: "Gimme Some!"
+    },
+    {
+      quote: "Want to add your own icon? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+      class: "fonticons",
+      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.4_update",
+      btn_text: "Gimme Some!"
+    },
 
 
-        {
-            quote: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
-            class: "black-tie",
-            url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.4_update",
-            btn_text: "Check it Out!"
-        },
-        {
-            quote: "Want clean, minimalist icons? Check out <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
-            class: "black-tie",
-            url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.4_update",
-            btn_text: "Check it Out!"
-        }
-    ];
+    {
+      quote: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
+      class: "black-tie",
+      url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.4_update",
+      btn_text: "Check it Out!"
+    },
+    {
+      quote: "Want clean, minimalist icons? Check out <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
+      class: "black-tie",
+      url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.4_update",
+      btn_text: "Check it Out!"
+    },
+    {
+      quote: "Want a different icon look? Check out <strong>Black Tie</strong>, our new multi-weight icon set.",
+      class: "black-tie",
+      url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_different_look&utm_campaign=promo_4.4_update",
+      btn_text: "Check it Out!"
+    },
+    {
+      quote: "Check out <strong>Black Tie</strong>, our new multi-weight icon set!",
+      class: "black-tie",
+      url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_7_our_new_multi_weight&utm_campaign=promo_4.4_update",
+      btn_text: "Check it Out!"
+    }
+  ];
 
-    selectFonticonsAd();
+  selectFonticonsAd();
 
-    // start the icon carousel
-    $('#icon-carousel').carousel({
-        interval: 5000
-    });
+  // start the icon carousel
+  $('#icon-carousel').carousel({
+    interval: 5000
+  });
 
-    $('[data-toggle="popover"]').popover();
+  $('[data-toggle="popover"]').popover();
 
-    function selectFonticonsAd() {
-        random_number = Math.floor(Math.random() * ads.length);
-        random_ad = ads[random_number];
+  function selectFonticonsAd() {
+    random_number = Math.floor(Math.random() * ads.length);
+    random_ad = ads[random_number];
 
-        $('#banner').addClass(random_ad.class);
-        $('#rotating-message').html(random_ad.quote);
-        $('#rotating-url').attr("href", random_ad.url);
-        $('#rotating-url').html(random_ad.btn_text);
-        $('#banner').collapse('show');
-    }
+    $('#banner').addClass(random_ad.class);
+    $('#rotating-message').html(random_ad.quote);
+    $('#rotating-url').attr("href", random_ad.url);
+    $('#rotating-url').html(random_ad.btn_text);
+    $('#banner').collapse('show');
+  }
 });

src/assets/less/site.less

@@ -8,6 +8,7 @@
 @import "site/bootstrap/jumbotron";
 @import "site/bootstrap/wells";
 @import "site/bootstrap/type";
+@import "site/bootstrap/alerts";
 @import "site/bootstrap/modals";
 
 @import "site/layout";
@@ -25,6 +26,7 @@
 @import "site/fusion-ad";
 @import "site/bsap-ad";
 @import "site/sumome";
+@import "site/algolia";
 
 @import "site/responsive/screen-lg";
 @import "site/responsive/screen-md";

src/assets/less/site/algolia.less

@@ -0,0 +1,11 @@
+.algolia {
+  text-align: center;
+  a {
+    color: @text-color;
+    &:hover { color: @link-hover-color; }
+  }
+  .fas-algolia {
+    font-size: 32px;
+    vertical-align: middle;
+  }
+}

src/assets/less/site/bootstrap/alerts.less

@@ -0,0 +1 @@
+.alert-link { text-decoration: underline; }

src/assets/less/site/bootstrap/variables.less

@@ -107,6 +107,10 @@
 @state-info-bg:                 @blue-lighter;
 @state-info-border:             darken(spin(@state-info-bg, -10), 7%);
 
+@state-danger-text:              @brand-danger;
+@state-danger-bg:                mix(@state-danger-text,#fff,10%);
+@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
+
 
 // Carousel
 @carousel-text-shadow:          0 1px 0 rgba(255,255,255,0.25);

src/assets/less/site/search.less

@@ -7,7 +7,7 @@
   label {
     position: absolute;
     left: 17px;
-    top: 50px;
+    top: 51px;
   }
 
   #search-input, .hint {

src/icons.html

@@ -22,16 +22,16 @@ relative_path: ../
   {% include stripe-ad.html %}
 
   <div class="row">
-    <div class="col-md-10">
+    <div class="col-md-10 col-sm-9">
       <section id="search">
         <label for="search-input"><i class="fa fa-search"></i></label>
         <input id="search-input" class="form-control input-lg" placeholder="Search icons" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1">
         <a id="search-clear" href="#" class="fa fa-times hide"></a>
       </section>
     </div>
-    <div class="col-md-2">
+    <div class="col-md-2 col-sm-3 hidden-xs">
       <div class="algolia">
-        by <a href="https://www.algolia.com"><img src="{{ page.relative_path }}assets/img/algolia.png" width=100" height="32"></a>
+        by <a href="https://algolia.com"><i class="fas fas-algolia"></i></a>
       </div>
     </div>
   </div>
@@ -68,11 +68,25 @@ relative_path: ../
       <% }); %>
       </div>
     <% } else { %>
-      <div class="alert alert-warning" role="alert">
-        <strong>Oops!</strong> No icons were found that matched your query. Have no fear you may still be
-        able to find that perfect icon. <a class="alert-link" href="https://www.fonticons.com">Check out
-        our latest project, Fonticons.</a> We have multiple icon sets and even have the ablility to
-        commission an icon to be made!
+      <div class="alert alert-danger text-lg" role="alert">
+        <h3 class="margin-top margin-bottom-lg"><i class="fa fa-meh-o"></i> Oops! No icons matched your query.</h3>
+        A few things that might help:
+        <ol>
+          <li>
+            Use <a class="alert-link" href="https://fonticons.com">Fonticons</a> (our latest project) to add your
+            own icons and take your icon game to the next level!
+          </li>
+          <li>
+            Really, really want to see an icon in Font Awesome?
+            <a class="alert-link" href="mailto:dave@fonticons.com">Drop me an email</a> to commission the icons you need!
+          </li>
+          <li>
+            Are we missing something in our search results?
+            <a class="alert-link" href="https://github.com/FortAwesome/Font-Awesome/issues/new">Open an issue on GitHub!</a>
+            (Make sure to <a class="alert-link" href="https://github.com/FortAwesome/Font-Awesome/issues">search existing
+            issues first</a>.)
+          </li>
+        </ol>
       </div>
     <% } %>
   </script>