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

Merge branch 'develop' into add-psone-controller-icon

Browse Source
This commit is contained in:
Igor Guastalla
2019-02-08 23:22:30 -02:00
committed by GitHub
parent 2f8b009ce7 1b39867835
commit c0d5a69aa0
2 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/avatars.stories.js
View File

@@ -16,5 +16,7 @@ stories.add('avatars', () => {
const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
const selectedClasses = [isRounded, options].join(' ');
return `<img src="http://www.gravatar.com/avatar" class="nes-avatar ${selectedClasses}">`;
return `<img src="http://www.gravatar.com/avatar?s=15" class="nes-avatar ${selectedClasses}"
alt="Gravatar Image Example"
style="image-rendering: pixelated;">`;
});

32
index.html
View File

@@ -163,27 +163,27 @@
<section class="nes-container with-title">
<h2 class="title">Avatars</h2>
<div id="avatars">
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-small">
<img src="https://www.gravatar.com/avatar" class="nes-avatar">
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium">
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-large">
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-small is-rounded">
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-rounded">
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded">
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-small" alt="Gravatar Image Example" style="image-rendering: pixelated;">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar" alt="Gravatar Image Example" style="image-rendering: pixelated;">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-medium" alt="Gravatar Image Example" style="image-rendering: pixelated;">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-large" alt="Gravatar Image Example" style="image-rendering: pixelated;">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-small is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-medium is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-large is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">
</div>
<button type="button" class="nes-btn is-error show-code" id="show-avatars-code">&lt;&gt;</button>
<span class="nes-balloon from-right copied" id="copied-avatars">Copied!</span>
</section>
<section class="nes-container code" id="code-avatars">
<pre class="sample-code"><code class="html">&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-small&quot;&gt;
&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar&quot;&gt;
&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-medium&quot;&gt;
&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-large&quot;&gt;
&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-rounded&quot;&gt;
&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-small is-rounded&quot;&gt;
&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-medium is-rounded&quot;&gt;
&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-large is-rounded&quot;&gt;</code></pre>
<pre class="sample-code"><code class="html">&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar is-small&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;
&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;
&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar is-medium&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;
&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar is-large&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;
&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar is-rounded&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;
&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar is-small is-rounded&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;
&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar is-medium is-rounded&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;
&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar is-large is-rounded&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;</code></pre>
<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('avatars')">Copy</button>
</section>