🎉 ロゴアイコンを追加

nostalgic-css · Nov 27, 2018 · 0b599ed · 0b599ed
1 parent b5595c5
commit 0b599ed
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 4 deletions.
diff --git a/css/nes.css b/css/nes.css
diff --git a/css/nes.css.map b/css/nes.css.map
diff --git a/css/nes.min.css b/css/nes.min.css
diff --git a/index.html b/index.html
@@ -30,8 +30,9 @@
 
   <body>
     <header>
-      <h1>NES.css</h1>
+      <h1><i class="nes-logo"></i>NES.css</h1>
       <p>NES-style CSS Framework.</p>
+      <i class="bcrikko"></i>
     </header>
 
     <a class="github-link" href="https://github.com/BcRikko/NES.css" target="_blank">

diff --git a/scss/pixel-arts/_index.scss b/scss/pixel-arts/_index.scss
@@ -1,3 +1,5 @@
 @charset "utf-8";
 
+@import "nes-icon.scss";
+@import "bcrikko.scss";
 @import "octocat.scss";
diff --git a/scss/pixel-arts/bcrikko.scss b/scss/pixel-arts/bcrikko.scss
@@ -0,0 +1,39 @@
+.bcrikko {
+  $px: 4px;
+  $bcrikko-colors: (#333, #f9f2d7, #c5090c, #fff);
+
+  // prettier-ignore
+  $bcrikko: (
+    (0,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,2,2),
+    (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
+    (2,2,2,2,1,1,2,2,2,2,1,1,2,2,2,2),
+    (2,2,2,1,1,4,1,2,2,1,1,4,1,2,2,2),
+    (2,2,2,1,1,1,1,2,2,1,1,1,1,2,2,2),
+    (2,2,2,1,1,1,1,2,2,1,1,1,1,2,2,2),
+    (2,2,2,1,1,1,1,2,2,1,1,1,1,2,2,2),
+    (2,2,2,2,1,1,2,2,2,2,1,1,2,2,2,2),
+    (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
+    (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
+    (2,2,2,3,2,2,2,2,2,2,2,2,3,2,2,2),
+    (2,2,2,3,2,2,2,2,2,2,2,2,3,2,2,2),
+    (2,2,2,2,3,3,3,3,3,3,3,3,2,2,2,2),
+    (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),
+  );
+
+  position: relative;
+  display: inline-block;
+  width: $px * 16;
+  height: $px * 16;
+
+  &::before {
+    position: absolute;
+    top: $px * -1;
+    left: $px * -1;
+    content: "";
+    background: transparent;
+
+    @include pixelize($bcrikko, $bcrikko-colors, $px);
+  }
+}
diff --git a/scss/pixel-arts/nes-icon.scss b/scss/pixel-arts/nes-icon.scss
@@ -0,0 +1,33 @@
+.nes-logo {
+  $px: 3px;
+  $logo-colors: (#333, #d7d7d7, #7dbb78, #999cf7, #f40500, #f6f504);
+
+  // prettier-ignore
+  $logo: (
+    (0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
+    (0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,1,0,0,0,0,0,0,0),
+    (0,0,1,1,1,1,1,1,1,1,1,1,1,0,0),
+    (0,1,2,2,2,2,2,2,2,2,2,2,2,1,0),
+    (1,2,2,1,2,2,2,2,2,2,2,4,2,2,1),
+    (1,2,1,1,1,2,2,2,2,2,3,2,5,2,1),
+    (1,2,2,1,2,2,1,2,1,2,2,6,2,2,1),
+    (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)
+  );
+
+  position: relative;
+  display: inline-block;
+  width: $px * 16;
+  height: $px * 11;
+
+  &::before {
+    position: absolute;
+    top: $px * -1;
+    left: $px * -1;
+    content: "";
+    background: transparent;
+
+    @include pixelize($logo, $logo-colors, $px);
+  }
+}