Merge branch 'develop' into dialog

docs/icons.stories.js

@@ -14,6 +14,8 @@ stories.add('icon', () => {
     'nes-icon google': 'nes-icon google',
     'nes-icon youtube': 'nes-icon youtube',
     'nes-icon whatsapp': 'nes-icon whatsapp',
+    'nes-icon gmail': 'nes-icon gmail',
+    'nes-icon linkedin': 'nes-icon linkedin',
     'nes-icon close': 'nes-icon close',
     'nes-pokeball': 'nes-pokeball',
     'nes-bulbasaur': 'nes-bulbasaur',

index.html

@@ -280,6 +280,14 @@ <h3 class="title">SNS</h3>
           <i class="nes-icon whatsapp"></i>
           <i class="nes-icon whatsapp is-medium"></i>
           <i class="nes-icon whatsapp is-large"></i>
+
+          <i class="nes-icon gmail"></i>
+          <i class="nes-icon gmail is-medium"></i>
+          <i class="nes-icon gmail is-large"></i>
+
+          <i class="nes-icon linkedin"></i>
+          <i class="nes-icon linkedin is-medium"></i>
+          <i class="nes-icon linkedin is-large"></i>
         </div>
       </section>
 

scss/icons/gmail.scss

@@ -0,0 +1,20 @@
+$icon-gmail-colors: (#eeecec, #fd2b2b);
+// prettier-ignore
+$icon-gmail: (
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  (0,2,1,1,1,1,1,1,1,1,1,1,1,1,2,0),
+  (2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2),
+  (2,2,2,2,1,1,1,1,1,1,1,1,2,2,2,2),
+  (2,2,1,2,2,1,1,1,1,1,1,2,2,1,2,2),
+  (2,2,1,1,2,2,1,1,1,1,2,2,1,1,2,2),
+  (2,2,1,1,1,2,2,1,1,2,2,1,1,1,2,2),
+  (2,2,1,1,1,1,2,2,2,2,1,1,1,1,2,2),
+  (2,2,1,1,1,1,1,2,2,1,1,1,1,1,2,2),
+  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
+  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
+  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
+  (0,2,1,1,1,1,1,1,1,1,1,1,1,1,2,0),
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
+);

scss/icons/icons.scss

@@ -13,6 +13,8 @@
 @import "twitch.scss";
 @import "reddit.scss";
 @import "whatsapp.scss";
+@import "gmail.scss";
+@import "linkedin.scss";
 
 // others
 @import "close.scss";
@@ -112,6 +114,14 @@
     &.whatsapp::before {
       @include pixelize($icon-whatsapp, $icon-whatsapp-colors, $px);
     }
+
+    &.gmail::before {
+      @include pixelize($icon-gmail, $icon-gmail-colors, $px);
+    }
+
+    &.linkedin::before {
+      @include pixelize($icon-linkedin, $icon-linkedin-colors, $px);
+    }
   }
 
   // default

scss/icons/linkedin.scss

@@ -0,0 +1,20 @@
+$icon-linkedin-colors: (#fff, #2577b9);
+// prettier-ignore
+$icon-linkedin: (
+  (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
+  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
+  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
+  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
+  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
+  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
+  (2,2,1,1,1,2,1,1,1,2,1,1,1,2,2,2),
+  (2,2,1,1,1,2,1,1,1,1,1,1,1,1,2,2),
+  (2,2,1,1,1,2,1,1,1,1,1,1,1,1,2,2),
+  (2,2,1,1,1,2,1,1,1,1,2,1,1,1,2,2),
+  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
+  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
+  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
+  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
+  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
+  (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
+);