Fork me
on GitHub
#About
-NES.css is NES-style (8bit-like) CSS Framework.
-#About
+NES.css is NES-style (8bit-like) CSS Framework.
+#Installation
-NES.css is available via either npm or Yarn, or a CDN.
-Please read README.md.
-#Installation
+NES.css is available via either npm or Yarn, or a CDN.
+Please read README.md.
+#Usage
-NES.css only provides components. You will need to define your own layout.
+ +#Usage
+NES.css only provides components. You will need to define your own layout.
-{{ sample.title | capitalize }}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+ ![]()
+
-
-
-
-
-
+
+
+
+
-
-
-
- ![]()
-
-
+
-
-
-
-
-
-
-
+
-
+
+
diff --git a/docs/script.js b/docs/script.js
index e455628..1eee4d5 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -557,6 +557,7 @@ new Vue({
top: 0,
left: 0,
},
+ scrollPos: 0,
};
},
filters: {
@@ -567,6 +568,9 @@ new Vue({
},
},
mounted() {
+ document.addEventListener('scroll', () => {
+ this.scrollPos = document.documentElement.scrollTop || document.body.scrollTop;
+ });
hljs.initHighlightingOnLoad();
[].forEach.call(document.querySelectorAll('dialog'), (a) => {
dialogPolyfill.registerDialog(a);
@@ -620,5 +624,14 @@ new Vue({
this.copiedBalloon.display = 'none';
}, 1000);
},
+ toTop() {
+ const scrolling = setInterval(() => {
+ if (window.scrollY > 0) {
+ window.scrollBy(0, -window.scrollY / 10);
+ } else {
+ clearInterval(scrolling);
+ }
+ }, 10);
+ },
},
});
diff --git a/docs/style.css b/docs/style.css
index d8f76f7..9806108 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -1,32 +1,77 @@
body {
padding: 0 2rem;
- margin: 2rem;
+ margin: 0 2rem;
}
-.wrapper {
+#nescss > .container {
max-width: 980px;
margin: 0 auto;
+ margin-top: 150px;
}
+/* 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;
align-items: baseline;
- border-bottom: 4px solid #D3D3D3;
-}
-header > .brand i.brand-logo {
- margin-right: 1rem;
+ max-width: 980px;
+ margin: 0 auto;
+ padding-top: 1rem;
+ transition: all 0.2s ease;
}
-header > .social-buttons {
- margin-left: 2rem;
+header > .container > .nav-brand {
+ 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;
}
+/* 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 {
- margin-top: 3rem;
text-align: center;
+ margin-bottom: 2rem;
}
footer a {
color: #333;
@@ -38,7 +83,7 @@ h2 > a {
}
.topic {
- margin-top: 3rem;
+ margin-bottom: 3rem;
}
/* github link */
@@ -212,12 +257,34 @@ h3.topic-title > i {
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) {
body {
margin: 2rem 0.5rem;
padding: 0;
}
+ header > .container {
+ margin: 0 0.5rem;
+ }
+
.github-link {
display: none;
}
@@ -226,3 +293,9 @@ h3.topic-title > i {
max-width: 60%;
}
}
+
+@media screen and (max-width: 580px) {
+ #nescss > .container {
+ margin-top: 190px;
+ }
+}
{{ sample.title | capitalize }}
+
+
+ {{ sample.description }}
+{{ sample.note }}
+ +{{ sample.code }}#Members
+Core Team Members
+Here is core team members developing NES.css.
+ + -{{ sample.description }}
-{{ sample.note }}
-{{ sample.code }}Core Team Emeriti
+Here we honor some no-longer-active core team members.
+ + +Contributors
+ + +{{ user }}
+ +#Members
-Core Team Members
-Here is core team members developing NES.css.
- - + +#Articles
++ Release Radar·December 2018|The GitHub Blog +
+Core Team Emeriti
-Here we honor some no-longer-active core team members.
- -Contributors
- - -{{ user }}
- - -#Articles
-- Why I created and released NES.css -
-- Release Radar·December 2018|The GitHub Blog -
-
+
-
-
-
- copied!!
+
-
copied!!
+ +