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: performance improvement on demo site

Browse Source
This commit is contained in:
BcRikko
2019-02-25 21:28:43 +09:00
parent 5d5e28386b
commit 6e1babdc73
3 changed files with 54 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/index.html
View File

@@ -7,21 +7,19 @@
<meta name="description" content="NES.css is a NES-style CSS Framework." /> <meta name="description" content="NES.css is a NES-style CSS Framework." />
<meta name="keywords" content="html5,css,framework,sass,NES,8bit" /> <meta name="keywords" content="html5,css,framework,sass,NES,8bit" />
<meta name="author" content="© 2018 B.C.Rikko" /> <meta name="author" content="© 2018 B.C.Rikko" />
<meta name="theme-color" content="#212529"/>
<link rel="shortcut icon" type="image/png" href="favicon.png"> <link rel="shortcut icon" type="image/png" href="favicon.png">
<link rel="shortcut icon" sizes="196x196" href="favicon.png"> <link rel="shortcut icon" sizes="196x196" href="favicon.png">
<link rel="apple-touch-icon" href="favicon.png"> <link rel="apple-touch-icon" href="favicon.png">
<title>NES.css - NES-style CSS Framework</title> <title>NES.css - NES-style CSS Framework</title>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" /> <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<link href="./style.css" rel="stylesheet" /> <link href="./style.css" rel="stylesheet" />
<script src="./lib/vue.min.js"></script> <script src="./lib/vue.min.js"></script>
<script src="./lib/dialog-polyfill.js"></script> <script src="./lib/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/dialog-polyfill.css" />
<script src="./lib/highlight.js"></script> <script src="./lib/highlight.js"></script>
<link href="./lib/highlight-theme.css" rel="stylesheet" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:title" content="NES.css" /> <meta property="og:title" content="NES.css" />
@@ -39,6 +37,7 @@
if (window.navigator.userAgent.toLocaleLowerCase().indexOf('trident') !== -1) { if (window.navigator.userAgent.toLocaleLowerCase().indexOf('trident') !== -1) {
window.alert('IE is not supported on this page.') window.alert('IE is not supported on this page.')
} }
</script> </script>
</head> </head>
@@ -67,7 +66,7 @@
<div class="container"> <div class="container">
<main class="main-content"> <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" rel="noopener" @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>
</a> </a>
@@ -83,7 +82,7 @@
<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" rel="noopener">README.md</a>.</p>
</section> </section>
<!-- Usage --> <!-- Usage -->
@@ -121,14 +120,14 @@
<template v-for="member in coreteam"> <template v-for="member in coreteam">
<section class="nes-container is-dark member-card"> <section class="nes-container is-dark member-card">
<div class="avatar"> <div class="avatar">
<img :src="'https://github.com/' + member.github + '.png?size=80'"> <img class="lazy" :data-src="'https://github.com/' + member.github + '.png?size=80'" :alt="'Core Member ' + member.name">
</div> </div>
<div class="profile"> <div class="profile">
<h4 class="name">{{ member.name }}</h4> <h4 class="name">{{ member.name }}</h4>
<p>{{ member.feat }}</p> <p>{{ member.feat }}</p>
<div> <div>
<a :href="'https://github.com/' + member.github" target="_blank"><i class="nes-icon github"></i></a> <a :href="'https://github.com/' + member.github" target="_blank" rel="noopener" aria-label="github"><i class="nes-icon github"></i></a>
<a :href="'https://twitter.com/' + member.twitter" target="_blank"><i class="nes-icon twitter"></i></a> <a :href="'https://twitter.com/' + member.twitter" target="_blank" rel="noopener" aria-label="twitter"><i class="nes-icon twitter"></i></a>
</div> </div>
</div> </div>
</section> </section>
@@ -143,14 +142,14 @@
<template v-for="member in emeriti"> <template v-for="member in emeriti">
<section class="nes-container is-dark member-card"> <section class="nes-container is-dark member-card">
<div class="avatar"> <div class="avatar">
<img :src="'https://github.com/' + member.github + '.png?size=80'"> <img class="lazy" :data-src="'https://github.com/' + member.github + '.png?size=80'" :alt="'Emeriti ' + member.name">
</div> </div>
<div class="profile"> <div class="profile">
<h4 class="name">{{ member.name }}</h4> <h4 class="name">{{ member.name }}</h4>
<p>{{ member.feat }}</p> <p>{{ member.feat }}</p>
<div> <div>
<a :href="'https://github.com/' + member.github" target="_blank"><i class="nes-icon github"></i></a> <a :href="'https://github.com/' + member.github" target="_blank" rel="noopener" aria-label="github"><i class="nes-icon github"></i></a>
<a :href="'https://twitter.com/' + member.twitter" target="_blank"><i class="nes-icon twitter"></i></a> <a :href="'https://twitter.com/' + member.twitter" target="_blank" rel="noopener" aria-label="twitter"><i class="nes-icon twitter"></i></a>
</div> </div>
</div> </div>
</section> </section>
@@ -161,7 +160,7 @@
<h3 class="topic-title"><i class="nes-icon heart"></i>Contributors</h3> <h3 class="topic-title"><i class="nes-icon heart"></i>Contributors</h3>
<template v-for="user in contributors"> <template v-for="user in contributors">
<a class="contributor" :href="'https://github.com/' + user" target="_black"> <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'"> <img class="nes-avatar is-large is-rounded lazy" :data-src="'https://github.com/' + user + '.png?size=64'" src="https://www.gravatar.com/avatar?s=15" :alt="'Contributor ' + user">
<p>{{ user }}</p> <p>{{ user }}</p>
</a> </a>
</template> </template>
@@ -173,12 +172,12 @@
<h2 id="articles"><a href="#articles">#</a>Articles</h2> <h2 id="articles"><a href="#articles">#</a>Articles</h2>
<article class="article-link"> <article class="article-link">
<h3 class="title"> <h3 class="title">
<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://medium.com/@bc_rikko/why-i-created-and-released-nes-css-ee8966bacd09" target="_blank" rel="noopener"><i class="nes-icon medium"></i><span>Why I created and released NES.css</span></a>
</h3> </h3>
</article> </article>
<article class="article-link"> <article class="article-link">
<h3 class="title"> <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> <a href="https://github.blog/2019-01-20-release-radar-december-2018/#nes-css-1-0" target="_blank" rel="noopener"><i class="nes-icon github"></i><span>Release Radar·December 2018|The GitHub Blog</span></a>
</h3> </h3>
</article> </article>
</section> </section>
@@ -188,9 +187,9 @@
<footer> <footer>
<p> <p>
<span>&copy;2018</span> <span>&copy;2018</span>
<a href="https://kuroeveryday.blogspot.com/" target="_blank">Black Everyday Company</a> <a href="https://kuroeveryday.blogspot.com/" target="_blank" rel="noopener">Black Everyday Company</a>
<span>-</span> <span>-</span>
<a href="https://twitter.com/bc_rikko" target="_blank">@bc_rikko</a> <a href="https://twitter.com/bc_rikko" target="_blank" rel="noopener">@bc_rikko</a>
</p> </p>
</footer> </footer>
@@ -205,4 +204,13 @@
</div> </div>
</body> </body>
<script src="./script.js"></script> <script src="./script.js"></script>
<script>
const h = document.querySelector('head');
['./lib/dialog-polyfill.css', './lib/highlight-theme.css'].forEach(a => {
const l = document.createElement('link');
l.href = a;
l.rel = 'stylesheet';
h.appendChild(l);
})
</script>
</html> </html>

