Feature/svg sprite integration (#17)

* Adds new icons to svg sprite

* Integrates icons svg sprite in the layout page and updates the doc.

Author: andreamangano

assets/icons-sprite.svg

@@ -4,12 +4,12 @@
   margin: $space-small auto 0;
   max-width: rem-calc(360);
   padding-bottom: $space-small;
+  text-align: center;
 
   &__icon {
     background-color: neutral-color('lowest');
-    line-height: 0;
-    margin: 0 auto;
-    max-width: rem-calc(35);
+    font-size: rem-calc(35);
+    display: inline-block;
     padding: rem-calc(0 5);
     transform: translateY(-50%);
   }

assets/icons/facebook.svg

@@ -42,7 +42,7 @@
   }
 
   &__submit-icon {
-    width: rem-calc(20);
+    font-size: rem-calc(20);
 
     @include media-query('medium') {
       display: none;

assets/icons/linkedin.svg

@@ -314,15 +314,15 @@ body {
   &__list {
     @include grid-row(false);
     font-size: 1.5rem;
+    max-width: 100%;
     padding: 1px;
 
     @include media-query('medium') {
       font-size: 2.5rem;
     }
   }
 
-  &__list--small {
-    @include grid-row(false);
+  &--small &__list{
     font-size: 1rem;
 
     @include media-query('medium') {
@@ -343,7 +343,7 @@ body {
 
   &__symbol {
     svg:hover {
-      background-color: brand-color('light');
+      background-color: brand-color('primary');
     }
   }
 

assets/icons/twitter.svg

@@ -1 +1 @@
-["email.svg","subscribe.svg"]
+["email.svg","facebook.svg","linkedin.svg","subscribe.svg","twitter.svg"]

assets/scss/5-components/_separator.scss

@@ -3,41 +3,34 @@ include mixins/_index
 doctype html
 
 html(lang=lang)
-
   head
-
     title= meta.title
     meta(
     name="description"
     content=meta.description)
-
     meta(
-    name="viewport"
-    content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0")
-
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0")
     meta(charset="utf-8")
     meta(http-equiv="X-UA-Compatible" content="IE=edge")
-
-    base(href="/")
-
     block head_css
+      //-
+        link(
+          href="https://fonts.googleapis.com/css?family=Roboto:400,900"
+          rel="stylesheet")
       link(
-      href="https://fonts.googleapis.com/css?family=Roboto:400,900"
-      rel="stylesheet")
-      link(
-      href="css/main.css"
-      rel="stylesheet"
-      type="text/css")
+        href="css/main.css"
+        rel="stylesheet"
+        type="text/css")
 
   block body
+    div(style="display: none")
+      include ../assets/icons-sprite.svg
     body.layout
-
       .layout__page
         block page
-
       .layout__footer
         include partials/_footer
-
       block analytics
         if analyticsId
           script.

assets/scss/5-components/_subscribe.scss

@@ -10,7 +10,6 @@ html
       content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0")
     meta(charset="utf-8")
     meta(http-equiv="X-UA-Compatible" content="IE=edge")
-    base(href="/")
     block head_css
     link(
       href="css/docs.css"