From 596505fb1eb040b0dc31437c116d4e71c34bbad1 Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <limaguastallaigor@gmail.com>
Date: Wed, 30 Jan 2019 19:57:24 -0200
Subject: [PATCH 1/6] chore(form): moved radios and checkboxes to form folder

#219
---
 scss/elements/_index.scss               | 2 --
 scss/form/_index.scss                   | 2 ++
 scss/{elements => form}/checkboxes.scss | 0
 scss/{elements => form}/radios.scss     | 0
 4 files changed, 2 insertions(+), 2 deletions(-)
 rename scss/{elements => form}/checkboxes.scss (100%)
 rename scss/{elements => form}/radios.scss (100%)

diff --git a/scss/elements/_index.scss b/scss/elements/_index.scss
index 39e369e..60183ef 100644
--- a/scss/elements/_index.scss
+++ b/scss/elements/_index.scss
@@ -4,11 +4,9 @@
 @import "badges.scss";
 @import "balloons.scss";
 @import "buttons.scss";
-@import "checkboxes.scss";
 @import "containers.scss";
 @import "dialogs.scss";
 @import "lists.scss";
 @import "progress.scss";
-@import "radios.scss";
 @import "tables.scss";
 @import "text.scss";
diff --git a/scss/form/_index.scss b/scss/form/_index.scss
index 0d50df3..7ca43be 100644
--- a/scss/form/_index.scss
+++ b/scss/form/_index.scss
@@ -1,4 +1,6 @@
 @charset "utf-8";
 
 @import "inputs.scss";
+@import "radios.scss";
+@import "checkboxes.scss";
 @import "selects.scss";
diff --git a/scss/elements/checkboxes.scss b/scss/form/checkboxes.scss
similarity index 100%
rename from scss/elements/checkboxes.scss
rename to scss/form/checkboxes.scss
diff --git a/scss/elements/radios.scss b/scss/form/radios.scss
similarity index 100%
rename from scss/elements/radios.scss
rename to scss/form/radios.scss

From 913766ad89016e64a02832d141beba60ca84d0dd Mon Sep 17 00:00:00 2001
From: BcRikko <s.shin1106@gmail.com>
Date: Tue, 29 Jan 2019 21:15:18 +0900
Subject: [PATCH 2/6] fix: fix pixelize for form elements

fix #262
---
 scss/base/variables.scss       |  2 +-
 scss/elements/lists.scss       | 34 +++++++++++++++++-----------------
 scss/form/checkboxes.scss      |  9 ++++-----
 scss/form/radios.scss          |  5 ++---
 scss/form/selects.scss         |  3 +--
 scss/utilities/icon-mixin.scss | 14 +++++++-------
 6 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/scss/base/variables.scss b/scss/base/variables.scss
index 28782cd..bcf8924 100644
--- a/scss/base/variables.scss
+++ b/scss/base/variables.scss
@@ -7,7 +7,7 @@ $background-color: $color-white;
 
 $cursor-url: url(https://unpkg.com/nes.css/assets/cursor.png);
 $cursor-click-url: url(https://unpkg.com/nes.css/assets/cursor-click.png);
-$border-size: 0.25em;
+$border-size: 4px;
 
 $default-colors: (
   normal: $background-color,
diff --git a/scss/elements/lists.scss b/scss/elements/lists.scss
index cd383b5..485b3f6 100644
--- a/scss/elements/lists.scss
+++ b/scss/elements/lists.scss
@@ -1,20 +1,22 @@
 .nes-list {
+  // prettier-ignore
   $disc: (
-    (0, 0, 0, 1, 1, 0, 0, 0),
-    (0, 0, 1, 1, 1, 1, 0, 0),
-    (0, 1, 1, 1, 1, 1, 1, 0),
-    (0, 1, 1, 1, 1, 1, 1, 0),
-    (0, 0, 1, 1, 1, 1, 0, 0),
-    (0, 0, 0, 1, 1, 0, 0, 0)
-  );
+    (0,0,0,1,1,0,0,0),
+    (0,0,1,1,1,1,0,0),
+    (0,1,1,1,1,1,1,0),
+    (0,1,1,1,1,1,1,0),
+    (0,0,1,1,1,1,0,0),
+    (0,0,0,1,1,0,0,0)
+    );
 
+  // prettier-ignore
   $circle: (
-    (0, 0, 0, 1, 1, 0, 0, 0),
-    (0, 0, 1, 1, 1, 1, 0, 0),
-    (0, 1, 1, 0, 0, 1, 1, 0),
-    (0, 1, 1, 0, 0, 1, 1, 0),
-    (0, 0, 1, 1, 1, 1, 0, 0),
-    (0, 0, 0, 1, 1, 0, 0, 0)
+    (0,0,0,1,1,0,0,0),
+    (0,0,1,1,1,1,0,0),
+    (0,1,1,0,0,1,1,0),
+    (0,1,1,0,0,1,1,0),
+    (0,0,1,1,1,1,0,0),
+    (0,0,0,1,1,0,0,0)
   );
   $colors: ($base-color, map-get($default-colors, "shadow"));
 
@@ -28,19 +30,17 @@
     position: absolute;
     top: calc(50% - 8px);
     left: -22px;
-    font-size: 2px;
     content: "";
 
-    @include pixelize($disc, $colors);
+    @include pixelize(2px, $disc, $colors);
   }
 
   &.is-circle li::before {
     position: absolute;
     top: calc(50% - 8px);
     left: -22px;
-    font-size: 2px;
     content: "";
 
-    @include pixelize($circle, $colors);
+    @include pixelize(2px, $circle, $colors);
   }
 }
diff --git a/scss/form/checkboxes.scss b/scss/form/checkboxes.scss
index a6f2fd0..14c75c9 100644
--- a/scss/form/checkboxes.scss
+++ b/scss/form/checkboxes.scss
@@ -62,23 +62,22 @@
     position: absolute;
     top: -3px;
     left: -28px;
-    font-size: 2px;
     content: "";
   }
 
   // prettier-ignore
   & + span::before { /* stylelint-disable-line no-descending-specificity */
-    @include pixelize($checkbox, $colors);
+    @include pixelize(2px, $checkbox, $colors);
   }
   // prettier-ignore
   &:focus + span::before { /* stylelint-disable-line no-descending-specificity */
-    @include pixelize($checkbox-focus, $colors);
+    @include pixelize(2px, $checkbox-focus, $colors);
   }
 
   &:checked + span::before {
-    @include pixelize($checkbox-checked, $colors);
+    @include pixelize(2px, $checkbox-checked, $colors);
   }
   &:checked:focus + span::before {
-    @include pixelize($checkbox-checked-focus, $colors);
+    @include pixelize(2px, $checkbox-checked-focus, $colors);
   }
 }
