diff --git a/docs/icons.stories.js b/docs/icons.stories.js index 66be42b..9642ba8 100644 --- a/docs/icons.stories.js +++ b/docs/icons.stories.js @@ -16,6 +16,7 @@ stories.add('icon', () => { 'icon whatsapp': 'icon whatsapp', 'icon close': 'icon close', pokeball: 'pokeball', + squirtle: 'squirtle', smartphone: 'smartphone', phone: 'phone', 'octocat animate': 'octocat animate', diff --git a/index.html b/index.html index 32ff186..3531089 100644 --- a/index.html +++ b/index.html @@ -269,6 +269,8 @@ + + diff --git a/scss/pixel-arts/_index.scss b/scss/pixel-arts/_index.scss index bbecf10..72ec369 100644 --- a/scss/pixel-arts/_index.scss +++ b/scss/pixel-arts/_index.scss @@ -9,5 +9,6 @@ @import "octocat.scss"; @import "mario.scss"; @import "pokeball.scss"; +@import "squirtle.scss"; @import "phone.scss"; -@import "smartphone.scss"; +@import "smartphone.scss"; \ No newline at end of file diff --git a/scss/pixel-arts/squirtle.scss b/scss/pixel-arts/squirtle.scss new file mode 100644 index 0000000..ed83759 --- /dev/null +++ b/scss/pixel-arts/squirtle.scss @@ -0,0 +1,41 @@ +.squirtle { + $px: 6px; + // prettier-ignore + $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,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), + ); + + position: relative; + display: inline-block; + width: $px * 14; + height: $px * 14; + + &::before { + position: absolute; + top: $px * -1; + left: $px * -1; + content: ""; + background: transparent; + + @include pixelize($squirtle, $squirtle-colors, $px); + } +}