mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-09-01 18:13:32 +02:00
Code Issues Releases Wiki Activity

👍 ファミコンコントローラを追加

Browse Source
This commit is contained in:
BcRikko
2018-11-29 21:29:07 +09:00
parent 685fd66c64
commit f884610487
6 changed files with 92 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
css/nes.css
View File

@@ -962,6 +962,24 @@ button,
box-shadow: 21px 3px #333,21px 6px #333,24px 9px #333,9px 12px #333,12px 12px #333,15px 12px #333,18px 12px #333,21px 12px #333,24px 12px #333,27px 12px #333,30px 12px #333,33px 12px #333,36px 12px #333,39px 12px #333,6px 15px #333,9px 15px #d7d7d7,12px 15px #d7d7d7,15px 15px #d7d7d7,18px 15px #d7d7d7,21px 15px #d7d7d7,24px 15px #d7d7d7,27px 15px #d7d7d7,30px 15px #d7d7d7,33px 15px #d7d7d7,36px 15px #d7d7d7,39px 15px #d7d7d7,42px 15px #333,3px 18px #333,6px 18px #d7d7d7,9px 18px #d7d7d7,12px 18px #333,15px 18px #d7d7d7,18px 18px #d7d7d7,21px 18px #d7d7d7,24px 18px #d7d7d7,27px 18px #d7d7d7,30px 18px #d7d7d7,33px 18px #d7d7d7,36px 18px #999cf7,39px 18px #d7d7d7,42px 18px #d7d7d7,45px 18px #333,3px 21px #333,6px 21px #d7d7d7,9px 21px #333,12px 21px #333,15px 21px #333,18px 21px #d7d7d7,21px 21px #d7d7d7,24px 21px #d7d7d7,27px 21px #d7d7d7,30px 21px #d7d7d7,33px 21px #7dbb78,36px 21px #d7d7d7,39px 21px #f40500,42px 21px #d7d7d7,45px 21px #333,3px 24px #333,6px 24px #d7d7d7,9px 24px #d7d7d7,12px 24px #333,15px 24px #d7d7d7,18px 24px #d7d7d7,21px 24px #333,24px 24px #d7d7d7,27px 24px #333,30px 24px #d7d7d7,33px 24px #d7d7d7,36px 24px #f6f504,39px 24px #d7d7d7,42px 24px #d7d7d7,45px 24px #333,6px 27px #333,9px 27px #d7d7d7,12px 27px #d7d7d7,15px 27px #d7d7d7,18px 27px #d7d7d7,21px 27px #d7d7d7,24px 27px #d7d7d7,27px 27px #d7d7d7,30px 27px #d7d7d7,33px 27px #d7d7d7,36px 27px #d7d7d7,39px 27px #d7d7d7,42px 27px #333,9px 30px #333,12px 30px #333,15px 30px #333,18px 30px #333,21px 30px #333,24px 30px #333,27px 30px #333,30px 30px #333,33px 30px #333,36px 30px #333,39px 30px #333;;
}
.snes-jp-logo {
position: relative;
display: inline-block;
width: 48px;
height: 33px;
}
.snes-jp-logo::before {
position: absolute;
top: -3px;
left: -3px;
content: "";
background: transparent;
width: 3px;
height: 3px;
box-shadow: 21px 3px #333,21px 6px #333,24px 9px #333,3px 12px #871f37,6px 12px #871f37,9px 12px #871f37,12px 12px #871f37,15px 12px #871f37,18px 12px #871f37,21px 12px #871f37,24px 12px #871f37,27px 12px #871f37,30px 12px #871f37,33px 12px #871f37,36px 12px #871f37,39px 12px #871f37,42px 12px #871f37,45px 12px #871f37,3px 15px #871f37,6px 15px #dfd3b9,9px 15px #dfd3b9,12px 15px #dfd3b9,15px 15px #dfd3b9,18px 15px #dfd3b9,21px 15px #871f37,24px 15px #871f37,27px 15px #871f37,30px 15px #871f37,33px 15px #871f37,36px 15px #871f37,39px 15px #871f37,42px 15px #871f37,45px 15px #871f37,3px 18px #871f37,6px 18px #dfd3b9,9px 18px #dfd3b9,12px 18px #333,15px 18px #dfd3b9,18px 18px #dfd3b9,21px 18px #871f37,24px 18px #871f37,27px 18px #871f37,30px 18px #871f37,33px 18px #871f37,36px 18px #871f37,39px 18px #871f37,42px 18px #871f37,45px 18px #871f37,3px 21px #871f37,6px 21px #dfd3b9,9px 21px #333,12px 21px #333,15px 21px #333,18px 21px #dfd3b9,21px 21px #dfd3b9,24px 21px #dfd3b9,27px 21px #dfd3b9,30px 21px #dfd3b9,33px 21px #dfd3b9,36px 21px #dfd3b9,39px 21px #dfd3b9,42px 21px #dfd3b9,45px 21px #871f37,3px 24px #871f37,6px 24px #dfd3b9,9px 24px #dfd3b9,12px 24px #333,15px 24px #dfd3b9,18px 24px #dfd3b9,21px 24px #333,24px 24px #871f37,27px 24px #333,30px 24px #dfd3b9,33px 24px #333,36px 24px #dfd3b9,39px 24px #333,42px 24px #dfd3b9,45px 24px #871f37,3px 27px #871f37,6px 27px #dfd3b9,9px 27px #dfd3b9,12px 27px #dfd3b9,15px 27px #dfd3b9,18px 27px #dfd3b9,21px 27px #dfd3b9,24px 27px #dfd3b9,27px 27px #dfd3b9,30px 27px #dfd3b9,33px 27px #dfd3b9,36px 27px #dfd3b9,39px 27px #dfd3b9,42px 27px #dfd3b9,45px 27px #871f37,3px 30px #871f37,6px 30px #871f37,9px 30px #871f37,12px 30px #871f37,15px 30px #871f37,18px 30px #871f37,21px 30px #871f37,24px 30px #871f37,27px 30px #871f37,30px 30px #871f37,33px 30px #871f37,36px 30px #871f37,39px 30px #871f37,42px 30px #871f37,45px 30px #871f37;;
}
.nes-logo {
position: relative;
display: inline-block;

1
css/nes.css.map
View File

@@ -29,6 +29,7 @@
"../scss/icons/close.scss",
"../scss/pixel-arts/_index.scss",
"../scss/pixel-arts/snes-icon.scss",
"../scss/pixel-arts/snes-jp-icon.scss",
"../scss/pixel-arts/nes-icon.scss",
"../scss/pixel-arts/bcrikko.scss",
"../scss/pixel-arts/octocat.scss"

1
index.html
View File

@@ -181,6 +181,7 @@
<div>
<i class="nes-logo"></i>
<i class="snes-logo"></i>
<i class="snes-jp-logo"></i>
</div>
</section>
</section>

1
scss/pixel-arts/_index.scss
View File

@@ -1,6 +1,7 @@
@charset "utf-8";
@import "snes-icon.scss";
@import "snes-jp-icon.scss";
@import "nes-icon.scss";
@import "bcrikko.scss";
@import "octocat.scss";

33
scss/pixel-arts/snes-jp-icon.scss Normal file
View File

@@ -0,0 +1,33 @@
.snes-jp-logo {
$px: 3px;
$logo-colors: (#333, #871f37, #dfd3b9);
// prettier-ignore
$logo: (
(0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,1,0,0,0,0,0,0,0),
(2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
(2,3,3,3,3,3,2,2,2,2,2,2,2,2,2),
(2,3,3,1,3,3,2,2,2,2,2,2,2,2,2),
(2,3,1,1,1,3,3,3,3,3,3,3,3,3,2),
(2,3,3,1,3,3,1,2,1,3,1,3,1,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)
);
position: relative;
display: inline-block;
width: $px * 16;
height: $px * 11;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
content: "";
background: transparent;
@include pixelize($logo, $logo-colors, $px);
}
}