mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-25 23:16:43 +02:00
Code Issues Releases Wiki Activity

docs: sticky header and fab

Browse Source
This commit is contained in:
BcRikko
2019-02-25 19:33:15 +09:00
parent 5d610ca047
commit 5d5e28386b
3 changed files with 235 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
docs/index.html
View File

@@ -43,155 +43,164 @@
</head> </head>
<body> <body>
<div id="nescss" class="wrapper"> <div id="nescss">
<header> <header :class="{ sticky: scrollPos > 50 }">
<div class="brand"> <div class="container">
<h1><i class="snes-jp-logo brand-logo"></i>NES.css</h1> <div class="nav-brand">
<p>NES-style CSS Framework.</p> <a href="https://nostalgic-css.github.io/NES.css/">
</div> <h1><i class="snes-jp-logo brand-logo"></i>NES.css</h1>
</a>
<p>NES-style CSS Framework.</p>
</div>
<div class="social-buttons"> <div class="social-buttons">
<p>Share on SNS</p> <p>Share on SNS</p>
<div class="share"> <div class="share">
<a @click="share('twitter')"><i class="nes-icon twitter"></i></a> <a @click="share('twitter')"><i class="nes-icon twitter"></i></a>
<a @click="share('facebook')"><i class="nes-icon facebook"></i></a> <a @click="share('facebook')"><i class="nes-icon facebook"></i></a>
<a @click="share('linkedin')"><i class="nes-icon linkedin"></i></a> <a @click="share('linkedin')"><i class="nes-icon linkedin"></i></a>
<a @click="share('github')"><i class="nes-icon github"></i></a> <a @click="share('github')"><i class="nes-icon github"></i></a>
</div>
</div> </div>
</div> </div>
</header> </header>
<main> <div class="container">
<a class="github-link" href="https://github.com/nostalgic-css/NES.css" target="_blank" @mouseover="startAnimate" @mouseout="stopAnimate"> <main class="main-content">
<p class="nes-balloon from-right">Fork me<br />on GitHub</p> <a class="github-link" href="https://github.com/nostalgic-css/NES.css" target="_blank" @mouseover="startAnimate" @mouseout="stopAnimate">
<i class="nes-octocat" :class="animateOctocat ? 'animate' : ''"></i> <p class="nes-balloon from-right">Fork me<br />on GitHub</p>
</a> <i class="nes-octocat" :class="animateOctocat ? 'animate' : ''"></i>
</a>
<!-- About --> <!-- About -->
<section class="topic"> <section class="topic">
<h2 id="about"><a href="#about">#</a>About</h2> <h2 id="about"><a href="#about">#</a>About</h2>
<p>NES.css is NES-style (8bit-like) CSS Framework.</p> <p>NES.css is NES-style (8bit-like) CSS Framework.</p>
</section> </section>
<!-- Installation --> <!-- Installation -->
<section class="topic"> <section class="topic">
<h2 id="installation"><a href="#installation">#</a>Installation</h2> <h2 id="installation"><a href="#installation">#</a>Installation</h2>
<p>NES.css is available via either npm or Yarn, or a CDN.</p> <p>NES.css is available via either npm or Yarn, or a CDN.</p>
<p>Please read <a href="https://github.com/nostalgic-css/NES.css" target="_blank">README.md</a>.</p> <p>Please read <a href="https://github.com/nostalgic-css/NES.css" target="_blank">README.md</a>.</p>
</section> </section>
<!-- Usage --> <!-- Usage -->
<section class="topic"> <section class="topic">
<h2 id="usage"><a href="#usage">#</a>Usage</h2> <h2 id="usage"><a href="#usage">#</a>Usage</h2>
<p>NES.css only provides components. You will need to define your own layout.</p> <p>NES.css only provides components. You will need to define your own layout.</p>
<section class="showcase" v-for="sample in collection" :key="sample"> <section class="showcase" v-for="sample in collection" :key="sample">
<section class="nes-container with-title"> <section class="nes-container with-title">
<h3 class="title">{{ sample.title | capitalize }}</h3> <h3 class="title">{{ sample.title | capitalize }}</h3>
<div <div
:id="sample.title" :id="sample.title"
class="item" class="item"
v-html="sample.code"> v-html="sample.code">
</div>
<p v-if="sample.description" class="description nes-text">{{ sample.description }}</p>
<p v-if="sample.note" class="note nes-text is-error">{{ sample.note }}</p>
<button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode">&lt;&gt;</button>
</section>
<section class="samplecode" v-show="sample.showCode">
<button type="button" class="nes-btn copycode" @click="copy($event, sample.title)">copy</button>
<pre><code class="html">{{ sample.code }}</code></pre>
</section>
</section>
</section>
<!-- Members -->
<section class="topic">
<h2 id="members"><a href="#members">#</a>Members</h2>
<section class="coreteam">
<h3 class="topic-title"><i class="nes-icon star"></i>Core Team Members</h3>
<p>Here is core team members developing NES.css.</p>
<div class="coreteam-members">
<template v-for="member in coreteam">
<section class="nes-container is-dark member-card">
<div class="avatar">
<img :src="'https://github.com/' + member.github + '.png?size=80'">
</div>
<div class="profile">
<h4 class="name">{{ member.name }}</h4>
<p>{{ member.feat }}</p>
<div>
<a :href="'https://github.com/' + member.github" target="_blank"><i class="nes-icon github"></i></a>
<a :href="'https://twitter.com/' + member.twitter" target="_blank"><i class="nes-icon twitter"></i></a>
</div>
</div>
</section>
</template>
</div> </div>
<p v-if="sample.description" class="description nes-text">{{ sample.description }}</p>
<p v-if="sample.note" class="note nes-text is-error">{{ sample.note }}</p>
<button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode">&lt;&gt;</button>
</section> </section>
<section class="samplecode" v-show="sample.showCode"> <section class="coreteam-emeriti" v-if="emeriti.length > 0">
<button type="button" class="nes-btn copycode" @click="copy($event, sample.title)">copy</button> <h3 class="topic-title"><i class="nes-icon trophy"></i>Core Team Emeriti</h3>
<pre><code class="html">{{ sample.code }}</code></pre> <p>Here we honor some no-longer-active core team members.</p>
<div class="coreteam-members">
<template v-for="member in emeriti">
<section class="nes-container is-dark member-card">
<div class="avatar">
<img :src="'https://github.com/' + member.github + '.png?size=80'">
</div>
<div class="profile">
<h4 class="name">{{ member.name }}</h4>
<p>{{ member.feat }}</p>
<div>
<a :href="'https://github.com/' + member.github" target="_blank"><i class="nes-icon github"></i></a>
<a :href="'https://twitter.com/' + member.twitter" target="_blank"><i class="nes-icon twitter"></i></a>
</div>
</div>
</section>
</template>
</div>
</section>
<section class="contributors">
<h3 class="topic-title"><i class="nes-icon heart"></i>Contributors</h3>
<template v-for="user in contributors">
<a class="contributor" :href="'https://github.com/' + user" target="_black">
<img class="nes-avatar is-large is-rounded" :src="'https://github.com/' + user + '.png?size=64'">
<p>{{ user }}</p>
</a>
</template>
</section> </section>
</section> </section>
</section>
<!-- Members --> <!-- Articles -->
<section class="topic"> <section class="topic">
<h2 id="members"><a href="#members">#</a>Members</h2> <h2 id="articles"><a href="#articles">#</a>Articles</h2>
<section class="coreteam"> <article class="article-link">
<h3 class="topic-title"><i class="nes-icon star"></i>Core Team Members</h3> <h3 class="title">
<p>Here is core team members developing NES.css.</p> <a href="https://medium.com/@bc_rikko/why-i-created-and-released-nes-css-ee8966bacd09" target="_blank"><i class="nes-icon medium"></i><span>Why I created and released NES.css</span></a>
</h3>
<div class="coreteam-members"> </article>
<template v-for="member in coreteam"> <article class="article-link">
<section class="nes-container is-dark member-card"> <h3 class="title">
<div class="avatar"> <a href="https://github.blog/2019-01-20-release-radar-december-2018/#nes-css-1-0" target="_blank"><i class="nes-icon github"></i><span>Release Radar·December 2018|The GitHub Blog</span></a>
<img :src="'https://github.com/' + member.github + '.png?size=80'"> </h3>
</div> </article>
<div class="profile">
<h4 class="name">{{ member.name }}</h4>
<p>{{ member.feat }}</p>
<div>
<a :href="'https://github.com/' + member.github" target="_blank"><i class="nes-icon github"></i></a>
<a :href="'https://twitter.com/' + member.twitter" target="_blank"><i class="nes-icon twitter"></i></a>
</div>
</div>
</section>
</template>
</div>
</section> </section>
<section class="coreteam-emeriti" v-if="emeriti.length > 0">
<h3 class="topic-title"><i class="nes-icon trophy"></i>Core Team Emeriti</h3>
<p>Here we honor some no-longer-active core team members.</p>
<div class="coreteam-members"> </main>
<template v-for="member in emeriti">
<section class="nes-container is-dark member-card">
<div class="avatar">
<img :src="'https://github.com/' + member.github + '.png?size=80'">
</div>
<div class="profile">
<h4 class="name">{{ member.name }}</h4>
<p>{{ member.feat }}</p>
<div>
<a :href="'https://github.com/' + member.github" target="_blank"><i class="nes-icon github"></i></a>
<a :href="'https://twitter.com/' + member.twitter" target="_blank"><i class="nes-icon twitter"></i></a>
</div>
</div>
</section>
</template>
</div>
</section>
<section class="contributors">
<h3 class="topic-title"><i class="nes-icon heart"></i>Contributors</h3>
<template v-for="user in contributors">
<a class="contributor" :href="'https://github.com/' + user" target="_black">
<img class="nes-avatar is-large is-rounded" :src="'https://github.com/' + user + '.png?size=64'">
<p>{{ user }}</p>
</a>
</template>
</section>
</section>
<!-- Articles --> <footer>
<section class="topic"> <p>
<h2 id="articles"><a href="#articles">#</a>Articles</h2> <span>&copy;2018</span>
<article class="article-link"> <a href="https://kuroeveryday.blogspot.com/" target="_blank">Black Everyday Company</a>
<h3 class="title"> <span>-</span>
<a href="https://medium.com/@bc_rikko/why-i-created-and-released-nes-css-ee8966bacd09" target="_blank"><i class="nes-icon medium"></i><span>Why I created and released NES.css</span></a> <a href="https://twitter.com/bc_rikko" target="_blank">@bc_rikko</a>
</h3> </p>
</article> </footer>
<article class="article-link">
<h3 class="title">
<a href="https://github.blog/2019-01-20-release-radar-december-2018/#nes-css-1-0" target="_blank"><i class="nes-icon github"></i><span>Release Radar·December 2018|The GitHub Blog</span></a>
</h3>
</article>
</section>
</main> <!-- Copied balloon -->
<div class="nes-balloon from-right copied-balloon" :style="copiedBalloon">
<p>copied!!</p>
</div>
<footer> <!-- FAB Button -->
<p> <button type="button" class="nes-btn is-error scroll-btn" v-show="scrollPos > 500" @click="toTop"><span>&lt;</span></button>
<span>&copy;2018</span>
<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>
<!-- Copied balloon -->
<div class="nes-balloon from-right copied-balloon" :style="copiedBalloon">
<p>copied!!</p>
</div> </div>
</div> </div>
</body> </body>

