feat(dropdown): show SVG icons

docs/source/index.html.haml

@@ -1,5 +1,5 @@
 ---
-title: Welcome to Middleman
+title: Algolia - Places
 ---
 %div.navigation
 	%div.fl-left

docs/source/javascripts/all.js

@@ -1,3 +1,24 @@
 /* global places */
 
-places({container: document.querySelector('#landing-demo')});
+places({
+  container: document.querySelector('#landing-demo')
+});
+
+// automatically add necessary css classes for responsive layour
+document.addEventListener('scroll', scrollEvent => {
+  const hero = document.querySelector('.hero-section');
+  const navigation = document.querySelector('.navigation');
+
+  const value = scrollEvent.target.scrollingElement.scrollTop;
+  const height = hero.offsetHeight;
+  const navHeight = navigation.offsetHeight;
+
+  if (value > height) {
+    navigation.classList.add('darken');
+  } else if (value > (height - navHeight)) {
+    navigation.classList.add('init');
+    navigation.classList.remove('darken');
+  } else {
+    navigation.classList.remove('darken', 'init');
+  }
+});

docs/source/stylesheets/components/_containers.scss

@@ -1,6 +1,27 @@
+/* Grid system
+// .bloc-1 = 10%
+// .bloc-2 = 20%
+// and so on..
+================*/
+$sizes: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
+
+[class*="bloc-"] {
+  float: left;
+}
+@each $size in $sizes {
+  .bloc-#{$size} {
+    $size: $size*10%;
+    width: $size;
+  }
+}
+
+
 /* Containers
 ================*/
 .container {
+  float: none;
+  margin: auto;
+  width: 100%;
   max-width: $max-width;
 }
 

docs/source/stylesheets/components/_navigation.scss

@@ -3,13 +3,22 @@
   width: 100%;
   max-height: $navigation-height;
   line-height: $navigation-height;
-  background: darken($denim-blue, 5%);
+  background: transparent;
   overflow: hidden;
   z-index: 101;
   color: #fff;
   padding: 0 16px;
   margin: 0;
 
+  &.init {
+    background: #2F468C;
+  }
+
+  &.darken {
+    background: #0C1621;
+  }
+
+
   .brand {
     float: left;
   }

docs/source/stylesheets/site.css.scss

@@ -1,14 +1,7 @@
-@import 'normalize';
-
-// Import CSSPeed boilerplate CSS
-// Since I plan to create a css
-// boilerplate for algolia's landing pages
-// it may change in the future
-// Still thinking about it
-@import 'csspeed';
-
 @import 'vendors/variables',
+        'vendors/normalize',
         'vendors/mixins',
+        'vendors/helpers',
         'vendors/base',
         'vendors/svg-animations';
 

docs/source/stylesheets/vendors/_base.scss

@@ -3,6 +3,21 @@
 :root {
   font-size: 16px;
 }
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  float: left;
+}
+
 body {
   font-family: "Raleway", Helvetica Neue, helvetica;
 }
@@ -12,3 +27,6 @@ a {
 
 }
 
+
+
+

docs/source/stylesheets/vendors/_variables.scss

@@ -11,7 +11,7 @@ $bp-small: 768px;
 /* Dimensions
 =====================*/
 $max-width: 940px;
-$navigation-height: 70px;
+$navigation-height: 60px;
 
 
 /* Colors

src/formatAutocompleteSuggestion.js

@@ -10,8 +10,9 @@ export default function formatAutocompleteSuggestion({
   name
 }) {
   return (
-`${name}
-${isCity === false ? ` ${city},` : ''}
+`<span class="pl-icon">${icons[isCity === false ? 'address' : 'city']}</span>
+<span class="pl-name">${name}</span> <span class="pl-address">
+${isCity === false ? `${city},` : ``}
  ${administrative},
- ${country}`);
+ ${country}</span>`);
 }