Skip to content

Commit

Permalink
🎉 サンプルページの修正
Browse files Browse the repository at this point in the history
  • Loading branch information
@BcRikko
BcRikko committed Nov 27, 2018
1 parent 0b599ed commit dc89ba2
Show file tree
Hide file tree
Showing 3 changed files with 192 additions and 94 deletions.
6 changes: 2 additions & 4 deletions css/nes.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

232 changes: 142 additions & 90 deletions index.html
View file
Expand Up @@ -30,108 +30,160 @@

<body>
<header>
<h1><i class="nes-logo"></i>NES.css</h1>
<h1><i class="nes-logo brand"></i>NES.css</h1>
<p>NES-style CSS Framework.</p>
<i class="bcrikko"></i>
</header>

<a class="github-link" href="https://github.com/BcRikko/NES.css" target="_blank">
<p class="balloon from-right">Fork me<br />on GitHub</p>
<i class="octocat"></i>
</a>

<button type="button" class="btn">Normal</button>
<button type="button" class="btn is-primary">Primary</button>
<button type="button" class="btn is-success">Success</button>
<button type="button" class="btn is-warning">Warning</button>
<button type="button" class="btn is-error">Error</button>

<div class="container with-title is-center">
<label class="title">Container.is-center</label>
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
</div>
<div class="container is-dark with-title">
<label class="title">Container.is-dark</label>
<p style="color: white;">Good morning. Thou hast had a good night's sleep I hope.</p>
</div>
<div class="container is-rounded">
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
</div>
<div class="container is-rounded is-dark">
<p style="color: white;">Good morning. Thou hast had a good night's sleep I hope.</p>
</div>

<div>
<label>
<input type="radio" class="radio" name="answer" checked />
<span>Yes</span>
</label>
<label>
<input type="radio" class="radio" name="answer" />
<span>No</span>
</label>
</div>

<div>
<section class="container with-title">
<h2 class="title">Buttons</h2>
<div>
<button type="button" class="btn">Normal</button>
<button type="button" class="btn is-primary">Primary</button>
<button type="button" class="btn is-success">Success</button>
<button type="button" class="btn is-warning">Warning</button>
<button type="button" class="btn is-error">Error</button>
</div>
</section>

<section class="container with-title">
<h2 class="title">Containers</h2>
<div class="containers">
<div class="container with-title is-center">
<label class="title">Container.is-center</label>
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
</div>
<div class="container is-dark with-title">
<label class="title">Container.is-dark</label>
<p style="color: white;">Good morning. Thou hast had a good night's sleep I hope.</p>
</div>
<div class="container is-rounded">
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
</div>
<div class="container is-rounded is-dark">
<p style="color: white;">Good morning. Thou hast had a good night's sleep I hope.</p>
</div>
</div>
</section>

<section class="container with-title">
<h2 class="title">Radios</h2>
<div>
<label>
<input type="radio" class="radio" name="answer" checked />
<span>Yes</span>
</label>
<label>
<input type="radio" class="radio" name="answer" />
<span>No</span>
</label>
</div>
</section>

<section class="container with-title">
<h2 class="title">Checkboxes</h2>
<label>
<input type="checkbox" class="checkbox" checked />
<span>Enable</span>
</label>
</div>

<div class="field">
<label>Your name</label>
<input type="text" class="input">
</div>
<div class="field is-inline">
<label>.input.is-success</label>
<input type="text" class="input is-success" placeholder="NES.css">
</div>
<div class="field is-inline">
<label>.input.is-warning</label>
<input type="text" class="input is-warning" placeholder="8bit.css">
</div>
<div class="field is-inline">
<label>.input.is-error</label>
<input type="text" class="input is-error" placeholder="awesome.css">
</div>

<div class="balloon from-left">
<p>Hello NES.css</p>
</div>
<div class="balloon from-right">
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
</div>

<i class="icon heart"></i>
<i class="icon heart is-medium"></i>
<i class="icon heart is-large"></i>

<i class="icon star"></i>
<i class="icon star is-medium"></i>
<i class="icon star is-large"></i>

