diff --git a/docs/icons.stories.js b/docs/icons.stories.js index c9e4a57..66be42b 100644 --- a/docs/icons.stories.js +++ b/docs/icons.stories.js @@ -21,6 +21,7 @@ stories.add('icon', () => { 'octocat animate': 'octocat animate', ash: 'ash', 'icon trophy': 'icon trophy', + mario: 'mario', 'nes-logo': 'nes-logo', 'nes-jp-logo': 'nes-jp-logo', 'snes-logo': 'snes-logo', diff --git a/index.html b/index.html index bec4ece..32ff186 100644 --- a/index.html +++ b/index.html @@ -266,6 +266,7 @@ + diff --git a/scss/pixel-arts/_index.scss b/scss/pixel-arts/_index.scss index 5317fc4..bbecf10 100644 --- a/scss/pixel-arts/_index.scss +++ b/scss/pixel-arts/_index.scss @@ -7,6 +7,7 @@ @import "bcrikko.scss"; @import "ash.scss"; @import "octocat.scss"; +@import "mario.scss"; @import "pokeball.scss"; @import "phone.scss"; @import "smartphone.scss"; diff --git a/scss/pixel-arts/mario.scss b/scss/pixel-arts/mario.scss new file mode 100644 index 0000000..19a9178 --- /dev/null +++ b/scss/pixel-arts/mario.scss @@ -0,0 +1,40 @@ +.mario { + $px: 6px; + // prettier-ignore + $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), + (0,0,0,1,1,1,1,1,1,1,1,1,0,0), + (0,0,0,2,2,2,3,3,4,3,0,0,0,0), + (0,0,2,3,2,3,3,3,4,3,3,3,0,0), + (0,0,2,3,2,2,3,3,3,4,3,3,3,0), + (0,0,2,2,3,3,3,3,4,4,4,4,0,0), + (0,0,0,0,3,3,3,3,3,3,3,0,0,0), + (0,0,0,0,1,5,1,1,5,0,0,0,0,0), + (0,0,1,1,1,5,1,1,5,1,1,1,0,0), + (0,1,1,1,1,5,5,5,5,1,1,1,1,0), + (0,6,6,1,5,7,5,5,7,5,1,6,6,0), + (0,6,6,6,5,5,5,5,5,5,6,6,6,0), + (0,6,6,5,5,5,5,5,5,5,5,6,6,0), + (0,0,0,5,5,5,0,0,5,5,5,0,0,0), + (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) + ); + + 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($mario, $mario-colors, $px); + } +}