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

(breaking changes)Add prefix to class name (#82)

Browse Source 
* feat: add prefix

BREAKING CHANGE: add nes- to class prefix

* feat: fix storybook
This commit is contained in:
ダーシノ
2018-12-10 17:55:41 +09:00
committed by Abdullah Samman
parent cf43a3d3a3
commit 73b3616472
27 changed files with 185 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/balloons.stories.js
View File

@@ -12,5 +12,5 @@ stories.add('balloon', () => {
'from-left': 'from-left', 'from-left': 'from-left',
'from-right': 'from-right', 'from-right': 'from-right',
}, ''); }, '');
return `<div class="balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`; return `<div class="nes-balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`;
}); });

2
docs/buttons.stories.js
View File

@@ -15,5 +15,5 @@ stories.add('button', () => {
'is-error': 'is-error', 'is-error': 'is-error',
'is-disabled': 'is-disabled', 'is-disabled': 'is-disabled',
}, ''); }, '');
return `<button type="button" class="btn ${extraClass}">Normal</button>`; return `<button type="button" class="nes-btn ${extraClass}">Normal</button>`;
}); });

2
docs/containers.stories.js
View File

@@ -17,7 +17,7 @@ stories.add('container', () => {
}, ''); }, '');
const selectedClasses = [withTitle, isDark, isRounded, alignment]; const selectedClasses = [withTitle, isDark, isRounded, alignment];
return `<div class="container ${selectedClasses.join(' ')}"> return `<div class="nes-container ${selectedClasses.join(' ')}">
<p class="title">Container</p> <p class="title">Container</p>
<p>Good morning. Thou hast had a good night's sleep, I hope.</p> <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>`; </div>`;

36
docs/icons.stories.js
View File

