mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-31 17:51:46 +02:00
Code Issues Releases Wiki Activity

Merge branch 'develop' into feat/use-data-uris-for-cursors

Browse Source
This commit is contained in:
BcRikko
2019-02-06 13:23:05 +09:00
parent b68e12f6c0 e26de687a9
commit 818ff5844e
31 changed files with 239 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/README-es.md vendored
View File

@@ -47,7 +47,7 @@ NES.css no contiene ninguna tipografía, pero recomendamos la siguiente lista de
|-----------|--------------------------------------------------------------------| |-----------|--------------------------------------------------------------------|
| (Default) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) | | (Default) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
| Inglés | [Kongtext](https://www.dafont.com/kongtext.font) | | Inglés | [Kongtext](https://www.dafont.com/kongtext.font) |
| Japonés | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm) | | Japonés | [美咲フォント](http://littlelimit.net/misaki.htm) |
| Japonés | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) | | Japonés | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) |
| Coreano | [둥근모꼴](http://cactus.tistory.com/193) | | Coreano | [둥근모꼴](http://cactus.tistory.com/193) |

2
.github/README-jp.md vendored
View File

@@ -47,7 +47,7 @@ NES.cssはいかなるフォントも提供していませんが、ライブラ
|-----------|--------------------------------------------------------------------| |-----------|--------------------------------------------------------------------|
| (デフォルト) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) | | (デフォルト) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
| 英語 | [Kongtext](https://www.dafont.com/kongtext.font) | | 英語 | [Kongtext](https://www.dafont.com/kongtext.font) |
| 日本語 | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm) | | 日本語 | [美咲フォント](http://littlelimit.net/misaki.htm) |
| 日本語 | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) | | 日本語 | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) |
| 韓国語 | [둥근모꼴](http://cactus.tistory.com/193) | | 韓国語 | [둥근모꼴](http://cactus.tistory.com/193) |

2
.github/README-pt-BR.md vendored
View File

@@ -47,7 +47,7 @@ NES.css não fornece nenhuma fonte, mas nós mantemos uma lista de fontes recome
|-----------|--------------------------------------------------------------------| |-----------|--------------------------------------------------------------------|
| (Padrão) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) | | (Padrão) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
| Inglês | [Kongtext](https://www.dafont.com/kongtext.font) | | Inglês | [Kongtext](https://www.dafont.com/kongtext.font) |
| Japonês | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm) | | Japonês | [美咲フォント](http://littlelimit.net/misaki.htm) |
| Japonês | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) | | Japonês | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) |
| Coreano | [둥근모꼴](http://cactus.tistory.com/193) | | Coreano | [둥근모꼴](http://cactus.tistory.com/193) |

2
.github/README-zh-CN.md vendored
View File

@@ -35,7 +35,7 @@ yarn add nes.css
|----|----| |----|----|
|(Default)|[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P)| |(Default)|[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P)|
|English|[Kongtext](https://www.dafont.com/kongtext.font)| |English|[Kongtext](https://www.dafont.com/kongtext.font)|
|Japanese|[美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)| |Japanese|[美咲フォント](http://littlelimit.net/misaki.htm)|
|Japanese|[Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)| |Japanese|[Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)|
| Korean|[둥근모꼴](http://cactus.tistory.com/193)| | Korean|[둥근모꼴](http://cactus.tistory.com/193)|

2
README.md
View File

@@ -47,7 +47,7 @@ NES.css doesn't provide any fonts, but we do maintain the following list of font
|-----------|--------------------------------------------------------------------| |-----------|--------------------------------------------------------------------|
| (Default) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) | | (Default) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
| English | [Kongtext](https://www.dafont.com/kongtext.font) | | English | [Kongtext](https://www.dafont.com/kongtext.font) |
| Japanese | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm) | | Japanese | [美咲フォント](http://littlelimit.net/misaki.htm) |
| Japanese | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) | | Japanese | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) |
| Korean | [둥근모꼴](http://cactus.tistory.com/193) | | Korean | [둥근모꼴](http://cactus.tistory.com/193) |

2
scss/base/variables.scss
View File

@@ -8,7 +8,7 @@ $background-color: $color-white;
$cursor-url: url(../assets/cursor.png); $cursor-url: url(../assets/cursor.png);
$cursor-click-url: url(../assets/cursor-click.png); $cursor-click-url: url(../assets/cursor-click.png);
$border-size: 0.25em; $border-size: 4px;
$default-colors: ( $default-colors: (
normal: $background-color, normal: $background-color,

2
scss/elements/_index.scss
View File

@@ -4,11 +4,9 @@
@import "badges.scss"; @import "badges.scss";
@import "balloons.scss"; @import "balloons.scss";
@import "buttons.scss"; @import "buttons.scss";
@import "checkboxes.scss";
@import "containers.scss"; @import "containers.scss";
@import "dialogs.scss"; @import "dialogs.scss";
@import "lists.scss"; @import "lists.scss";
@import "progress.scss"; @import "progress.scss";
@import "radios.scss";
@import "tables.scss"; @import "tables.scss";
@import "text.scss"; @import "text.scss";

34
scss/elements/lists.scss
View File

@@ -1,20 +1,22 @@
.nes-list { .nes-list {
// prettier-ignore
$disc: ( $disc: (
(0, 0, 0, 1, 1, 0, 0, 0), (0,0,0,1,1,0,0,0),
(0, 0, 1, 1, 1, 1, 0, 0), (0,0,1,1,1,1,0,0),
(0, 1, 1, 1, 1, 1, 1, 0), (0,1,1,1,1,1,1,0),
(0, 1, 1, 1, 1, 1, 1, 0), (0,1,1,1,1,1,1,0),
(0, 0, 1, 1, 1, 1, 0, 0), (0,0,1,1,1,1,0,0),
(0, 0, 0, 1, 1, 0, 0, 0) (0,0,0,1,1,0,0,0)
); );
// prettier-ignore
$circle: ( $circle: (
(0, 0, 0, 1, 1, 0, 0, 0), (0,0,0,1,1,0,0,0),
(0, 0, 1, 1, 1, 1, 0, 0), (0,0,1,1,1,1,0,0),
(0, 1, 1, 0, 0, 1, 1, 0), (0,1,1,0,0,1,1,0),
(0, 1, 1, 0, 0, 1, 1, 0), (0,1,1,0,0,1,1,0),
(0, 0, 1, 1, 1, 1, 0, 0), (0,0,1,1,1,1,0,0),
(0, 0, 0, 1, 1, 0, 0, 0) (0,0,0,1,1,0,0,0)
); );
$colors: ($base-color, map-get($default-colors, "shadow")); $colors: ($base-color, map-get($default-colors, "shadow"));
@@ -28,19 +30,17 @@
position: absolute; position: absolute;
top: calc(50% - 8px); top: calc(50% - 8px);
left: -22px; left: -22px;
font-size: 2px;
content: ""; content: "";
@include pixelize($disc, $colors); @include pixelize(2px, $disc, $colors);
} }
&.is-circle li::before { &.is-circle li::before {
position: absolute; position: absolute;
top: calc(50% - 8px); top: calc(50% - 8px);
left: -22px; left: -22px;
font-size: 2px;
content: ""; content: "";
@include pixelize($circle, $colors); @include pixelize(2px, $circle, $colors);
} }
} }

2
scss/form/_index.scss
View File

@@ -1,4 +1,6 @@
@charset "utf-8"; @charset "utf-8";
@import "inputs.scss"; @import "inputs.scss";
@import "radios.scss";
@import "checkboxes.scss";
@import "selects.scss"; @import "selects.scss";

9
scss/elements/checkboxes.scss → scss/form/checkboxes.scss
View File

@@ -62,23 +62,22 @@
position: absolute; position: absolute;
top: -3px; top: -3px;
left: -28px; left: -28px;
font-size: 2px;
content: ""; content: "";
} }
// prettier-ignore // prettier-ignore
& + span::before { /* stylelint-disable-line no-descending-specificity */ & + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize($checkbox, $colors); @include pixelize(2px, $checkbox, $colors);
} }
// prettier-ignore // prettier-ignore
&:focus + span::before { /* stylelint-disable-line no-descending-specificity */ &:focus + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize($checkbox-focus, $colors); @include pixelize(2px, $checkbox-focus, $colors);
} }
&:checked + span::before { &:checked + span::before {
@include pixelize($checkbox-checked, $colors); @include pixelize(2px, $checkbox-checked, $colors);
} }
&:checked:focus + span::before { &:checked:focus + span::before {
@include pixelize($checkbox-checked-focus, $colors); @include pixelize(2px, $checkbox-checked-focus, $colors);
} }
} }

