mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-04-22 15:12:19 +02:00
Code Issues Releases Wiki Activity

fix: fix pixelize for icon elements

Browse Source 
fix #262
This commit is contained in:
BcRikko 2019-01-30 17:39:23 +09:00
parent a4016dce9f
commit d5213ff434
15 changed files with 150 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
scss/pixel-arts/ash.scss
View File

@ -1,7 +1,5 @@
.nes-ash {
// prettier-ignore
$ash-colors: (#f8f8ff, #ff614e, #007f7f,
#181818, #ffe3c5, #426adb, #4169e1);
$ash-colors: (#f8f8ff, #ff614e, #007f7f, #181818, #ffe3c5, #426adb, #4169e1);
// prettier-ignore
$ash: (
(0,0,0,0,4,4,4,4,4,4,0,0,0,0),
@ -20,20 +18,20 @@
(4,3,3,4,4,4,4,4,3,3,4,0,0,0),
(0,4,4,0,0,0,0,0,4,4,0,0,0,0)
);
$size: 6px;
position: relative;
display: inline-block;
width: calc(1em * 14);
height: calc(1em * 15);
font-size: 6px;
width: $size * length(nth($ash, 1));
height: $size * length($ash);
&::before {
position: absolute;
top: -1em;
left: -1em;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($ash, $ash-colors);
@include pixelize($size, $ash, $ash-colors);
}
}

12
scss/pixel-arts/bcrikko.scss
View File

@ -20,20 +20,20 @@
(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),
);
$size: 6px;
position: relative;
display: inline-block;
width: calc(1em * 16);
height: calc(1em * 16);
font-size: 4px;
width: $size * length(nth($bcrikko, 1));
height: $size * length($bcrikko);
&::before {
position: absolute;
top: -1em;
left: -1em;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($bcrikko, $bcrikko-colors);
@include pixelize($size, $bcrikko, $bcrikko-colors);
}
}

44
scss/pixel-arts/bulbasaur.scss
View File

@ -1,41 +1,39 @@
.nes-bulbasaur {
// prettier-ignore
$bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1,
#3fc3b5, #fdfdf5, #ca242a);
$bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1, #3fc3b5, #fdfdf5, #ca242a);
// prettier-ignore
$bulbasaur: (
(0,0,0,0,0,0,0,0,0,0,0,0,1,1,1),
(0,0,0,0,0,0,0,0,0,0,0,1,2,2,2,1),
(0,0,0,0,0,0,0,0,0,1,1,1,2,2,2,1),
(0,0,0,0,0,0,0,1,1,2,2,3,2,2,3,2,1,1),
(0,0,0,1,1,0,1,2,2,2,3,3,2,2,3,2,2,2,1),
(0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,1,2,2,2,1,0,0,0,0),
(0,0,0,0,0,0,0,0,0,1,1,1,2,2,2,1,0,0,0,0),
(0,0,0,0,0,0,0,1,1,2,2,3,2,2,3,2,1,1,0,0),
(0,0,0,1,1,0,1,2,2,2,3,3,2,2,3,2,2,2,1,0),
(0,0,1,4,4,1,1,2,2,3,2,3,2,2,2,3,2,2,2,1),
(0,0,1,4,4,4,1,1,3,2,3,2,2,2,2,2,3,2,2,1),
(0,0,1,4,4,4,4,5,1,2,3,2,2,2,2,2,3,2,2,1),
(0,1,4,4,5,4,5,5,4,1,1,1,2,2,2,2,3,2,1),
(1,1,5,4,4,4,4,4,4,4,4,1,2,2,2,1,1,1,1),
(1,1,5,4,4,4,5,4,4,4,1,5,1,1,1,5,5,5,1),
(1,4,4,4,4,5,4,1,1,4,5,5,5,5,5,1,5,6,1),
(1,5,4,4,4,4,1,7,6,6,5,5,1,5,5,1,1,1),
(0,1,5,4,4,4,1,7,6,4,5,1,5,5,1),
(0,0,1,1,5,5,5,5,5,5,1,5,5,5,1),
(0,0,0,0,1,1,1,1,1,1,1,6,5,6,1),
(0,0,0,0,0,0,0,0,0,0,0,1,1,1,0),
(0,1,4,4,5,4,5,5,4,1,1,1,2,2,2,2,3,2,1,0),
(1,1,5,4,4,4,4,4,4,4,4,1,2,2,2,1,1,1,1,0),
(1,1,5,4,4,4,5,4,4,4,1,5,1,1,1,5,5,5,1,0),
(1,4,4,4,4,5,4,1,1,4,5,5,5,5,5,1,5,6,1,0),
(1,5,4,4,4,4,1,7,6,6,5,5,1,5,5,1,1,1,0,0),
(0,1,5,4,4,4,1,7,6,4,5,1,5,5,1,0,0,0,0,0),
(0,0,1,1,5,5,5,5,5,5,1,5,5,5,1,0,0,0,0,0),
(0,0,0,0,1,1,1,1,1,1,1,6,5,6,1,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0),
);
$size: 6px;
position: relative;
display: inline-block;
width: calc(1em * 20);
height: calc(1em * 17);
font-size: 6px;
width: $size * length(nth($bulbasaur, 1));
height: $size * length($bulbasaur);
&::before {
position: absolute;
top: -1em;
left: -1em;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($bulbasaur, $bulbasaur-colors);
@include pixelize($size, $bulbasaur, $bulbasaur-colors);
}
}