diff --git a/scss/form/radios.scss b/scss/form/radios.scss
index 54b7724..ac13669 100644
--- a/scss/form/radios.scss
+++ b/scss/form/radios.scss
@@ -35,10 +35,9 @@
     position: absolute;
     top: -2px;
     left: -20px;
-    font-size: 2px;
     content: "";
 
-    @include pixelize($radio, $colors);
+    @include pixelize(2px, $radio, $colors);
   }
 
   &:checked:hover,
@@ -49,6 +48,6 @@
   }
 
   &:checked:focus + span::before {
-    @include pixelize($radio-checked-focus, $colors);
+    @include pixelize(2px, $radio-checked-focus, $colors);
   }
 }
diff --git a/scss/form/selects.scss b/scss/form/selects.scss
index 2baa24d..639f336 100644
--- a/scss/form/selects.scss
+++ b/scss/form/selects.scss
@@ -31,12 +31,11 @@
   }
 
   &::after {
-    @include pixelize($dropdown, $colors);
+    @include pixelize(3px, $dropdown, $colors);
 
     position: absolute;
     top: calc(50% - 11px);
     right: 36px;
-    font-size: 3px;
     pointer-events: none;
     content: "";
   }
diff --git a/scss/utilities/icon-mixin.scss b/scss/utilities/icon-mixin.scss
index c973afd..1fd110a 100644
--- a/scss/utilities/icon-mixin.scss
+++ b/scss/utilities/icon-mixin.scss
@@ -1,4 +1,4 @@
-@mixin pixelize($matrix, $colors, $default-color: null) {
+@mixin pixelize($size, $matrix, $colors, $default-color: null) {
   $ret: "";
   $moz: "";
   @if ($default-color == null) {
@@ -37,18 +37,18 @@
 
         $color: nth($colors, $dot);
         @if $color == $default-color {
-          $ret: $ret + $j + "em " + $i + "em";
-          $moz: $moz + $j + "em " + $i + "em 0 0.020em";
+          $ret: $ret + ($j * $size) + " " + ($i * $size);
+          $moz: $moz + ($j * $size) + " " + ($i * $size) + "0 0.020px";
         } @else {
-          $ret: $ret + $j + "em " + $i + "em " + $color;
-          $moz: $moz + $j + "em " + $i + "em 0 0.020em " + $color;
+          $ret: $ret + ($j * $size) + " " + ($i * $size) + "" + $color;
+          $moz: $moz + ($j * $size) + " " + ($i * $size) + "0 0.020px " + $color;
         }
       }
     }
   }
 