5
scss/form/inputs.scss
View File

@@ -1,18 +1,17 @@
.nes-input, .nes-input,
.nes-textarea { .nes-textarea {
@mixin border-style($border, $outline) { @mixin border-style($border, $outline) {
@include compact-rounded-corners();
@include compact-border-image($border); @include compact-border-image($border);
outline-color: $outline; outline-color: $outline;
} }
@include compact-rounded-corners();
width: 100%; width: 100%;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin: 4px; margin: 4px;
@include border-style($base-color, map-get($default-colors, "hover"));
&.is-dark { &.is-dark {
@include border-style(map-get($default-colors, "normal"), map-get($default-colors, "hover")); @include border-style(map-get($default-colors, "normal"), map-get($default-colors, "hover"));

5
scss/elements/radios.scss → scss/form/radios.scss
View File

@@ -35,10 +35,9 @@
position: absolute; position: absolute;
top: -2px; top: -2px;
left: -20px; left: -20px;
font-size: 2px;
content: ""; content: "";
@include pixelize($radio, $colors); @include pixelize(2px, $radio, $colors);
} }
&:checked:hover, &:checked:hover,
@@ -49,6 +48,6 @@
} }
&:checked:focus + span::before { &:checked:focus + span::before {
@include pixelize($radio-checked-focus, $colors); @include pixelize(2px, $radio-checked-focus, $colors);
} }
} }

