mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-09-08 21:30:47 +02:00
Code Issues Releases Wiki Activity

perf(icons): reduce size of css

Browse Source 
ref #205
This commit is contained in:
jjspace
2018-12-18 19:30:57 -05:00
parent 982a412e1e
commit ba076c9aac
17 changed files with 199 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -1,5 +1,4 @@
.nes-bcrikko {
$px: 4px;
$bcrikko-colors: (#333, #f9f2d7, #c5090c, #fff);
// prettier-ignore
@@ -24,16 +23,17 @@
position: relative;
display: inline-block;
width: $px * 16;
height: $px * 16;
width: calc(1em * 16);
height: calc(1em * 16);
font-size: 4px;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
top: -1em;
left: -1em;
content: "";
background: transparent;
@include pixelize($bcrikko, $bcrikko-colors, $px);
@include pixelize($bcrikko, $bcrikko-colors);
}
}

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

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

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

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

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

@@ -1,5 +1,4 @@
.nes-kirby {
$px: 6px;
$kirby-colors: (#000, #ffaccc, #ff5478);
// prettier-ignore
$kirby: (
@@ -23,16 +22,17 @@
position: relative;
display: inline-block;
width: $px * 16;
height: $px * 16;
width: calc(1em * 16);
height: calc(1em * 16);
font-size: 6px;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
top: -1em;
left: -1em;
content: "";
background: transparent;
@include pixelize($kirby, $kirby-colors, $px);
@include pixelize($kirby, $kirby-colors);
}
}

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

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

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

@@ -1,5 +1,4 @@
.nes-logo {
$px: 3px;
$logo-colors: (#3e3634, #c3c3c3, #787973, #bf1710);
// prettier-ignore
@@ -18,16 +17,17 @@
position: relative;
display: inline-block;
width: $px * 16;
height: $px * 11;
width: calc(1em * 16);
height: calc(1em * 11);
font-size: 3px;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
top: -1em;
left: -1em;
content: "";
background: transparent;
@include pixelize($logo, $logo-colors, $px);
@include pixelize($logo, $logo-colors);
}
}

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

@@ -1,5 +1,4 @@
.nes-jp-logo {
$px: 3px;
$logo-colors: (#333, #871f37, #dfd3b9);
// prettier-ignore
@@ -18,16 +17,17 @@
position: relative;
display: inline-block;
width: $px * 16;
height: $px * 11;
width: calc(1em * 16);
height: calc(1em * 11);
font-size: 3px;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
top: -1em;
left: -1em;
content: "";
background: transparent;
@include pixelize($logo, $logo-colors, $px);
@include pixelize($logo, $logo-colors);
}
}

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

@@ -1,5 +1,4 @@
.nes-octocat {
$px: 6px;
$octocat-colors: (#333, #ffdec4, #cb7066);
// prettier-ignore
$octocat-1: (
@@ -40,17 +39,18 @@
position: relative;
display: inline-block;
width: $px * 14;
height: $px * 15;
width: calc(1em * 14);
height: calc(1em * 15);
font-size: 6px;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
top: -1em;
left: -1em;
content: "";
background: transparent;
@include pixelize($octocat-1, $octocat-colors, $px);
@include pixelize($octocat-1, $octocat-colors);
}
&.animate::before {
@@ -59,10 +59,10 @@
@keyframes wave {
0% {
@include pixelize($octocat-1, $octocat-colors, $px);
@include pixelize($octocat-1, $octocat-colors);
}
50% {
@include pixelize($octocat-2, $octocat-colors, $px);
@include pixelize($octocat-2, $octocat-colors);
}
}
}

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

@@ -1,5 +1,4 @@
.nes-phone {
$px: 6px;
$phone-colors: (#596985, #3c4665, #000);
// prettier-ignore
$phone: (
@@ -28,16 +27,17 @@
position: relative;
display: inline-block;
width: $px * 8;
height: $px * 21;
width: calc(1em * 8);
height: calc(1em * 21);
font-size: 6px;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
top: -1em;
left: -1em;
content: "";
background: transparent;
@include pixelize($phone, $phone-colors, $px);
@include pixelize($phone, $phone-colors);
}
}

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

@@ -1,5 +1,4 @@
.nes-pokeball {
$px: 6px;
$pokeball-colors: (#060606, #ff001d, #fff, #9fa1a1);
// prettier-ignore
$pokeball: (
@@ -23,16 +22,17 @@
position: relative;
display: inline-block;
width: $px * 14;
height: $px * 14;
width: calc(1em * 14);
height: calc(1em * 14);
font-size: 6px;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
top: -1em;
left: -1em;
content: "";
background: transparent;
@include pixelize($pokeball, $pokeball-colors, $px);
@include pixelize($pokeball, $pokeball-colors);
}
}

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

@@ -1,5 +1,4 @@
.nes-smartphone {
$px: 6px;
$smartphone-colors: (#fff, #060606);
// prettier-ignore
$smartphone: (
@@ -34,16 +33,17 @@
position: relative;
display: inline-block;
width: $px * 16;
height: $px * 27;
width: calc(1em * 16);
height: calc(1em * 27);
font-size: 6px;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
top: -1em;
left: -1em;
content: "";
background: transparent;
@include pixelize($smartphone, $smartphone-colors, $px);
@include pixelize($smartphone, $smartphone-colors);
}
}

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

@@ -1,5 +1,4 @@
.snes-logo {
$px: 3px;
$logo-colors: (#333, #d7d7d7, #8932e5, #ad6df0);
// prettier-ignore
@@ -18,16 +17,17 @@
position: relative;
display: inline-block;
width: $px * 16;
height: $px * 11;
width: calc(1em * 16);
height: calc(1em * 11);
font-size: 3px;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
top: -1em;
left: -1em;
content: "";
background: transparent;
@include pixelize($logo, $logo-colors, $px);
@include pixelize($logo, $logo-colors);
}
}

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

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

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

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