-  width: 1em;
-  height: 1em;
+  width: $size;
+  height: $size;
   color: $default-color;
   box-shadow: unquote($ret);
   @-moz-document url-prefix() {

From a4016dce9f8f443375cd1d7b43c082f823fb9ceb Mon Sep 17 00:00:00 2001
From: BcRikko <s.shin1106@gmail.com>
Date: Wed, 30 Jan 2019 17:15:52 +0900
Subject: [PATCH 3/6] fix(icons.scss): fix icon sizes

use transform:scale() instead of font-size & em

fix #262
---
 scss/icons/icons.scss | 78 +++++++++++++++++++++++++------------------
 1 file changed, 46 insertions(+), 32 deletions(-)

diff --git a/scss/icons/icons.scss b/scss/icons/icons.scss
index cb451bf..27bbbb5 100644
--- a/scss/icons/icons.scss
+++ b/scss/icons/icons.scss
@@ -21,115 +21,129 @@
 @import "trophy.scss";
 
 .nes-icon {
+  $default-size: 1px;
+  $icon-size: $default-size * 16;
+
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 16);
+  width: $icon-size;
+  height: $icon-size;
+  margin-right: $icon-size;
+  margin-bottom: $icon-size;
 
-  // font size dictates pixel size, everything will adjust
-  // default
-  font-size: 2px;
+  // NOTE: Use `transform: scale()` because cannot use font-size less than 10px on Chrome
+  // default 2px
+  transform: scale(2);
+  transform-origin: top left;
 
   &.is-small {
-    font-size: 1px;
+    margin: 0;
+    // 1px
+    transform: scale(1);
   }
 
   &.is-medium {
-    font-size: 3px;
+    margin-right: $icon-size * 2;
+    margin-bottom: $icon-size * 2;
+    // 3px
+    transform: scale(3);
   }
 
   &.is-large {
-    font-size: 4px;
+    margin-right: $icon-size * 3;
+    margin-bottom: $icon-size * 3;
+    // 4px
+    transform: scale(4);
   }
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: $default-size * -1;
+    left: $default-size * -1;
     display: block;
     content: "";
     background: transparent;
   }
 
   &.heart::before {
-    @include pixelize($icon-heart, $icon-heart-colors);
+    @include pixelize($default-size, $icon-heart, $icon-heart-colors);
   }
   &.heart.is-empty::before {
-    @include pixelize($icon-heart-empty, $icon-heart-empty-colors);
+    @include pixelize($default-size, $icon-heart-empty, $icon-heart-empty-colors);
   }
 
   &.star::before {
-    @include pixelize($icon-star, $icon-star-colors);
+    @include pixelize($default-size, $icon-star, $icon-star-colors);
   }
   &.star.is-empty::before {
-    @include pixelize($icon-star-empty, $icon-star-empty-colors);
+    @include pixelize($default-size, $icon-star-empty, $icon-star-empty-colors);
   }
   &.star.is-half::before {
-    @include pixelize($icon-star-half, $icon-star-colors);
+    @include pixelize($default-size, $icon-star-half, $icon-star-colors);
   }
   &.star.is-transparent::before {
-    @include pixelize($icon-star-transparent, $icon-star-colors);
+    @include pixelize($default-size, $icon-star-transparent, $icon-star-colors);
   }
 
   &.trophy::before {
-    @include pixelize($icon-trophy, $icon-trophy-colors);
+    @include pixelize($default-size, $icon-trophy, $icon-trophy-colors);
   }
   &.trophy.is-empty::before {
-    @include pixelize($icon-trophy-empty, $icon-trophy-empty-colors);
+    @include pixelize($default-size, $icon-trophy-empty, $icon-trophy-empty-colors);
   }
 
   &.like::before {
-    @include pixelize($icon-like, $icon-like-colors);
+    @include pixelize($default-size, $icon-like, $icon-like-colors);
   }
   &.like.is-empty::before {
-    @include pixelize($icon-like-empty, $icon-like-empty-colors);
+    @include pixelize($default-size, $icon-like-empty, $icon-like-empty-colors);
   }
 
   &.twitter::before {
-    @include pixelize($icon-twitter, $icon-twitter-colors);
+    @include pixelize($default-size, $icon-twitter, $icon-twitter-colors);
   }
 
   &.facebook::before {
-    @include pixelize($icon-facebook, $icon-facebook-colors);
+    @include pixelize($default-size, $icon-facebook, $icon-facebook-colors);
   }
 
   &.github::before {
-    @include pixelize($icon-github, $icon-github-colors);
+    @include pixelize($default-size, $icon-github, $icon-github-colors);
   }
 
   &.youtube::before {
-    @include pixelize($icon-youtube, $icon-youtube-colors);
+    @include pixelize($default-size, $icon-youtube, $icon-youtube-colors);
   }
 
   &.close::before {
-    @include pixelize($icon-close, $icon-close-colors);
+    @include pixelize($default-size, $icon-close, $icon-close-colors);
   }
 
   &.google::before {
-    @include pixelize($icon-google, $icon-google-colors);
+    @include pixelize($default-size, $icon-google, $icon-google-colors);
   }
 
   &.medium::before {
-    @include pixelize($icon-medium, $icon-medium-colors);
+    @include pixelize($default-size, $icon-medium, $icon-medium-colors);
   }
 
   &.twitch::before {
-    @include pixelize($icon-twitch, $icon-twitch-colors);
+    @include pixelize($default-size, $icon-twitch, $icon-twitch-colors);
   }
 
   &.reddit::before {
-    @include pixelize($icon-reddit, $icon-reddit-colors);
+    @include pixelize($default-size, $icon-reddit, $icon-reddit-colors);
   }
 
   &.whatsapp::before {
-    @include pixelize($icon-whatsapp, $icon-whatsapp-colors);
+    @include pixelize($default-size, $icon-whatsapp, $icon-whatsapp-colors);
   }
 
   &.gmail::before {
-    @include pixelize($icon-gmail, $icon-gmail-colors);
+    @include pixelize($default-size, $icon-gmail, $icon-gmail-colors);
   }
 
   &.linkedin::before {
-    @include pixelize($icon-linkedin, $icon-linkedin-colors);
+    @include pixelize($default-size, $icon-linkedin, $icon-linkedin-colors);
   }
 }

From d5213ff43488c1cf70b1059575a943227cbf398a Mon Sep 17 00:00:00 2001
From: BcRikko <s.shin1106@gmail.com>
Date: Wed, 30 Jan 2019 17:39:23 +0900
Subject: [PATCH 4/6] fix: fix pixelize for icon elements

fix #262
---
 scss/pixel-arts/ash.scss          | 16 +++++------
 scss/pixel-arts/bcrikko.scss      | 12 ++++----
 scss/pixel-arts/bulbasaur.scss    | 44 ++++++++++++++---------------
 scss/pixel-arts/charmander.scss   | 46 +++++++++++++++----------------
 scss/pixel-arts/kirby.scss        | 30 ++++++++++----------
 scss/pixel-arts/mario.scss        | 16 +++++------
 scss/pixel-arts/nes-icon.scss     | 12 ++++----
 scss/pixel-arts/nes-jp-icon.scss  | 12 ++++----
 scss/pixel-arts/octocat.scss      | 17 +++++-------
 scss/pixel-arts/phone.scss        | 12 ++++----
 scss/pixel-arts/pokeball.scss     | 12 ++++----
 scss/pixel-arts/smartphone.scss   | 16 +++++------
 scss/pixel-arts/snes-icon.scss    | 12 ++++----
 scss/pixel-arts/snes-jp-icon.scss | 12 ++++----
 scss/pixel-arts/squirtle.scss     | 44 ++++++++++++++---------------
 15 files changed, 150 insertions(+), 163 deletions(-)

