mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-01-17 05:38:15 +01:00
Code Issues Releases Wiki Activity

feat: Add "is-pixelated" class for avatars with styles for all browsers

Browse Source
This commit is contained in:
besasam 2021-01-25 10:34:23 +01:00
parent 1e3e7996c5
commit 71974a186c
3 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/script.js
View File

@ -346,20 +346,20 @@ const sampleCollection = [
}, },
{ {
title: 'avatars', title: 'avatars',
description: 'It is recommended to "image-rendering: pixelated".', description: 'It is recommended to use the class "is-pixelated".',
showCode: false, showCode: false,
code: `<img class="nes-avatar" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;"> code: `<img class="nes-avatar is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
<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-small is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
<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-medium is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
<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-large is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
<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-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
<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-small is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
<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-medium is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
<img class="nes-avatar is-rounded is-large" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">`, <img class="nes-avatar is-rounded is-large is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">`,
}, },
{ {
title: 'balloons', title: 'balloons',

7
scss/elements/avatar.scss
View File

@ -7,6 +7,13 @@
&.is-rounded { &.is-rounded {
border-radius: 50px; border-radius: 50px;
} }
&.is-pixelated {
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: pixelated;
}
} }
.nes-avatar { .nes-avatar {
@include img-style(2px); @include img-style(2px);

5
story/avatars/avatars.template.js
View File

@ -3,6 +3,7 @@ import classNames from 'classnames';
export default () => { export default () => {
const isRounded = boolean('is-rounded', false); const isRounded = boolean('is-rounded', false);
const isPixelated = boolean('is-pixelated', false);
const avatarSize = select('Avatar Classes', { const avatarSize = select('Avatar Classes', {
default: '', default: '',
'is-small': 'is-small', 'is-small': 'is-small',
@ -15,12 +16,12 @@ export default () => {
avatarSize, avatarSize,
{ {
'is-rounded': isRounded, 'is-rounded': isRounded,
'is-pixelated': isPixelated,
}, },
); );
return ` return `
<img src="http://www.gravatar.com/avatar?s=15" class="${avatarClasses}" <img src="http://www.gravatar.com/avatar?s=15" class="${avatarClasses}"
alt="Gravatar Image Example" alt="Gravatar Image Example">
style="image-rendering: pixelated;">
`; `;
}; };