3
scss/form/selects.scss
View File

@@ -31,12 +31,11 @@
} }
&::after { &::after {
@include pixelize($dropdown, $colors); @include pixelize(3px, $dropdown, $colors);
position: absolute; position: absolute;
top: calc(50% - 11px); top: calc(50% - 11px);
right: 36px; right: 36px;
font-size: 3px;
pointer-events: none; pointer-events: none;
content: ""; content: "";
} }

78
scss/icons/icons.scss
View File

@@ -21,115 +21,129 @@
@import "trophy.scss"; @import "trophy.scss";
.nes-icon { .nes-icon {
$default-size: 1px;
$icon-size: $default-size * 16;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 16); width: $icon-size;
height: calc(1em * 16); height: $icon-size;
margin-right: $icon-size;
margin-bottom: $icon-size;
// font size dictates pixel size, everything will adjust // NOTE: Use `transform: scale()` because cannot use font-size less than 10px on Chrome
// default // default 2px
font-size: 2px; transform: scale(2);
transform-origin: top left;
&.is-small { &.is-small {
font-size: 1px; margin: 0;
// 1px
transform: scale(1);
} }
&.is-medium { &.is-medium {
font-size: 3px; margin-right: $icon-size * 2;
margin-bottom: $icon-size * 2;
// 3px
transform: scale(3);
} }
&.is-large { &.is-large {
font-size: 4px; margin-right: $icon-size * 3;
margin-bottom: $icon-size * 3;
// 4px
transform: scale(4);
} }
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: $default-size * -1;
left: -1em; left: $default-size * -1;
display: block; display: block;
content: ""; content: "";
background: transparent; background: transparent;
} }
&.heart::before { &.heart::before {
@include pixelize($icon-heart, $icon-heart-colors); @include pixelize($default-size, $icon-heart, $icon-heart-colors);
} }
&.heart.is-empty::before { &.heart.is-empty::before {
@include pixelize($icon-heart-empty, $icon-heart-empty-colors); @include pixelize($default-size, $icon-heart-empty, $icon-heart-empty-colors);
} }
&.star::before { &.star::before {
@include pixelize($icon-star, $icon-star-colors); @include pixelize($default-size, $icon-star, $icon-star-colors);
} }
&.star.is-empty::before { &.star.is-empty::before {
@include pixelize($icon-star-empty, $icon-star-empty-colors); @include pixelize($default-size, $icon-star-empty, $icon-star-empty-colors);
} }
&.star.is-half::before { &.star.is-half::before {
@include pixelize($icon-star-half, $icon-star-colors); @include pixelize($default-size, $icon-star-half, $icon-star-colors);
} }
&.star.is-transparent::before { &.star.is-transparent::before {
@include pixelize($icon-star-transparent, $icon-star-colors); @include pixelize($default-size, $icon-star-transparent, $icon-star-colors);
} }
&.trophy::before { &.trophy::before {
@include pixelize($icon-trophy, $icon-trophy-colors); @include pixelize($default-size, $icon-trophy, $icon-trophy-colors);
} }
&.trophy.is-empty::before { &.trophy.is-empty::before {
@include pixelize($icon-trophy-empty, $icon-trophy-empty-colors); @include pixelize($default-size, $icon-trophy-empty, $icon-trophy-empty-colors);
} }
&.like::before { &.like::before {
@include pixelize($icon-like, $icon-like-colors); @include pixelize($default-size, $icon-like, $icon-like-colors);
} }
&.like.is-empty::before { &.like.is-empty::before {
@include pixelize($icon-like-empty, $icon-like-empty-colors); @include pixelize($default-size, $icon-like-empty, $icon-like-empty-colors);
} }
&.twitter::before { &.twitter::before {
@include pixelize($icon-twitter, $icon-twitter-colors); @include pixelize($default-size, $icon-twitter, $icon-twitter-colors);
} }
&.facebook::before { &.facebook::before {
@include pixelize($icon-facebook, $icon-facebook-colors); @include pixelize($default-size, $icon-facebook, $icon-facebook-colors);
} }
&.github::before { &.github::before {
@include pixelize($icon-github, $icon-github-colors); @include pixelize($default-size, $icon-github, $icon-github-colors);
} }
&.youtube::before { &.youtube::before {
@include pixelize($icon-youtube, $icon-youtube-colors); @include pixelize($default-size, $icon-youtube, $icon-youtube-colors);
} }
&.close::before { &.close::before {
@include pixelize($icon-close, $icon-close-colors); @include pixelize($default-size, $icon-close, $icon-close-colors);
} }
&.google::before { &.google::before {
@include pixelize($icon-google, $icon-google-colors); @include pixelize($default-size, $icon-google, $icon-google-colors);
} }
&.medium::before { &.medium::before {
@include pixelize($icon-medium, $icon-medium-colors); @include pixelize($default-size, $icon-medium, $icon-medium-colors);
} }
&.twitch::before { &.twitch::before {
@include pixelize($icon-twitch, $icon-twitch-colors); @include pixelize($default-size, $icon-twitch, $icon-twitch-colors);
} }
&.reddit::before { &.reddit::before {
@include pixelize($icon-reddit, $icon-reddit-colors); @include pixelize($default-size, $icon-reddit, $icon-reddit-colors);
} }
&.whatsapp::before { &.whatsapp::before {
@include pixelize($icon-whatsapp, $icon-whatsapp-colors); @include pixelize($default-size, $icon-whatsapp, $icon-whatsapp-colors);
} }
&.gmail::before { &.gmail::before {
@include pixelize($icon-gmail, $icon-gmail-colors); @include pixelize($default-size, $icon-gmail, $icon-gmail-colors);
} }
&.linkedin::before { &.linkedin::before {
@include pixelize($icon-linkedin, $icon-linkedin-colors); @include pixelize($default-size, $icon-linkedin, $icon-linkedin-colors);
} }
} }

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

