👍 icon,twitterを追加

css/nes.css

@@ -544,4 +544,61 @@ dl.description > dd {
   background-color: #f7f7f7;
   box-shadow: -4px 0 #333, 4px 0 #333, -4px 4px #f7f7f7, 0 4px #333, -8px 4px #333, -4px 8px #333, -8px 8px #333;
 }
+
+.icon {
+  position: relative;
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+}
+
+.icon::before {
+  position: absolute;
+  display: block;
+  content: "";
+  background: transparent;
+}
+
+.icon::before {
+  top: -2px;
+  left: -2px;
+  width: 2px;
+  height: 2px;
+}
+
+.icon.-twitter::before {
+  box-shadow: 2px 2px 0 #1c9ceb,4px 2px 0 #1c9ceb,6px 2px 0 #1c9ceb,8px 2px 0 #1c9ceb,10px 2px 0 #1c9ceb,12px 2px 0 #1c9ceb,14px 2px 0 #1c9ceb,16px 2px 0 #1c9ceb,18px 2px 0 #1c9ceb,20px 2px 0 #1c9ceb,22px 2px 0 #1c9ceb,24px 2px 0 #1c9ceb,26px 2px 0 #1c9ceb,28px 2px 0 #1c9ceb,30px 2px 0 #1c9ceb,32px 2px 0 #1c9ceb,2px 4px 0 #1c9ceb,4px 4px 0 #1c9ceb,6px 4px 0 #1c9ceb,8px 4px 0 #1c9ceb,10px 4px 0 #1c9ceb,12px 4px 0 #1c9ceb,14px 4px 0 #1c9ceb,16px 4px 0 #1c9ceb,18px 4px 0 #1c9ceb,20px 4px 0 #1c9ceb,22px 4px 0 #1c9ceb,24px 4px 0 #1c9ceb,26px 4px 0 #1c9ceb,28px 4px 0 #1c9ceb,30px 4px 0 #1c9ceb,32px 4px 0 #1c9ceb,2px 6px 0 #1c9ceb,6px 6px 0 #1c9ceb,8px 6px 0 #1c9ceb,10px 6px 0 #1c9ceb,12px 6px 0 #1c9ceb,14px 6px 0 #1c9ceb,16px 6px 0 #1c9ceb,18px 6px 0 #1c9ceb,26px 6px 0 #1c9ceb,28px 6px 0 #1c9ceb,30px 6px 0 #1c9ceb,32px 6px 0 #1c9ceb,2px 8px 0 #1c9ceb,10px 8px 0 #1c9ceb,12px 8px 0 #1c9ceb,14px 8px 0 #1c9ceb,16px 8px 0 #1c9ceb,28px 8px 0 #1c9ceb,30px 8px 0 #1c9ceb,32px 8px 0 #1c9ceb,2px 10px 0 #1c9ceb,14px 10px 0 #1c9ceb,32px 10px 0 #1c9ceb,2px 12px 0 #1c9ceb,4px 12px 0 #1c9ceb,30px 12px 0 #1c9ceb,32px 12px 0 #1c9ceb,2px 14px 0 #1c9ceb,4px 14px 0 #1c9ceb,30px 14px 0 #1c9ceb,32px 14px 0 #1c9ceb,2px 16px 0 #1c9ceb,4px 16px 0 #1c9ceb,6px 16px 0 #1c9ceb,28px 16px 0 #1c9ceb,30px 16px 0 #1c9ceb,32px 16px 0 #1c9ceb,2px 18px 0 #1c9ceb,4px 18px 0 #1c9ceb,6px 18px 0 #1c9ceb,26px 18px 0 #1c9ceb,28px 18px 0 #1c9ceb,30px 18px 0 #1c9ceb,32px 18px 0 #1c9ceb,2px 20px 0 #1c9ceb,4px 20px 0 #1c9ceb,6px 20px 0 #1c9ceb,8px 20px 0 #1c9ceb,26px 20px 0 #1c9ceb,28px 20px 0 #1c9ceb,30px 20px 0 #1c9ceb,32px 20px 0 #1c9ceb,2px 22px 0 #1c9ceb,4px 22px 0 #1c9ceb,6px 22px 0 #1c9ceb,8px 22px 0 #1c9ceb,10px 22px 0 #1c9ceb,26px 22px 0 #1c9ceb,28px 22px 0 #1c9ceb,30px 22px 0 #1c9ceb,32px 22px 0 #1c9ceb,2px 24px 0 #1c9ceb,4px 24px 0 #1c9ceb,6px 24px 0 #1c9ceb,8px 24px 0 #1c9ceb,24px 24px 0 #1c9ceb,26px 24px 0 #1c9ceb,28px 24px 0 #1c9ceb,30px 24px 0 #1c9ceb,32px 24px 0 #1c9ceb,2px 26px 0 #1c9ceb,4px 26px 0 #1c9ceb,20px 26px 0 #1c9ceb,22px 26px 0 #1c9ceb,24px 26px 0 #1c9ceb,26px 26px 0 #1c9ceb,28px 26px 0 #1c9ceb,30px 26px 0 #1c9ceb,32px 26px 0 #1c9ceb,2px 28px 0 #1c9ceb,4px 28px 0 #1c9ceb,6px 28px 0 #1c9ceb,14px 28px 0 #1c9ceb,16px 28px 0 #1c9ceb,18px 28px 0 #1c9ceb,20px 28px 0 #1c9ceb,22px 28px 0 #1c9ceb,24px 28px 0 #1c9ceb,26px 28px 0 #1c9ceb,28px 28px 0 #1c9ceb,30px 28px 0 #1c9ceb,32px 28px 0 #1c9ceb,2px 30px 0 #1c9ceb,4px 30px 0 #1c9ceb,6px 30px 0 #1c9ceb,8px 30px 0 #1c9ceb,10px 30px 0 #1c9ceb,12px 30px 0 #1c9ceb,14px 30px 0 #1c9ceb,16px 30px 0 #1c9ceb,18px 30px 0 #1c9ceb,20px 30px 0 #1c9ceb,22px 30px 0 #1c9ceb,24px 30px 0 #1c9ceb,26px 30px 0 #1c9ceb,28px 30px 0 #1c9ceb,30px 30px 0 #1c9ceb,32px 30px 0 #1c9ceb,2px 32px 0 #1c9ceb,4px 32px 0 #1c9ceb,6px 32px 0 #1c9ceb,8px 32px 0 #1c9ceb,10px 32px 0 #1c9ceb,12px 32px 0 #1c9ceb,14px 32px 0 #1c9ceb,16px 32px 0 #1c9ceb,18px 32px 0 #1c9ceb,20px 32px 0 #1c9ceb,22px 32px 0 #1c9ceb,24px 32px 0 #1c9ceb,26px 32px 0 #1c9ceb,28px 32px 0 #1c9ceb,30px 32px 0 #1c9ceb,32px 32px 0 #1c9ceb;;
+}
+
+.icon.-medium {
+  width: 48px;
+  height: 48px;
+}
+
+.icon.-medium::before {
+  top: -3px;
+  left: -3px;
+  width: 3px;
+  height: 3px;
+}
+
+.icon.-medium.-twitter::before {
+  box-shadow: 3px 3px 0 #1c9ceb,6px 3px 0 #1c9ceb,9px 3px 0 #1c9ceb,12px 3px 0 #1c9ceb,15px 3px 0 #1c9ceb,18px 3px 0 #1c9ceb,21px 3px 0 #1c9ceb,24px 3px 0 #1c9ceb,27px 3px 0 #1c9ceb,30px 3px 0 #1c9ceb,33px 3px 0 #1c9ceb,36px 3px 0 #1c9ceb,39px 3px 0 #1c9ceb,42px 3px 0 #1c9ceb,45px 3px 0 #1c9ceb,48px 3px 0 #1c9ceb,3px 6px 0 #1c9ceb,6px 6px 0 #1c9ceb,9px 6px 0 #1c9ceb,12px 6px 0 #1c9ceb,15px 6px 0 #1c9ceb,18px 6px 0 #1c9ceb,21px 6px 0 #1c9ceb,24px 6px 0 #1c9ceb,27px 6px 0 #1c9ceb,30px 6px 0 #1c9ceb,33px 6px 0 #1c9ceb,36px 6px 0 #1c9ceb,39px 6px 0 #1c9ceb,42px 6px 0 #1c9ceb,45px 6px 0 #1c9ceb,48px 6px 0 #1c9ceb,3px 9px 0 #1c9ceb,9px 9px 0 #1c9ceb,12px 9px 0 #1c9ceb,15px 9px 0 #1c9ceb,18px 9px 0 #1c9ceb,21px 9px 0 #1c9ceb,24px 9px 0 #1c9ceb,27px 9px 0 #1c9ceb,39px 9px 0 #1c9ceb,42px 9px 0 #1c9ceb,45px 9px 0 #1c9ceb,48px 9px 0 #1c9ceb,3px 12px 0 #1c9ceb,15px 12px 0 #1c9ceb,18px 12px 0 #1c9ceb,21px 12px 0 #1c9ceb,24px 12px 0 #1c9ceb,42px 12px 0 #1c9ceb,45px 12px 0 #1c9ceb,48px 12px 0 #1c9ceb,3px 15px 0 #1c9ceb,21px 15px 0 #1c9ceb,48px 15px 0 #1c9ceb,3px 18px 0 #1c9ceb,6px 18px 0 #1c9ceb,45px 18px 0 #1c9ceb,48px 18px 0 #1c9ceb,3px 21px 0 #1c9ceb,6px 21px 0 #1c9ceb,45px 21px 0 #1c9ceb,48px 21px 0 #1c9ceb,3px 24px 0 #1c9ceb,6px 24px 0 #1c9ceb,9px 24px 0 #1c9ceb,42px 24px 0 #1c9ceb,45px 24px 0 #1c9ceb,48px 24px 0 #1c9ceb,3px 27px 0 #1c9ceb,6px 27px 0 #1c9ceb,9px 27px 0 #1c9ceb,39px 27px 0 #1c9ceb,42px 27px 0 #1c9ceb,45px 27px 0 #1c9ceb,48px 27px 0 #1c9ceb,3px 30px 0 #1c9ceb,6px 30px 0 #1c9ceb,9px 30px 0 #1c9ceb,12px 30px 0 #1c9ceb,39px 30px 0 #1c9ceb,42px 30px 0 #1c9ceb,45px 30px 0 #1c9ceb,48px 30px 0 #1c9ceb,3px 33px 0 #1c9ceb,6px 33px 0 #1c9ceb,9px 33px 0 #1c9ceb,12px 33px 0 #1c9ceb,15px 33px 0 #1c9ceb,39px 33px 0 #1c9ceb,42px 33px 0 #1c9ceb,45px 33px 0 #1c9ceb,48px 33px 0 #1c9ceb,3px 36px 0 #1c9ceb,6px 36px 0 #1c9ceb,9px 36px 0 #1c9ceb,12px 36px 0 #1c9ceb,36px 36px 0 #1c9ceb,39px 36px 0 #1c9ceb,42px 36px 0 #1c9ceb,45px 36px 0 #1c9ceb,48px 36px 0 #1c9ceb,3px 39px 0 #1c9ceb,6px 39px 0 #1c9ceb,30px 39px 0 #1c9ceb,33px 39px 0 #1c9ceb,36px 39px 0 #1c9ceb,39px 39px 0 #1c9ceb,42px 39px 0 #1c9ceb,45px 39px 0 #1c9ceb,48px 39px 0 #1c9ceb,3px 42px 0 #1c9ceb,6px 42px 0 #1c9ceb,9px 42px 0 #1c9ceb,21px 42px 0 #1c9ceb,24px 42px 0 #1c9ceb,27px 42px 0 #1c9ceb,30px 42px 0 #1c9ceb,33px 42px 0 #1c9ceb,36px 42px 0 #1c9ceb,39px 42px 0 #1c9ceb,42px 42px 0 #1c9ceb,45px 42px 0 #1c9ceb,48px 42px 0 #1c9ceb,3px 45px 0 #1c9ceb,6px 45px 0 #1c9ceb,9px 45px 0 #1c9ceb,12px 45px 0 #1c9ceb,15px 45px 0 #1c9ceb,18px 45px 0 #1c9ceb,21px 45px 0 #1c9ceb,24px 45px 0 #1c9ceb,27px 45px 0 #1c9ceb,30px 45px 0 #1c9ceb,33px 45px 0 #1c9ceb,36px 45px 0 #1c9ceb,39px 45px 0 #1c9ceb,42px 45px 0 #1c9ceb,45px 45px 0 #1c9ceb,48px 45px 0 #1c9ceb,3px 48px 0 #1c9ceb,6px 48px 0 #1c9ceb,9px 48px 0 #1c9ceb,12px 48px 0 #1c9ceb,15px 48px 0 #1c9ceb,18px 48px 0 #1c9ceb,21px 48px 0 #1c9ceb,24px 48px 0 #1c9ceb,27px 48px 0 #1c9ceb,30px 48px 0 #1c9ceb,33px 48px 0 #1c9ceb,36px 48px 0 #1c9ceb,39px 48px 0 #1c9ceb,42px 48px 0 #1c9ceb,45px 48px 0 #1c9ceb,48px 48px 0 #1c9ceb;;
+}
+
+.icon.-large {
+  width: 64px;
+  height: 64px;
+}
+
+.icon.-large::before {
+  top: -4px;
+  left: -4px;
+  width: 4px;
+  height: 4px;
+}
+
+.icon.-large.-twitter::before {
+  box-shadow: 4px 4px 0 #1c9ceb,8px 4px 0 #1c9ceb,12px 4px 0 #1c9ceb,16px 4px 0 #1c9ceb,20px 4px 0 #1c9ceb,24px 4px 0 #1c9ceb,28px 4px 0 #1c9ceb,32px 4px 0 #1c9ceb,36px 4px 0 #1c9ceb,40px 4px 0 #1c9ceb,44px 4px 0 #1c9ceb,48px 4px 0 #1c9ceb,52px 4px 0 #1c9ceb,56px 4px 0 #1c9ceb,60px 4px 0 #1c9ceb,64px 4px 0 #1c9ceb,4px 8px 0 #1c9ceb,8px 8px 0 #1c9ceb,12px 8px 0 #1c9ceb,16px 8px 0 #1c9ceb,20px 8px 0 #1c9ceb,24px 8px 0 #1c9ceb,28px 8px 0 #1c9ceb,32px 8px 0 #1c9ceb,36px 8px 0 #1c9ceb,40px 8px 0 #1c9ceb,44px 8px 0 #1c9ceb,48px 8px 0 #1c9ceb,52px 8px 0 #1c9ceb,56px 8px 0 #1c9ceb,60px 8px 0 #1c9ceb,64px 8px 0 #1c9ceb,4px 12px 0 #1c9ceb,12px 12px 0 #1c9ceb,16px 12px 0 #1c9ceb,20px 12px 0 #1c9ceb,24px 12px 0 #1c9ceb,28px 12px 0 #1c9ceb,32px 12px 0 #1c9ceb,36px 12px 0 #1c9ceb,52px 12px 0 #1c9ceb,56px 12px 0 #1c9ceb,60px 12px 0 #1c9ceb,64px 12px 0 #1c9ceb,4px 16px 0 #1c9ceb,20px 16px 0 #1c9ceb,24px 16px 0 #1c9ceb,28px 16px 0 #1c9ceb,32px 16px 0 #1c9ceb,56px 16px 0 #1c9ceb,60px 16px 0 #1c9ceb,64px 16px 0 #1c9ceb,4px 20px 0 #1c9ceb,28px 20px 0 #1c9ceb,64px 20px 0 #1c9ceb,4px 24px 0 #1c9ceb,8px 24px 0 #1c9ceb,60px 24px 0 #1c9ceb,64px 24px 0 #1c9ceb,4px 28px 0 #1c9ceb,8px 28px 0 #1c9ceb,60px 28px 0 #1c9ceb,64px 28px 0 #1c9ceb,4px 32px 0 #1c9ceb,8px 32px 0 #1c9ceb,12px 32px 0 #1c9ceb,56px 32px 0 #1c9ceb,60px 32px 0 #1c9ceb,64px 32px 0 #1c9ceb,4px 36px 0 #1c9ceb,8px 36px 0 #1c9ceb,12px 36px 0 #1c9ceb,52px 36px 0 #1c9ceb,56px 36px 0 #1c9ceb,60px 36px 0 #1c9ceb,64px 36px 0 #1c9ceb,4px 40px 0 #1c9ceb,8px 40px 0 #1c9ceb,12px 40px 0 #1c9ceb,16px 40px 0 #1c9ceb,52px 40px 0 #1c9ceb,56px 40px 0 #1c9ceb,60px 40px 0 #1c9ceb,64px 40px 0 #1c9ceb,4px 44px 0 #1c9ceb,8px 44px 0 #1c9ceb,12px 44px 0 #1c9ceb,16px 44px 0 #1c9ceb,20px 44px 0 #1c9ceb,52px 44px 0 #1c9ceb,56px 44px 0 #1c9ceb,60px 44px 0 #1c9ceb,64px 44px 0 #1c9ceb,4px 48px 0 #1c9ceb,8px 48px 0 #1c9ceb,12px 48px 0 #1c9ceb,16px 48px 0 #1c9ceb,48px 48px 0 #1c9ceb,52px 48px 0 #1c9ceb,56px 48px 0 #1c9ceb,60px 48px 0 #1c9ceb,64px 48px 0 #1c9ceb,4px 52px 0 #1c9ceb,8px 52px 0 #1c9ceb,40px 52px 0 #1c9ceb,44px 52px 0 #1c9ceb,48px 52px 0 #1c9ceb,52px 52px 0 #1c9ceb,56px 52px 0 #1c9ceb,60px 52px 0 #1c9ceb,64px 52px 0 #1c9ceb,4px 56px 0 #1c9ceb,8px 56px 0 #1c9ceb,12px 56px 0 #1c9ceb,28px 56px 0 #1c9ceb,32px 56px 0 #1c9ceb,36px 56px 0 #1c9ceb,40px 56px 0 #1c9ceb,44px 56px 0 #1c9ceb,48px 56px 0 #1c9ceb,52px 56px 0 #1c9ceb,56px 56px 0 #1c9ceb,60px 56px 0 #1c9ceb,64px 56px 0 #1c9ceb,4px 60px 0 #1c9ceb,8px 60px 0 #1c9ceb,12px 60px 0 #1c9ceb,16px 60px 0 #1c9ceb,20px 60px 0 #1c9ceb,24px 60px 0 #1c9ceb,28px 60px 0 #1c9ceb,32px 60px 0 #1c9ceb,36px 60px 0 #1c9ceb,40px 60px 0 #1c9ceb,44px 60px 0 #1c9ceb,48px 60px 0 #1c9ceb,52px 60px 0 #1c9ceb,56px 60px 0 #1c9ceb,60px 60px 0 #1c9ceb,64px 60px 0 #1c9ceb,4px 64px 0 #1c9ceb,8px 64px 0 #1c9ceb,12px 64px 0 #1c9ceb,16px 64px 0 #1c9ceb,20px 64px 0 #1c9ceb,24px 64px 0 #1c9ceb,28px 64px 0 #1c9ceb,32px 64px 0 #1c9ceb,36px 64px 0 #1c9ceb,40px 64px 0 #1c9ceb,44px 64px 0 #1c9ceb,48px 64px 0 #1c9ceb,52px 64px 0 #1c9ceb,56px 64px 0 #1c9ceb,60px 64px 0 #1c9ceb,64px 64px 0 #1c9ceb;;
+}
 /*# sourceMappingURL=nes.css.map */

