mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-31 17:51:46 +02:00
Code Issues Releases Wiki Activity

🎉 octocatを追加

Browse Source
This commit is contained in:
BcRikko
2018-11-26 22:54:02 +09:00
parent ac150b25fc
commit e5c89004a9
8 changed files with 147 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
scss/nes.scss
View File

@@ -8,3 +8,4 @@
@import "utilities/_index.scss";
@import "elements/_index.scss";
@import "icons/_index.scss";
@import "pixel-arts/_index.scss";

3
scss/pixel-arts/_index.scss Normal file
View File

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

68
scss/pixel-arts/octocat.scss Normal file
View File

@@ -0,0 +1,68 @@
.octocat {
$px: 6px;
$octocat-colors: (#333, #ffdec4, #cb7066);
// prettier-ignore
$octocat-1: (
(0,0,0,1,0,0,0,0,0,0,0,0,1,0),
(0,0,0,1,1,0,0,0,0,0,0,1,1,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),
(0,0,1,1,1,1,1,1,1,1,1,1,1,1),
(0,0,1,1,1,2,2,2,2,2,2,1,1,1),
(0,0,1,1,2,3,2,2,2,2,3,2,1,1),
(0,0,1,1,2,3,2,2,2,2,3,2,1,1),
(0,0,0,1,1,2,2,3,3,2,2,1,1,0),
(1,1,0,0,0,0,1,1,1,1,0,0,0,0),
(0,0,1,1,0,1,1,1,1,1,1,0,0,0),
(0,0,0,1,1,1,1,1,1,1,1,0,0,0),
(0,0,0,0,0,1,0,1,1,0,1,0,0,0),
(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)
);
// prettier-ignore
$octocat-2: (
(0,0,0,1,0,0,0,0,0,0,0,0,1,0),
(0,0,0,1,1,0,0,0,0,0,0,1,1,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),
(0,0,1,1,1,1,1,1,1,1,1,1,1,1),
(0,0,1,1,1,2,2,2,2,2,2,1,1,1),
(0,0,1,1,2,2,2,2,2,2,2,2,1,1),
(0,1,1,1,2,3,2,2,2,2,3,2,1,1),
(0,1,0,1,1,2,2,3,3,2,2,1,1,0),
(0,0,1,0,0,0,1,1,1,1,0,0,0,0),
(0,0,0,1,0,1,1,1,1,1,1,0,0,0),
(0,0,0,1,1,1,1,1,1,1,1,0,0,0),
(0,0,0,0,0,1,0,1,1,0,1,0,0,0),
(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)
);
position: relative;
display: inline-block;
width: $px * 14;
height: $px * 15;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
content: "";
background: transparent;
@include pixelize($octocat-1, $octocat-colors, $px);
}
&.animate::before {
animation: wave 0.5s infinite steps(1);
}
@keyframes wave {
0% {
@include pixelize($octocat-1, $octocat-colors, $px);
}
50% {
@include pixelize($octocat-2, $octocat-colors, $px);
}
}
}