mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-26 15:34:33 +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

17
docs/index.html
View File

@@ -43,10 +43,13 @@
</head> </head>
<body> <body>
<div id="nescss" class="wrapper"> <div id="nescss">
<header> <header :class="{ sticky: scrollPos > 50 }">
<div class="brand"> <div class="container">
<div class="nav-brand">
<a href="https://nostalgic-css.github.io/NES.css/">
<h1><i class="snes-jp-logo brand-logo"></i>NES.css</h1> <h1><i class="snes-jp-logo brand-logo"></i>NES.css</h1>
</a>
<p>NES-style CSS Framework.</p> <p>NES-style CSS Framework.</p>
</div> </div>
@@ -59,9 +62,11 @@
<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">
<main class="main-content">
<a class="github-link" href="https://github.com/nostalgic-css/NES.css" target="_blank" @mouseover="startAnimate" @mouseout="stopAnimate"> <a class="github-link" href="https://github.com/nostalgic-css/NES.css" target="_blank" @mouseover="startAnimate" @mouseout="stopAnimate">
<p class="nes-balloon from-right">Fork me<br />on GitHub</p> <p class="nes-balloon from-right">Fork me<br />on GitHub</p>
<i class="nes-octocat" :class="animateOctocat ? 'animate' : ''"></i> <i class="nes-octocat" :class="animateOctocat ? 'animate' : ''"></i>
@@ -193,6 +198,10 @@
<div class="nes-balloon from-right copied-balloon" :style="copiedBalloon"> <div class="nes-balloon from-right copied-balloon" :style="copiedBalloon">
<p>copied!!</p> <p>copied!!</p>
</div> </div>
<!-- FAB Button -->
<button type="button" class="nes-btn is-error scroll-btn" v-show="scrollPos > 500" @click="toTop"><span>&lt;</span></button>
</div>
</div> </div>
</body> </body>
<script src="./script.js"></script> <script src="./script.js"></script>

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;
}
}