mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-01-17 21:58:27 +01:00
69 lines
1.7 KiB
SCSS
69 lines
1.7 KiB
SCSS
.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);
|
|
}
|
|
}
|
|
}
|