mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-04-22 15:12:19 +02:00
🚀 デプロイ
This commit is contained in:
BcRikko
parent
288c844adb
commit
16fe1794a5
365
css/nes.css
Normal file
365
css/nes.css
Normal file
@ -0,0 +1,365 @@
|
||||
/*!
|
||||
* NES.css v0.0.1(alpha)
|
||||
*/
|
||||
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
|
||||
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
|
||||
html,
|
||||
body,
|
||||
p,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
blockquote,
|
||||
figure,
|
||||
fieldset,
|
||||
legend,
|
||||
textarea,
|
||||
pre,
|
||||
iframe,
|
||||
hr,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
img,
|
||||
embed,
|
||||
iframe,
|
||||
object,
|
||||
audio,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
pre,
|
||||
code {
|
||||
font-family: "Press Start 2P";
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.title:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title.-is-1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.title.-is-2 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.title.-is-3 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.title.-is-4 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.title.-is-5 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.title.-is-6 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.subtitle:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.subtitle.-is-1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.subtitle.-is-2 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.subtitle.-is-3 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.subtitle.-is-4 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.subtitle.-is-5 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.subtitle.-is-6 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px 12px;
|
||||
margin: 3px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background-color: #f7f7f7;
|
||||
outline: none;
|
||||
box-shadow: inset -4px -4px 0 0 #adafbc;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #e7e7e7;
|
||||
box-shadow: inset -6px -6px 0 0 #adafbc;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
box-shadow: inset 4px 4px 0 0 #adafbc;
|
||||
}
|
||||
|
||||
.button::before, .button::after {
|
||||
position: absolute;
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
border-color: #333;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.button::before {
|
||||
top: -3px;
|
||||
left: 0;
|
||||
border-right: 6px;
|
||||
border-left: 6px;
|
||||
}
|
||||
|
||||
.button::after {
|
||||
top: 0;
|
||||
left: -3px;
|
||||
border-top: 6px;
|
||||
border-bottom: 6px;
|
||||
}
|
||||
|
||||
.button.-primary {
|
||||
color: #f7f7f7;
|
||||
background-color: #92cc41;
|
||||
box-shadow: inset -4px -4px 0 0 #4aa52e;
|
||||
}
|
||||
|
||||
.button.-primary:hover {
|
||||
background-color: #76c442;
|
||||
box-shadow: inset -6px -6px 0 0 #4aa52e;
|
||||
}
|
||||
|
||||
.button.-primary:active {
|
||||
box-shadow: inset 4px 4px 0 0 #4aa52e;
|
||||
}
|
||||
|
||||
.button.-success {
|
||||
color: #f7f7f7;
|
||||
background-color: #209cee;
|
||||
box-shadow: inset -4px -4px 0 0 #006bb3;
|
||||
}
|
||||
|
||||
.button.-success:hover {
|
||||
background-color: #108de0;
|
||||
box-shadow: inset -6px -6px 0 0 #006bb3;
|
||||
}
|
||||
|
||||
.button.-success:active {
|
||||
box-shadow: inset 4px 4px 0 0 #006bb3;
|
||||
}
|
||||
|
||||
.button.-warning {
|
||||
color: #f7f7f7;
|
||||
background-color: #f7d51d;
|
||||
box-shadow: inset -4px -4px 0 0 #e59400;
|
||||
}
|
||||
|
||||
.button.-warning:hover {
|
||||
background-color: #f2c409;
|
||||
box-shadow: inset -6px -6px 0 0 #e59400;
|
||||
}
|
||||
|
||||
.button.-warning:active {
|
||||
box-shadow: inset 4px 4px 0 0 #e59400;
|
||||
}
|
||||
|
||||
.button.-error {
|
||||
color: #f7f7f7;
|
||||
background-color: #e76e55;
|
||||
box-shadow: inset -4px -4px 0 0 #8c2022;
|
||||
}
|
||||
|
||||
.button.-error:hover {
|
||||
background-color: #ce372b;
|
||||
box-shadow: inset -6px -6px 0 0 #8c2022;
|
||||
}
|
||||
|
||||
.button.-error:active {
|
||||
box-shadow: inset 4px 4px 0 0 #8c2022;
|
||||
}
|
||||
|
||||
.button.-small {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.button.-medium {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.button.-large {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
padding: 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.container::before, .container::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.container::before {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -2;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.container::after {
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
z-index: -1;
|
||||
border: 4px solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.container:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.container.-with-title {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.container.-with-title.-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container.-with-title.-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.container.-with-title > .title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding: 0 0.5rem;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.container.-dark {
|
||||
color: #f7f7f7;
|
||||
}
|
||||
|
||||
.container.-dark::before {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.container.-dark > .title {
|
||||
color: #f7f7f7;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=nes.css.map */
|
||||
17
css/nes.css.map
Normal file
17
css/nes.css.map
Normal file
File diff suppressed because one or more lines are too long
3
css/nes.min.css
vendored
Normal file
3
css/nes.min.css
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
/*!
|
||||
* NES.css v0.0.1(alpha)
|
||||
*//*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{padding:0;margin:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}audio,embed,iframe,img,object,video{max-width:100%;height:auto}iframe{border:0}table{border-spacing:0;border-collapse:collapse}td,th{padding:0;text-align:left}html{font-size:16px;color:#333;background-color:#f7f7f7}body,button,code,input,pre,select,textarea{font-family:"Press Start 2P";font-size:16px}a{color:#333;text-decoration:none}.title{font-weight:700;word-break:break-word}.title:not(:last-child){margin-bottom:1.5rem}.title.-h1{font-size:3rem}.title.-h2{font-size:2.5rem}.title.-h3{font-size:2rem}.title.-h4{font-size:1.5rem}.title.-h5{font-size:1.25rem}.title.-h6{font-size:1rem}.subtitle{font-weight:400}.subtitle:not(:last-child){margin-bottom:1.5rem}.subtitle.-h1{font-size:3rem}.subtitle.-h2{font-size:2.5rem}.subtitle.-h3{font-size:2rem}.subtitle.-h4{font-size:1.5rem}.subtitle.-h5{font-size:1.25rem}.subtitle.-h6{font-size:1rem}.button{position:relative;display:inline-block;padding:10px 12px;margin:3px;vertical-align:middle;cursor:pointer;background-color:#f7f7f7;outline:0;box-shadow:inset -4px -4px 0 0 #adafbc}.button:hover{background-color:#e7e7e7;box-shadow:inset -6px -6px 0 0 #adafbc}.button:active{box-shadow:inset 4px 4px 0 0 #adafbc}.button::after,.button::before{position:absolute;box-sizing:content-box;width:100%;height:100%;content:"";border-color:#333;border-style:solid}.button::before{top:-3px;left:0;border-right:6px;border-left:6px}.button::after{top:0;left:-3px;border-top:6px;border-bottom:6px}.button.-primary{color:#f7f7f7;background-color:#92cc41;box-shadow:inset -4px -4px 0 0 #4aa52e}.button.-primary:hover{background-color:#76c442;box-shadow:inset -6px -6px 0 0 #4aa52e}.button.-primary:active{box-shadow:inset 4px 4px 0 0 #4aa52e}.button.-success{color:#f7f7f7;background-color:#209cee;box-shadow:inset -4px -4px 0 0 #006bb3}.button.-success:hover{background-color:#108de0;box-shadow:inset -6px -6px 0 0 #006bb3}.button.-success:active{box-shadow:inset 4px 4px 0 0 #006bb3}.button.-warning{color:#f7f7f7;background-color:#f7d51d;box-shadow:inset -4px -4px 0 0 #e59400}.button.-warning:hover{background-color:#f2c409;box-shadow:inset -6px -6px 0 0 #e59400}.button.-warning:active{box-shadow:inset 4px 4px 0 0 #e59400}.button.-error{color:#f7f7f7;background-color:#e76e55;box-shadow:inset -4px -4px 0 0 #8c2022}.button.-error:hover{background-color:#ce372b;box-shadow:inset -6px -6px 0 0 #8c2022}.button.-error:active{box-shadow:inset 4px 4px 0 0 #8c2022}.button.-small{font-size:.6em}.button.-medium{font-size:1em}.button.-large{font-size:2em}.container{position:relative;padding:20px 30px}.container::after,.container::before{position:absolute;content:"";border-radius:4px}.container::before{top:0;right:0;bottom:0;left:0;border-radius:4px}.container::after{top:2px;right:2px;bottom:2px;left:2px;border:4px solid;border-radius:4px}
|
||||
65
docs/index.html
Normal file
65
docs/index.html
Normal file
@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ja">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>NES.css - NES-style CSS Framework</title>
|
||||
<link href="https://rawgit.com/BcRikko/NES.css/master/css/nes.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
margin: 2rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="header">
|
||||
<h1 class="title -is-1">NES.css</h1>
|
||||
<p class="subtitle -is-6">NES-style CSS Framework.</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="container">
|
||||
<h2 class="title -is-3">Buttons</h2>
|
||||
<h3 class="title -is-4">sizes</h3>
|
||||
<a class="button -small">small</a>
|
||||
<a class="button">normal</a>
|
||||
<a class="button -medium">medium</a>
|
||||
<a class="button -large">large</a>
|
||||
|
||||
<h3 class="title -is-4">colors</h3>
|
||||
<a class="button -primary">primary</a>
|
||||
<a class="button -success">success</a>
|
||||
<a class="button -warning">warning</a>
|
||||
<a class="button -error">error</a>
|
||||
</section>
|
||||
<section class="container">
|
||||
<h2 class="title -is-3">Container</h2>
|
||||
<h3 class="title -is-4">normal</h3>
|
||||
<section class="container">
|
||||
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
||||
</section>
|
||||
|
||||
<h3 class="title -is-4">dark theme</h3>
|
||||
<section class="container -dark">
|
||||
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
||||
</section>
|
||||
|
||||
<h3 class="title -is-4">with title</h3>
|
||||
<section class="container -dark -with-title">
|
||||
<label class="title">Command</label>
|
||||
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
||||
</section>
|
||||
|
||||
<h3 class="title -is-4">align <code>(-center, -right)</code></h3>
|
||||
<section class="container -dark -with-title -center">
|
||||
<label class="title">Command</label>
|
||||
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,11 +1,8 @@
|
||||
/*!
|
||||
* NES.css v0.0.1(alpha)
|
||||
*/
|
||||
$color: #fff;
|
||||
@charset "utf-8";
|
||||
|
||||
body {
|
||||
color: $color;
|
||||
display: flex;
|
||||
color: $color;
|
||||
background-color: #111;
|
||||
}
|
||||
/*!
|
||||
* NES.css v0.0.1(alpha)
|
||||
*/
|
||||
|
||||
@import "base/_index.scss";
|
||||
@import "elements/_index.scss";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user