mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-09-02 02:22:37 +02:00
docs: update demo page
This commit is contained in:
BcRikko
164
docs/index.html
Normal file
164
docs/index.html
Normal file
@@ -0,0 +1,164 @@
|
||||
<!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" />
|
||||
<meta name="description" content="NES.css is a NES-style CSS Framework." />
|
||||
<meta name="keywords" content="html5,css,framework,sass,NES,8bit" />
|
||||
<meta name="author" content="© 2018 B.C.Rikko" />
|
||||
<link rel="shortcut icon" type="image/png" href="favicon.png">
|
||||
<link rel="shortcut icon" sizes="196x196" href="favicon.png">
|
||||
<link rel="apple-touch-icon" href="favicon.png">
|
||||
|
||||
<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="./style.css" rel="stylesheet" />
|
||||
<script src="./lib/vue.min.js"></script>
|
||||
|
||||
<script async src="./lib/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./lib/dialog-polyfill.css" />
|
||||
<script src="./lib/highlight.js"></script>
|
||||
<link href="./lib/highlight-theme.css" rel="stylesheet" />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="NES.css" />
|
||||
<meta property="og:url" content="https://nostalgic-css.github.io/NES.css/" />
|
||||
<meta property="og:description" content="NES-style CSS Framework | ファミコン風CSSフレームワーク" />
|
||||
<meta property="og:image" content="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@bc_rikko" />
|
||||
<meta name="twitter:creator" content="@bc_rikko" />
|
||||
<meta name="twitter:image" content="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" />
|
||||
|
||||
<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>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<h1><i class="snes-jp-logo brand"></i>NES.css</h1>
|
||||
<p>NES-style CSS Framework.</p>
|
||||
</header>
|
||||
<main id="nescss">
|
||||
<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>
|
||||
<i class="nes-octocat" :class="animateOctocat ? 'animate' : ''"></i>
|
||||
</a>
|
||||
|
||||
<!-- About -->
|
||||
<section class="topic">
|
||||
<h2 id="about"><a href="#about">#</a>About</h2>
|
||||
<p>NES.css is NES-style (8bit-like) CSS Framework.</p>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Installation -->
|
||||
<section class="topic">
|
||||
<h2 id="installation"><a href="#installation">#</a>Installation</h2>
|
||||
<p>NES.css is available via either npm (preferred) or Yarn, or a CDN.</p>
|
||||
<p>Please read <a href="https://github.com/nostalgic-css/NES.css">README.md</a>.</p>
|
||||
</section>
|
||||
|
||||
<!-- Usage -->
|
||||
<section class="topic">
|
||||
<h2 id="usage"><a href="#usage">#</a>Usage</h2>
|
||||
<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="nes-container with-title">
|
||||
<h3 class="title">{{ sample.title | capitalize }}</h3>
|
||||
<div
|
||||
:id="sample.title"
|
||||
class="item"
|
||||
v-html="sample.code">
|
||||
</div>
|
||||
<button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode"><></button>
|
||||
</section>
|
||||
<section class="samplecode" v-show="sample.showCode">
|
||||
<button type="button" class="nes-btn copycode" @click="copy(sample.title)">copy</button>
|
||||
<pre><code class="html">{{ sample.code }}</code></pre>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
</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">
|
||||
<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 class="articles">
|
||||
<h2 id="articles"><a href="#articles">#</a>Articles</h2>
|
||||
<article v-for="article in articles">
|
||||
<h3><a :href="article.url" target="_blank"><i class="nes-icon" :class="article.icon"></i>{{ article.title }}</a></h3>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
<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>
|
||||
</div>
|
||||
</body>
|
||||
<script src="./script.js"></script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user