index.html

@@ -194,6 +194,16 @@
         <p>Hello NES.css</p>
       </div>
     </section>
+
+    <section class="container">
+      <h2 class="title -is-3">Icons</h2>
+      <h3 class="title -is-4">sns</h3>
+      <a href="https://twitter.com/bc_rikko" target="_blank">
+        <i class="icon -twitter"></i>
+        <i class="icon -medium -twitter"></i>
+        <i class="icon -large -twitter"></i>
+      </a>
+    </section>
   </main>
 </body>
 

scss/icons/_index.scss

@@ -0,0 +1,3 @@
+@charset "utf-8";
+
+@import "icons.scss";

scss/icons/icons.scss

@@ -0,0 +1,43 @@
+@import "pixelize.scss";
+@import "twitter.scss";
+
+@mixin setup($pixel) {
+  $size: $pixel * 16;
+
+  width: $size;
+  height: $size;
+
+  &::before {
+    top: $pixel * -1;
+    left: $pixel * -1;
+    width: $pixel;
+    height: $pixel;
+  }
+
+  &.-twitter::before {
+    @include pixelize($twitter, $pixel, #1c9ceb);
+  }
+}
+
+.icon {
+  position: relative;
+  display: inline-block;
+
+  &::before {
+    position: absolute;
+    display: block;
+    content: "";
+    background: transparent;
+  }
+
+  // -default
+  @include setup(2px);
+
+  &.-medium {
+    @include setup(3px);
+  }
+
+  &.-large {
+    @include setup(4px);
+  }
+}

scss/icons/pixelize.scss

@@ -0,0 +1,21 @@
+@mixin pixelize($matrix, $size, $color) {
+  $ret: "";
+
+  @for $i from 1 through length($matrix) {
+    $row: nth($matrix, $i);
+
+    @for $j from 1 through length($row) {
+      $dot: nth($row, $j);
+
+      @if $dot != 0 {
+        @if $ret != "" {
+          $ret: $ret + ",";
+        }
+
+        $ret: $ret + ($j * $size) + " " + ($i * $size) + " 0 " + $color;
+      }
+    }
+  }
+
+  box-shadow: unquote($ret + ";");
+}

scss/icons/twitter.scss

@@ -0,0 +1,19 @@
+// prettier-ignore
+$twitter: (
+  ( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
+  ( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
+  ( 1,0,1,1,1,1,1,1,1,0,0,0,1,1,1,1 ),
+  ( 1,0,0,0,1,1,1,1,0,0,0,0,0,1,1,1 ),
+  ( 1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1 ),
+  ( 1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1 ),
+  ( 1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1 ),
+  ( 1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1 ),
+  ( 1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,1 ),
+  ( 1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1 ),
+  ( 1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1 ),
+  ( 1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1 ),
+  ( 1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1 ),
+  ( 1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1 ),
+  ( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
+  ( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 )
+);

scss/nes.scss

@@ -6,3 +6,4 @@
 
 @import "base/_index.scss";
 @import "elements/_index.scss";
+@import "icons/_index.scss";