46
scss/pixel-arts/charmander.scss
View File

@ -1,42 +1,40 @@
.nes-charmander {
// prettier-ignore
$charmander-colors: (#000202, #f77702, #eb2010,
#fdfcff, #e5d70a, #e7d70e);
$charmander-colors: (#000202, #f77702, #eb2010, #fdfcff, #e5d70a, #e7d70e);
// prettier-ignore
$charmander: (
(0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1),
(0,0,0,1,2,2,2,2,1,0,0,0,0,0,0,0,1,3,1),
(0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1),
(0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1),
(0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
(0,0,0,1,2,2,2,2,1,0,0,0,0,0,0,0,1,3,1,0,0),
(0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1,0),
(0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1,0),
(0,1,2,2,2,2,2,2,2,2,1,0,0,0,0,1,3,3,2,3,1),
(1,2,2,2,2,4,1,2,2,2,1,0,0,0,0,1,3,2,6,3,1),
(1,2,2,2,2,1,1,2,2,2,2,1,0,0,0,1,3,5,5,3,1),
(1,2,2,2,2,1,1,2,2,2,2,1,0,0,0,0,1,5,1,1),
(0,1,2,2,2,2,2,2,2,2,2,2,1,0,0,0,1,2,1),
(0,0,1,1,2,2,2,2,2,2,2,2,2,1,0,1,2,2,1),
(0,0,0,0,1,1,1,2,2,1,2,2,2,1,1,2,2,1),
(0,0,0,0,0,1,6,5,1,2,2,2,2,2,1,2,2,1),
(0,0,0,0,0,1,5,5,5,1,1,2,2,2,1,2,1),
(0,0,0,0,1,4,1,6,5,5,2,2,2,2,1,1),
(0,0,0,0,0,1,1,1,5,5,2,2,2,1,1),
(0,0,0,0,0,0,0,0,1,1,1,0,1,1),
(0,0,0,0,0,0,0,0,0,1,4,0,4,1),
(0,0,0,0,0,0,0,0,0,0,1,1,1,0)
(1,2,2,2,2,1,1,2,2,2,2,1,0,0,0,0,1,5,1,1,0),
(0,1,2,2,2,2,2,2,2,2,2,2,1,0,0,0,1,2,1,0,0),
(0,0,1,1,2,2,2,2,2,2,2,2,2,1,0,1,2,2,1,0,0),
(0,0,0,0,1,1,1,2,2,1,2,2,2,1,1,2,2,1,0,0,0),
(0,0,0,0,0,1,6,5,1,2,2,2,2,2,1,2,2,1,0,0,0),
(0,0,0,0,0,1,5,5,5,1,1,2,2,2,1,2,1,0,0,0,0),
(0,0,0,0,1,4,1,6,5,5,2,2,2,2,1,1,0,0,0,0,0),
(0,0,0,0,0,1,1,1,5,5,2,2,2,1,1,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,1,1,1,0,1,1,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,1,4,0,4,1,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0)
);
$size: 6px;
position: relative;
display: inline-block;
width: calc(1em * 21);
height: calc(1em * 18);
font-size: 6px;
width: $size * length(nth($charmander, 1));
height: $size * length($charmander);
&::before {
position: absolute;
top: -1em;
left: -1em;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($charmander, $charmander-colors);
@include pixelize($size, $charmander, $charmander-colors);
}
}

30
scss/pixel-arts/kirby.scss
View File

@ -2,12 +2,12 @@
$kirby-colors: (#000, #ffaccc, #ff5478);
// prettier-ignore
$kirby: (
(0,0,1,1,0,1,1,1,1,1,0,0,0,0),
(0,1,2,2,1,2,2,2,2,2,1,1,0,0),
(1,2,2,1,2,2,2,2,2,2,2,2,1,0),
(1,2,2,2,2,2,1,2,1,2,2,2,2,1),
(1,2,2,2,2,2,1,2,1,2,2,2,2,1,),
(1,2,2,2,2,2,1,2,1,2,2,2,2,2,1),
(0,0,1,1,0,1,1,1,1,1,0,0,0,0,0,0),
(0,1,2,2,1,2,2,2,2,2,1,1,0,0,0,0),
(1,2,2,1,2,2,2,2,2,2,2,2,1,0,0,0),
(1,2,2,2,2,2,1,2,1,2,2,2,2,1,0,0),
(1,2,2,2,2,2,1,2,1,2,2,2,2,1,0,0),
(1,2,2,2,2,2,1,2,1,2,2,2,2,2,1,0),
(1,2,2,2,3,3,2,2,2,3,3,2,2,2,2,1),
(1,2,2,2,2,2,2,1,2,2,2,2,2,2,2,1),
(0,1,2,2,2,2,2,1,2,2,2,2,2,2,2,1),
@ -15,24 +15,24 @@
(0,1,2,2,2,2,2,2,2,2,2,1,3,3,3,1),
(0,0,1,2,2,2,2,2,2,2,1,3,3,3,3,1),
(0,0,1,1,2,2,2,2,2,2,1,3,3,3,3,1),
(0,1,3,3,1,1,2,2,2,1,3,3,3,3,1),
(1,3,3,3,3,3,1,1,1,1,1,3,3,1),
(0,1,1,1,1,1,1,0,0,0,1,1,1,0)
(0,1,3,3,1,1,2,2,2,1,3,3,3,3,1,0),
(1,3,3,3,3,3,1,1,1,1,1,3,3,1,0,0),
(0,1,1,1,1,1,1,0,0,0,1,1,1,0,0,0)
);
$size: 6px;
position: relative;
display: inline-block;
width: calc(1em * 16);
height: calc(1em * 16);
font-size: 6px;
width: $size * length(nth($kirby, 1));
height: $size * length($kirby);
&::before {
position: absolute;
top: -1em;
left: -1em;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($kirby, $kirby-colors);
@include pixelize($size, $kirby, $kirby-colors);
}
}

16
scss/pixel-arts/mario.scss
View File

@ -1,7 +1,5 @@
.nes-mario {
// prettier-ignore
$mario-colors: (#f81c2f, #65352b, #ffbb8e, #000,
#1560ad, #aeaeac, #fef102);
$mario-colors: (#f81c2f, #65352b, #ffbb8e, #000, #1560ad, #aeaeac, #fef102);
// prettier-ignore
$mario: (
(0,0,0,0,1,1,1,1,1,0,0,0,0,0),
@ -21,20 +19,20 @@
(0,0,2,2,2,0,0,0,0,2,2,2,0,0),
(0,2,2,2,2,0,0,0,0,2,2,2,2,0)
);
$size: 6px;
position: relative;
display: inline-block;
width: calc(1em * 14);
height: calc(1em * 16);
font-size: 6px;
width: $size * length(nth($mario, 1));
height: $size * length($mario);
&::before {
position: absolute;
top: -1em;
left: -1em;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($mario, $mario-colors);
@include pixelize($size, $mario, $mario-colors);
}
}

12
scss/pixel-arts/nes-icon.scss
View File

@ -14,20 +14,20 @@
(2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
(2,2,2,2,2,2,2,2,2,2,2,2,2,2,2)
);
$size: 4px;
position: relative;
display: inline-block;
width: calc(1em * 16);
height: calc(1em * 11);
font-size: 3px;
width: $size * length(nth($logo, 1));
height: $size * length($logo);
&::before {
position: absolute;
top: -1em;
left: -1em;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($logo, $logo-colors);
@include pixelize($size, $logo, $logo-colors);
}
}

12
scss/pixel-arts/nes-jp-icon.scss
View File

@ -14,20 +14,20 @@
(2,3,3,3,3,3,3,3,3,3,3,3,3,3,2),
(2,2,2,2,2,2,2,2,2,2,2,2,2,2,2)
);
$size: 4px;
position: relative;
display: inline-block;
width: calc(1em * 16);
height: calc(1em * 11);
font-size: 3px;
width: $size * length(nth($logo, 1));
height: $size * length($logo);
&::before {
position: absolute;
top: -1em;
left: -1em;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($logo, $logo-colors);
@include pixelize($size, $logo, $logo-colors);
}
}

17
scss/pixel-arts/octocat.scss
View File

@ -36,21 +36,21 @@
(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)
);
$size: 6px;
position: relative;
display: inline-block;
width: calc(1em * 14);
height: calc(1em * 15);
font-size: 6px;
width: $size * length(nth($octocat-1, 1));
height: $size * length($octocat-1);
&::before {
position: absolute;
top: -1em;
left: -1em;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($octocat-1, $octocat-colors);
@include pixelize($size, $octocat-1, $octocat-colors);
}
&.animate::before {
@ -58,11 +58,8 @@
}
@keyframes wave {
0% {
@include pixelize($octocat-1, $octocat-colors);
}
50% {
@include pixelize($octocat-2, $octocat-colors);
@include pixelize($size, $octocat-2, $octocat-colors);
}
}
}

