perf(icons): reduce size of css

ref #205
nostalgic-css · Dec 19, 2018 · ba076c9 · ba076c9
1 parent 982a412
commit ba076c9
Show file tree

Hide file tree

Showing 17 changed files with 199 additions and 202 deletions.
diff --git a/scss/icons/icons.scss b/scss/icons/icons.scss
@@ -23,119 +23,115 @@
 .nes-icon {
   position: relative;
   display: inline-block;
+  width: calc(1em * 16);
+  height: calc(1em * 16);
 
-  @mixin setup($px) {
-    $size: $px * 16;
-
-    width: $size;
-    height: $size;
-
-    &::before {
-      position: absolute;
-      top: $px * -1;
-      left: $px * -1;
-      display: block;
-      width: $size;
-      height: $size;
-      content: "";
-      background: transparent;
-    }
-
-    &.heart::before {
-      @include pixelize($icon-heart, $icon-heart-colors, $px);
-    }
-    &.heart.is-empty::before {
-      @include pixelize($icon-heart-empty, $icon-heart-empty-colors, $px);
-    }
-
-    &.star::before {
-      @include pixelize($icon-star, $icon-star-colors, $px);
-    }
-    &.star.is-empty::before {
-      @include pixelize($icon-star-empty, $icon-star-empty-colors, $px);
-    }
-    &.star.is-half::before {
-      @include pixelize($icon-star-half, $icon-star-colors, $px);
-    }
-    &.star.is-transparent::before {
-      @include pixelize($icon-star-transparent, $icon-star-colors, $px);
-    }
-
-    &.trophy::before {
-      @include pixelize($icon-trophy, $icon-trophy-colors, $px);
-    }
-    &.trophy.is-empty::before {
-      @include pixelize($icon-trophy-empty, $icon-trophy-empty-colors, $px);
-    }
-
-    &.like::before {
-      @include pixelize($icon-like, $icon-like-colors, $px);
-    }
-    &.like.is-empty::before {
-      @include pixelize($icon-like-empty, $icon-like-empty-colors, $px);
-    }
-
-    &.twitter::before {
-      @include pixelize($icon-twitter, $icon-twitter-colors, $px);
-    }
-
-    &.facebook::before {
-      @include pixelize($icon-facebook, $icon-facebook-colors, $px);
-    }
-
-    &.github::before {
-      @include pixelize($icon-github, $icon-github-colors, $px);
-    }
-
-    &.youtube::before {
-      @include pixelize($icon-youtube, $icon-youtube-colors, $px);
-    }
-
-    &.close::before {
-      @include pixelize($icon-close, $icon-close-colors, $px);
-    }
-
-    &.google::before {
-      @include pixelize($icon-google, $icon-google-colors, $px);
-    }
-
-    &.medium::before {
-      @include pixelize($icon-medium, $icon-medium-colors, $px);
-    }
-
-    &.twitch::before {
-      @include pixelize($icon-twitch, $icon-twitch-colors, $px);
-    }
-
-    &.reddit::before {
-      @include pixelize($icon-reddit, $icon-reddit-colors, $px);
-    }
-
-    &.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);
-    }
-  }
-
+  // font size dictates pixel size, everything will adjust
   // default
-  @include setup(2px);
+  font-size: 2px;
 
   &.is-small {
-    @include setup(1px);
+    font-size: 1px;
   }
 
   &.is-medium {
-    @include setup(3px);
+    font-size: 3px;
   }
 
   &.is-large {
-    @include setup(4px);
+    font-size: 4px;
+  }
+
+  &::before {
+    position: absolute;
+    top: -1em;
+    left: -1em;
+    display: block;
+    width: 1em;
+    height: 1em;
+    content: "";
+    background: transparent;
+  }
+
+  &.heart::before {
+    @include pixelize($icon-heart, $icon-heart-colors);
+  }
+  &.heart.is-empty::before {
+    @include pixelize($icon-heart-empty, $icon-heart-empty-colors);
+  }
+
+  &.star::before {
+    @include pixelize($icon-star, $icon-star-colors);
+  }
+  &.star.is-empty::before {
+    @include pixelize($icon-star-empty, $icon-star-empty-colors);
+  }
+  &.star.is-half::before {
+    @include pixelize($icon-star-half, $icon-star-colors);
+  }
+  &.star.is-transparent::before {
+    @include pixelize($icon-star-transparent, $icon-star-colors);
+  }
+
+  &.trophy::before {
+    @include pixelize($icon-trophy, $icon-trophy-colors);
+  }
+  &.trophy.is-empty::before {
+    @include pixelize($icon-trophy-empty, $icon-trophy-empty-colors);
+  }
+
+  &.like::before {
+    @include pixelize($icon-like, $icon-like-colors);
+  }
+  &.like.is-empty::before {
+    @include pixelize($icon-like-empty, $icon-like-empty-colors);
+  }
+
+  &.twitter::before {
+    @include pixelize($icon-twitter, $icon-twitter-colors);
+  }
+
+  &.facebook::before {
+    @include pixelize($icon-facebook, $icon-facebook-colors);
+  }
+
+  &.github::before {
+    @include pixelize($icon-github, $icon-github-colors);
+  }
+
+  &.youtube::before {
+    @include pixelize($icon-youtube, $icon-youtube-colors);
+  }
+
+  &.close::before {
+    @include pixelize($icon-close, $icon-close-colors);
+  }
+
+  &.google::before {
+    @include pixelize($icon-google, $icon-google-colors);
+  }
+
+  &.medium::before {
+    @include pixelize($icon-medium, $icon-medium-colors);
+  }
+
+  &.twitch::before {
+    @include pixelize($icon-twitch, $icon-twitch-colors);
+  }
+
+  &.reddit::before {
+    @include pixelize($icon-reddit, $icon-reddit-colors);
+  }
+
+  &.whatsapp::before {
+    @include pixelize($icon-whatsapp, $icon-whatsapp-colors);
+  }
+
+  &.gmail::before {
+    @include pixelize($icon-gmail, $icon-gmail-colors);
+  }
+
+  &.linkedin::before {
+    @include pixelize($icon-linkedin, $icon-linkedin-colors);
   }
 }