diff --git a/scss/pixel-arts/ash.scss b/scss/pixel-arts/ash.scss
index 023dc9c..f41374f 100644
--- a/scss/pixel-arts/ash.scss
+++ b/scss/pixel-arts/ash.scss
@@ -1,7 +1,5 @@
 .nes-ash {
-  // prettier-ignore
-  $ash-colors: (#f8f8ff, #ff614e, #007f7f,
-  #181818, #ffe3c5, #426adb, #4169e1);
+  $ash-colors: (#f8f8ff, #ff614e, #007f7f, #181818, #ffe3c5, #426adb, #4169e1);
   // prettier-ignore
   $ash: (
     (0,0,0,0,4,4,4,4,4,4,0,0,0,0),
@@ -20,20 +18,20 @@
     (4,3,3,4,4,4,4,4,3,3,4,0,0,0),
     (0,4,4,0,0,0,0,0,4,4,0,0,0,0)
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 14);
-  height: calc(1em * 15);
-  font-size: 6px;
+  width: $size * length(nth($ash, 1));
+  height: $size * length($ash);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($ash, $ash-colors);
+    @include pixelize($size, $ash, $ash-colors);
   }
 }
diff --git a/scss/pixel-arts/bcrikko.scss b/scss/pixel-arts/bcrikko.scss
index 22810d0..9680231 100644
--- a/scss/pixel-arts/bcrikko.scss
+++ b/scss/pixel-arts/bcrikko.scss
@@ -20,20 +20,20 @@
     (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),
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 16);
-  font-size: 4px;
+  width: $size * length(nth($bcrikko, 1));
+  height: $size * length($bcrikko);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($bcrikko, $bcrikko-colors);
+    @include pixelize($size, $bcrikko, $bcrikko-colors);
   }
 }
diff --git a/scss/pixel-arts/bulbasaur.scss b/scss/pixel-arts/bulbasaur.scss
index ed35b06..bbe7efe 100644
--- a/scss/pixel-arts/bulbasaur.scss
+++ b/scss/pixel-arts/bulbasaur.scss
@@ -1,41 +1,39 @@
 .nes-bulbasaur {
-  // prettier-ignore
-  $bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1,
-   #3fc3b5, #fdfdf5, #ca242a);
+  $bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1, #3fc3b5, #fdfdf5, #ca242a);
   // prettier-ignore
   $bulbasaur: (
-    (0,0,0,0,0,0,0,0,0,0,0,0,1,1,1),
-    (0,0,0,0,0,0,0,0,0,0,0,1,2,2,2,1),
-    (0,0,0,0,0,0,0,0,0,1,1,1,2,2,2,1),
-    (0,0,0,0,0,0,0,1,1,2,2,3,2,2,3,2,1,1),
-    (0,0,0,1,1,0,1,2,2,2,3,3,2,2,3,2,2,2,1),
+    (0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,0,0,1,2,2,2,1,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,1,1,1,2,2,2,1,0,0,0,0),
+    (0,0,0,0,0,0,0,1,1,2,2,3,2,2,3,2,1,1,0,0),
+    (0,0,0,1,1,0,1,2,2,2,3,3,2,2,3,2,2,2,1,0),
     (0,0,1,4,4,1,1,2,2,3,2,3,2,2,2,3,2,2,2,1),
     (0,0,1,4,4,4,1,1,3,2,3,2,2,2,2,2,3,2,2,1),
     (0,0,1,4,4,4,4,5,1,2,3,2,2,2,2,2,3,2,2,1),
-    (0,1,4,4,5,4,5,5,4,1,1,1,2,2,2,2,3,2,1),
-    (1,1,5,4,4,4,4,4,4,4,4,1,2,2,2,1,1,1,1),
-    (1,1,5,4,4,4,5,4,4,4,1,5,1,1,1,5,5,5,1),
-    (1,4,4,4,4,5,4,1,1,4,5,5,5,5,5,1,5,6,1),
-    (1,5,4,4,4,4,1,7,6,6,5,5,1,5,5,1,1,1),
-    (0,1,5,4,4,4,1,7,6,4,5,1,5,5,1),
-    (0,0,1,1,5,5,5,5,5,5,1,5,5,5,1),
-    (0,0,0,0,1,1,1,1,1,1,1,6,5,6,1),
-    (0,0,0,0,0,0,0,0,0,0,0,1,1,1,0),
+    (0,1,4,4,5,4,5,5,4,1,1,1,2,2,2,2,3,2,1,0),
+    (1,1,5,4,4,4,4,4,4,4,4,1,2,2,2,1,1,1,1,0),
+    (1,1,5,4,4,4,5,4,4,4,1,5,1,1,1,5,5,5,1,0),
+    (1,4,4,4,4,5,4,1,1,4,5,5,5,5,5,1,5,6,1,0),
+    (1,5,4,4,4,4,1,7,6,6,5,5,1,5,5,1,1,1,0,0),
+    (0,1,5,4,4,4,1,7,6,4,5,1,5,5,1,0,0,0,0,0),
+    (0,0,1,1,5,5,5,5,5,5,1,5,5,5,1,0,0,0,0,0),
+    (0,0,0,0,1,1,1,1,1,1,1,6,5,6,1,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0),
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 20);
-  height: calc(1em * 17);
-  font-size: 6px;
+  width: $size * length(nth($bulbasaur, 1));
+  height: $size * length($bulbasaur);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($bulbasaur, $bulbasaur-colors);
+    @include pixelize($size, $bulbasaur, $bulbasaur-colors);
   }
 }