@@ -1,7 +1,5 @@
.nes-ash { .nes-ash {
// prettier-ignore $ash-colors: (#f8f8ff, #ff614e, #007f7f, #181818, #ffe3c5, #426adb, #4169e1);
$ash-colors: (#f8f8ff, #ff614e, #007f7f,
#181818, #ffe3c5, #426adb, #4169e1);
// prettier-ignore // prettier-ignore
$ash: ( $ash: (
(0,0,0,0,4,4,4,4,4,4,0,0,0,0), (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), (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) (0,4,4,0,0,0,0,0,4,4,0,0,0,0)
); );
$size: 6px;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 14); width: $size * length(nth($ash, 1));
height: calc(1em * 15); height: $size * length($ash);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; 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), (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), (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
); );
$size: 6px;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 16); width: $size * length(nth($bcrikko, 1));
height: calc(1em * 16); height: $size * length($bcrikko);
font-size: 4px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; 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 { .nes-bulbasaur {
// prettier-ignore $bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1, #3fc3b5, #fdfdf5, #ca242a);
$bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1,
#3fc3b5, #fdfdf5, #ca242a);
// prettier-ignore // prettier-ignore
$bulbasaur: ( $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,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,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,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,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,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,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,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,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), (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), (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), (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), (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), (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,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,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,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,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0),
); );
$size: 6px;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 20); width: $size * length(nth($bulbasaur, 1));
height: calc(1em * 17); height: $size * length($bulbasaur);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; 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 { .nes-charmander {
// prettier-ignore $charmander-colors: (#000202, #f77702, #eb2010, #fdfcff, #e5d70a, #e7d70e);
$charmander-colors: (#000202, #f77702, #eb2010,
#fdfcff, #e5d70a, #e7d70e);
// prettier-ignore // prettier-ignore
$charmander: ( $charmander: (
(0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,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,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,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,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), (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,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,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), (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,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,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,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,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,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,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,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,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,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,0,0,0,1,1,1,0,0,0,0,0,0,0,0)
); );
$size: 6px;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 21); width: $size * length(nth($charmander, 1));
height: calc(1em * 18); height: $size * length($charmander);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; 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); $kirby-colors: (#000, #ffaccc, #ff5478);
// prettier-ignore // prettier-ignore
$kirby: ( $kirby: (
(0,0,1,1,0,1,1,1,1,1,0,0,0,0), (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,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), (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), (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,), (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), (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,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), (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,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,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,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,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), (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), (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,1,1,1,1,1,1,0,0,0,1,1,1,0,0,0)
); );
$size: 6px;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 16); width: $size * length(nth($kirby, 1));
height: calc(1em * 16); height: $size * length($kirby);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; 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 { .nes-mario {
// prettier-ignore $mario-colors: (#f81c2f, #65352b, #ffbb8e, #000, #1560ad, #aeaeac, #fef102);
$mario-colors: (#f81c2f, #65352b, #ffbb8e, #000,
#1560ad, #aeaeac, #fef102);
// prettier-ignore // prettier-ignore
$mario: ( $mario: (
(0,0,0,0,1,1,1,1,1,0,0,0,0,0), (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,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) (0,2,2,2,2,0,0,0,0,2,2,2,2,0)
); );
$size: 6px;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 14); width: $size * length(nth($mario, 1));
height: calc(1em * 16); height: $size * length($mario);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; 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,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) (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2)
); );
$size: 4px;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 16); width: $size * length(nth($logo, 1));
height: calc(1em * 11); height: $size * length($logo);
font-size: 3px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; 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,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) (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2)
); );
$size: 4px;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 16); width: $size * length(nth($logo, 1));
height: calc(1em * 11); height: $size * length($logo);
font-size: 3px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; 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,0,1,0,1,1,0,1,0,0,0),
(0,0,0,0,1,0,1,0,0,1,0,1,0,0) (0,0,0,0,1,0,1,0,0,1,0,1,0,0)
); );
$size: 6px;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 14); width: $size * length(nth($octocat-1, 1));
height: calc(1em * 15); height: $size * length($octocat-1);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($octocat-1, $octocat-colors); @include pixelize($size, $octocat-1, $octocat-colors);
} }
&.animate::before { &.animate::before {
@@ -58,11 +58,8 @@
} }
@keyframes wave { @keyframes wave {
0% {
@include pixelize($octocat-1, $octocat-colors);
}
50% { 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,3,3,2,2,2,1,3),
(0,0,3,3,3,3,3,3) (0,0,3,3,3,3,3,3)
); );
$size: 6px;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 8); width: $size * length(nth($phone, 1));
height: calc(1em * 21); height: $size * length($phone);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; 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),
(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; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 14); width: $size * length(nth($pokeball, 1));
height: calc(1em * 14); height: $size * length($pokeball);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; 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); $smartphone-colors: (#fff, #060606);
// prettier-ignore // prettier-ignore
$smartphone: ( $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,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,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), (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,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), (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; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 16); width: $size * length(nth($smartphone, 1));
height: calc(1em * 27); height: $size * length($smartphone);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; 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,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) (0,0,1,1,1,1,1,1,1,1,1,1,1,0,0)
); );
$size: 4px;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 16); width: $size * length(nth($logo, 1));
height: calc(1em * 11); height: $size * length($logo);
font-size: 3px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; 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,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) (0,0,1,1,1,1,1,1,1,1,1,1,1,0,0)
); );
$size: 4px;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 16); width: $size * length(nth($logo, 1));
height: calc(1em * 11); height: $size * length($logo);
font-size: 3px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; 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 { .nes-squirtle {
// prettier-ignore $squirtle-colors: (#000, #9cf, #cb6633, #9fa1a1, #fff, #f89934, #ff3);
$squirtle-colors: (#000, #9cf, #cb6633,
#9fa1a1, #fff, #f89934, #ff3);
// prettier-ignore // prettier-ignore
$squirtle: ( $squirtle: (
(0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,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,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,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), (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,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,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), (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,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,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,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,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,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,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,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,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,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,0,0,0,1,1,1,0,0,0,0,0,0,0,0),
); );
$size: 6px;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 21); width: $size * length(nth($squirtle, 1));
height: calc(1em * 17); height: $size * length($squirtle);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: -1em; top: -$size;
left: -1em; left: -$size;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($squirtle, $squirtle-colors); @include pixelize($size, $squirtle, $squirtle-colors);
} }
} }