<i class="icon like"></i>
<i class="icon like is-medium"></i>
<i class="icon like is-large"></i>

<i class="icon twitter"></i>
<i class="icon twitter is-medium"></i>
<i class="icon twitter is-large"></i>

<i class="icon facebook"></i>
<i class="icon facebook is-medium"></i>
<i class="icon facebook is-large"></i>

<i class="icon github"></i>
<i class="icon github is-medium"></i>
<i class="icon github is-large"></i>

<i class="icon close"></i>
<i class="icon close is-medium"></i>
<i class="icon close is-large"></i>

<i class="octocat animate"></i>
</section>

<section class="form container with-title">
<h2 class="title">Form</h2>
<div class="field">
<label>Your name</label>
<input type="text" class="input">
</div>
<div class="field is-inline">
<label>.input.is-success</label>
<input type="text" class="input is-success" placeholder="NES.css">
</div>
<div class="field is-inline">
<label>.input.is-warning</label>
<input type="text" class="input is-warning" placeholder="8bit.css">
</div>
<div class="field is-inline">
<label>.input.is-error</label>
<input type="text" class="input is-error" placeholder="awesome.css">
</div>
</section>

<section class="balloon container with-title">
<h2 class="title">Balloons</h2>
<div class="messages">
<div class="message -left">
<i class="bcrikko"></i>
<div class="balloon from-left">
<p>Hello NES.css</p>
</div>
</div>
<div class="message -right">
<div class="balloon from-right">
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
</div>
<i class="bcrikko"></i>
</div>
</div>
</section>

<section class="container with-title">
<h2 class="title">Icons</h2>
<section class="container with-title">
<h3 class="title">Reaction</h3>
<div>
<i class="icon heart"></i>
<i class="icon heart is-medium"></i>
<i class="icon heart is-large"></i>

<i class="icon star"></i>
<i class="icon star is-medium"></i>
<i class="icon star is-large"></i>

<i class="icon like"></i>
<i class="icon like is-medium"></i>
<i class="icon like is-large"></i>
</div>
</section>
<section class="container with-title">
<h3 class="title">SNS</h3>
<div>
<i class="icon twitter"></i>
<i class="icon twitter is-medium"></i>
<i class="icon twitter is-large"></i>

<i class="icon facebook"></i>
<i class="icon facebook is-medium"></i>
<i class="icon facebook is-large"></i>

<i class="icon github"></i>
<i class="icon github is-medium"></i>
<i class="icon github is-large"></i>
</div>
</section>

<section class="container with-title">
<h3 class="title">Others</h3>
<div>
<i class="icon close"></i>
<i class="icon close is-medium"></i>
<i class="icon close is-large"></i>

<i class="octocat animate"></i>
</div>
</section>
</section>

<footer class="footer">
<p>
<a href="https://kuroeveryday.blogspot.com/" target="_blank">Black Everyday Company</a>
<span>-</span>
<a href="https://twitter.com/bc_rikko" target="_blank">@bc_rikko</a>
</p>
</footer>
</body>
<script>
var link = document.querySelector("a.github-link");
Expand Down
48 changes: 48 additions & 0 deletions style.css
View file
@@ -1,7 +1,55 @@
body {
padding: 0 2rem;
margin: 2rem;
}

.container:not(:last-child) {
margin-bottom: 1rem;
}

i.brand {
margin-right: 1rem;
}

div.containers > .container {
display: inline-block;
max-width: 400px;
}

.balloon.container .balloon {
max-width: 600px;
margin: 2rem 2rem;
}

.balloon.container .messages {
display: flex;
flex-direction: column;
}
.balloon.container .message {
display: flex;
}
.balloon.container .message i {
align-self: flex-end;
}
.balloon.container .message.-left {
align-self: flex-start;
}
.balloon.container .message.-right {
align-self: flex-end;
}

.form.container > .field:not(:last-child) {
margin-bottom: 1rem;
}

.footer {
text-align: center;
}
.footer a {
color: #333;
text-decoration: none;
}

.github-link {
position: fixed;
top: 10px;
Expand Down

0 comments on commit dc89ba2

Please sign in to comment.