Merge branch 'develop' into table-margin

scss/form/inputs.scss

@@ -9,7 +9,7 @@
       -4px 0 $border;
   }
 
-  max-width: 100%;
+  width: 100%;
   padding: 0.5rem 1rem;
   margin: 4px;
   border: none;

scss/icons/icons.scss

@@ -55,6 +55,9 @@
     &.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);
@@ -89,12 +92,12 @@
 
     &.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);
     }
@@ -103,6 +106,10 @@
   // default
   @include setup(2px);
 
+  &.is-small {
+    @include setup(1px);
+  }
+
   &.is-medium {
     @include setup(3px);
   }

scss/icons/trophy.scss

@@ -16,10 +16,26 @@ $icon-trophy: (
   (0,0,0,0,0,0,2,3,2,0,0,0,0,0,0,0),
   (0,0,0,0,0,2,2,3,2,2,0,0,0,0,0,0),
   (0,0,0,0,2,3,3,3,3,4,2,0,0,0,0,0),
-  (0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0),
+  (0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0)
 );
 
-// 2 black
-// 3 yellow
-// 1 white
-// 4 orange
+$icon-trophy-empty-colors: (#adafbb);
+// prettier-ignore
+$icon-trophy-empty: (
+  (0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0),
+  (0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+  (1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0),
+  (1,0,1,0,0,0,0,0,0,0,0,0,1,0,1,0),
+  (1,0,1,0,0,0,0,0,0,0,0,0,1,0,1,0),
+  (0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0),
+  (0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+  (0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+  (0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0),
+  (0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0),
+  (0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0),
+  (0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0),
+  (0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,0),
+  (0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0),
+  (0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0)
+);

scss/pixel-arts/_index.scss

@@ -7,3 +7,5 @@
 @import "bcrikko.scss";
 @import "octocat.scss";
 @import "pokeball.scss";
+@import "phone.scss";
+@import "smartphone.scss";

scss/pixel-arts/phone.scss

@@ -0,0 +1,43 @@
+.phone {
+  $px: 6px;
+  $phone-colors: (#596985, #3c4665, #000);
+  // prettier-ignore
+  $phone: (
+    (0,0,3,3,3,3,3,3),
+    (0,3,3,2,2,2,1,3),
+    (3,3,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,3,3,3,3,3),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,3,3,3,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,3,2,2,2,2,1,3),
+    (0,3,3,2,2,2,1,3),
+    (0,0,3,3,3,3,3,3)
+  );
+
+  position: relative;
+  display: inline-block;
+  width: $px * 8;
+  height: $px * 21;
+
+  &::before {
+    position: absolute;
+    top: $px * -1;
+    left: $px * -1;
+    content: "";
+    background: transparent;
+
+    @include pixelize($phone, $phone-colors, $px);
+  }
+}

scss/pixel-arts/smartphone.scss

@@ -0,0 +1,49 @@
+.smartphone {
+  $px: 6px;
+  $smartphone-colors: (#fff, #060606);
+  // prettier-ignore
+  $smartphone: (
+    (0,2,2,2,2,2,2,2,2,2,2,2,2,2),
+    (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),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
+    (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)
+  );
+
+  position: relative;
+  display: inline-block;
+  width: $px * 16;
+  height: $px * 27;
+
+  &::before {
+    position: absolute;
+    top: $px * -1;
+    left: $px * -1;
+    content: "";
+    background: transparent;
+
+    @include pixelize($smartphone, $smartphone-colors, $px);
+  }
+}