14
scss/utilities/icon-mixin.scss
View File

@@ -1,4 +1,4 @@
@mixin pixelize($matrix, $colors, $default-color: null) { @mixin pixelize($size, $matrix, $colors, $default-color: null) {
$ret: ""; $ret: "";
$moz: ""; $moz: "";
@if ($default-color == null) { @if ($default-color == null) {
@@ -37,18 +37,18 @@
$color: nth($colors, $dot); $color: nth($colors, $dot);
@if $color == $default-color { @if $color == $default-color {
$ret: $ret + $j + "em " + $i + "em"; $ret: $ret + ($j * $size) + " " + ($i * $size);
$moz: $moz + $j + "em " + $i + "em 0 0.020em"; $moz: $moz + ($j * $size) + " " + ($i * $size) + "0 0.020px";
} @else { } @else {
$ret: $ret + $j + "em " + $i + "em " + $color; $ret: $ret + ($j * $size) + " " + ($i * $size) + "" + $color;
$moz: $moz + $j + "em " + $i + "em 0 0.020em " + $color; $moz: $moz + ($j * $size) + " " + ($i * $size) + "0 0.020px " + $color;
} }
} }
} }
} }
width: 1em; width: $size;
height: 1em; height: $size;
color: $default-color; color: $default-color;
box-shadow: unquote($ret); box-shadow: unquote($ret);
@-moz-document url-prefix() { @-moz-document url-prefix() {

2
scss/utilities/rounded-corners-mixin.scss
View File

@@ -16,6 +16,7 @@
border-image-slice: 3; border-image-slice: 3;
border-image-width: 3; border-image-width: 3;
border-image-repeat: space;
@if $isDark { @if $isDark {
@include border-image($color-white); @include border-image($color-white);
@@ -33,6 +34,7 @@
border-image-slice: 2; border-image-slice: 2;
border-image-width: 2; border-image-width: 2;
border-image-repeat: space;
@if $isDark { @if $isDark {
@include compact-border-image($color-white); @include compact-border-image($color-white);