diff --git a/scss/pixel-arts/ash.scss b/scss/pixel-arts/ash.scss
@@ -1,5 +1,4 @@
 .nes-ash {
-  $px: 6px;
   // prettier-ignore
   $ash-colors: (#f8f8ff, #ff614e, #007f7f,
   #181818, #ffe3c5, #426adb, #4169e1);
@@ -24,16 +23,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 14;
-  height: $px * 15;
+  width: calc(1em * 14);
+  height: calc(1em * 15);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($ash, $ash-colors, $px);
+    @include pixelize($ash, $ash-colors);
   }
 }
diff --git a/scss/pixel-arts/bcrikko.scss b/scss/pixel-arts/bcrikko.scss
@@ -1,5 +1,4 @@
 .nes-bcrikko {
-  $px: 4px;
   $bcrikko-colors: (#333, #f9f2d7, #c5090c, #fff);
 
   // prettier-ignore
@@ -24,16 +23,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 16;
-  height: $px * 16;
+  width: calc(1em * 16);
+  height: calc(1em * 16);
+  font-size: 4px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($bcrikko, $bcrikko-colors, $px);
+    @include pixelize($bcrikko, $bcrikko-colors);
   }
 }
diff --git a/scss/pixel-arts/bulbasaur.scss b/scss/pixel-arts/bulbasaur.scss
@@ -1,5 +1,4 @@
 .nes-bulbasaur {
-  $px: 6px;
   // prettier-ignore
   $bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1,
    #3fc3b5, #fdfdf5, #ca242a);
@@ -26,16 +25,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 20;
-  height: $px * 17;
+  width: calc(1em * 20);
+  height: calc(1em * 17);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($bulbasaur, $bulbasaur-colors, $px);
+    @include pixelize($bulbasaur, $bulbasaur-colors);
   }
 }
diff --git a/scss/pixel-arts/charmander.scss b/scss/pixel-arts/charmander.scss
@@ -1,5 +1,4 @@
 .nes-charmander {
-  $px: 6px;
   // prettier-ignore
   $charmander-colors: (#000202, #f77702, #eb2010,
     #fdfcff, #e5d70a, #e7d70e);
@@ -27,16 +26,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 21;
-  height: $px * 18;
+  width: calc(1em * 21);
+  height: calc(1em * 18);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($charmander, $charmander-colors, $px);
+    @include pixelize($charmander, $charmander-colors);
   }
 }
diff --git a/scss/pixel-arts/kirby.scss b/scss/pixel-arts/kirby.scss
@@ -1,5 +1,4 @@
 .nes-kirby {
-  $px: 6px;
   $kirby-colors: (#000, #ffaccc, #ff5478);
   // prettier-ignore
   $kirby: (
@@ -23,16 +22,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 16;
-  height: $px * 16;
+  width: calc(1em * 16);
+  height: calc(1em * 16);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($kirby, $kirby-colors, $px);
+    @include pixelize($kirby, $kirby-colors);
   }
 }
diff --git a/scss/pixel-arts/mario.scss b/scss/pixel-arts/mario.scss
@@ -1,5 +1,4 @@
 .nes-mario {
-  $px: 6px;
   // prettier-ignore
   $mario-colors: (#f81c2f, #65352b, #ffbb8e, #000,
     #1560ad, #aeaeac, #fef102);
@@ -25,16 +24,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 14;
-  height: $px * 16;
+  width: calc(1em * 14);
+  height: calc(1em * 16);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($mario, $mario-colors, $px);
+    @include pixelize($mario, $mario-colors);
   }
 }