diff --git a/scss/pixel-arts/charmander.scss b/scss/pixel-arts/charmander.scss
index d7e8443..a0c1b9c 100644
--- a/scss/pixel-arts/charmander.scss
+++ b/scss/pixel-arts/charmander.scss
@@ -1,42 +1,40 @@
 .nes-charmander {
-  // prettier-ignore
-  $charmander-colors: (#000202, #f77702, #eb2010,
-    #fdfcff, #e5d70a, #e7d70e);
+  $charmander-colors: (#000202, #f77702, #eb2010, #fdfcff, #e5d70a, #e7d70e);
   // prettier-ignore
   $charmander: (
-    (0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1),
-    (0,0,0,1,2,2,2,2,1,0,0,0,0,0,0,0,1,3,1),
-    (0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1),
-    (0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1),
+    (0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+    (0,0,0,1,2,2,2,2,1,0,0,0,0,0,0,0,1,3,1,0,0),
+    (0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1,0),
+    (0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1,0),
     (0,1,2,2,2,2,2,2,2,2,1,0,0,0,0,1,3,3,2,3,1),
     (1,2,2,2,2,4,1,2,2,2,1,0,0,0,0,1,3,2,6,3,1),
     (1,2,2,2,2,1,1,2,2,2,2,1,0,0,0,1,3,5,5,3,1),
-    (1,2,2,2,2,1,1,2,2,2,2,1,0,0,0,0,1,5,1,1),
-    (0,1,2,2,2,2,2,2,2,2,2,2,1,0,0,0,1,2,1),
-    (0,0,1,1,2,2,2,2,2,2,2,2,2,1,0,1,2,2,1),
-    (0,0,0,0,1,1,1,2,2,1,2,2,2,1,1,2,2,1),
-    (0,0,0,0,0,1,6,5,1,2,2,2,2,2,1,2,2,1),
-    (0,0,0,0,0,1,5,5,5,1,1,2,2,2,1,2,1),
-    (0,0,0,0,1,4,1,6,5,5,2,2,2,2,1,1),
-    (0,0,0,0,0,1,1,1,5,5,2,2,2,1,1),
-    (0,0,0,0,0,0,0,0,1,1,1,0,1,1),
-    (0,0,0,0,0,0,0,0,0,1,4,0,4,1),
-    (0,0,0,0,0,0,0,0,0,0,1,1,1,0)
+    (1,2,2,2,2,1,1,2,2,2,2,1,0,0,0,0,1,5,1,1,0),
+    (0,1,2,2,2,2,2,2,2,2,2,2,1,0,0,0,1,2,1,0,0),
+    (0,0,1,1,2,2,2,2,2,2,2,2,2,1,0,1,2,2,1,0,0),
+    (0,0,0,0,1,1,1,2,2,1,2,2,2,1,1,2,2,1,0,0,0),
+    (0,0,0,0,0,1,6,5,1,2,2,2,2,2,1,2,2,1,0,0,0),
+    (0,0,0,0,0,1,5,5,5,1,1,2,2,2,1,2,1,0,0,0,0),
+    (0,0,0,0,1,4,1,6,5,5,2,2,2,2,1,1,0,0,0,0,0),
+    (0,0,0,0,0,1,1,1,5,5,2,2,2,1,1,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,1,1,1,0,1,1,0,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,1,4,0,4,1,0,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0)
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 21);
-  height: calc(1em * 18);
-  font-size: 6px;
+  width: $size * length(nth($charmander, 1));
+  height: $size * length($charmander);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($charmander, $charmander-colors);
+    @include pixelize($size, $charmander, $charmander-colors);
   }
 }
diff --git a/scss/pixel-arts/kirby.scss b/scss/pixel-arts/kirby.scss
index 6b69236..03a8655 100644
--- a/scss/pixel-arts/kirby.scss
+++ b/scss/pixel-arts/kirby.scss
@@ -2,12 +2,12 @@
   $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),
+    (0,0,1,1,0,1,1,1,1,1,0,0,0,0,0,0),
+    (0,1,2,2,1,2,2,2,2,2,1,1,0,0,0,0),
+    (1,2,2,1,2,2,2,2,2,2,2,2,1,0,0,0),
+    (1,2,2,2,2,2,1,2,1,2,2,2,2,1,0,0),
+    (1,2,2,2,2,2,1,2,1,2,2,2,2,1,0,0),
+    (1,2,2,2,2,2,1,2,1,2,2,2,2,2,1,0),
     (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),
@@ -15,24 +15,24 @@
     (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)
+    (0,1,3,3,1,1,2,2,2,1,3,3,3,3,1,0),
+    (1,3,3,3,3,3,1,1,1,1,1,3,3,1,0,0),
+    (0,1,1,1,1,1,1,0,0,0,1,1,1,0,0,0)
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 16);
-  font-size: 6px;
+  width: $size * length(nth($kirby, 1));
+  height: $size * length($kirby);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($kirby, $kirby-colors);
+    @include pixelize($size, $kirby, $kirby-colors);
   }
 }