25
docs/script.js
View File

@@ -79,32 +79,36 @@ const sampleCollection = [
{ {
title: 'selects', title: 'selects',
showCode: false, showCode: false,
code: `<div class="nes-select"> code: `<label for="default_select">Default select</label>
<select required> <div class="nes-select">
<select required id="default_select">
<option value="" disabled selected hidden>Select...</option> <option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option> <option value="0">To be</option>
<option value="1">Not to be</option> <option value="1">Not to be</option>
</select> </select>
</div> </div>
<label for="success_select">nes-select.is-success</label>
<div class="nes-select is-success"> <div class="nes-select is-success">
<select required> <select required id="success_select">
<option value="" disabled selected hidden>Select...</option> <option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option> <option value="0">To be</option>
<option value="1">Not to be</option> <option value="1">Not to be</option>
</select> </select>
</div> </div>
<label for="warning_select">nes-select.is-warning</label>
<div class="nes-select is-warning"> <div class="nes-select is-warning">
<select required> <select required id="warning_select">
<option value="" disabled selected hidden>Select...</option> <option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option> <option value="0">To be</option>
<option value="1">Not to be</option> <option value="1">Not to be</option>
</select> </select>
</div> </div>
<label for="error_select">nes-select.is-error</label>
<div class="nes-select is-error"> <div class="nes-select is-error">
<select required> <select required id="error_select">
<option value="" disabled selected hidden>Select...</option> <option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option> <option value="0">To be</option>
<option value="1">Not to be</option> <option value="1">Not to be</option>
@@ -575,15 +579,22 @@ new Vue({
[].forEach.call(document.querySelectorAll('dialog'), (a) => { [].forEach.call(document.querySelectorAll('dialog'), (a) => {
dialogPolyfill.registerDialog(a); dialogPolyfill.registerDialog(a);
}); });
setTimeout(() => {
Array.from(document.querySelectorAll('img.lazy')).forEach((img) => {
img.src = img.dataset.src;
img.classList.remove('lazy');
});
}, 500);
}, },
methods: { methods: {
share(media) { share(media) {
const url = (() => { const url = (() => {
switch (media) { switch (media) {
case 'twitter': case 'twitter':
return 'http://twitter.com/share?text=NES.css%EF%BD%9CNES-style%20CSS%20Framework%20%40bc_rikko&url=https://nostalgic-css.github.io/NES.css/'; return 'https://twitter.com/share?text=NES.css%EF%BD%9CNES-style%20CSS%20Framework%20%40bc_rikko&url=https://nostalgic-css.github.io/NES.css/';
case 'facebook': case 'facebook':
return 'http://www.facebook.com/sharer.php?u=https://nostalgic-css.github.io/NES.css/&t=NES.css%EF%BD%9CNES-style%20CSS%20Framework'; return 'https://www.facebook.com/sharer.php?u=https://nostalgic-css.github.io/NES.css/&t=NES.css%EF%BD%9CNES-style%20CSS%20Framework';
case 'linkedin': case 'linkedin':
return 'https://www.linkedin.com/shareArticle?url=https%3A//nostalgic-css.github.io/NES.css/&title=NES.css%EF%BD%9CNES-style%20CSS%20Framework'; return 'https://www.linkedin.com/shareArticle?url=https%3A//nostalgic-css.github.io/NES.css/&title=NES.css%EF%BD%9CNES-style%20CSS%20Framework';
case 'github': case 'github':

12
docs/style.css
View File

@@ -1,3 +1,10 @@
@font-face {
font-family: "Press Start 2P";
src: url(https://fonts.googleapis.com/css?family=Press+Start+2P);
font-style: normal;
font-display: swap;
}
body { body {
padding: 0 2rem; padding: 0 2rem;
margin: 0 2rem; margin: 0 2rem;
@@ -219,6 +226,7 @@ h3.topic-title > i {
} }
.member-card .avatar > img { .member-card .avatar > img {
display: block;
width: 80px; width: 80px;
height: 80px; height: 80px;
border-radius: 50%; border-radius: 50%;
@@ -269,6 +277,10 @@ h3.topic-title > i {
transform: rotateZ(90deg); transform: rotateZ(90deg);
} }
.lazy {
background-color: #006bb3;
}
@media screen and (max-width: calc(980px - 4rem)) { @media screen and (max-width: calc(980px - 4rem)) {
header > .container { header > .container {
margin: 0 4rem; margin: 0 4rem;