13
docs/script.js
View File

@@ -557,6 +557,7 @@ new Vue({
top: 0, top: 0,
left: 0, left: 0,
}, },
scrollPos: 0,
}; };
}, },
filters: { filters: {
@@ -567,6 +568,9 @@ new Vue({
}, },
}, },
mounted() { mounted() {
document.addEventListener('scroll', () => {
this.scrollPos = document.documentElement.scrollTop || document.body.scrollTop;
});
hljs.initHighlightingOnLoad(); hljs.initHighlightingOnLoad();
[].forEach.call(document.querySelectorAll('dialog'), (a) => { [].forEach.call(document.querySelectorAll('dialog'), (a) => {
dialogPolyfill.registerDialog(a); dialogPolyfill.registerDialog(a);
@@ -620,5 +624,14 @@ new Vue({
this.copiedBalloon.display = 'none'; this.copiedBalloon.display = 'none';
}, 1000); }, 1000);
}, },
toTop() {
const scrolling = setInterval(() => {
if (window.scrollY > 0) {
window.scrollBy(0, -window.scrollY / 10);
} else {
clearInterval(scrolling);
}
}, 10);
},
}, },
}); });

95
docs/style.css
View File

@@ -1,32 +1,77 @@
body { body {
padding: 0 2rem; padding: 0 2rem;
margin: 2rem; margin: 0 2rem;
} }
.wrapper { #nescss > .container {
max-width: 980px; max-width: 980px;
margin: 0 auto; margin: 0 auto;
margin-top: 150px;
} }
/* Header */
header { header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9;
border-bottom: 4px solid #D3D3D3;
background-color: white;
}
header > .container {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
border-bottom: 4px solid #D3D3D3; max-width: 980px;
} margin: 0 auto;
header > .brand i.brand-logo { padding-top: 1rem;
margin-right: 1rem; transition: all 0.2s ease;
} }
header > .social-buttons { header > .container > .nav-brand {
margin-left: 2rem; margin-right: auto;
} }
header > .social-buttons > p { header > .container > .social-button {
margin-left: auto;
}
.nav-brand .brand-logo {
margin-right: 1rem;
}
.nav-brand > a {
color: #212529;
text-decoration: none;
}
.social-buttons p {
margin-bottom: 0; margin-bottom: 0;
} }
/* Header-sticky */
header.sticky > .container {
font-size: 0.8rem;
padding: 0;
align-items: center;
}
header.sticky .nav-brand h1 {
margin: 0;
}
header.sticky .nav-brand p {
display: none;
margin-bottom: 0;
font-size: 0.6rem;
}
/* Main */
.main-content {
margin-bottom: 4rem;
}
/* Footer */
footer { footer {
margin-top: 3rem;
text-align: center; text-align: center;
margin-bottom: 2rem;
} }
footer a { footer a {
color: #333; color: #333;
@@ -38,7 +83,7 @@ h2 > a {
} }
.topic { .topic {
margin-top: 3rem; margin-bottom: 3rem;
} }
/* github link */ /* github link */
@@ -212,12 +257,34 @@ h3.topic-title > i {
margin-left: 1rem; margin-left: 1rem;
} }
/* Scroll back to top */
.scroll-btn {
position: fixed;
bottom: 2rem;
right: 2rem;
box-shadow: 0 5px 20px rgba(0,0,0,.6);
}
.scroll-btn > span {
display: block;
transform: rotateZ(90deg);
}
@media screen and (max-width: calc(980px - 4rem)) {
header > .container {
margin: 0 4rem;
}
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
body { body {
margin: 2rem 0.5rem; margin: 2rem 0.5rem;
padding: 0; padding: 0;
} }
header > .container {
margin: 0 0.5rem;
}
.github-link { .github-link {
display: none; display: none;
} }
@@ -226,3 +293,9 @@ h3.topic-title > i {
max-width: 60%; max-width: 60%;
} }
} }
@media screen and (max-width: 580px) {
#nescss > .container {
margin-top: 190px;
}
}