12
scss/pixel-arts/phone.scss
View File

@ -24,20 +24,20 @@
(0,3,3,2,2,2,1,3),
(0,0,3,3,3,3,3,3)
);
$size: 6px;
position: relative;
display: inline-block;
width: calc(1em * 8);
height: calc(1em * 21);
font-size: 6px;
width: $size * length(nth($phone, 1));
height: $size * length($phone);
&::before {
position: absolute;
top: -1em;
left: -1em;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($phone, $phone-colors);
@include pixelize($size, $phone, $phone-colors);
}
}

12
scss/pixel-arts/pokeball.scss
View File

@ -19,20 +19,20 @@
(0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0),
);
$size: 6px;
position: relative;
display: inline-block;
width: calc(1em * 14);
height: calc(1em * 14);
font-size: 6px;
width: $size * length(nth($pokeball, 1));
height: $size * length($pokeball);
&::before {
position: absolute;
top: -1em;
left: -1em;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($pokeball, $pokeball-colors);
@include pixelize($size, $pokeball, $pokeball-colors);
}
}

16
scss/pixel-arts/smartphone.scss
View File

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

12
scss/pixel-arts/snes-icon.scss
View File

@ -14,20 +14,20 @@
(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)
);
$size: 4px;
position: relative;
display: inline-block;
width: calc(1em * 16);
height: calc(1em * 11);
font-size: 3px;
width: $size * length(nth($logo, 1));
height: $size * length($logo);
&::before {
position: absolute;
top: -1em;
left: -1em;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($logo, $logo-colors);
@include pixelize($size, $logo, $logo-colors);
}
}

