Merge branch 'develop' into add-favicon-ico

docs/avatars.stories.js

@@ -0,0 +1,20 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, radios, boolean,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Avatars', module);
+stories.addDecorator(withKnobs);
+
+stories.add('avatars', () => {
+  const options = radios('class', {
+    'is-small': 'is-small',
+    default: '',
+    'is-medium': 'is-medium',
+    'is-large': 'is-large',
+  }, '');
+  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
+  const selectedClasses = [isRounded, options].join(' ');
+
+  return `<img src="http://www.gravatar.com/avatar" class="nes-avatar ${selectedClasses}">`;
+});

docs/icons.stories.js

@@ -20,6 +20,7 @@ stories.add('icon', () => {
     'nes-charmander': 'nes-charmander',
     'nes-squirtle': 'nes-squirtle',
     'nes-smartphone': 'nes-smartphone',
+    'nes-kirby': 'nes-kirby',
     'nes-phone': 'nes-phone',
     'nes-octocat animate': 'nes-octocat animate',
     'nes-ash': 'nes-ash',

index.html

@@ -94,6 +94,20 @@
       </label>
     </section>
 
+    <section class="nes-container with-title">
+      <h2 class="title">Avatars</h2>
+      <div>
+        <img src="http://www.gravatar.com/avatar" class="nes-avatar is-small">
+        <img src="http://www.gravatar.com/avatar" class="nes-avatar">
+        <img src="http://www.gravatar.com/avatar" class="nes-avatar is-medium">
+        <img src="http://www.gravatar.com/avatar" class="nes-avatar is-large">
+        <img src="http://www.gravatar.com/avatar" class="nes-avatar is-small is-rounded">
+        <img src="http://www.gravatar.com/avatar" class="nes-avatar is-rounded">
+        <img src="http://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded">
+        <img src="http://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded">
+      </div>
+    </section>
+
     <section class="form nes-container with-title">
       <h2 class="title">Form</h2>
       <div class="nes-field">
@@ -294,6 +308,7 @@
 
           <i class="nes-smartphone"></i>
           <i class="nes-phone"></i>
+          <i class="nes-kirby"></i>
         </div>
       </section>
 

scss/elements/_index.scss

@@ -7,3 +7,4 @@
 @import "balloons.scss";
 @import "tables.scss";
 @import "progress.scss";
+@import "avatar.scss";

scss/elements/avatar.scss

@@ -0,0 +1,23 @@
+@mixin img-style($param) {
+  $size: $param * 16;
+
+  width: $size;
+  height: $size;
+
+  &.is-rounded {
+    border-radius: 50px;
+  }
+}
+.nes-avatar {
+  @include img-style(2px);
+
+  &.is-small {
+    @include img-style(1px);
+  }
+  &.is-medium {
+    @include img-style(3px);
+  }
+  &.is-large {
+    @include img-style(4px);
+  }
+}

scss/pixel-arts/_index.scss

@@ -14,3 +14,4 @@
 @import "squirtle.scss";
 @import "phone.scss";
 @import "smartphone.scss";
+@import "kirby.scss";

scss/pixel-arts/ash.scss

@@ -24,7 +24,7 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 15;
+  width: $px * 14;
   height: $px * 15;
 
   &::before {

scss/pixel-arts/kirby.scss

@@ -0,0 +1,38 @@
+.nes-kirby {
+  $px: 6px;
+  $kirby-colors: (#000, #ffaccc, #ff5478);
+  // prettier-ignore
+  $kirby: (
+    (0,0,1,1,0,1,1,1,1,1,0,0,0,0),
+    (0,1,2,2,1,2,2,2,2,2,1,1,0,0),
+    (1,2,2,1,2,2,2,2,2,2,2,2,1,0),
+    (1,2,2,2,2,2,1,2,1,2,2,2,2,1),
+    (1,2,2,2,2,2,1,2,1,2,2,2,2,1,),
+    (1,2,2,2,2,2,1,2,1,2,2,2,2,2,1),
+    (1,2,2,2,3,3,2,2,2,3,3,2,2,2,2,1),
+    (1,2,2,2,2,2,2,1,2,2,2,2,2,2,2,1),
+    (0,1,2,2,2,2,2,1,2,2,2,2,2,2,2,1),
+    (0,1,2,2,2,2,2,2,2,2,2,2,1,1,1,0),
+    (0,1,2,2,2,2,2,2,2,2,2,1,3,3,3,1),
+    (0,0,1,2,2,2,2,2,2,2,1,3,3,3,3,1),
+    (0,0,1,1,2,2,2,2,2,2,1,3,3,3,3,1),
+    (0,1,3,3,1,1,2,2,2,1,3,3,3,3,1),
+    (1,3,3,3,3,3,1,1,1,1,1,3,3,1),
+    (0,1,1,1,1,1,1,0,0,0,1,1,1,0)
+  );
+
+  position: relative;
+  display: inline-block;
+  width: $px * 16;
+  height: $px * 16;
+
+  &::before {
+    position: absolute;
+    top: $px * -1;
+    left: $px * -1;
+    content: "";
+    background: transparent;
+
+    @include pixelize($kirby, $kirby-colors, $px);
+  }
+}

scss/pixel-arts/mario.scss

@@ -25,7 +25,7 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 16;
+  width: $px * 14;
   height: $px * 16;
 
   &::before {

style.css

@@ -30,13 +30,6 @@ div.tables > .nes-table:first-child {
   margin-bottom: 2rem;
 }
 
-@media screen and (max-width: 768px) {
-  div.tables > .nes-table {
-    max-width: 100%;
-    margin-right: 0;
-  }
-}
-
 .balloon.nes-container .nes-balloon {
   max-width: 600px;
   margin: 2rem 2rem;
@@ -93,3 +86,21 @@ div.tables > .nes-table:first-child {
 .github-link > i.nes-octocat {
   align-self: flex-end;
 }
+
+@media screen and (max-width: 768px) {
+  body {
+    padding: 0;
+    margin: 2rem 0.2rem;
+  }
+  div.tables > .nes-table {
+    max-width: 100%;
+    margin-right: 0;
+  }
+  .balloon.nes-container .nes-balloon {
+    max-width: 70%;
+  }
+
+  .github-link {
+    display: none;
+  }
+}