mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-09-02 10:32:41 +02:00
Code Issues Releases Wiki Activity

Merge branch 'master' into feature/outline

Browse Source
This commit is contained in:
BcRikko
2018-11-29 12:29:56 +09:00
parent 7fb5cda2dd adffb2b4c6
commit f69b6e29f0
7 changed files with 55 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/nes.css
View File

@@ -939,14 +939,14 @@ button,
box-shadow: 4px 4px #212529,8px 4px #212529,12px 4px #212529,16px 4px #212529,52px 4px #212529,56px 4px #212529,60px 4px #212529,64px 4px #212529,4px 8px #212529,8px 8px #212529,12px 8px #212529,16px 8px #212529,52px 8px #212529,56px 8px #212529,60px 8px #212529,64px 8px #212529,4px 12px #212529,8px 12px #212529,12px 12px #212529,16px 12px #212529,52px 12px #212529,56px 12px #212529,60px 12px #212529,64px 12px #212529,4px 16px #212529,8px 16px #212529,12px 16px #212529,16px 16px #212529,20px 16px #212529,24px 16px #212529,28px 16px #212529,40px 16px #212529,44px 16px #212529,48px 16px #212529,52px 16px #212529,56px 16px #212529,60px 16px #212529,64px 16px #212529,16px 20px #212529,20px 20px #212529,24px 20px #212529,28px 20px #212529,40px 20px #212529,44px 20px #212529,48px 20px #212529,52px 20px #212529,16px 24px #212529,20px 24px #212529,24px 24px #212529,28px 24px #212529,40px 24px #212529,44px 24px #212529,48px 24px #212529,52px 24px #212529,16px 28px #212529,20px 28px #212529,24px 28px #212529,28px 28px #212529,32px 28px #212529,36px 28px #212529,40px 28px #212529,44px 28px #212529,48px 28px #212529,52px 28px #212529,28px 32px #212529,32px 32px #212529,36px 32px #212529,40px 32px #212529,28px 36px #212529,32px 36px #212529,36px 36px #212529,40px 36px #212529,16px 40px #212529,20px 40px #212529,24px 40px #212529,28px 40px #212529,32px 40px #212529,36px 40px #212529,40px 40px #212529,44px 40px #212529,48px 40px #212529,52px 40px #212529,16px 44px #212529,20px 44px #212529,24px 44px #212529,28px 44px #212529,40px 44px #212529,44px 44px #212529,48px 44px #212529,52px 44px #212529,16px 48px #212529,20px 48px #212529,24px 48px #212529,28px 48px #212529,40px 48px #212529,44px 48px #212529,48px 48px #212529,52px 48px #212529,4px 52px #212529,8px 52px #212529,12px 52px #212529,16px 52px #212529,20px 52px #212529,24px 52px #212529,28px 52px #212529,40px 52px #212529,44px 52px #212529,48px 52px #212529,52px 52px #212529,56px 52px #212529,60px 52px #212529,64px 52px #212529,4px 56px #212529,8px 56px #212529,12px 56px #212529,16px 56px #212529,52px 56px #212529,56px 56px #212529,60px 56px #212529,64px 56px #212529,4px 60px #212529,8px 60px #212529,12px 60px #212529,16px 60px #212529,52px 60px #212529,56px 60px #212529,60px 60px #212529,64px 60px #212529,4px 64px #212529,8px 64px #212529,12px 64px #212529,16px 64px #212529,52px 64px #212529,56px 64px #212529,60px 64px #212529,64px 64px #212529;; box-shadow: 4px 4px #212529,8px 4px #212529,12px 4px #212529,16px 4px #212529,52px 4px #212529,56px 4px #212529,60px 4px #212529,64px 4px #212529,4px 8px #212529,8px 8px #212529,12px 8px #212529,16px 8px #212529,52px 8px #212529,56px 8px #212529,60px 8px #212529,64px 8px #212529,4px 12px #212529,8px 12px #212529,12px 12px #212529,16px 12px #212529,52px 12px #212529,56px 12px #212529,60px 12px #212529,64px 12px #212529,4px 16px #212529,8px 16px #212529,12px 16px #212529,16px 16px #212529,20px 16px #212529,24px 16px #212529,28px 16px #212529,40px 16px #212529,44px 16px #212529,48px 16px #212529,52px 16px #212529,56px 16px #212529,60px 16px #212529,64px 16px #212529,16px 20px #212529,20px 20px #212529,24px 20px #212529,28px 20px #212529,40px 20px #212529,44px 20px #212529,48px 20px #212529,52px 20px #212529,16px 24px #212529,20px 24px #212529,24px 24px #212529,28px 24px #212529,40px 24px #212529,44px 24px #212529,48px 24px #212529,52px 24px #212529,16px 28px #212529,20px 28px #212529,24px 28px #212529,28px 28px #212529,32px 28px #212529,36px 28px #212529,40px 28px #212529,44px 28px #212529,48px 28px #212529,52px 28px #212529,28px 32px #212529,32px 32px #212529,36px 32px #212529,40px 32px #212529,28px 36px #212529,32px 36px #212529,36px 36px #212529,40px 36px #212529,16px 40px #212529,20px 40px #212529,24px 40px #212529,28px 40px #212529,32px 40px #212529,36px 40px #212529,40px 40px #212529,44px 40px #212529,48px 40px #212529,52px 40px #212529,16px 44px #212529,20px 44px #212529,24px 44px #212529,28px 44px #212529,40px 44px #212529,44px 44px #212529,48px 44px #212529,52px 44px #212529,16px 48px #212529,20px 48px #212529,24px 48px #212529,28px 48px #212529,40px 48px #212529,44px 48px #212529,48px 48px #212529,52px 48px #212529,4px 52px #212529,8px 52px #212529,12px 52px #212529,16px 52px #212529,20px 52px #212529,24px 52px #212529,28px 52px #212529,40px 52px #212529,44px 52px #212529,48px 52px #212529,52px 52px #212529,56px 52px #212529,60px 52px #212529,64px 52px #212529,4px 56px #212529,8px 56px #212529,12px 56px #212529,16px 56px #212529,52px 56px #212529,56px 56px #212529,60px 56px #212529,64px 56px #212529,4px 60px #212529,8px 60px #212529,12px 60px #212529,16px 60px #212529,52px 60px #212529,56px 60px #212529,60px 60px #212529,64px 60px #212529,4px 64px #212529,8px 64px #212529,12px 64px #212529,16px 64px #212529,52px 64px #212529,56px 64px #212529,60px 64px #212529,64px 64px #212529;;
} }
.nes-logo { .snes-logo {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 48px; width: 48px;
height: 33px; height: 33px;
} }
.nes-logo::before { .snes-logo::before {
position: absolute; position: absolute;
top: -3px; top: -3px;
left: -3px; left: -3px;

4
css/nes.css.map
View File

File diff suppressed because one or more lines are too long

4
css/nes.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
index.html
View File

@@ -30,7 +30,7 @@
<body> <body>
<header> <header>
<h1><i class="nes-logo brand"></i>NES.css</h1> <h1><i class="snes-logo brand"></i>NES.css</h1>
<p>NES-style CSS Framework.</p> <p>NES-style CSS Framework.</p>
</header> </header>
@@ -55,17 +55,17 @@
<div class="containers"> <div class="containers">
<div class="container with-title is-center"> <div class="container with-title is-center">
<label class="title">Container.is-center</label> <label class="title">Container.is-center</label>
<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="container is-dark with-title">
<label class="title">Container.is-dark</label> <label class="title">Container.is-dark</label>
<p style="color: white;">Good morning. Thou hast had a good night's sleep I hope.</p> <p style="color: white;">Good morning. Thou hast had a good night's sleep, I hope.</p>
</div> </div>
<div class="container is-rounded"> <div class="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="container is-rounded is-dark">
<p style="color: white;">Good morning. Thou hast had a good night's sleep I hope.</p> <p style="color: white;">Good morning. Thou hast had a good night's sleep, I hope.</p>
</div> </div>
</div> </div>
</section> </section>
@@ -123,7 +123,7 @@
</div> </div>
<div class="message -right"> <div class="message -right">
<div class="balloon from-right"> <div class="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="bcrikko"></i>
</div> </div>

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

@@ -1,5 +1,5 @@
@charset "utf-8"; @charset "utf-8";
@import "nes-icon.scss"; @import "snes-icon.scss";
@import "bcrikko.scss"; @import "bcrikko.scss";
@import "octocat.scss"; @import "octocat.scss";

18
scss/pixel-arts/nes-icon.scss
View File

@@ -1,19 +1,19 @@
.nes-logo { .nes-logo {
$px: 3px; $px: 3px;
$logo-colors: (#333, #d7d7d7, #7dbb78, #999cf7, #f40500, #f6f504); $logo-colors: (#3e3634, #c3c3c3, #787973, #bf1710);
// prettier-ignore // prettier-ignore
$logo: ( $logo: (
(0,0,0,0,0,0,1,0,0,0,0,0,0,0,0), (0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,1,0,0,0,0,0,0,0,0), (0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,1,0,0,0,0,0,0,0), (0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
(0,0,1,1,1,1,1,1,1,1,1,1,1,0,0), (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
(0,1,2,2,2,2,2,2,2,2,2,2,2,1,0), (2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
(1,2,2,1,2,2,2,2,2,2,2,4,2,2,1), (2,1,1,2,1,1,3,3,3,1,1,1,1,1,2),
(1,2,1,1,1,2,2,2,2,2,3,2,5,2,1), (2,1,2,2,2,1,1,1,1,1,1,1,1,1,2),
(1,2,2,1,2,2,1,2,1,2,2,6,2,2,1), (2,1,1,2,1,1,3,3,3,1,4,1,4,1,2),
(0,1,2,2,2,2,2,2,2,2,2,2,2,1,0), (2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
(0,0,1,1,1,1,1,1,1,1,1,1,1,0,0) (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2)
); );
position: relative; position: relative;

33
scss/pixel-arts/snes-icon.scss Normal file
View File

@@ -0,0 +1,33 @@
.snes-logo {
$px: 3px;
$logo-colors: (#333, #d7d7d7, #7dbb78, #999cf7, #f40500, #f6f504);
// prettier-ignore
$logo: (
(0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,1,0,0,0,0,0,0,0),
(0,0,1,1,1,1,1,1,1,1,1,1,1,0,0),
(0,1,2,2,2,2,2,2,2,2,2,2,2,1,0),
(1,2,2,1,2,2,2,2,2,2,2,4,2,2,1),
(1,2,1,1,1,2,2,2,2,2,3,2,5,2,1),
(1,2,2,1,2,2,1,2,1,2,2,6,2,2,1),
(0,1,2,2,2,2,2,2,2,2,2,2,2,1,0),
(0,0,1,1,1,1,1,1,1,1,1,1,1,0,0)
);
position: relative;
display: inline-block;
width: $px * 16;
height: $px * 11;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
content: "";
background: transparent;
@include pixelize($logo, $logo-colors, $px);
}
}