12
scss/pixel-arts/snes-jp-icon.scss
View File

@ -15,20 +15,20 @@
(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)
);
$size: 4px;
position: relative;
display: inline-block;
width: calc(1em * 16);
height: calc(1em * 11);
font-size: 3px;
width: $size * length(nth($logo, 1));
height: $size * length($logo);
&::before {
position: absolute;
top: -1em;
left: -1em;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($logo, $logo-colors);
@include pixelize($size, $logo, $logo-colors);
}
}

44
scss/pixel-arts/squirtle.scss
View File

@ -1,41 +1,39 @@
.nes-squirtle {
// prettier-ignore
$squirtle-colors: (#000, #9cf, #cb6633,
#9fa1a1, #fff, #f89934, #ff3);
$squirtle-colors: (#000, #9cf, #cb6633, #9fa1a1, #fff, #f89934, #ff3);
// prettier-ignore
$squirtle: (
(0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1),
(0,0,1,2,2,2,2,1,1,0,0,0,0,0,0,1,2,2,2,1),
(0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0),
(0,0,1,2,2,2,2,1,1,0,0,0,0,0,0,1,2,2,2,1,0),
(0,1,2,2,2,2,2,2,2,1,1,0,0,0,1,2,2,2,2,2,1),
(0,1,2,2,2,2,2,2,2,1,6,1,1,0,1,2,2,2,1,2,1),
(1,3,2,2,2,2,2,2,2,2,6,6,6,1,2,2,2,1,2,2,1),
(1,2,2,2,2,5,1,2,2,2,5,6,6,6,1,2,2,1,2,1),
(1,2,2,2,2,1,3,2,2,2,5,6,6,6,1,2,1,1,1),
(0,1,2,2,2,1,3,2,2,2,1,5,6,6,6,1,1),
(0,0,1,1,2,2,2,2,1,1,2,2,5,6,6,1),
(0,0,1,2,1,1,1,1,2,2,2,2,5,6,6,1),
(0,0,0,1,1,7,7,1,2,2,2,1,5,6,6,1),
(0,0,0,0,0,1,7,7,1,1,1,1,5,6,6,1),
(0,0,0,0,1,2,1,7,7,7,7,7,1,5,1,0),
(0,0,0,0,0,1,1,1,1,7,7,2,1,5,1,0),
(0,0,0,0,0,0,0,0,1,1,1,2,1,1),
(0,0,0,0,0,0,0,0,0,1,2,2,2,1),
(0,0,0,0,0,0,0,0,0,0,1,1,1,0),
(1,2,2,2,2,5,1,2,2,2,5,6,6,6,1,2,2,1,2,1,0),
(1,2,2,2,2,1,3,2,2,2,5,6,6,6,1,2,1,1,1,0,0),
(0,1,2,2,2,1,3,2,2,2,1,5,6,6,6,1,1,0,0,0,0),
(0,0,1,1,2,2,2,2,1,1,2,2,5,6,6,1,0,0,0,0,0),
(0,0,1,2,1,1,1,1,2,2,2,2,5,6,6,1,0,0,0,0,0),
(0,0,0,1,1,7,7,1,2,2,2,1,5,6,6,1,0,0,0,0,0),
(0,0,0,0,0,1,7,7,1,1,1,1,5,6,6,1,0,0,0,0,0),
(0,0,0,0,1,2,1,7,7,7,7,7,1,5,1,0,0,0,0,0,0),
(0,0,0,0,0,1,1,1,1,7,7,2,1,5,1,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,1,1,1,2,1,1,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,1,2,2,2,1,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0),
);
$size: 6px;
position: relative;
display: inline-block;
width: calc(1em * 21);
height: calc(1em * 17);
font-size: 6px;
width: $size * length(nth($squirtle, 1));
height: $size * length($squirtle);
&::before {
position: absolute;
top: -1em;
left: -1em;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($squirtle, $squirtle-colors);
@include pixelize($size, $squirtle, $squirtle-colors);
}
}