diff --git a/scss/pixel-arts/mario.scss b/scss/pixel-arts/mario.scss
index 781a78b..6b5c778 100644
--- a/scss/pixel-arts/mario.scss
+++ b/scss/pixel-arts/mario.scss
@@ -1,7 +1,5 @@
 .nes-mario {
-  // prettier-ignore
-  $mario-colors: (#f81c2f, #65352b, #ffbb8e, #000,
-    #1560ad, #aeaeac, #fef102);
+  $mario-colors: (#f81c2f, #65352b, #ffbb8e, #000, #1560ad, #aeaeac, #fef102);
   // prettier-ignore
   $mario: (
     (0,0,0,0,1,1,1,1,1,0,0,0,0,0),
@@ -21,20 +19,20 @@
     (0,0,2,2,2,0,0,0,0,2,2,2,0,0),
     (0,2,2,2,2,0,0,0,0,2,2,2,2,0)
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 14);
-  height: calc(1em * 16);
-  font-size: 6px;
+  width: $size * length(nth($mario, 1));
+  height: $size * length($mario);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($mario, $mario-colors);
+    @include pixelize($size, $mario, $mario-colors);
   }
 }
diff --git a/scss/pixel-arts/nes-icon.scss b/scss/pixel-arts/nes-icon.scss
index 82903fe..032ce9a 100644
--- a/scss/pixel-arts/nes-icon.scss
+++ b/scss/pixel-arts/nes-icon.scss
@@ -14,20 +14,20 @@
     (2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
     (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2)
   );
+  $size: 4px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 11);
-  font-size: 3px;
+  width: $size * length(nth($logo, 1));
+  height: $size * length($logo);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors);
+    @include pixelize($size, $logo, $logo-colors);
   }
 }
diff --git a/scss/pixel-arts/nes-jp-icon.scss b/scss/pixel-arts/nes-jp-icon.scss
index ca5329e..abfb4c0 100644
--- a/scss/pixel-arts/nes-jp-icon.scss
+++ b/scss/pixel-arts/nes-jp-icon.scss
@@ -14,20 +14,20 @@
     (2,3,3,3,3,3,3,3,3,3,3,3,3,3,2),
     (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2)
   );
+  $size: 4px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 11);
-  font-size: 3px;
+  width: $size * length(nth($logo, 1));
+  height: $size * length($logo);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors);
+    @include pixelize($size, $logo, $logo-colors);
   }
 }
diff --git a/scss/pixel-arts/octocat.scss b/scss/pixel-arts/octocat.scss
index c8fdb08..341a229 100644
--- a/scss/pixel-arts/octocat.scss
+++ b/scss/pixel-arts/octocat.scss
@@ -36,21 +36,21 @@
     (0,0,0,0,0,1,0,1,1,0,1,0,0,0),
     (0,0,0,0,1,0,1,0,0,1,0,1,0,0)
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 14);
-  height: calc(1em * 15);
-  font-size: 6px;
+  width: $size * length(nth($octocat-1, 1));
+  height: $size * length($octocat-1);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($octocat-1, $octocat-colors);
+    @include pixelize($size, $octocat-1, $octocat-colors);
   }
 
   &.animate::before {
@@ -58,11 +58,8 @@
   }
 
   @keyframes wave {
-    0% {
-      @include pixelize($octocat-1, $octocat-colors);
-    }
     50% {
-      @include pixelize($octocat-2, $octocat-colors);
+      @include pixelize($size, $octocat-2, $octocat-colors);
     }
   }
 }
diff --git a/scss/pixel-arts/phone.scss b/scss/pixel-arts/phone.scss
index 86f0f66..f0f06ce 100644
--- a/scss/pixel-arts/phone.scss
+++ b/scss/pixel-arts/phone.scss
@@ -24,20 +24,20 @@
     (0,3,3,2,2,2,1,3),
     (0,0,3,3,3,3,3,3)
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 8);
-  height: calc(1em * 21);
-  font-size: 6px;
+  width: $size * length(nth($phone, 1));
+  height: $size * length($phone);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($phone, $phone-colors);
+    @include pixelize($size, $phone, $phone-colors);
   }
 }
diff --git a/scss/pixel-arts/pokeball.scss b/scss/pixel-arts/pokeball.scss
index dedd628..8e81a3e 100644
--- a/scss/pixel-arts/pokeball.scss
+++ b/scss/pixel-arts/pokeball.scss
@@ -19,20 +19,20 @@
     (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),
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 14);
-  height: calc(1em * 14);
-  font-size: 6px;
+  width: $size * length(nth($pokeball, 1));
+  height: $size * length($pokeball);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($pokeball, $pokeball-colors);
+    @include pixelize($size, $pokeball, $pokeball-colors);
   }
 }
diff --git a/scss/pixel-arts/smartphone.scss b/scss/pixel-arts/smartphone.scss
index 240b241..782555d 100644
--- a/scss/pixel-arts/smartphone.scss
+++ b/scss/pixel-arts/smartphone.scss
@@ -2,7 +2,7 @@
   $smartphone-colors: (#fff, #060606);
   // prettier-ignore
   $smartphone: (
-    (0,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,0),
     (2,2,1,1,1,1,1,1,1,1,1,1,1,2,2),
     (2,1,1,1,2,2,2,2,2,2,2,1,1,1,2),
     (2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
@@ -28,22 +28,22 @@
     (2,1,1,1,1,1,1,2,2,1,1,1,1,1,2),
     (2,1,1,1,1,1,1,2,2,1,1,1,1,1,2),
     (2,2,1,1,1,1,1,1,1,1,1,1,1,2,2),
-    (0,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,0)
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 27);
-  font-size: 6px;
+  width: $size * length(nth($smartphone, 1));
+  height: $size * length($smartphone);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($smartphone, $smartphone-colors);
+    @include pixelize($size, $smartphone, $smartphone-colors);
   }
 }
