fix: fix pixelize for icon elements

fix #262
nostalgic-css · Feb 1, 2019 · d5213ff · d5213ff
1 parent a4016dc
commit d5213ff
Show file tree

Hide file tree

Showing 15 changed files with 150 additions and 163 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -2,37 +2,37 @@
   $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),
     (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)
+    (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
@@ -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
@@ -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
@@ -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
@@ -36,33 +36,30 @@
     (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 {
     animation: wave 0.5s infinite steps(1);
   }
 
   @keyframes wave {
-    0% {
-      @include pixelize($octocat-1, $octocat-colors);
-    }
     50% {
-      @include pixelize($octocat-2, $octocat-colors);
+      @include pixelize($size, $octocat-2, $octocat-colors);
     }
   }
 }