mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-26 23:44:43 +02:00
Code Issues Releases Wiki Activity

Merge branch 'add-text-and-dialog-to-docs' of github.com:BcRikko/NES.css into add-text-and-dialog-to-docs

Browse Source
This commit is contained in:
BcRikko
2019-02-11 17:32:44 +09:00
parent b6f213d32d 3c0035eae3
commit ee1a70c032
4 changed files with 39 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/icons.stories.js
View File

@@ -33,6 +33,7 @@ stories.add('icon', () => {
'nes-jp-logo': 'nes-jp-logo', 'nes-jp-logo': 'nes-jp-logo',
'snes-logo': 'snes-logo', 'snes-logo': 'snes-logo',
'snes-jp-logo': 'snes-jp-logo', 'snes-jp-logo': 'snes-jp-logo',
'nes-psone': 'nes-psone',
}, 'nes-icon twitter'); }, 'nes-icon twitter');
const selectedSize = radios('size', { const selectedSize = radios('size', {
default: '', default: '',

4
index.html
View File

@@ -1005,6 +1005,7 @@
<i class="nes-jp-logo"></i> <i class="nes-jp-logo"></i>
<i class="snes-logo"></i> <i class="snes-logo"></i>
<i class="snes-jp-logo"></i> <i class="snes-jp-logo"></i>
<i class="nes-psone"></i>
</div> </div>
<button type="button" class="nes-btn is-error show-code" id="show-controllers-code">&lt;&gt;</button> <button type="button" class="nes-btn is-error show-code" id="show-controllers-code">&lt;&gt;</button>
<span class="nes-balloon from-right copied" id="copied-controllers">Copied!</span> <span class="nes-balloon from-right copied" id="copied-controllers">Copied!</span>
@@ -1013,7 +1014,8 @@
<pre class="sample-code"><code class="html">&lt;i class=&quot;nes-logo&quot;&gt;&lt;/i&gt; <pre class="sample-code"><code class="html">&lt;i class=&quot;nes-logo&quot;&gt;&lt;/i&gt;
&lt;i class=&quot;nes-jp-logo&quot;&gt;&lt;/i&gt; &lt;i class=&quot;nes-jp-logo&quot;&gt;&lt;/i&gt;
&lt;i class=&quot;snes-logo&quot;&gt;&lt;/i&gt; &lt;i class=&quot;snes-logo&quot;&gt;&lt;/i&gt;
&lt;i class=&quot;snes-jp-logo&quot;&gt;&lt;/i&gt;</code></pre> &lt;i class=&quot;snes-jp-logo&quot;&gt;&lt;/i&gt;
&lt;i class=&quot;nes-psone&quot;&gt;&lt;/i&gt;</code></pre>
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('controllers')">Copy</button> <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('controllers')">Copy</button>
</section> </section>
</section> </section>

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

@@ -14,4 +14,5 @@
@import "smartphone.scss"; @import "smartphone.scss";
@import "mario.scss"; @import "mario.scss";
@import "kirby.scss"; @import "kirby.scss";
@import "psone.scss";
@import "octocat.scss"; @import "octocat.scss";

34
scss/pixel-arts/psone.scss Normal file
View File

@@ -0,0 +1,34 @@
.nes-psone {
$psone-colors: (#cbcbcb, #b1b1b2, #2a2a2a);
// prettier-ignore
$psone: (
(0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0),
(0,0,1,1,1,0,0,3,0,0,0,1,1,1,0,0),
(0,1,1,1,1,1,0,0,3,0,1,1,1,1,1,0),
(1,1,1,3,1,1,1,1,1,1,1,1,3,1,1,1),
(1,1,3,1,3,1,1,1,1,1,1,3,1,3,1,1),
(1,1,1,3,1,1,1,1,1,1,1,1,3,1,1,1),
(2,1,1,1,1,1,3,1,1,3,1,1,1,1,1,2),
(2,2,1,1,1,0,0,0,0,0,0,1,1,1,2,2),
(2,2,2,2,0,0,0,0,0,0,0,0,2,2,2,2),
(0,2,2,0,0,0,0,0,0,0,0,0,0,2,2,0)
);
$size: 4px;
position: relative;
display: inline-block;
width: $size * length(nth($psone, 1));
height: $size * length($psone);
&::before {
position: absolute;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($size, $psone, $psone-colors);
}
}