diff --git a/scss/pixel-arts/snes-icon.scss b/scss/pixel-arts/snes-icon.scss
index 143cfcc..37f8d8e 100644
--- a/scss/pixel-arts/snes-icon.scss
+++ b/scss/pixel-arts/snes-icon.scss
@@ -14,20 +14,20 @@
     (0,1,2,2,2,2,2,2,2,2,2,2,2,1,0),
     (0,0,1,1,1,1,1,1,1,1,1,1,1,0,0)
   );
+  $size: 4px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 11);
-  font-size: 3px;
+  width: $size * length(nth($logo, 1));
+  height: $size * length($logo);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors);
+    @include pixelize($size, $logo, $logo-colors);
   }
 }
diff --git a/scss/pixel-arts/snes-jp-icon.scss b/scss/pixel-arts/snes-jp-icon.scss
index b91e0e6..42cadfa 100644
--- a/scss/pixel-arts/snes-jp-icon.scss
+++ b/scss/pixel-arts/snes-jp-icon.scss
@@ -15,20 +15,20 @@
     (0,1,2,2,2,2,2,2,2,2,2,2,2,1,0),
     (0,0,1,1,1,1,1,1,1,1,1,1,1,0,0)
   );
+  $size: 4px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 11);
-  font-size: 3px;
+  width: $size * length(nth($logo, 1));
+  height: $size * length($logo);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors);
+    @include pixelize($size, $logo, $logo-colors);
   }
 }
