mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-08-16 11:23:56 +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>
|
||||||
2
docs/lib/dialog-polyfill.css
Normal file
2
docs/lib/dialog-polyfill.css
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
/* Copyright (c) 2013 The Chromium Authors. All rights reserved. */
|
||||||
|
._dialog_overlay,dialog+.backdrop{right:0;bottom:0;left:0;position:fixed}dialog{position:absolute;right:0;left:0;display:block;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;padding:1em;margin:auto;color:#000;background:#fff;border:solid}dialog:not([open]){display:none}dialog+.backdrop{top:0;background:rgba(0,0,0,.1)}._dialog_overlay{top:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}
|
||||||
4
docs/lib/dialog-polyfill.js
Normal file
4
docs/lib/dialog-polyfill.js
Normal file
File diff suppressed because one or more lines are too long
5
docs/lib/highlight-theme.css
Normal file
5
docs/lib/highlight-theme.css
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
/*
|
||||||
|
* Visual Studio 2015 dark style
|
||||||
|
* Author: Nicolas LLOBERA <nllobera@gmail.com>
|
||||||
|
*/
|
||||||
|
.hljs{display:block;overflow-x:auto;padding:.5em;background:#1E1E1E;color:#DCDCDC}.hljs-addition,.hljs-deletion{display:inline-block;width:100%}.hljs-keyword,.hljs-link,.hljs-literal,.hljs-name,.hljs-symbol{color:#569CD6}.hljs-link{text-decoration:underline}.hljs-built_in,.hljs-type{color:#4EC9B0}.hljs-class,.hljs-number{color:#B8D7A3}.hljs-meta-string,.hljs-string{color:#D69D85}.hljs-regexp,.hljs-template-tag{color:#9A5334}.hljs-formula,.hljs-function,.hljs-params,.hljs-subst,.hljs-title{color:#DCDCDC}.hljs-comment,.hljs-quote{color:#57A64A;font-style:italic}.hljs-doctag{color:#608B4E}.hljs-meta,.hljs-meta-keyword,.hljs-tag{color:#9B9B9B}.hljs-template-variable,.hljs-variable{color:#BD63C5}.hljs-attr,.hljs-attribute,.hljs-builtin-name{color:#9CDCFE}.hljs-section{color:gold}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-bullet,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-selector-tag{color:#D7BA7D}.hljs-addition{background-color:#144212}.hljs-deletion{background-color:#600}
|
||||||
2
docs/lib/highlight.js
Normal file
2
docs/lib/highlight.js
Normal file
File diff suppressed because one or more lines are too long
6
docs/lib/vue.min.js
vendored
Normal file
6
docs/lib/vue.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
217
docs/script.js
Normal file
217
docs/script.js
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
const sampleCollection = [
|
||||||
|
{
|
||||||
|
title: "buttons",
|
||||||
|
showCode: false,
|
||||||
|
code: `<a class="nes-btn">Normal</a>
|
||||||
|
|
||||||
|
<button type="button" class="nes-btn is-primary">Primary</button>
|
||||||
|
<button type="button" class="nes-btn is-success">Success</button>
|
||||||
|
<button type="button" class="nes-btn is-warning">Warning</button>
|
||||||
|
<button type="button" class="nes-btn is-error">Error</button>
|
||||||
|
<button type="button" class="nes-btn is-disabled">Disabled</button>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "radios",
|
||||||
|
showCode: false,
|
||||||
|
code: `<label>
|
||||||
|
<input type="radio" class="nes-radio" name="answer" checked />
|
||||||
|
<span>Yes</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<input type="radio" class="nes-radio" name="answer" />
|
||||||
|
<span>No</span>
|
||||||
|
</label>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "checkboxes",
|
||||||
|
showCode: false,
|
||||||
|
code: `<label>
|
||||||
|
<input type="checkbox" class="nes-checkbox" checked />
|
||||||
|
<span>Enable</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div style="background-color:#212529; padding: 1rem;">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" class="nes-checkbox is-dark" checked />
|
||||||
|
<span>Dark</span>
|
||||||
|
</label>
|
||||||
|
</div>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Inputs",
|
||||||
|
showCode: false,
|
||||||
|
code: `<div class="nes-field">
|
||||||
|
<label for="name_field">Your name</label>
|
||||||
|
<input type="text" id="name_field" class="nes-input">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nes-field is-inline">
|
||||||
|
<label for="inline_field">.input.is-success</label>
|
||||||
|
<input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nes-field is-inline">
|
||||||
|
<label for="warning_field">.input.is-warning</label>
|
||||||
|
<input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nes-field is-inline">
|
||||||
|
<label for="error_field">.input.is-error</label>
|
||||||
|
<input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css">
|
||||||
|
</div>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Textarea",
|
||||||
|
showCode: false,
|
||||||
|
code: `<label for="textarea_field">Textarea</label>
|
||||||
|
<textarea id="textarea_field" class="nes-textarea"></textarea>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Selects",
|
||||||
|
showCode: false,
|
||||||
|
code: `<div class="nes-select">
|
||||||
|
<select required>
|
||||||
|
<option value="" disabled selected hidden>Select...</option>
|
||||||
|
<option value="0">To be</option>
|
||||||
|
<option value="1">Not to be</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nes-select is-success">
|
||||||
|
<select required>
|
||||||
|
<option value="" disabled selected hidden>Select...</option>
|
||||||
|
<option value="0">To be</option>
|
||||||
|
<option value="1">Not to be</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nes-select is-warning">
|
||||||
|
<select required>
|
||||||
|
<option value="" disabled selected hidden>Select...</option>
|
||||||
|
<option value="0">To be</option>
|
||||||
|
<option value="1">Not to be</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nes-select is-error">
|
||||||
|
<select required>
|
||||||
|
<option value="" disabled selected hidden>Select...</option>
|
||||||
|
<option value="0">To be</option>
|
||||||
|
<option value="1">Not to be</option>
|
||||||
|
</select>
|
||||||
|
</div>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "containers",
|
||||||
|
showCode: false,
|
||||||
|
code: `<div class="nes-container with-title is-centered">
|
||||||
|
<p class="title">Container.is-centered</p>
|
||||||
|
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nes-container is-dark with-title">
|
||||||
|
<p class="title">Container.is-dark</p>
|
||||||
|
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nes-container is-rounded">
|
||||||
|
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nes-container is-rounded is-dark">
|
||||||
|
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||||
|
</div>`
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const coreteam = [
|
||||||
|
{
|
||||||
|
name: "B.C.Rikko",
|
||||||
|
feat: "Creator of NES.css",
|
||||||
|
github: "BcRikko",
|
||||||
|
twitter: "bc_rikko"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Igor Guastalla",
|
||||||
|
feat: "Create icons",
|
||||||
|
github: "guastallaigor",
|
||||||
|
twitter: "guastallaigor"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const emeriti = [
|
||||||
|
{
|
||||||
|
name: "Trezy",
|
||||||
|
feat: "Setup DevOps",
|
||||||
|
github: "trezy",
|
||||||
|
twitter: "TrezyCodes"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Abdullah Samman",
|
||||||
|
feat: "Setup test suite",
|
||||||
|
github: "evexoio",
|
||||||
|
twitter: "evexoio"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// curl https://api.github.com/repos/nostalgic-css/NES.css/contributors | jq '.[].login'
|
||||||
|
const contributors = [ "4k1k0", "sombreroEnPuntas", "Divoolej", "soph-iest", "montezume", "sazzadsazib", "KeevanDance", "jdvivar", "IngwiePhoenix", "jjspace", "Baldomo", "DanSnow", "ernestomancebo", "Ilyeo", "Kartones", "rrj-dev", "vicainelli", "stewartrule", "kenshinji", "youngkaneda", "Takumi0901", "loo41", "alexgleason", "agarzola", "fleeting", "JamesIves"];
|
||||||
|
|
||||||
|
const articles = [
|
||||||
|
{
|
||||||
|
icon: 'medium',
|
||||||
|
title: 'Why I created and released NES.css',
|
||||||
|
url: 'https://medium.com/@bc_rikko/why-i-created-and-released-nes-css-ee8966bacd09'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'github',
|
||||||
|
title: 'Release Radar · December 2018 | The GitHub Blog',
|
||||||
|
url: 'https://github.blog/2019-01-20-release-radar-december-2018/#nes-css-1-0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: "#nescss",
|
||||||
|
data: function() {
|
||||||
|
return {
|
||||||
|
collection: sampleCollection,
|
||||||
|
coreteam: coreteam,
|
||||||
|
emeriti: emeriti,
|
||||||
|
contributors: contributors,
|
||||||
|
articles: articles,
|
||||||
|
animateOctocat: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
capitalize: function(val) {
|
||||||
|
if (!val) return "";
|
||||||
|
val = val.toString();
|
||||||
|
return val.charAt(0).toUpperCase() + val.slice(1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
hljs.initHighlightingOnLoad();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
copy(id) {
|
||||||
|
const fake = document.createElement("textarea");
|
||||||
|
fake.value = this.collection.find(a => a.title === id).code;
|
||||||
|
fake.setAttribute("readonly", "");
|
||||||
|
Object.assign(fake.style, {
|
||||||
|
position: "absolute",
|
||||||
|
left: "-9999px"
|
||||||
|
});
|
||||||
|
this.$el.appendChild(fake);
|
||||||
|
fake.select();
|
||||||
|
document.execCommand("copy");
|
||||||
|
this.$el.removeChild(fake);
|
||||||
|
},
|
||||||
|
startAnimate() {
|
||||||
|
this.animateOctocat = true;
|
||||||
|
},
|
||||||
|
stopAnimate() {
|
||||||
|
this.animateOctocat = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
153
docs/style.css
Normal file
153
docs/style.css
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
body {
|
||||||
|
padding: 0 2rem;
|
||||||
|
margin: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
max-width: 980px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header i.brand {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-top: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
footer a {
|
||||||
|
color: #333;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 > a {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topic {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* github link */
|
||||||
|
.github-link {
|
||||||
|
position: fixed;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
z-index: 999;
|
||||||
|
display: flex;
|
||||||
|
height: 100px;
|
||||||
|
color: #333;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.github-link:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.github-link > p.nes-balloon {
|
||||||
|
align-self: flex-start;
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.github-link > i.nes-octocat {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Showcase */
|
||||||
|
section.showcase {
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
section.showcase > section.nes-container {
|
||||||
|
padding-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
section.showcase > section.nes-container,
|
||||||
|
section.showcase > section.samplecode {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.nes-btn.showcode {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
bottom: 0px;
|
||||||
|
right: -4px;
|
||||||
|
}
|
||||||
|
.nes-btn.copycode {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
top: 0;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.showcase > section.samplecode > pre code {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-bottom: -1rem;
|
||||||
|
}
|
||||||
|
.item > * {
|
||||||
|
margin-bottom: 1.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Containers */
|
||||||
|
.item.containers > .nes-container {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Topic */
|
||||||
|
h3.topic-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3.topic-title > i {
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* coreteam */
|
||||||
|
.coreteam-members {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.nes-container.member-card {
|
||||||
|
display: flex;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
width: 470px;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card .avatar > img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.member-card > .profile {
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
.member-card > .profile > .name {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contributors */
|
||||||
|
.contributor {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.contributor > p {
|
||||||
|
margin: .5rem;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.contributor img.nes-avatar {
|
||||||
|
transition: all .4s;
|
||||||
|
}
|
||||||
|
.contributor:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Articles */
|
||||||
|
|
||||||
1085
index.html
1085
index.html
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user