mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-08-31 01:39:50 +02:00
🔒 github-pagesを移動
This commit is contained in:
BcRikko
@@ -1,93 +0,0 @@
|
||||
<!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.min.css" rel="stylesheet">
|
||||
<link href="./style.css" rel="stylesheet">
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41640153-4"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-41640153-4');
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="header">
|
||||
<h1 class="title -is-1">NES.css</h1>
|
||||
<p class="subtitle -is-6">NES-style CSS Framework.</p>
|
||||
</header>
|
||||
<a class="github-link" href="https://github.com/BcRikko/NES.css" target="_blank">
|
||||
<p class="balloon">Fork<br>me on<br>GitHub</p>
|
||||
<div class="octocat"></div>
|
||||
</a>
|
||||
|
||||
<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">Radios</h2>
|
||||
<h3 class="title -is-4">rows</h3>
|
||||
<div class="radios">
|
||||
<label><input class="radio" type="radio" name="radios1" checked>FIGHT</label>
|
||||
<label><input class="radio" type="radio" name="radios1">SPELL</label>
|
||||
<label><input class="radio" type="radio" name="radios1">ITEM</label>
|
||||
<label><input class="radio" type="radio" name="radios1">RUN</label>
|
||||
</div>
|
||||
<h3 class="title -is-4">columns</h3>
|
||||
<div class="radios -columns">
|
||||
<label><input class="radio" type="radio" name="radios2" checked>FIGHT</label>
|
||||
<label><input class="radio" type="radio" name="radios2">SPELL</label>
|
||||
<label><input class="radio" type="radio" name="radios2">ITEM</label>
|
||||
<label><input class="radio" type="radio" name="radios2">RUN</label>
|
||||
</div>
|
||||
</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>
|
||||
219
docs/style.css
219
docs/style.css
@@ -1,219 +0,0 @@
|
||||
body {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.github-link {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.github-link:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.github-link .balloon {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
padding: 2px 5px;
|
||||
|
||||
/* prettier-ignore */
|
||||
box-shadow:
|
||||
0 -3px #f7f7f7,
|
||||
0 -6px #000,
|
||||
3px 0 #f7f7f7,
|
||||
3px -3px #000,
|
||||
6px 0 #000,
|
||||
0 3px #f7f7f7,
|
||||
0 6px #000,
|
||||
-3px 0 #f7f7f7,
|
||||
-3px 3px #000,
|
||||
-6px 0 #000,
|
||||
-3px -3px #000,
|
||||
3px 3px #000;
|
||||
}
|
||||
|
||||
.github-link .balloon::before,
|
||||
.github-link .balloon::after {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.github-link .balloon::after {
|
||||
bottom: -14px;
|
||||
width: 9px;
|
||||
height: 3px;
|
||||
margin-left: 6px;
|
||||
background: #f7f7f7;
|
||||
|
||||
/* prettier-ignore */
|
||||
box-shadow:
|
||||
-3px 0 #333,
|
||||
3px 0 #333,
|
||||
3px 3px #f7f7f7,
|
||||
0 3px #333,
|
||||
6px 3px #333,
|
||||
3px 6px #333,
|
||||
6px 6px #333;
|
||||
}
|
||||
|
||||
.github-link .balloon::before {
|
||||
bottom: -11px;
|
||||
width: 15px;
|
||||
height: 8px;
|
||||
background: #f7f7f7;
|
||||
border-right: 3px solid #333;
|
||||
border-left: 3px solid #333;
|
||||
}
|
||||
|
||||
.github-link .octocat {
|
||||
position: relative;
|
||||
width: 84px;
|
||||
}
|
||||
|
||||
.github-link .octocat::after {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
content: "";
|
||||
background: transparent;
|
||||
|
||||
/* prettier-ignore */
|
||||
box-shadow:
|
||||
24px 6px 0 #333,
|
||||
78px 6px 0 #333,
|
||||
24px 12px 0 #333,
|
||||
30px 12px 0 #333,
|
||||
72px 12px 0 #333,
|
||||
78px 12px 0 #333,
|
||||
24px 18px 0 #333,
|
||||
30px 18px 0 #333,
|
||||
36px 18px 0 #333,
|
||||
42px 18px 0 #333,
|
||||
48px 18px 0 #333,
|
||||
54px 18px 0 #333,
|
||||
60px 18px 0 #333,
|
||||
66px 18px 0 #333,
|
||||
72px 18px 0 #333,
|
||||
78px 18px 0 #333,
|
||||
18px 24px 0 #333,
|
||||
24px 24px 0 #333,
|
||||
30px 24px 0 #333,
|
||||
36px 24px 0 #333,
|
||||
42px 24px 0 #333,
|
||||
48px 24px 0 #333,
|
||||
54px 24px 0 #333,
|
||||
60px 24px 0 #333,
|
||||
66px 24px 0 #333,
|
||||
72px 24px 0 #333,
|
||||
78px 24px 0 #333,
|
||||
84px 24px 0 #333,
|
||||
18px 30px 0 #333,
|
||||
24px 30px 0 #333,
|
||||
30px 30px 0 #333,
|
||||
36px 30px 0 #333,
|
||||
42px 30px 0 #333,
|
||||
48px 30px 0 #333,
|
||||
54px 30px 0 #333,
|
||||
60px 30px 0 #333,
|
||||
66px 30px 0 #333,
|
||||
72px 30px 0 #333,
|
||||
78px 30px 0 #333,
|
||||
84px 30px 0 #333,
|
||||
18px 36px 0 #333,
|
||||
24px 36px 0 #333,
|
||||
30px 36px 0 #333,
|
||||
36px 36px 0 #ffdec4,
|
||||
42px 36px 0 #ffdec4,
|
||||
48px 36px 0 #ffdec4,
|
||||
54px 36px 0 #ffdec4,
|
||||
60px 36px 0 #ffdec4,
|
||||
66px 36px 0 #ffdec4,
|
||||
72px 36px 0 #333,
|
||||
78px 36px 0 #333,
|
||||
84px 36px 0 #333,
|
||||
18px 42px 0 #333,
|
||||
24px 42px 0 #333,
|
||||
30px 42px 0 #ffdec4,
|
||||
36px 42px 0 #cb7066,
|
||||
42px 42px 0 #ffdec4,
|
||||
48px 42px 0 #ffdec4,
|
||||
54px 42px 0 #ffdec4,
|
||||
60px 42px 0 #ffdec4,
|
||||
66px 42px 0 #cb7066,
|
||||
72px 42px 0 #ffdec4,
|
||||
78px 42px 0 #333,
|
||||
84px 42px 0 #333,
|
||||
18px 48px 0 #333,
|
||||
24px 48px 0 #333,
|
||||
30px 48px 0 #ffdec4,
|
||||
36px 48px 0 #cb7066,
|
||||
42px 48px 0 #ffdec4,
|
||||
48px 48px 0 #ffdec4,
|
||||
54px 48px 0 #ffdec4,
|
||||
60px 48px 0 #ffdec4,
|
||||
66px 48px 0 #cb7066,
|
||||
72px 48px 0 #ffdec4,
|
||||
78px 48px 0 #333,
|
||||
84px 48px 0 #333,
|
||||
24px 54px 0 #333,
|
||||
30px 54px 0 #333,
|
||||
36px 54px 0 #ffdec4,
|
||||
42px 54px 0 #ffdec4,
|
||||
48px 54px 0 #cb7066,
|
||||
54px 54px 0 #cb7066,
|
||||
60px 54px 0 #ffdec4,
|
||||
66px 54px 0 #ffdec4,
|
||||
72px 54px 0 #333,
|
||||
78px 54px 0 #333,
|
||||
30px 60px 0 #333,
|
||||
36px 60px 0 #333,
|
||||
42px 60px 0 #333,
|
||||
48px 60px 0 #333,
|
||||
54px 60px 0 #333,
|
||||
60px 60px 0 #333,
|
||||
66px 60px 0 #333,
|
||||
72px 60px 0 #333,
|
||||
6px 66px 0 #333,
|
||||
12px 66px 0 #333,
|
||||
42px 66px 0 #333,
|
||||
48px 66px 0 #333,
|
||||
54px 66px 0 #333,
|
||||
60px 66px 0 #333,
|
||||
18px 72px 0 #333,
|
||||
24px 72px 0 #333,
|
||||
36px 72px 0 #333,
|
||||
42px 72px 0 #333,
|
||||
48px 72px 0 #333,
|
||||
54px 72px 0 #333,
|
||||
60px 72px 0 #333,
|
||||
66px 72px 0 #333,
|
||||
24px 78px 0 #333,
|
||||
30px 78px 0 #333,
|
||||
36px 78px 0 #333,
|
||||
42px 78px 0 #333,
|
||||
48px 78px 0 #333,
|
||||
54px 78px 0 #333,
|
||||
60px 78px 0 #333,
|
||||
66px 78px 0 #333,
|
||||
36px 84px 0 #333,
|
||||
48px 84px 0 #333,
|
||||
54px 84px 0 #333,
|
||||
66px 84px 0 #333,
|
||||
36px 90px 0 #333,
|
||||
48px 90px 0 #333,
|
||||
54px 90px 0 #333,
|
||||
66px 90px 0 #333,
|
||||
30px 96px 0 #333,
|
||||
42px 96px 0 #333,
|
||||
60px 96px 0 #333,
|
||||
72px 96px 0 #333;
|
||||
}
|
||||
Reference in New Issue
Block a user