diff --git a/scss/pixel-arts/squirtle.scss b/scss/pixel-arts/squirtle.scss
index 7b968dc..a57db00 100644
--- a/scss/pixel-arts/squirtle.scss
+++ b/scss/pixel-arts/squirtle.scss
@@ -1,41 +1,39 @@
 .nes-squirtle {
-  // prettier-ignore
-  $squirtle-colors: (#000, #9cf, #cb6633,
-    #9fa1a1, #fff, #f89934, #ff3);
+  $squirtle-colors: (#000, #9cf, #cb6633, #9fa1a1, #fff, #f89934, #ff3);
   // prettier-ignore
   $squirtle: (
-    (0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1),
-    (0,0,1,2,2,2,2,1,1,0,0,0,0,0,0,1,2,2,2,1),
+    (0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0),
+    (0,0,1,2,2,2,2,1,1,0,0,0,0,0,0,1,2,2,2,1,0),
     (0,1,2,2,2,2,2,2,2,1,1,0,0,0,1,2,2,2,2,2,1),
     (0,1,2,2,2,2,2,2,2,1,6,1,1,0,1,2,2,2,1,2,1),
     (1,3,2,2,2,2,2,2,2,2,6,6,6,1,2,2,2,1,2,2,1),
-    (1,2,2,2,2,5,1,2,2,2,5,6,6,6,1,2,2,1,2,1),
-    (1,2,2,2,2,1,3,2,2,2,5,6,6,6,1,2,1,1,1),
-    (0,1,2,2,2,1,3,2,2,2,1,5,6,6,6,1,1),
-    (0,0,1,1,2,2,2,2,1,1,2,2,5,6,6,1),
-    (0,0,1,2,1,1,1,1,2,2,2,2,5,6,6,1),
-    (0,0,0,1,1,7,7,1,2,2,2,1,5,6,6,1),
-    (0,0,0,0,0,1,7,7,1,1,1,1,5,6,6,1),
-    (0,0,0,0,1,2,1,7,7,7,7,7,1,5,1,0),
-    (0,0,0,0,0,1,1,1,1,7,7,2,1,5,1,0),
-    (0,0,0,0,0,0,0,0,1,1,1,2,1,1),
-    (0,0,0,0,0,0,0,0,0,1,2,2,2,1),
-    (0,0,0,0,0,0,0,0,0,0,1,1,1,0),
+    (1,2,2,2,2,5,1,2,2,2,5,6,6,6,1,2,2,1,2,1,0),
+    (1,2,2,2,2,1,3,2,2,2,5,6,6,6,1,2,1,1,1,0,0),
+    (0,1,2,2,2,1,3,2,2,2,1,5,6,6,6,1,1,0,0,0,0),
+    (0,0,1,1,2,2,2,2,1,1,2,2,5,6,6,1,0,0,0,0,0),
+    (0,0,1,2,1,1,1,1,2,2,2,2,5,6,6,1,0,0,0,0,0),
+    (0,0,0,1,1,7,7,1,2,2,2,1,5,6,6,1,0,0,0,0,0),
+    (0,0,0,0,0,1,7,7,1,1,1,1,5,6,6,1,0,0,0,0,0),
+    (0,0,0,0,1,2,1,7,7,7,7,7,1,5,1,0,0,0,0,0,0),
+    (0,0,0,0,0,1,1,1,1,7,7,2,1,5,1,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,1,1,1,2,1,1,0,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,1,2,2,2,1,0,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0),
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 21);
-  height: calc(1em * 17);
-  font-size: 6px;
+  width: $size * length(nth($squirtle, 1));
+  height: $size * length($squirtle);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($squirtle, $squirtle-colors);
+    @include pixelize($size, $squirtle, $squirtle-colors);
   }
 }

From b4fd24ecbab2c713a653ed4e58a0165178c72b4b Mon Sep 17 00:00:00 2001
From: tnantoka <tnantoka@bornneet.com>
Date: Sun, 3 Feb 2019 21:41:07 +0900
Subject: [PATCH 5/6] docs(readme): Fix link to misaki font

Since the link to Misaki font was old, I replaced the link with the latest URL.
---
 .github/README-es.md    | 2 +-
 .github/README-jp.md    | 2 +-
 .github/README-pt-BR.md | 2 +-
 .github/README-zh-CN.md | 2 +-
 README.md               | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/.github/README-es.md b/.github/README-es.md
index 32e7065..78384ca 100644
--- a/.github/README-es.md
+++ b/.github/README-es.md
@@ -47,7 +47,7 @@ NES.css no contiene ninguna tipografía, pero recomendamos la siguiente lista de
 |-----------|--------------------------------------------------------------------|
 | (Default) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
 | Inglés   | [Kongtext](https://www.dafont.com/kongtext.font)                   |
-| Japonés  | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)          |
+| Japonés  | [美咲フォント](http://littlelimit.net/misaki.htm)          |
 | Japonés  | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)                  |
 | Coreano  | [둥근모꼴](http://cactus.tistory.com/193)                            |
 
diff --git a/.github/README-jp.md b/.github/README-jp.md
index 6a7b98e..7dbed27 100644
--- a/.github/README-jp.md
+++ b/.github/README-jp.md
@@ -47,7 +47,7 @@ NES.cssはいかなるフォントも提供していませんが、ライブラ
 |-----------|--------------------------------------------------------------------|
 | (デフォルト) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
 | 英語      | [Kongtext](https://www.dafont.com/kongtext.font)                   |
-| 日本語    | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)          |
+| 日本語    | [美咲フォント](http://littlelimit.net/misaki.htm)          |
 | 日本語    | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)                  |
 | 韓国語    | [둥근모꼴](http://cactus.tistory.com/193)                            |
 
diff --git a/.github/README-pt-BR.md b/.github/README-pt-BR.md
index c76bf3a..845bd11 100644
--- a/.github/README-pt-BR.md
+++ b/.github/README-pt-BR.md
@@ -47,7 +47,7 @@ NES.css não fornece nenhuma fonte, mas nós mantemos uma lista de fontes recome
 |-----------|--------------------------------------------------------------------|
 | (Padrão) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
 | Inglês   | [Kongtext](https://www.dafont.com/kongtext.font)                   |
-| Japonês  | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)          |
+| Japonês  | [美咲フォント](http://littlelimit.net/misaki.htm)          |
 | Japonês  | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)                  |
 | Coreano  | [둥근모꼴](http://cactus.tistory.com/193)                            |
 
diff --git a/.github/README-zh-CN.md b/.github/README-zh-CN.md
index 5f44a33..aaf95bb 100644
--- a/.github/README-zh-CN.md
+++ b/.github/README-zh-CN.md
@@ -35,7 +35,7 @@ yarn add nes.css
 |----|----|
 |(Default)|[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P)|
 |English|[Kongtext](https://www.dafont.com/kongtext.font)|
-|Japanese|[美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)|
+|Japanese|[美咲フォント](http://littlelimit.net/misaki.htm)|
 |Japanese|[Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)|
 | Korean|[둥근모꼴](http://cactus.tistory.com/193)|
 
diff --git a/README.md b/README.md
index ee1d1cf..72ff32e 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@ NES.css doesn't provide any fonts, but we do maintain the following list of font
 |-----------|--------------------------------------------------------------------|
 | (Default) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
 | English   | [Kongtext](https://www.dafont.com/kongtext.font)                   |
-| Japanese  | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)          |
+| Japanese  | [美咲フォント](http://littlelimit.net/misaki.htm)          |
 | Japanese  | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)                  |
 | Korean    | [둥근모꼴](http://cactus.tistory.com/193)                            |
 

From 20d348e95b100a8b976a10e81af92a8e9422d053 Mon Sep 17 00:00:00 2001
From: BcRikko <s.shin1106@gmail.com>
Date: Wed, 6 Feb 2019 00:08:11 +0900
Subject: [PATCH 6/6] fix: fix border bugs on chrome

border is broken when zooming in/out on chrome

fix #244
---
 scss/form/inputs.scss                     | 5 ++---
 scss/utilities/rounded-corners-mixin.scss | 2 ++
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/scss/form/inputs.scss b/scss/form/inputs.scss
index b73b791..f525a54 100644
--- a/scss/form/inputs.scss
+++ b/scss/form/inputs.scss
@@ -1,18 +1,17 @@
 .nes-input,
 .nes-textarea {
   @mixin border-style($border, $outline) {
-    @include compact-rounded-corners();
     @include compact-border-image($border);
 
     outline-color: $outline;
   }
 
+  @include compact-rounded-corners();
+
   width: 100%;
   padding: 0.5rem 1rem;
   margin: 4px;
 
-  @include border-style($base-color, map-get($default-colors, "hover"));
-
   &.is-dark {
     @include border-style(map-get($default-colors, "normal"), map-get($default-colors, "hover"));
 
diff --git a/scss/utilities/rounded-corners-mixin.scss b/scss/utilities/rounded-corners-mixin.scss
index eec9ef1..7d00e5d 100644
--- a/scss/utilities/rounded-corners-mixin.scss
+++ b/scss/utilities/rounded-corners-mixin.scss
@@ -16,6 +16,7 @@
 
   border-image-slice: 3;
   border-image-width: 3;
+  border-image-repeat: space;
 
   @if $isDark {
     @include border-image($color-white);
@@ -33,6 +34,7 @@
 
   border-image-slice: 2;
   border-image-width: 2;
+  border-image-repeat: space;
 
   @if $isDark {
     @include compact-border-image($color-white);