diff --git a/docs/icons.stories.js b/docs/icons.stories.js index 1838ef3..971946b 100644 --- a/docs/icons.stories.js +++ b/docs/icons.stories.js @@ -20,6 +20,7 @@ stories.add('icon', () => { 'nes-charmander': 'nes-charmander', 'nes-squirtle': 'nes-squirtle', 'nes-smartphone': 'nes-smartphone', + 'nes-kirby': 'nes-kirby', 'nes-phone': 'nes-phone', 'nes-octocat animate': 'nes-octocat animate', 'nes-ash': 'nes-ash', diff --git a/index.html b/index.html index 82ea354..4e2976a 100644 --- a/index.html +++ b/index.html @@ -308,6 +308,7 @@ + diff --git a/scss/pixel-arts/_index.scss b/scss/pixel-arts/_index.scss index c546509..6d6e7be 100644 --- a/scss/pixel-arts/_index.scss +++ b/scss/pixel-arts/_index.scss @@ -14,3 +14,4 @@ @import "squirtle.scss"; @import "phone.scss"; @import "smartphone.scss"; +@import "kirby.scss"; diff --git a/scss/pixel-arts/ash.scss b/scss/pixel-arts/ash.scss index 1d94866..6647b29 100644 --- a/scss/pixel-arts/ash.scss +++ b/scss/pixel-arts/ash.scss @@ -24,7 +24,7 @@ position: relative; display: inline-block; - width: $px * 15; + width: $px * 14; height: $px * 15; &::before { diff --git a/scss/pixel-arts/kirby.scss b/scss/pixel-arts/kirby.scss new file mode 100644 index 0000000..39035df --- /dev/null +++ b/scss/pixel-arts/kirby.scss @@ -0,0 +1,38 @@ +.nes-kirby { + $px: 6px; + $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), + (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), + (0,1,2,2,2,2,2,2,2,2,2,2,1,1,1,0), + (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) + ); + + 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($kirby, $kirby-colors, $px); + } +} diff --git a/scss/pixel-arts/mario.scss b/scss/pixel-arts/mario.scss index 2810c26..9ead610 100644 --- a/scss/pixel-arts/mario.scss +++ b/scss/pixel-arts/mario.scss @@ -25,7 +25,7 @@ position: relative; display: inline-block; - width: $px * 16; + width: $px * 14; height: $px * 16; &::before {