1
0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-25 07:01:11 +02:00

docs: add avatar samples

This commit is contained in:
BcRikko
2019-02-21 19:01:15 +09:00
parent ae15940e5e
commit b484bd3a11
3 changed files with 18 additions and 4 deletions

View File

@@ -76,6 +76,7 @@
class="item" class="item"
v-html="sample.code"> v-html="sample.code">
</div> </div>
<p v-if="sample.description" class="description nes-text">{{ sample.description }}</p>
<p v-if="sample.note" class="note nes-text is-error">{{ sample.note }}</p> <p v-if="sample.note" class="note nes-text is-error">{{ sample.note }}</p>
<button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode">&lt;&gt;</button> <button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode">&lt;&gt;</button>
</section> </section>

View File

@@ -196,6 +196,23 @@ const sampleCollection = [
</dialog> </dialog>
</section>`, </section>`,
}, },
{
title: 'avatar',
description: 'It is recommended to "image-rendering: pixelated".',
showCode: false,
code: `<img class="nes-avatar" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
<img class="nes-avatar is-small" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
<img class="nes-avatar is-medium" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
<img class="nes-avatar is-large" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
<img class="nes-avatar is-rounded" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
<img class="nes-avatar is-rounded is-small" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
<img class="nes-avatar is-rounded is-medium" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
<img class="nes-avatar is-rounded is-large" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">`,
},
]; ];
const coreteam = [ const coreteam = [

View File

@@ -77,10 +77,6 @@ section.showcase > section.samplecode {
right: 0px; right: 0px;
} }
section.showcase > section.nes-container > p.note {
margin-top: 2.5rem;
}
section.showcase > section.samplecode > pre code { section.showcase > section.samplecode > pre code {
font-size: 13px; font-size: 13px;
line-height: 1.5; line-height: 1.5;