@@ -8,28 +8,28 @@ stories.addDecorator(withKnobs);
stories.add('icon', () => { stories.add('icon', () => {
const selectedClass = select('class', { const selectedClass = select('class', {
'icon twitter': 'icon twitter', 'nes-icon twitter': 'nes-icon twitter',
'icon facebook': 'icon facebook', 'nes-icon facebook': 'nes-icon facebook',
'icon github': 'icon github', 'nes-icon github': 'nes-icon github',
'icon google': 'icon google', 'nes-icon google': 'nes-icon google',
'icon youtube': 'icon youtube', 'nes-icon youtube': 'nes-icon youtube',
'icon whatsapp': 'icon whatsapp', 'nes-icon whatsapp': 'nes-icon whatsapp',
'icon close': 'icon close', 'nes-icon close': 'nes-icon close',
pokeball: 'pokeball', 'nes-pokeball': 'nes-pokeball',
bulbasaur: 'bulbasaur', 'nes-bulbasaur': 'nes-bulbasaur',
charmander: 'charmander', 'nes-charmander': 'nes-charmander',
squirtle: 'squirtle', 'nes-squirtle': 'nes-squirtle',
smartphone: 'smartphone', 'nes-smartphone': 'nes-smartphone',
phone: 'phone', 'nes-phone': 'nes-phone',
'octocat animate': 'octocat animate', 'nes-octocat animate': 'nes-octocat animate',
ash: 'ash', 'nes-ash': 'nes-ash',
'icon trophy': 'icon trophy', 'nes-icon trophy': 'nes-icon trophy',
mario: 'mario', 'nes-mario': 'nes-mario',
'nes-logo': 'nes-logo', 'nes-logo': 'nes-logo',
'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',
}, 'icon twitter'); }, 'nes-icon twitter');
const selectedSize = radios('size', { const selectedSize = radios('size', {
default: '', default: '',
'is-small': 'is-small', 'is-small': 'is-small',

8
docs/inputs.stories.js
View File

@@ -8,15 +8,15 @@ stories.addDecorator(withKnobs);
stories.add('input.radio', () => ` stories.add('input.radio', () => `
<label> <label>
<input type="radio" class="radio" name="answer" checked /> <input type="radio" class="nes-radio" name="answer" checked />
<span>Yes</span> <span>Yes</span>
</label> <label> </label> <label>
<input type="radio" class="radio" name="answer" /> <input type="radio" class="nes-radio" name="answer" />
<span>No</span> <span>No</span>
</label>`) </label>`)
.add('input.checkbox', () => ` .add('input.checkbox', () => `
<label> <label>
<input type="checkbox" class="checkbox" checked /> <input type="checkbox" class="nes-checkbox" checked />
<span>Enable</span> <span>Enable</span>
</label>`) </label>`)
.add('input', () => { .add('input', () => {
@@ -27,5 +27,5 @@ stories.add('input.radio', () => `
'is-error': 'is-error', 'is-error': 'is-error',
}, ''); }, '');
return `<input type="text" id="name_field" class="input ${selectedClass}" placeholder="NES.css">`; return `<input type="text" id="name_field" class="nes-input ${selectedClass}" placeholder="NES.css">`;
}); });

2
docs/table.stories.js
View File

@@ -13,7 +13,7 @@ stories.add('table', () => {
const selectedClasses = [isBordered, isCentered, isDark]; const selectedClasses = [isBordered, isCentered, isDark];
return `<table class="table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px"> return `<table class="nes-table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
<thead> <thead>
<tr> <tr>
<th>Table.is-dark</th> <th>Table.is-dark</th>

2
docs/textarea.stories.js
View File

@@ -14,5 +14,5 @@ stories.add('textarea', () => {
'is-error': 'is-error', 'is-error': 'is-error',
}, ''); }, '');
return `<textarea id="textarea_field" class="textarea ${selectedClass}" placeholder="NES.css"></textarea>`; return `<textarea id="textarea_field" class="nes-textarea ${selectedClass}" placeholder="NES.css"></textarea>`;
}); });

232
index.html
View File

@@ -36,110 +36,110 @@
</header> </header>
<a class="github-link" href="https://github.com/BcRikko/NES.css" target="_blank"> <a class="github-link" href="https://github.com/BcRikko/NES.css" target="_blank">
<p class="balloon from-right">Fork me<br />on GitHub</p> <p class="nes-balloon from-right">Fork me<br />on GitHub</p>
<i class="octocat"></i> <i class="nes-octocat"></i>
</a> </a>
<section class="container with-title"> <section class="nes-container with-title">
<h2 class="title">Buttons</h2> <h2 class="title">Buttons</h2>
<div> <div>
<button type="button" class="btn">Normal</button> <button type="button" class="nes-btn">Normal</button>
<button type="button" class="btn is-primary">Primary</button> <button type="button" class="nes-btn is-primary">Primary</button>
<button type="button" class="btn is-success">Success</button> <button type="button" class="nes-btn is-success">Success</button>
<button type="button" class="btn is-warning">Warning</button> <button type="button" class="nes-btn is-warning">Warning</button>
<button type="button" class="btn is-error">Error</button> <button type="button" class="nes-btn is-error">Error</button>
<button type="button" class="btn is-disabled">Disabled</button> <button type="button" class="nes-btn is-disabled">Disabled</button>
</div> </div>
</section> </section>
<section class="container with-title"> <section class="nes-container with-title">
<h2 class="title">Containers</h2> <h2 class="title">Containers</h2>
<div class="containers"> <div class="containers">
<div class="container with-title is-center"> <div class="nes-container with-title is-center">
<p class="title">Container.is-center</p> <p class="title">Container.is-center</p>
<p>Good morning. Thou hast had a good night's sleep, I hope.</p> <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div> </div>
<div class="container is-dark with-title"> <div class="nes-container is-dark with-title">
<p class="title">Container.is-dark</p> <p class="title">Container.is-dark</p>
<p>Good morning. Thou hast had a good night's sleep, I hope.</p> <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div> </div>
<div class="container is-rounded"> <div class="nes-container is-rounded">
<p>Good morning. Thou hast had a good night's sleep, I hope.</p> <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div> </div>
<div class="container is-rounded is-dark"> <div class="nes-container is-rounded is-dark">
<p>Good morning. Thou hast had a good night's sleep, I hope.</p> <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div> </div>
</div> </div>
</section> </section>
<section class="container with-title"> <section class="nes-container with-title">
<h2 class="title">Radios</h2> <h2 class="title">Radios</h2>
<div> <div>
<label> <label>
<input type="radio" class="radio" name="answer" checked /> <input type="radio" class="nes-radio" name="answer" checked />
<span>Yes</span> <span>Yes</span>
</label> </label>
<label> <label>
<input type="radio" class="radio" name="answer" /> <input type="radio" class="nes-radio" name="answer" />
<span>No</span> <span>No</span>
</label> </label>
</div> </div>
</section> </section>
<section class="container with-title"> <section class="nes-container with-title">
<h2 class="title">Checkboxes</h2> <h2 class="title">Checkboxes</h2>
<label> <label>
<input type="checkbox" class="checkbox" checked /> <input type="checkbox" class="nes-checkbox" checked />
<span>Enable</span> <span>Enable</span>
</label> </label>
</section> </section>
<section class="form container with-title"> <section class="form nes-container with-title">
<h2 class="title">Form</h2> <h2 class="title">Form</h2>
<div class="field"> <div class="nes-field">
<label for="name_field">Your name</label> <label for="name_field">Your name</label>
<input type="text" id="name_field" class="input"> <input type="text" id="name_field" class="nes-input">
</div> </div>
<div class="field is-inline"> <div class="nes-field is-inline">
<label for="inline_field">.input.is-success</label> <label for="inline_field">.input.is-success</label>
<input type="text" id="inline_field" class="input is-success" placeholder="NES.css"> <input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css">
</div> </div>
<div class="field is-inline"> <div class="nes-field is-inline">
<label for="warning_field">.input.is-warning</label> <label for="warning_field">.input.is-warning</label>
<input type="text" id="warning_field" class="input is-warning" placeholder="8bit.css"> <input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css">
</div> </div>
<div class="field is-inline"> <div class="nes-field is-inline">
<label for="error_field">.input.is-error</label> <label for="error_field">.input.is-error</label>
<input type="text" id="error_field" class="input is-error" placeholder="awesome.css"> <input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css">
</div> </div>
<div class="field"> <div class="field">
<label for="textarea_field">Textarea</label> <label for="textarea_field">Textarea</label>
<textarea id="textarea_field" class="textarea"></textarea> <textarea id="textarea_field" class="nes-textarea"></textarea>
</div> </div>
</section> </section>
<section class="balloon container with-title"> <section class="balloon nes-container with-title">
<h2 class="title">Balloons</h2> <h2 class="title">Balloons</h2>
<div class="messages"> <div class="messages">
<div class="message -left"> <div class="message -left">
<i class="bcrikko"></i> <i class="nes-bcrikko"></i>
<div class="balloon from-left"> <div class="nes-balloon from-left">
<p>Hello NES.css</p> <p>Hello NES.css</p>
</div> </div>
</div> </div>
<div class="message -right"> <div class="message -right">
<div class="balloon from-right"> <div class="nes-balloon from-right">
<p>Good morning. Thou hast had a good night's sleep, I hope.</p> <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div> </div>
<i class="bcrikko"></i> <i class="nes-bcrikko"></i>
</div> </div>
</div> </div>
</section> </section>
<section class="container with-title"> <section class="nes-container with-title">
<h2 class="title">Table</h2> <h2 class="title">Table</h2>
<div class="tables"> <div class="tables">
<table class="table is-bordered is-centered"> <table class="nes-table is-bordered is-centered">
<thead> <thead>
<tr> <tr>
<th>Table.is-bordered</th> <th>Table.is-bordered</th>
@@ -157,7 +157,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table class="table is-bordered is-dark"> <table class="nes-table is-bordered is-dark">
<thead> <thead>
<tr> <tr>
<th>Table.is-dark</th> <th>Table.is-dark</th>
@@ -178,7 +178,7 @@
</div> </div>
</section> </section>
<section class="container with-title"> <section class="nes-container with-title">
<h2 class="title">Progress</h2> <h2 class="title">Progress</h2>
<progress class="nes-progress" value="90" max="100"></progress> <progress class="nes-progress" value="90" max="100"></progress>
<progress class="nes-progress is-primary" value="80" max="100"></progress> <progress class="nes-progress is-primary" value="80" max="100"></progress>
@@ -188,116 +188,116 @@
<progress class="nes-progress is-pattern" value="50" max="100"></progress> <progress class="nes-progress is-pattern" value="50" max="100"></progress>
</section> </section>
<section class="container with-title"> <section class="nes-container with-title">
<h2 class="title">Icons</h2> <h2 class="title">Icons</h2>
<section class="container with-title"> <section class="nes-container with-title">
<h3 class="title">Reaction</h3> <h3 class="title">Reaction</h3>
<div> <div>
<i class="icon heart is-small"></i> <i class="nes-icon heart is-small"></i>
<i class="icon heart"></i> <i class="nes-icon heart"></i>
<i class="icon heart is-medium"></i> <i class="nes-icon heart is-medium"></i>
<i class="icon heart is-large"></i> <i class="nes-icon heart is-large"></i>
<i class="icon heart is-empty"></i> <i class="nes-icon heart is-empty"></i>
<i class="icon star is-small"></i> <i class="nes-icon star is-small"></i>
<i class="icon star"></i> <i class="nes-icon star"></i>
<i class="icon star is-medium"></i> <i class="nes-icon star is-medium"></i>
<i class="icon star is-large"></i> <i class="nes-icon star is-large"></i>
<i class="icon star is-half"></i> <i class="nes-icon star is-half"></i>
<i class="icon star is-half is-medium"></i> <i class="nes-icon star is-half is-medium"></i>
<i class="icon star is-half is-large"></i> <i class="nes-icon star is-half is-large"></i>
<i class="icon star is-transparent"></i> <i class="nes-icon star is-transparent"></i>
<i class="icon star is-transparent is-medium"></i> <i class="nes-icon star is-transparent is-medium"></i>
<i class="icon star is-transparent is-large"></i> <i class="nes-icon star is-transparent is-large"></i>
<i class="icon star is-empty"></i> <i class="nes-icon star is-empty"></i>
<i class="icon like is-small"></i> <i class="nes-icon like is-small"></i>
<i class="icon like"></i> <i class="nes-icon like"></i>
<i class="icon like is-medium"></i> <i class="nes-icon like is-medium"></i>
<i class="icon like is-large"></i> <i class="nes-icon like is-large"></i>
<i class="icon like is-empty"></i> <i class="nes-icon like is-empty"></i>
</div> </div>
</section> </section>
<section class="container with-title"> <section class="nes-container with-title">
<h3 class="title">SNS</h3> <h3 class="title">SNS</h3>
<div> <div>
<i class="icon twitter is-small"></i> <i class="nes-icon twitter is-small"></i>
<i class="icon twitter"></i> <i class="nes-icon twitter"></i>
<i class="icon twitter is-medium"></i> <i class="nes-icon twitter is-medium"></i>
<i class="icon twitter is-large"></i> <i class="nes-icon twitter is-large"></i>
<i class="icon facebook is-small"></i> <i class="nes-icon facebook is-small"></i>
<i class="icon facebook"></i> <i class="nes-icon facebook"></i>
<i class="icon facebook is-medium"></i> <i class="nes-icon facebook is-medium"></i>
<i class="icon facebook is-large"></i> <i class="nes-icon facebook is-large"></i>
<i class="icon github is-small"></i> <i class="nes-icon github is-small"></i>
<i class="icon github"></i> <i class="nes-icon github"></i>
<i class="icon github is-medium"></i> <i class="nes-icon github is-medium"></i>
<i class="icon github is-large"></i> <i class="nes-icon github is-large"></i>
<i class="icon youtube is-small"></i> <i class="nes-icon youtube is-small"></i>
<i class="icon youtube"></i> <i class="nes-icon youtube"></i>
<i class="icon youtube is-medium"></i> <i class="nes-icon youtube is-medium"></i>
<i class="icon youtube is-large"></i> <i class="nes-icon youtube is-large"></i>
<i class="icon google is-small"></i> <i class="nes-icon google is-small"></i>
<i class="icon google"></i> <i class="nes-icon google"></i>
<i class="icon google is-medium"></i> <i class="nes-icon google is-medium"></i>
<i class="icon google is-large"></i> <i class="nes-icon google is-large"></i>
<i class="icon medium is-small"></i> <i class="nes-icon medium is-small"></i>
<i class="icon medium"></i> <i class="nes-icon medium"></i>
<i class="icon medium is-medium"></i> <i class="nes-icon medium is-medium"></i>
<i class="icon medium is-large"></i> <i class="nes-icon medium is-large"></i>
<i class="icon twitch is-small"></i> <i class="nes-icon twitch is-small"></i>
<i class="icon twitch"></i> <i class="nes-icon twitch"></i>
<i class="icon twitch is-medium"></i> <i class="nes-icon twitch is-medium"></i>
<i class="icon twitch is-large"></i> <i class="nes-icon twitch is-large"></i>
<i class="icon reddit"></i> <i class="nes-icon reddit"></i>
<i class="icon reddit is-medium"></i> <i class="nes-icon reddit is-medium"></i>
<i class="icon reddit is-large"></i> <i class="nes-icon reddit is-large"></i>
<i class="icon whatsapp"></i> <i class="nes-icon whatsapp"></i>
<i class="icon whatsapp is-medium"></i> <i class="nes-icon whatsapp is-medium"></i>
<i class="icon whatsapp is-large"></i> <i class="nes-icon whatsapp is-large"></i>
</div> </div>
</section> </section>
<section class="container with-title"> <section class="nes-container with-title">
<h3 class="title">Others</h3> <h3 class="title">Others</h3>
<div> <div>
<i class="icon close is-small"></i> <i class="nes-icon close is-small"></i>
<i class="icon close"></i> <i class="nes-icon close"></i>
<i class="icon close is-medium"></i> <i class="nes-icon close is-medium"></i>
<i class="icon close is-large"></i> <i class="nes-icon close is-large"></i>
<i class="octocat animate"></i> <i class="nes-octocat animate"></i>
<i class="icon trophy is-small"></i> <i class="nes-icon trophy is-small"></i>
<i class="icon trophy"></i> <i class="nes-icon trophy"></i>
<i class="icon trophy is-medium"></i> <i class="nes-icon trophy is-medium"></i>
<i class="icon trophy is-large"></i> <i class="nes-icon trophy is-large"></i>
<i class="mario"></i> <i class="nes-mario"></i>
<i class="ash"></i> <i class="nes-ash"></i>
<i class="pokeball"></i> <i class="nes-pokeball"></i>
<i class="bulbasaur"></i> <i class="nes-bulbasaur"></i>
<i class="charmander"></i> <i class="nes-charmander"></i>
<i class="squirtle"></i> <i class="nes-squirtle"></i>
<i class="smartphone"></i> <i class="nes-smartphone"></i>
<i class="phone"></i> <i class="nes-phone"></i>
</div> </div>
</section> </section>
<section class="container with-title"> <section class="nes-container with-title">
<h3 class="title">Controllers</h3> <h3 class="title">Controllers</h3>
<div> <div>
<i class="nes-logo"></i> <i class="nes-logo"></i>
@@ -319,7 +319,7 @@
</body> </body>
<script> <script>
var link = document.querySelector("a.github-link"); var link = document.querySelector("a.github-link");
var octocat = document.querySelector("a.github-link > i.octocat"); var octocat = document.querySelector("a.github-link > i.nes-octocat");
link.addEventListener("mouseover", function() { link.addEventListener("mouseover", function() {
octocat.classList.add("animate"); octocat.classList.add("animate");
}); });

2
scss/elements/balloons.scss
View File

@@ -1,4 +1,4 @@
.balloon { .nes-balloon {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;

2
scss/elements/buttons.scss
View File

@@ -74,7 +74,7 @@
} }
// Default style // Default style
.btn { .nes-btn {
$border-size: 4px; $border-size: 4px;
position: relative; position: relative;

2
scss/elements/checkboxes.scss
View File

@@ -1,4 +1,4 @@
.checkbox { .nes-checkbox {
// prettier-ignore // prettier-ignore
$checkbox: ( $checkbox: (
(1,1,1,1,1,1,1,1,0,0), (1,1,1,1,1,1,1,1,0,0),

2
scss/elements/containers.scss
View File

@@ -1,4 +1,4 @@
.container { .nes-container {
position: relative; position: relative;
padding: 1.5rem 2rem; padding: 1.5rem 2rem;

2
scss/elements/radios.scss
View File

@@ -1,4 +1,4 @@
.radio { .nes-radio {
// prettier-ignore // prettier-ignore
$radio: ( $radio: (
(1,1,0,0,0,0), (1,1,0,0,0,0),

2
scss/elements/tables.scss
View File

@@ -1,4 +1,4 @@
.table { .nes-table {
table-layout: fixed; table-layout: fixed;
background-color: $background-color; background-color: $background-color;
@mixin thsAndTdsBoxShadow($color) { @mixin thsAndTdsBoxShadow($color) {

14
scss/form/inputs.scss
View File

@@ -1,5 +1,5 @@
.input, .nes-input,
.textarea { .nes-textarea {
@mixin border-style($border, $outline) { @mixin border-style($border, $outline) {
outline-color: $outline; outline-color: $outline;
// prettier-ignore // prettier-ignore
@@ -28,12 +28,12 @@
} }
} }
.field { .nes-field {
> label { > label {
display: block; display: block;
} }
.input, .nes-input,
.textarea { .nes-textarea {
display: block; display: block;
} }
@@ -49,8 +49,8 @@
text-align: right; text-align: right;
} }
.input, .nes-input,
.textarea { .nes-textarea {
flex-basis: 0; flex-basis: 0;
flex-grow: 5; flex-grow: 5;
} }

10
scss/icons/icons.scss
View File

@@ -18,7 +18,7 @@
@import "close.scss"; @import "close.scss";
@import "trophy.scss"; @import "trophy.scss";
.icon { .nes-icon {
position: relative; position: relative;
display: inline-block; display: inline-block;
@@ -85,14 +85,14 @@
@include pixelize($icon-github, $icon-github-colors, $px); @include pixelize($icon-github, $icon-github-colors, $px);
} }
&.close::before {
@include pixelize($icon-close, $icon-close-colors, $px);
}
&.youtube::before { &.youtube::before {
@include pixelize($icon-youtube, $icon-youtube-colors, $px); @include pixelize($icon-youtube, $icon-youtube-colors, $px);
} }
&.close::before {
@include pixelize($icon-close, $icon-close-colors, $px);
}
&.google::before { &.google::before {
@include pixelize($icon-google, $icon-google-colors, $px); @include pixelize($icon-google, $icon-google-colors, $px);
} }

2
scss/pixel-arts/ash.scss
View File

@@ -1,4 +1,4 @@
.ash { .nes-ash {
$px: 6px; $px: 6px;
// prettier-ignore // prettier-ignore
$ash-colors: (#f8f8ff, #ff614e, #007f7f, $ash-colors: (#f8f8ff, #ff614e, #007f7f,

2
scss/pixel-arts/bcrikko.scss
View File

@@ -1,4 +1,4 @@
.bcrikko { .nes-bcrikko {
$px: 4px; $px: 4px;
$bcrikko-colors: (#333, #f9f2d7, #c5090c, #fff); $bcrikko-colors: (#333, #f9f2d7, #c5090c, #fff);

2
scss/pixel-arts/bulbasaur.scss
View File

@@ -1,4 +1,4 @@
.bulbasaur { .nes-bulbasaur {
$px: 6px; $px: 6px;
// prettier-ignore // prettier-ignore
$bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1, $bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1,

2
scss/pixel-arts/charmander.scss
View File

@@ -1,4 +1,4 @@
.charmander { .nes-charmander {
$px: 6px; $px: 6px;
// prettier-ignore // prettier-ignore
$charmander-colors: (#000202, #f77702, #eb2010, $charmander-colors: (#000202, #f77702, #eb2010,

2
scss/pixel-arts/mario.scss
View File

@@ -1,4 +1,4 @@
.mario { .nes-mario {
$px: 6px; $px: 6px;
// prettier-ignore // prettier-ignore
$mario-colors: (#f81c2f, #65352b, #ffbb8e, #000, $mario-colors: (#f81c2f, #65352b, #ffbb8e, #000,

2
scss/pixel-arts/octocat.scss
View File

@@ -1,4 +1,4 @@
.octocat { .nes-octocat {
$px: 6px; $px: 6px;
$octocat-colors: (#333, #ffdec4, #cb7066); $octocat-colors: (#333, #ffdec4, #cb7066);
// prettier-ignore // prettier-ignore

2
scss/pixel-arts/phone.scss
View File

@@ -1,4 +1,4 @@
.phone { .nes-phone {
$px: 6px; $px: 6px;
$phone-colors: (#596985, #3c4665, #000); $phone-colors: (#596985, #3c4665, #000);
// prettier-ignore // prettier-ignore

2
scss/pixel-arts/pokeball.scss
View File

@@ -1,4 +1,4 @@
.pokeball { .nes-pokeball {
$px: 6px; $px: 6px;
$pokeball-colors: (#060606, #ff001d, #fff, #9fa1a1); $pokeball-colors: (#060606, #ff001d, #fff, #9fa1a1);
// prettier-ignore // prettier-ignore

2
scss/pixel-arts/smartphone.scss
View File

@@ -1,4 +1,4 @@
.smartphone { .nes-smartphone {
$px: 6px; $px: 6px;
$smartphone-colors: (#fff, #060606); $smartphone-colors: (#fff, #060606);
// prettier-ignore // prettier-ignore

2
scss/pixel-arts/squirtle.scss
View File

@@ -1,4 +1,4 @@
.squirtle { .nes-squirtle {
$px: 6px; $px: 6px;
// prettier-ignore // prettier-ignore
$squirtle-colors: (#000, #9cf, #cb6633, $squirtle-colors: (#000, #9cf, #cb6633,

28
style.css
View File

@@ -3,7 +3,7 @@ body {
margin: 2rem; margin: 2rem;
} }
.container:not(:last-child) { .nes-container:not(:last-child) {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -11,7 +11,7 @@ i.brand {
margin-right: 1rem; margin-right: 1rem;
} }
div.containers > .container { div.containers > .nes-container {
display: inline-block; display: inline-block;
max-width: 400px; max-width: 400px;
} }
@@ -21,45 +21,45 @@ div.tables {
flex-wrap: wrap; flex-wrap: wrap;
} }
div.tables > .table { div.tables > .nes-table {
min-width: 350px; min-width: 350px;
max-width: calc(50% - 2rem); max-width: calc(50% - 2rem);
} }
div.tables > .table:first-child { div.tables > .nes-table:first-child {
margin-right: 2rem; margin-right: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
div.tables > .table { div.tables > .nes-table {
max-width: 100%; max-width: 100%;
margin-right: 0; margin-right: 0;
} }
} }
.balloon.container .balloon { .balloon.nes-container .nes-balloon {
max-width: 600px; max-width: 600px;
margin: 2rem 2rem; margin: 2rem 2rem;
} }
.balloon.container .messages { .balloon.nes-container .messages {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.balloon.container .message { .balloon.nes-container .message {
display: flex; display: flex;
} }
.balloon.container .message i { .balloon.nes-container .message i {
align-self: flex-end; align-self: flex-end;
} }
.balloon.container .message.-left { .balloon.nes-container .message.-left {
align-self: flex-start; align-self: flex-start;
} }
.balloon.container .message.-right { .balloon.nes-container .message.-right {
align-self: flex-end; align-self: flex-end;
} }
.form.container > .field:not(:last-child) { .form.nes-container > .nes-field:not(:last-child) {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -84,12 +84,12 @@ div.tables > .table:first-child {
.github-link:hover { .github-link:hover {
text-decoration: none; text-decoration: none;
} }
.github-link > p.balloon { .github-link > p.nes-balloon {
align-self: flex-start; align-self: flex-start;
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
font-size: 0.8rem; font-size: 0.8rem;
color: #333; color: #333;
} }
.github-link > i.octocat { .github-link > i.nes-octocat {
align-self: flex-end; align-self: flex-end;
} }