Showing preview only (275K chars total). Download the full file or copy to clipboard to get everything.
Repository: nostalgic-css/NES.css
Branch: develop
Commit: b1cc9944aae3
Files: 149
Total size: 245.3 KB
Directory structure:
gitextract_kqv882sr/
├── .circleci/
│ └── config.yml
├── .editorconfig
├── .github/
│ ├── CODE_OF_CONDUCT-es.md
│ ├── CODE_OF_CONDUCT-jp.md
│ ├── CODE_OF_CONDUCT-pt-BR.md
│ ├── CODE_OF_CONDUCT-zh-CN.md
│ ├── CONTRIBUTING-es.md
│ ├── CONTRIBUTING-jp.md
│ ├── CONTRIBUTING-ko.md
│ ├── CONTRIBUTING-pt-BR.md
│ ├── CONTRIBUTING-zh-CN.md
│ ├── CONTRUBUTING-ru.md
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── README-es.md
│ ├── README-fr.md
│ ├── README-jp.md
│ ├── README-pt-BR.md
│ ├── README-ru.md
│ └── README-zh-CN.md
├── .gitignore
├── .npmignore
├── .prettierignore
├── .storybook/
│ ├── addons.js
│ ├── config.js
│ ├── preview-head.html
│ └── webpack.config.js
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── commitlint.config.js
├── docs/
│ ├── index.html
│ ├── lib/
│ │ ├── dialog-polyfill.css
│ │ ├── dialog-polyfill.js
│ │ ├── highlight-theme.css
│ │ └── highlight.js
│ ├── script.js
│ └── style.css
├── package.json
├── scripts/
│ ├── getBuildData.js
│ ├── getFileAsDataURI.js
│ ├── scssFunctions.js
│ └── updatePackageHeader.js
├── scss/
│ ├── base/
│ │ ├── _index.scss
│ │ ├── color-palette.scss
│ │ ├── generic.scss
│ │ ├── reboot.scss
│ │ └── variables.scss
│ ├── components/
│ │ └── _index.scss
│ ├── elements/
│ │ ├── _index.scss
│ │ ├── avatar.scss
│ │ ├── badges.scss
│ │ ├── balloons.scss
│ │ ├── buttons.scss
│ │ ├── containers.scss
│ │ ├── dialogs.scss
│ │ ├── lists.scss
│ │ ├── progress.scss
│ │ ├── tables.scss
│ │ └── text.scss
│ ├── form/
│ │ ├── _index.scss
│ │ ├── checkboxes.scss
│ │ ├── inputs.scss
│ │ ├── radios.scss
│ │ └── selects.scss
│ ├── helpers/
│ │ ├── _index.scss
│ │ └── pointer.scss
│ ├── icons/
│ │ ├── _index.scss
│ │ ├── close.scss
│ │ ├── coin.scss
│ │ ├── facebook.scss
│ │ ├── github.scss
│ │ ├── gmail.scss
│ │ ├── google.scss
│ │ ├── heart.scss
│ │ ├── icons.scss
│ │ ├── instagram.scss
│ │ ├── like.scss
│ │ ├── linkedin.scss
│ │ ├── medium.scss
│ │ ├── reddit.scss
│ │ ├── star.scss
│ │ ├── trophy.scss
│ │ ├── twitch.scss
│ │ ├── twitter.scss
│ │ ├── whatsapp.scss
│ │ └── youtube.scss
│ ├── nes-core.scss
│ ├── nes.scss
│ ├── pixel-arts/
│ │ ├── _index.scss
│ │ ├── ash.scss
│ │ ├── bcrikko.scss
│ │ ├── bulbasaur.scss
│ │ ├── charmander.scss
│ │ ├── kirby.scss
│ │ ├── mario.scss
│ │ ├── nes-icon.scss
│ │ ├── nes-jp-icon.scss
│ │ ├── octocat.scss
│ │ ├── phone.scss
│ │ ├── pokeball.scss
│ │ ├── smartphone.scss
│ │ ├── snes-icon.scss
│ │ ├── snes-jp-icon.scss
│ │ └── squirtle.scss
│ └── utilities/
│ ├── _index.scss
│ ├── animations.scss
│ ├── fill-gaps.scss
│ ├── icon-mixin.scss
│ ├── rounded-corners-mixin.scss
│ └── visually-hidden.scss
├── sketch/
│ └── NES-css-index.sketch
└── story/
├── _helpers/
│ ├── icons.js
│ └── shared.js
├── avatars/
│ ├── avatars.stories.js
│ └── avatars.template.js
├── badge/
│ ├── badge.stories.js
│ └── badge.template.js
├── balloons/
│ ├── balloons.stories.js
│ └── balloons.template.js
├── buttons/
│ ├── buttons.stories.js
│ └── buttons.template.js
├── containers/
│ ├── containers.stories.js
│ └── containers.template.js
├── dialogs/
│ ├── dialogs.stories.js
│ └── dialogs.template.js
├── icons/
│ ├── icons.stories.js
│ ├── icons.template.js
│ ├── reactions.template.js
│ └── sprites.template.js
├── inputs/
│ ├── checkboxes.template.js
│ ├── input.template.js
│ ├── inputs.stories.js
│ └── radio.template.js
├── lists/
│ ├── lists.stories.js
│ └── lists.template.js
├── progress/
│ ├── progress.stories.js
│ └── progress.template.js
├── select/
│ ├── select.stories.js
│ └── select.template.js
├── table/
│ ├── table.stories.js
│ └── table.template.js
├── text/
│ ├── text.stories.js
│ └── text.template.js
└── textarea/
├── textarea.stories.js
└── textarea.template.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .circleci/config.yml
================================================
orbs:
node: circleci/node@4.0.1
version: 2.1
defaults: &defaults
working_directory: ~/app
supported-node-versions: &supported-node-versions
node-version: ["10.22.1", "12.18.4", "14.13.0"]
jobs:
commitlint:
docker:
- image: secretbase/circleci-commitlint:1.0.2
working_directory: ~/app
environment:
CIRCLE_COMPARE_URL: << pipeline.project.git_url >>/compare/<< pipeline.git.base_revision >>..<<pipeline.git.revision>>
steps:
- checkout
- run:
name: Lint commit messages
command: /bin/sh /.scripts/commitlint_range.sh
checkout:
<<: *defaults
docker:
- image: cimg/node:lts
steps:
- restore_cache:
name: Restore Repository Cache
keys:
- repo-{{ .Branch }}-{{ .Environment.CIRCLE_SHA1 }}
- repo-{{ .Branch }}
- repo-master
- repo-
- checkout
- save_cache:
name: Save Repository Cache
key: repo-{{ .Branch }}-{{ .Environment.CIRCLE_SHA1 }}
paths:
- .
- persist_to_workspace:
root: .
paths:
- .
install-dependencies:
<<: *defaults
parameters:
node-version:
type: string
docker:
- image: "cimg/node:<< parameters.node-version >>"
steps:
- attach_workspace:
at: .
- restore_cache:
name: Restore npm Package Cache
keys:
- "npm-<< parameters.node-version >>-{{ checksum \"package-lock.json\" }}"
- run:
name: Move node_modules to correct location for install
command: "[ ! -d \"node_modules_<< parameters.node-version >>\" ] || mv \"node_modules_<< parameters.node-version >>\" node_modules"
- run:
name: Install Dependencies
command: npm install
- run:
name: Move node_modules to correct location for cache
command: mv node_modules "node_modules_<< parameters.node-version >>"
- save_cache:
name: Save npm Package Cache
key: "npm-<< parameters.node-version >>-{{ checksum \"package-lock.json\" }}"
paths:
- "node_modules_<< parameters.node-version >>"
- persist_to_workspace:
root: .
paths:
- "node_modules_<< parameters.node-version >>"
build:
<<: *defaults
docker:
- image: "cimg/node:lts"
steps:
- checkout
- restore_cache:
name: Restore npm Package Cache
keys:
- "npm-{{ checksum \"package-lock.json\" }}"
- run:
name: Install Dependencies
command: npm install
- run:
name: Build the Framework
command: npm run build
- save_cache:
name: Save Build Cache
key: build-{{ .Branch }}-{{ .Environment.CIRCLE_SHA1 }}
paths:
- css
- save_cache:
name: Save npm Package Cache
key: "npm-{{ checksum \"package-lock.json\" }}"
paths:
- "node_modules"
- persist_to_workspace:
root: .
paths:
- css
- store_artifacts:
path: css
build-in-all-supported-versions-of-node:
<<: *defaults
parameters:
node-version:
type: string
docker:
- image: "cimg/node:<< parameters.node-version >>"
steps:
- attach_workspace:
at: .
- run:
name: Move node_modules to correct location for build
command: "[ ! -d \"node_modules_<< parameters.node-version >>\" ] || mv \"node_modules_<< parameters.node-version >>\" node_modules"
- run:
name: Build the Framework
command: npm run build
- store_artifacts:
path: css
lint:
<<: *defaults
docker:
- image: "cimg/node:lts"
steps:
- attach_workspace:
at: .
- run:
command: npm i -D stylelint-config-prettier stylelint-config-recess-order stylelint-config-standard stylelint-prettier stylelint-scss
- run:
name: Lint styles
command: npx stylelint scss/**/*.scss "--fix"
# test:
# <<: *defaults
# steps:
# - attach_workspace:
# at: .
# - run:
# name: Add Yarn Binary Folder To $PATH
# command: export PATH="$PATH:`yarn global bin`"
# - run:
# name: Run tests
# command: yarn test
# coverage:
# <<: *defaults
# steps:
# - attach_workspace:
# at: .
# - run:
# name: Add Yarn Binary Folder To $PATH
# command: export PATH="$PATH:`yarn global bin`"
# - run:
# name: Generate and upload coverage report
# command: yarn test-coverage
release:
<<: *defaults
docker:
- image: cimg/node:lts
steps:
- attach_workspace:
at: .
- run:
command: mkdir ~/.ssh/ && echo -e "Host github.com\n\tStrictHostKeyChecking no\n" > ~/.ssh/config
- run:
name: Release
command: npx semantic-release
workflows:
version: 2
main:
jobs:
- checkout
- commitlint:
filters:
branches:
ignore: master
- install-dependencies:
requires:
- checkout
matrix:
parameters:
<<: *supported-node-versions
# - test:
# requires:
# - install-dependencies
# - coverage:
# requires:
# - install-dependencies
- lint:
requires:
- checkout
- build
- build-in-all-supported-versions-of-node:
requires:
- install-dependencies
matrix:
parameters:
<<: *supported-node-versions
- release:
requires:
- commitlint
- build
- build-in-all-supported-versions-of-node
- lint
# - test
filters:
branches:
only: master
================================================
FILE: .editorconfig
================================================
root = true
[*]
charset = utf-8
indent_size = 2
indent_style = space
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .github/CODE_OF_CONDUCT-es.md
================================================
# Código de Conducta convenido para Contribuyentes
Ver este documento en otro idioma:
[English](/CODE_OF_CONDUCT.md) / [日本語](CODE_OF_CONDUCT-jp.md) / [简体中文](CODE_OF_CONDUCT-zh-CN.md) / [Português](CODE_OF_CONDUCT-pt-BR.md)
## Nuestro compromiso
En el interés de fomentar una comunidad abierta y acogedora, nosotros como contribuyentes y administradores nos comprometemos a hacer de la participación en nuestro proyecto y nuestra comunidad una experiencia libre de acoso para todos, independientemente de la edad, dimensión corporal, discapacidad, etnia, identidad y expresión de género, nivel de experiencia, nacionalidad, apariencia física, raza, religión, identidad u orientación sexual.
## Nuestros estándares
Ejemplos de comportamiento que contribuyen a crear un ambiente positivo:
* Uso de lenguaje amable e inclusivo
* Respeto a diferentes puntos de vista y experiencias
* Aceptación de críticas constructivas
* Enfocarse en lo que es mejor para la comunidad
* Mostrar empatía a otros miembros de la comunidad
Ejemplos de comportamiento inaceptable por participantes:
* Uso de lenguaje o imágenes sexuales y atención sexual no deseada
* Comentarios insultantes o despectivos (*trolling*) y ataques personales o políticos
* Acoso público o privado
* Publicación de información privada de terceros sin su consentimiento, como direcciones físicas o electrónicas
* Otros tipos de conducta que pudieran considerarse inapropiadas en un entorno profesional.
## Nuestras responsabilidades
Los administradores del proyecto son responsables de clarificar los estándares de comportamiento aceptable y se espera que tomen medidas correctivas y apropiadas en respuesta a situaciones de conducta inaceptable.
Los administradores del proyecto tienen el derecho y la responsabilidad de eliminar, editar o rechazar comentarios, *commits*, código, ediciones de documentación, *issues*, y otras contribuciones que no estén alineadas con este Código de Conducta, o de prohibir temporal o permanentemente a cualquier colaborador cuyo comportamiento sea inapropiado, amenazante, ofensivo o perjudicial.
## Alcance
Este código de conducta aplica tanto a espacios del proyecto como a espacios públicos donde un individuo esté en representación del proyecto o comunidad. Ejemplos de esto incluye el uso de la cuenta oficial de correo electrónico, publicaciones a través de las redes sociales oficiales, o presentaciones con personas designadas en eventos *online* u *offline*. La representación del proyecto puede ser clarificada explicitamente por los administradores del proyecto.
## Aplicación
Ejemplos de abuso, acoso u otro tipo de comportamiento inaceptable puede ser reportado al equipo del proyecto en [support@nostalgi.cc][support-email]. Si no deseas contactar a todo el equipo, siéntete libre de contartar a cualquiera de manera individual:
* B. C. Rikko <[bcrikko@example.com](mailto:b.c.rikko@gmail.com)>
* Igor Guastalla <[limaguastallaigor@gmail.com](mailto:limaguastallaigor@gmail.com)>
* Trezy <[tre@trezy.com](mailto:tre@trezy.com)>
Todas los reportes serán revisadas e investigadas, lo que resultará en una respuesta adecuada a las necesidades y circunstancias. El equipo del proyecto está obligado a mantener confidencialidad de la persona que reportó el incidente. Detalles específicos acerca de las políticas de aplicación pueden ser publicadas por separado.
Administradores que no sigan o que no hagan cumplir este Código de Conducta pueden ser eliminados de forma temporal o permanente del equipo administrador.
## Atribución
Este Código de Conducta es una adaptación del [Contributor Covenant][homepage], versión 1.4, disponible en https://www.contributor-covenant.org/es/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
[support-email]: mailto:support@nostalgi.cc
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: .github/CODE_OF_CONDUCT-jp.md
================================================
# コントリビューター行動規範
このドキュメントを別の言語で表示する：
[English](/CODE_OF_CONDUCT.md) / [简体中文](CODE_OF_CONDUCT-zh-CN.md) / [Español](CODE_OF_CONDUCT-es.md) / [Português](CODE_OF_CONDUCT-pt-BR.md)
## 私たちの約束
私たちはオープンかつ友好的なコミュニティーを育成するために、コントリビューターやメンテナーとして、年齢、体型、障碍、民族性、性自認および性別表現、経験レベル、国籍、個人の容姿、人種、信仰、性的同一性および指向に関わりなく、私たちのプロジェクトやコミュニティーへの参加を誰にとっても嫌がらせのない体験にすることを誓います。
## 私たちの標準
前向きな環境を作り上げることに貢献する振る舞いの例:
* 友好的かつ男女包括用語の使用
* 異なる観点や経験の尊重
* 建設的批判の率直な受容
* コミュニティーにとっての最善への集中
* 他のコミュニティーメンバーへの共感
参加者による容認できない行動の例:
* 性的な意味を含む言葉や画像、相手の意思に反した性的関心や接近
* あおり、侮辱的または軽蔑的なコメント、個人攻撃や政治攻撃
* 公的または私的な嫌がらせ
* 住所、メールアドレスなど、他者のプライベート情報の明示的な許可なき公開
* 職場において合理的に不適切であると考えられる他の行為
## 私たちの責任
プロジェクトのメンテナーは、許容できる行動の基準を明確にすることに責任があります。また、何かしらの許容できない行動に対応する、適切かつ公平な是正処置をとることが期待されています。
プロジェクトのメンテナーは、この行動規範に沿っていない、コメント、コミット、コード、wiki編集、issue、その他の貢献を削除、編集、拒否する権利と義務を有します。また、他の不適切、脅迫的、攻撃的、嫌がらせと考えられる行動を取ったコントリビューターを一時的もしくは恒久的に追放する権利と義務を有します。
## 適用範囲
この行動規範は、個人がプロジェクトやそのコミュニティーを代表するとき、プロジェクト内と公共空間の両方において適用されます。プロジェクトやコミュニティーを代表する例として、プロジェクトの公式メールアドレスの使用、ソーシャルメディアの公式アカウント経由の投稿、指名された代表としてのオンラインやオフラインのイベントにおける行動があります。プロジェクトを代表することは、プロジェクトのメンテナーにより、さらに定義され明確化される可能性があります。
## 執行
暴言、嫌がらせ、またはそれ以外の受け入れられない行動は、[support@nostalgi.cc][support-email]に連絡して、プロジェクトチームに報告される可能性があります。プロジェクトチームに連絡することが望ましくない場合は、以下のいずれかにお気軽にお問い合わせください:
* B.C.Rikko <[b.c.rikko@gmail.com](mailto:b.c.rikko@gmail.com)>
* Igor Guastalla <[limaguastallaigor@gmail.com](mailto:limaguastallaigor@gmail.com)>
* Trezy <[tre@trezy.com](mailto:tre@trezy.com)>
すべての苦情は、レビュー、調査され、必要かつ適切と判断された対応がとられます。プロジェクトチームは、事象の報告者に関する守秘義務があります。具体的な執行に関する詳細が別途設定されているかもしれません。
この行動規範に誠意を持って従うまたは執行することができないプロジェクトのメンテナーは、プロジェクトをリードしている他のメンバーの判断により、一時的または恒久的な影響を受けることがあります。
## 帰属
この行動規範は[http://contributor-covenant.org/version/1/4][version]にある[Contributor Covenant][homepage]に バージョン1.4 に適合しています。
[homepage]: http://contributor-covenant.org
[support-email]: mailto:support@nostalgi.cc
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: .github/CODE_OF_CONDUCT-pt-BR.md
================================================
# Código de Conduta para Colaboradores
Veja este documento em outro idioma:
[English](/CODE_OF_CONDUCT.md) / [日本語](CODE_OF_CONDUCT-jp.md) / [简体中文](CODE_OF_CONDUCT-zh-CN.md) / [Español](CODE_OF_CONDUCT-es.md)
## Nossa promessa
Com o interesse de fomentar uma comunidade aberta e acolhedora, nós, como colaboradores e administradores deste projeto, comprometemo-nos a fazer a participação deste projeto uma experiência livre de assédio para todos, independentemente da aparência pessoal, deficiência, etnia, gênero, idade, identidade ou expressão de gênero, identidade ou orientação sexual, nacionalidade, nível de experiência, porte físico, raça ou religião.
## Nossos padrões
Exemplos de comportamentos que contribuem a criar um ambiente positivo incluem:
* Usar linguagem acolhedora e inclusiva
* Respeitar pontos de vista e experiências diferentes
* Aceitar crítica construtiva com graça
* Focar no que é melhor para a comunidade
* Mostrar empatia com outros membros da comunidade
Exemplos de comportamentos inaceitáveis por parte dos participantes incluem:
* Uso de linguagem ou imagens sexuais e atenção ou avanço sexual indesejada
* Comentários insultuosos e/ou depreciativos e ataques pessoais ou políticos (Trolling)
* Assédio público ou privado
* Publicar informação pessoal de outros sem permissão explícita, como, por exemplo, um endereço eletrônico ou residencial
* Qualquer outra forma de conduta que pode ser razoavelmente considerada inapropriada num ambiente profissional
## Nossas responsibilidades
Os administradores do projeto são responsáveis por esclarecer os padrões de comportamento e deverão tomar ação corretiva apropriada e justa em resposta a qualquer instância de comportamento inaceitável.
Os administradores do projeto têm o direito e a responsabilidade de remover, editar ou rejeitar comentários, commits, código, edições na wiki, erros ou outras formas de contribuição que não estejam de acordo com este Código de Conduta, bem como banir temporariamente ou permanentemente qualquer colaborador por qualquer outro comportamento que se considere impróprio, perigoso, ofensivo ou problemático.
## Escopo
Este Código de Conduta aplica-se dentro dos espaços do projeto ou qualquer espaço público onde alguém represente o mesmo ou a sua comunidade. Exemplos de representação do projeto ou comunidade incluem usar um endereço de email oficial do projeto, postar por uma conta de mídia social oficial, ou agir como um representante designado num evento online ou offline. A representação de um projeto pode ser ainda definida e esclarecida pelos administradores do projeto.
## Aplicação
Comportamento abusivo, de assédio ou de outros tipos pode ser comunicado contatando a equipe do projeto [support@nostalgi.cc][support-email]. If contacting the full project team is not desirable, feel free to contact any of them individually:
* B.C.Rikko <[b.c.rikko@gmail.com](mailto:b.c.rikko@gmail.com)>
* Igor Guastalla <[limaguastallaigor@gmail.com](mailto:limaguastallaigor@gmail.com)>
* Trezy <[tre@trezy.com](mailto:tre@trezy.com)>
Todas as queixas serão revistas e investigadas e resultarão numa resposta necessária e apropriada à situação. A equipe é obrigada a manter a confidencialidade em relação ao elemento que reportou o incidente. Demais detalhes de políticas de aplicação podem ser postadas separadamente.
Administradores do projeto que não sigam ou não mantenham o Código de Conduta em boa fé podem enfrentar repercussões temporárias ou permanentes determinadas por outros membros da liderança do projeto.
## Atribuição
Este Código de Conduta é adaptado do [Contributor Covenant][homepage], versão 1.4, disponível em [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[support-email]: mailto:support@nostalgi.cc
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: .github/CODE_OF_CONDUCT-zh-CN.md
================================================
# 参与者行为准则
使用其他语言来阅读本文档:
[English](/CODE_OF_CONDUCT.md) / [日本語](CODE_OF_CONDUCT-jp.md) / [Español](CODE_OF_CONDUCT-es.md) / [Português](CODE_OF_CONDUCT-pt-BR.md)
## 我们的誓言
为了维护一个开放并且友好的环境, 作为贡献者以及维护者，我们宣誓确保参与我们的项目以及社区的每一个人都有免受骚扰的体验，不管他/她的年纪，体型，残疾与否，种族，性别特征与表达，经验程度，国籍，个人外貌，种族，宗教信仰，性特征以及性取向如何。
## 我们的标准
关于创建积极的环境的贡献的例子包括:
* 使用欢迎友好以及包容的语言
* 尊重不同的视角以及经验
* 优雅的接受有建设性的批评
* 聚焦于对社区有利的方面
* 展现对应其他社区成员的认同
对于参与者来说不可接受的行为包括:
* 性语言的使用或者具象化并且不受欢迎的性诱惑或者更进一步
* 抹黑，羞辱的/贬损的评论，和针对个人或政治性的攻击
* 公开或者私下骚扰
* 公开其他人的隐私信息，比如未经许可的物理或者电子(邮箱)地址
* 在专业领域其他被认为不合时宜的行为
## 我们的义务
项目维护者们有义务澄清可以被接受的行为的标准，并且对于任何不可接受的行为应当采取合适并且正确的行动来对待。
项目维护者们有权利和义务去删除，编辑，或者拒绝评论，提交，代码，维基编辑，问题等，以及其他不符合行为准则的贡献，或者当某些贡献者被视为不合时宜的，威胁性的，冒犯的或者有害的时候，我们也可以临时性地或者永久性地封禁他们。
## 范畴
本行为准则适用于本项目空间，或者当个人代表本项目或社区在公共场合出席的场合。代表一个项目或者社区的例子包括使用一个官方的项目邮件地址，通过官方社交媒体账号发帖，或者作为一个指定的代表参与线上或者线下的活动。如何作为一个项目的代表可能会进一步被项目维护者定义并且澄清。
## 执行
你可以通过[support@nostalgi.cc][support-email]联系项目组举报辱骂，骚扰或者其他不被接受的行为事例。如果联系整个项目组是不必要的，请私下联系项目组的任何成员:
* B.C.Rikko <[b.c.rikko@gmail.com](mailto:b.c.rikko@gmail.com)>
* Igor Guastalla <[limaguastallaigor@gmail.com](mailto:limaguastallaigor@gmail.com)>
* Trezy <[tre@trezy.com](mailto:tre@trezy.com)>
所有的投诉都会被审核并且进行调查，并且会对公众出具一个视为必要且合适的回复。项目组有义务维护举报者个人的隐私。进一步的具体执行细节政策可能会分开来发布。
不真诚地遵守或者执行行为准则的项目维护者可能会面临项目领导其他成员所决定的临时的或者永久的影响。
## 归属
本行为准则改编自[贡献者契约][homepage], 版本 1.4, 可以从这里访问 [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[support-email]: mailto:support@nostalgi.cc
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: .github/CONTRIBUTING-es.md
================================================
# Contribución
Ver este documento en otro idioma:
[English](/CONTRIBUTING.md) / [日本語](CONTRIBUTING-jp.md) / [简体中文](CONTRIBUTING-zh-CN.md) / [Português](CONTRIBUTING-pt-BR.md) / [한국어](CONTRIBUTING-ko.md)
¿Quieres contribuir al proyecto? ¡Genial!
## Cosas que tienes que saber
Este proyecto se apega al Código de Conducta convenido para Contribuyentes. Al participar, se espera que te apegues a este código. Por favor, revisa nuestro [Código de Conducta][code-of-conduct] para más información acerca de reportar comportamiento no apropiado.
**¿Trabajando en tu primer Pull Request?**
[Cómo contribuir a un proyecto de código abierto en GitHub][egghead]
## Cómo
* ¿Configuración del proyecto?
[¡Te tenemos cubierto!](#project-setup)
* ¿Encontraste un bug?
[¡Házlono saber!][new-issue]
* ¿Arreglaste un bug?
[¡Haz un PR!][new-pr]
* ¿Agregando una nueva característica?
Asegúrate de [abrir un issue][new-issue] describiendo tu característica o mejora, ¡Después abre un [nuevo PR][new-pr] cuando estés listo para recibir retroalimentación!
## Configuración del proyecto
¡Estamos muy felices porque quieras contribuir al proyecto! ❤️ Los siguientes pasos te ayudarán a poner el proyecto en marcha:
1. Haz un Fork y Clon del repositorio.
2. Instala las dependencias necesarias:
```sh
$ npm install
```
3. Ejecuta el servidor de desarrollo:
To view all available components in an interactive interface, use storybook.
```sh
$ npm run storybook
```
### Directorios
```sh
.
├── index.html: Página demo
├── style.css: Estilo de la página demo
├── css: Archivos de distribución
├── docs: Storybook stories
└── scss: Código fuente
├── base
│ ├── reboot.scss: ¡No cambiar! (Bootstrap Reboot)
│ ├── generic.scss: Estilo general y reboot.css
│ └── variables.scss: Variables comunes
├── elements
├── components
├── form
├── icons: Iconos 16x16
├── pixel-arts: Para iconos que no son 16x16.
└── utilities
```
> Tip: Manten tu rama `master` apuntando al repositorio original y haz pull request de las ramas en tu fork. Para hacer esto, ejecuta:
>
> ```
> git remote add upstream https://github.com/nostalgic-css/NES.css.git
> git fetch upstream
> git branch --set-upstream-to=upstream/master master
> ```
>
> Esto añadirá el repositorio original como un "remoto" llamado "upstream", *fetch* la información de git desde el remoto, y configura tu rama local `master` para utilizar la rama `upstream/master` cuando ejecutes `git pull`. En este punto, tú puedes crear todas tus ramas desde esta rama `master`. Cuando quieras actualizar tu versión de `master`, haz un `git pull`.
## Contribución para miembros de la organización `nostalgic-css`
Debajo hay pasos, los cuales deben ser seguidos por los miembros de `nostalgic-css`. Colaboradores externos sólo tienen que seguir los pasos anteriores.
### Pasos para desarrollo
1. Haz una rama desde `develop` utilizando las siguientes reglas de tomato.
2. Haz el trabajo para resolver el *issue*. Si identificas trabajo que no está relacionado con el *issue*, por favor [crea un nuevo issue][new-issue] y haz el trabajo en una rama independiente.
3. Envía tus PRs a hacer *merge* en `develop`.
* Todo cambio que pueda afectar el desarrollo actual deberá ser documentado en la descripción.
* PRs con un *issue* deberán incluir en el título el número del *issue*. E.g. `[#33] Arregla bug`
* Asígnate el PR.
* Cuando el PR esté listo mara ser unido, se deberá solicitar una revisión por parte el equipo de `nostalgic-css/NES.css´.
4. Una vez que el PR sea aprobado, será responsabilidad de la persona **encargada** de unir los cambios a la rama.
### Formatos de commit
Utilizamos [Commitizen][commitizen] and [`commitlint`][commitlint] para asegurarnos que nuestros lanzamientos sean automáticos, [unromantic, and unsentimental][sentimental-versioning].
[code-of-conduct]: https://github.com/nostalgic-css/NES.css/blob/master/CODE_OF_CONDUCT.md
[commitizen]: https://github.com/commitizen/cz-cli
[commitlint]: [https://github.com/marionebl/commitlint]
[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
[new-issue]: https://github.com/nostalgic-css/NES.css/issues/new/choose
[new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop
[semantic-release]: https://github.com/semantic-release/semantic-release
[sentimental-versioning]: http://sentimentalversioning.org/
================================================
FILE: .github/CONTRIBUTING-jp.md
================================================
# 貢献する
このドキュメントを別の言語で表示する：
[English](/CONTRIBUTING.md) / [简体中文](CONTRIBUTING-zh-CN.md) / [Español](CONTRIBUTING-es.md) / [Português](CONTRIBUTING-pt-BR.md) / [한국어](CONTRIBUTING-ko.md)
このプロジェクトに貢献したいですか?素晴らしい!
## 知るべきこと
このプロジェクトはコントリビューター行動規範に準拠しています。参加する場合、あなたにはこの規範を守ることが求められます。許容できない行為の報告の詳細については[行動規範][code-of-conduct]をご覧ください。
**はじめてのPull Requestに取り組んでいますか?**
[GitHubでオープンソースプロジェクトに貢献する方法][egghead]
## どのように行うか
* プロジェクトのセットアップは?
[カバーしています!](#project-setup)
* バグを見つけましたか?
[お知らせください！][new-issue]
* バグを修正しましたか?
[PRをつくってください！][new-pr]
* 新しい機能を追加しましたか?
必ず機能を説明する[Issueを立てて][new-issue]ください。フィードバックの準備ができたら、[新しいPR][new-pr]を作成してください!
## プロジェクトの設定
私たちはあなたがプロジェクトに貢献したいと思ってくれることを非常に嬉しく思います！ :heart: 以下の手順を実行すると準備ができます:
1. リポジトリをフォークし、クローンする
2. 必要な依存関係をインストールする:
```sh
$ npm install
```
3. 開発用サーバを起動する:
インタラクティブインターフェースで使用可能なすべてのコンポーネントを表示するには、storybookを使ってください
```sh
$ npm run storybook
```
### ディレクトリ
```sh
.
├── index.html: デモページ
├── style.css: デモページのスタイル
├── css: 配布用ファイル
├── docs: Storybookのストーリー
└── scss: ソースファイル
├── base
│ ├── reboot.scss: 変更しないで! (Bootstrap Reboot)
│ ├── generic.scss: 一般的なスタイルとreboot.cssの上書き
│ └── variables.scss: 共通変数
├── elements
├── components
├── form
├── icons: 16x16のアイコン
├── pixel-arts: 16x16以外のアイコン
└── utilities
```
> Tip: あなたの`master`ブランチは元のリポジトリを指すようにし、フォークしたブランチからPull Requestを作成します。これを行うには:
>
> ```
> git remote add upstream https://github.com/nostalgic-css/NES.css.git
> git fetch upstream
> git branch --set-upstream-to=upstream/master master
> ```
>
> これにより、元のリポジトリが"upstream"という名前の"remote"として追加されます。そのリモートからgitの情報を取得し、`git pull`を実行する度に`upstream/master`ブランチを使用するように、`master`ブランチを設定します。この時点で、この`master`ブランチからすべてのブランチを作成することができます。あなたの`master`のバージョンを更新したいときは、通常の`git pull`を行います。
## `nostalgic-css` Organizationのメンバーに貢献する
以下は、`nostalgic-css` Organizationのメンバーが従わなければならない手順です。外部のコラボレーターは、上記のガイドラインに従うだけです。
### 開発手順
1. 以下の書式ルールで`develop`からブランチを切る。
2. Issue対応に必要な作業。Issueに関係のない問題がある場合は、[新しいIssueを立てて][new-issue]別ブランチで作業してください。
3. `develop`にマージするようPRを作成する
* 現在の開発に影響を与えるような変更は、その説明を文書化する必要があります。
* PRのタイトルにIssue番号を含める必要があります。 IE: `[#33] Fix bug`
* 自分自身にPRをアサインします。
* PRがマージできるようになったら、レビューは`nostalgic-css/NES.css`チームから依頼する必要があります。
4. PRが承認されたら、変更をマージするのは**assignee**の仕事です。
### コミットフォーマット
プロジェクトへのすべてのコミットは[Commitizen][commitizen]と[`commitlint`][commitlint]を使って読みやすいようにします。さらにリリースが自動化され、[ロマンティックでなく、センチメンタルでもない][sentimental-versioning]ことを保証するために[`semantic-release`]を使用します。
[code-of-conduct]: https://github.com/nostalgic-css/NES.css/blob/master/CODE_OF_CONDUCT.md
[commitizen]: https://github.com/commitizen/cz-cli
[commitlint]: [https://github.com/marionebl/commitlint]
[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
[new-issue]: https://github.com/nostalgic-css/NES.css/issues/new/choose
[new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop
[semantic-release]: https://github.com/semantic-release/semantic-release
[sentimental-versioning]: http://sentimentalversioning.org/
================================================
FILE: .github/CONTRIBUTING-ko.md
================================================
# Contributing(기여하기)
다른 언어로 보기:
[English](/CONTRIBUTING.md) / [简体中文](CONTRIBUTING-zh-CN.md) / [日本語](CONTRIBUTING-jp.md) / [Español](CONTRIBUTING-es.md) / [Português](CONTRIBUTING-pt-BR.md) / [Русский](CONTRIBUTING-ru.md)
이 프로젝트에 도움을 주고 싶나요? 대단합니다!
## 알아야 할 것
이 프로젝트는 참여자에게 행동규범을 요구합니다. 이 프로젝트에 기여하기 위해서는 아래 규범을 지켜야 합니다. [행동규범][code-of-conduct]을 확인해서 잘못된 행동을 하지 않도록 해주세요.
**Pull Request가 처음이신가요?**
[깃헙 오픈소스 프로젝트에 기여하는 방법][egghead]
## 어떻게??
* 프로젝트를 설치하나요??
[우리가 도와줄게요!](#project-setup)
* 버그를 발견했나요??
[알려주세요!][new-issue]
* 버그를 패치했나요??
[Pull Request를 해주세요!][new-pr]
* 새로운 내용을 추가하고 싶으신가요??
먼저 [open an issue][new-issue]를 해서 내용을 설명해주시고, 완성이 되어 피드백을 받을 수 있을 때 [new Pull Request][new-pr]를 해주세요!
## 프로젝트 설치
이 프로젝트에 기여하고 싶으시다니 대단히 기쁘네요! ❤️ 아래 절차를 따라 설치하시면 실행이 될 겁니다:
1. 이 Repository를 Fork & clone 하세요
2. 필요한 dependencies를 설치해주세요:
```sh
$ npm install
```
3. dev server를 실행해주세요:
interactive interface에 가능한 모든 component를 보려면, storybook을 이용하세요.
```sh
$ npm run storybook
```
### 저장경로
```sh
.
├── index.html: Demo page
├── style.css: Demo page style
├── css: Distribution files
├── docs: Storybook stories
└── scss: Source
├── base
│ ├── reboot.scss: 절대 수정하지 마세요! (Bootstrap Reboot)
│ ├── generic.scss: Generic style and reboot.css
│ └── variables.scss: Common variables
├── elements
├── components
├── form
├── icons: 16x16 icons
├── pixel-arts: For icons other than 16x16.
└── utilities
```
> Tip: 여러분의 `master` branch가 원래 repository를 가리키도록 지정하시고, fork한 곳의 branch에서 pull requests를 만드세요. 아래와 같이 실행하면 됩니다:
>
> ```
> git remote add upstream https://github.com/nostalgic-css/NES.css.git
> git fetch upstream
> git branch --set-upstream-to=upstream/master master
> ```
>
> 위 방법이 원래의 repository를 "upstream"이라 불리는 "remote"로 추가할 것이고, 여러분이 `git pull`을 사용할 때마다 그 "remote"에서 정보를 불러와서, 여러분의 `master` branch를 `upstream/master` branch를 사용할 수 있게끔 세팅할 것입니다. 이 방법을 통해 `master` branch에서 여러분의 branch를 만들 수 있을 겁니다. `master` branch를 업데이트 하고 싶다면, `git pull`을 사용하세요.
## `nostalgic-css` 구성원들을 위한 Contributing
아래의 절차는 `nostalgic-css`의 구성원들을 위한 절차입니다. 도움을 주시는 외부의 여러분들은 위의 Contributing만 해당됩니다.
### 개발 절차
1. 아래 양식 규정을 지키면서 `develop`에서 branch를 만들어주세요.
2. 이슈에 맞는 작업을 진행해주세요. 만약, 이슈와 맞지 않는 작업이었다고 판단된다면 [새로운 issue][new-issue]를 생성하고, 다른 branch에서 진행해주세요.
3. `develop`에 merge를 위해 Pull Request를 제출해주세요.
* 현재까지의 개발에 영향을 주는 수정사항은 description에 작성되어야 합니다.
* 이슈를 가졌던 Pull Request는 이슈번호를 꼭 적어주세요. 예시: `[#33] Fix bug`
* Pull Request를 자신에게 배정하세요
* Pull Request가 작업이 완료되어 merge할 준비가 되었다면, `nostalgic-css/NES.css` 팀으로부터 리뷰를 받아야 합니다.
4. Pull Request가 승인되면, **작업하신분** 이 branch에 수정사항을 merge해야 합니다.
### 커밋 양식
우리는 프로젝트의 커밋이 최대한 읽기 쉽도록 [Commitizen][commitizen] 와 [`commitlint`][commitlint]를 사용하고, [`semantic-release`][semantic-release]를 통해 출시가 자동화되어서, [감성적이지 않으려고 노력합니다][sentimental-versioning].
=> 개발자 임의대로 출시 버전을 지정하지 않도록 한다는 의미입니다.
[code-of-conduct]: CODE_OF_CONDUCT.md
[commitizen]: https://github.com/commitizen/cz-cli
[commitlint]: [https://github.com/marionebl/commitlint]
[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
[new-issue]: https://github.com/nostalgic-css/NES.css/issues/new/choose
[new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop
[semantic-release]: https://github.com/semantic-release/semantic-release
[sentimental-versioning]: http://sentimentalversioning.org/
================================================
FILE: .github/CONTRIBUTING-pt-BR.md
================================================
# Contribuindo
Veja este documento em outro idioma:
[English](/CONTRIBUTING.md) / [日本語](CONTRIBUTING-jp.md) / [简体中文](CONTRIBUTING-zh-CN.md) / [Español](CONTRIBUTING-es.md) / [한국어](CONTRIBUTING-ko.md)
Quer contribuir para este projeto? Legal!
## Coisas para saber
Este projeto adere o código de conduta "Contributor Covenant". Ao participar do projeto, é esperado que você apoie este código. Por favor, verifique o [Código de conduta][code-of-conduct] para mais detalhes sobre como reportar comportamentos inaceitáveis.
**Trabalhando em sua primeira Pull Request?**
[Como Realizar uma Contribuição em um Projeto Open Source no GitHub][egghead]
## Como
* Configurar o projeto?
[Nós te ajudamos com isto!](#project-setup)
* Encontrou um bug?
[Nos avise!][new-issue]
* Corrigiu um bug?
[Faça uma PR!][new-pr]
* Adicionando uma nova funcionalidade?
Certifique-se de [abrir uma issue][new-issue] descrevendo sua funcionalidade, em seguida faça uma [nova PR][new-pr] quando estiver pronto para o feedback!
## Configurar o projeto
Nós estamos muito felizes de você querer contribuir para o projeto! Os próximos passos irão deixá-lo pronto em pouco tempo:
1. Fork e clone o repositório
2. Instale as dependências necessárias:
```sh
$ npm install
```
3. Inicie o servidor de desenvolvimento:
To view all available components in an interactive interface, use storybook.
```sh
$ npm run storybook
```
### Diretórios
```sh
.
├── index.html: Página de demonstração
├── style.css: Estilização da página de demonstração
├── css: Arquivos de distribuição
├── docs: "Histórias" Storybook
└── scss: Código fonte
├── base
│ ├── reboot.scss: Não modifique-o! (Bootstrap Reboot)
│ ├── generic.scss: Estilização genérica e reboot.css
│ └── variables.scss: Variáveis em comum
├── elements
├── components
├── form
├── icons: 16x16 icons
├── pixel-arts: Para ícones que não são 16x16.
└── utilities
```
> Dica: Deixa sua branch `master` apontando para o repositório de origem, e faça suas pull requests de branchs do seu fork. Para realizar isto, execute:
>
> ```
> git remote add upstream https://github.com/nostalgic-css/NES.css.git
> git fetch upstream
> git branch --set-upstream-to=upstream/master master
> ```
>
> Isto irá adicionar o repositório de origem como um repositório "remoto" chamado de "upstream", então busque as informações do git deste repositório remoto, em seguida defina que a sua branch `master` local irá usar a branch `master` chamada de "upstream" toda vez que você executar o comando `git pull`. Por fim, você poderá executar todas as suas branchs para pull requests com base nesta branch `master`. Toda vez que você desejar atualizar sua versão da `master`, basta realizar um `git pull`.
## Informações de contribuição para os membros da organização `nostalgic-css`
Abaixo estão os passos que devem ser seguidos pelos membros da organização `nostalgic-css`. Colaboradores externos deverão seguir apenas as diretrizes acima.
### Passos para o desenvolvimento
1. Crie uma branch a partir da `develop`, utilizando as regras de formação abaixo.
2. Faça o trabalho requerido para satisfazer toda a issue. Se você identificar algum trabalho não relacionado a esta issue, por favor [crie uma nova issue][new-issue] e faça este trabalho em uma branch separada.
3. Envie suas PRs para serem realizadas o merge de volta a `develop`.
* Qualquer mudança que possa afetar o desenvolvimento atual, deve ser documentada na descrição.
* PRs que possuam issue deverão ter seus números inclusos nos títulos. IE: `[#33] Fix bug`
* Atribua (assign) a PR para você mesmo.
* Quando a PR estiver pronta para a realização do merge, Uma revisão deve ser solicitada à equipe `nostalgic-css/NES.css`.
4. Uma vez que a PR for aprovada, é de responsabilidade do **atribuído** realizar o merge das mudanças para a branch.
### Formatação de commit
Nós usamos [Commitizen][commitizen] e [`commitlint`][commitlint] a fim de assegurar que todos os commits feitos para o projeto sejam fáceis de ler, e [`semantic-release`][semantic-release] para assegurar que nossas releases sejam automatizadas, [sem romance, e sem sentimentos][sentimental-versioning].
[code-of-conduct]: https://github.com/nostalgic-css/NES.css/blob/master/CODE_OF_CONDUCT-pt-BR.md
[commitizen]: https://github.com/commitizen/cz-cli
[commitlint]: [https://github.com/marionebl/commitlint]
[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
[new-issue]: https://github.com/nostalgic-css/NES.css/issues/new/choose
[new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop
[semantic-release]: https://github.com/semantic-release/semantic-release
[sentimental-versioning]: http://sentimentalversioning.org/
================================================
FILE: .github/CONTRIBUTING-zh-CN.md
================================================
# 贡献
使用其他语言来阅读本文档:
[English](/CONTRIBUTING.md) / [日本語](CONTRIBUTING-jp.md) / [Español](CONTRIBUTING-es.md) / [Português](CONTRIBUTING-pt-BR.md) / [한국어](CONTRIBUTING-ko.md)
你打算为本项目做贡献？太棒了！
## 需要知道的事情
本项目与参与者行为准则保持一致. 我们期望你在参与本项目的时候也赞同并支持该行为准则. 关于报告不可接受的行为，请参考我们的[行为准则][code-of-conduct].
**在忙于你的第一个PR吗?**
[如何在GitHub上面为开源项目做贡献][egghead]
## 如何
* 搭建项目?
[我们有详细的说明!](#project-setup)
* 找到了bug?
[请让我们知道!][new-issue]
* 为bug打补丁?
[提交PR!][new-pr]
* 添加一个新功能?
请确保[新开一个issue][new-issue] 来描述你的功能, 当你准备好接受反馈的时候再提交一个[新的PR][new-pr]!
## 搭建项目
你有想为我们的项目做贡献，我们真的很高兴! ❤️ 请参考如下的步骤开始吧:
1. Fork 并且 clone 我们的代码仓库
2. 安装必须的依赖:
```sh
$ npm install
```
3. 启动开发服务器:
To view all available components in an interactive interface, use storybook.
```sh
$ npm run storybook
```
### 目录结构
```sh
.
├── index.html: Demo page
├── style.css: Demo page style
├── css: Distribution files
├── docs: Storybook stories
└── scss: Source
├── base
│ ├── reboot.scss: Don't change! (Bootstrap Reboot)
│ ├── generic.scss: Generic style and reboot.css
│ └── variables.scss: Common variables
├── elements
├── components
├── form
├── icons: 16x16 icons
├── pixel-arts: For icons other than 16x16.
└── utilities
```
> 小建议: 确保你的 `master` 分支指向原始的代码仓库并且从你fork的分支上创建PR. 请按如下命令进行操作:
>
> ```
> git remote add upstream https://github.com/nostalgic-css/NES.css.git
> git fetch upstream
> git branch --set-upstream-to=upstream/master master
> ```
>
> 这样就会把原始的代码仓库添加为一个名为"upstream"的远程连接,并且从这个远程的仓库连接获取git的信息, 然后当你运行`git pull`命令的时候会指定本地的`master`分支去使用`upstream/master`分支. 在这个时候, 你就能基于这个`master` 分支来创建所有你自己的分支. 当你想更新你的`master`的版本信息的时候, 执行一个常规的`git pull`命令即可.
## `nostalgic-css` 组织如何为项目做贡献
`nostalgic-css` 组织的成员必须遵守如下的步骤. 外部的贡献者只需要遵守以上的准则即可.
### 开发步骤
1. 使用下面的格式化规则从`develop`分支来创建自己的分支。
2. 做满足问题要求的必要的工作。如果发现你的工作跟该问题无关，请[创建一个新的问题][new-issue]并且在另外一个分支在进行你的工作。
3. 提交你的PR然后合并回`develop`分支.
* 任何影响当前开发的改变都必须在文档里面描述清楚.
* 跟某一问题相关的PRs必须把那个问题的号码标注在标题里. 比如: `[#33] Fix bug`
* 分配一个问题给你自己.
* 当这个问题准备合并的时候, 必须向`nostalgic-css/NES.css` 小组申请审核.
4. 一旦PR被批准了，接下来合并分支的更改就是被分配者的义务了。
### 提交格式化
我们使用[Commitizen][commitizen] 以及 [`commitlint`][commitlint] 来确保所有的项目提交都是易于阅读的, 并且使用 [`semantic-release`][semantic-release] 来确保我们的发布是自动化的, [不浪漫的以及不带情感色彩的][sentimental-versioning].
[code-of-conduct]: CODE_OF_CONDUCT.md
[commitizen]: https://github.com/commitizen/cz-cli
[commitlint]: [https://github.com/marionebl/commitlint]
[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
[new-issue]: https://github.com/nostalgic-css/NES.css/issues/new/choose
[new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop
[semantic-release]: https://github.com/semantic-release/semantic-release
[sentimental-versioning]: http://sentimentalversioning.org/
================================================
FILE: .github/CONTRUBUTING-ru.md
================================================
# Вклад
Посмотри документы на другом языке:
[简体中文](CONTRIBUTING-zh-CN.md) / [日本語](CONTRIBUTING-jp.md) / [Español](CONTRIBUTING-es.md) / [Português](CONTRIBUTING-pt-BR.md)/ [English](../CONTRIBUTING.md) / [한국어](CONTRIBUTING-ko.md)
Хочешь внести свой вклад в проект? Отлично!
## Вещи, которые следует знать
Этот проект соответствует нормам поведения Contributor Covenant. Если вы участвуете, то должны соответствовать этому кодексу. Пожалуйста, обратите внимание на наши [нормы поведения][code-of-conduct] для того, чтобы сообщать о недопустимом поведении.
**Работашь над своим первым Pull Request'ом?**
[How to Contribute to an Open Source Project on GitHub][egghead]
## Как мне
* Запустить проект?
[Мы тебе поможем!](#запуск-проекта)
* Рассказать о баге?
[Дай нам знать!][new-issue]
* Исправить баг?
[Сделай PR!][new-pr]
* Добавить новую фичу?
Удостоверься, что есть [открытая issue][new-issue]описывающая твою фичу, затем отправь [PR][new-pr] когда будешь готов к обратной связи!
## Запуск проекта
Мы очень рады, что вы хотите внести свой вклад в проект! ❤️ Следующие шаги помогут вам начать работу:
1. Сделай форк и склонируй репозиторий
2. Установи зависимости:
```sh
$ npm install
```
3. Запустите сервер:
To view all available components in an interactive interface, use storybook.
```sh
$ npm run storybook
```
### Директории
```sh
.
├── index.html: Демо страница
├── style.css: Стили демо страницы
├── css: Поставляемые файлы
├── docs: Документация Storybook
└── scss: Исходный код
├── base
│ ├── reboot.scss: Не менять! (Bootstrap Reboot)
│ ├── generic.scss: Общие стили и reboot.css
│ └── variables.scss: Общие переменные
├── elements
├── components
├── form
├── icons: Иконки 16x16
├── pixel-arts: Для иконов, имеющих отличный от 16x16 формат.
└── utilities
```
> Совет: Следжи за тем, чтобы ваша ветка `master` указывала на оригинальный репозиторий и делайте свои Pull Request'ы из веток своего форка. Для этого запустите:
>
> ```
> git remote add upstream https://github.com/nostalgic-css/NES.css.git
> git fetch upstream
> git branch --set-upstream-to=upstream/master master
> ```
>
> Это добавит оригинальный репозиторий, как "удалённый" под именем "upstream" получит всю нужную информацию из него и сделает так, чтобы ваша ветка `master` использовала `upstream/master` когда вы делаете `git pull`. Теперь вы можете ветвиться от `master` . Когда вы захотите обновить свой `master`, сделайте `git pull`.
## Вклад для членов организации `nostalgic-css`
Ниже приведены шаги, которым должны следовать члены организации `nostalgic-css`. Внешние сотрудники должны следовать только вышеуказанным рекомендациям.
### Шаги для разработки
1. Ветвитесь от `develop` используя следующие правила.
2. Делайте работу, нужную для закрытия issue. Если вы делаете что-то что не удволетворяет открытым issue, [создайте новое][new-issue] и делайте работу в отдельной ветке.
3. Отправте ваш PR в `develop`.
* Любое изменение должно быть задокументированно.
* PR, который решает какое-то issue должен включать номер issue в заголовке. Например: `[#33] исправил ошибку`
* Назначте PR на себя.
* Когда PR готов к тому, чтобы стать частью основной ветки, вы должны запросить ревью у команды `nostalgic-css/NES.css`.
4. Когда изменения в вашем PR подтверждены, тот, на кого вы **назначили** ваш PR должен залить ваши изменения в основную ветку.
### Форматирование коммитов
Мы используем [Commitizen][commitizen] и [`commitlint`][commitlint] для того, чтобы все коммиты в репозиторий легко читались, и [`semantic-release`][semantic-release] чтобы наши релизы были автоматизированы, [неромантичны и несентиментальны][sentimental-versioning].
[code-of-conduct]: CODE_OF_CONDUCT.md
[commitizen]: https://github.com/commitizen/cz-cli
[commitlint]: [https://github.com/marionebl/commitlint]
[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
[new-issue]: https://github.com/nostalgic-css/NES.css/issues/new/choose
[new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop
[semantic-release]: https://github.com/semantic-release/semantic-release
[sentimental-versioning]: http://sentimentalversioning.org/
================================================
FILE: .github/FUNDING.yml
================================================
github: BcRikko
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
---
<!-- Please fill your information below. -->
<!-- You can delete these lines enclosed by `<` and `>` before posting, too. -->
**Describe the bug**
<!-- A clear and concise description of what the problem you are facing is. -->
**To Reproduce**
<!--
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
-->
**Expected behavior**
<!-- A clear and concise description of what you expected to happen. -->
**Screenshots**
<!-- If applicable, add screenshots to help explain your problem. -->
**Environment:**
- OS: <!-- (i.e. Windows) -->
- Browser: <!-- Version. -->
- Build environment (i.e. NodeJS): <!-- If you have issues building the SCSS into CSS, add your information here. -->
**Suggestion(s) for fixing this issue**
<!-- What are your thoughts? How could this possibly be resolved? -->
**Additional context**
<!-- Add any other context about the problem here. -->
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
---
<!-- Please fill your information below. -->
<!-- You can delete these lines enclosed by `<` and `>` before posting, too. -->
**Is your feature request related to a problem? Please describe.**
<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
**Describe the solution you'd like**
<!-- A clear and concise description of what you want to happen. -->
**Describe alternatives you've considered**
<!-- A clear and concise description of any alternative solutions or features you've considered. -->
**Additional context**
<!-- Add any other context or screenshots about the feature request here. -->
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!-- Please fill your information below the lines starting with `#`. -->
<!-- You can delete these lines enclosed by `<` and `>` before posting, too. -->
**Description**
<!-- What does this PR do, what does it want to achieve? -->
**Compatibility**
<!-- Elaborate on how this PR affects the compatibility. Is it breaking, or not? -->
**Caveats**
<!-- Is there something specific you'd like to mention before merge? -->
================================================
FILE: .github/README-es.md
================================================
<div align="center">
<a href="https://nostalgic-css.github.io/NES.css/" target="_blank"><img src="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" alt="NES.css: NES-style CSS framework" style="max-width: 100%;" width="600" height="315"></a>
<a href="/README.md">English</a> / <a href="README-jp.md">日本語</a> / <a href="README-zh-CN.md">简体中文</a> / <a href="README-pt-BR.md">Português</a> / <a href="README-ru.md">Русский</a>
</div>
NES.css es un **NES-style(8bit-like)** CSS Framework.
[![Gitter][gitter-badge]][gitter] [![Commitizen friendly][commitizen-badge]][commitizen]
## Instalación
### Hojas de estilo
NES.css se encuentra disponible a través de npm (preferente), Yarn o un CDN.
#### Vía gestor de paquetes
```shell
npm install nes.css
# o
yarn add nes.css
```
Nuestro `package.json` contiene metadata adicional bajo las siguientes keys:
* `sass` - Ruta a nuestro archivo fuente principal de Sass
* `style` - Ruta a nuestro CSS no minificado
##### AltCSS(sass, scss...)
```scss
// style.scss
@import "./node_modules/nes.css/css/nes.css"
```
##### JavaScript
```js
// script.js
import "nes.css/css/nes.min.css";
```
Necesita instalar css-loader.
##### HTML
```html
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
</head>
<body></body>
</html>
```
#### Vía CDN
Importa el CSS utiliando un elemento `<link />`:
```html
<!-- minificado -->
<link href="https://unpkg.com/nes.css@2.2.0/css/nes.min.css" rel="stylesheet" />
<!-- último -->
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<!-- solo estilo del núcleo -->
<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
```
### Tipografías
NES.css no contiene ninguna tipografía, pero recomendamos la siguiente lista de tipografías para utilizar junto a la biblioteca.
| Idioma | Tipografía |
| --------- | ------------------------------------------------------------------ |
| (Default) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
| Inglés | [Kongtext](https://www.dafont.com/kongtext.font) |
| Japonés | [美咲フォント](http://littlelimit.net/misaki.htm) |
| Japonés | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) |
| Coreano | [둥근모꼴](http://cactus.tistory.com/193) |
| Chinoés | [Zpix (最像素)](https://github.com/SolidZORO/zpix-pixel-font) |
## Uso
NES.css sólo contiene componentes. Tú tienes que definir tu propio diseño.
La tipografía recomendada para utilizar junto a NES.css es [Press Start 2P][press-start-2p-font]. Sin embargo, [Press Start 2P][press-start-2p-font] sólo soporta caracteres latinos. Si utilizas este framework con otro idioma, por favor utiliza otra tipografía. Sigue las [instrucciones][google-fonts-guide] de Google Fonts acerca de como incluirlas, o simplemente utilizalas como se muestra a continuación:
```html
<head>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
<style>
html, body, pre, code, kbd, samp {
font-family: "font-family que quieres usar";
}
</style>
</head>
```
## Sólo CSS
NES.css sólo requiere de CSS y no depende de JavaScript.
## Soporte de navegadores
NES.css es compatible con las versiones más recientes de los siguientes navegadores.
* Chrome
* Firefox
* Safari
Sin probar
* IE/Edge
## Derechos de autor y licencia
Código y documentación copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Código publicado con Licencia MIT. Documentación publicada con Creative Commons.
## Desarrollo
Si deseas colaborar con el proyecto ¡Recibimos todo tipo de contribuciones! ¡Revisa nuestro [`CONTRIBUTING-es.md`][contributing-document] para más información acerca de cómo puedes ayudar a hacer NES.css algo grandioso!
[commitizen]: http://commitizen.github.io/cz-cli/
[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[contributing-document]: ./CONTRIBUTING-es.md
[gitter]: https://gitter.im/nostalgic-css/Lobby
[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg
[google-fonts-guide]: https://developers.google.com/fonts/docs/getting_started
[press-start-2p-font]: https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P
================================================
FILE: .github/README-fr.md
================================================
<div align="center">
<a href="https://nostalgic-css.github.io/NES.css/" target="_blank"><img src="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" alt="NES.css: NES-style CSS framework" style="max-width: 100%;" width="600" height="315"></a>
<a href="README-jp.md">日本語</a> / <a href="README-zh-CN.md">简体中文</a> / <a href="README-es.md">Español</a> / <a href="README-pt-BR.md">Português</a> / <a href="README-ru.md">Русский</a> / <a href="README-fr.md">Français</a>
</div>
NES.css est un framework CSS **NES-style(8bit-like)**.
[![Gitter][gitter-badge]][gitter] [![Commitizen friendly][commitizen-badge]][commitizen]
## Installation
### Styles
NES.css est disponible via npm (recommandé), Yarn, ou par CDN.
#### Par package manager
```shell
npm install nes.css
# or
yarn add nes.css
```
Notre `package.json` contient quelques metadata additionnelles au travers des clefs suivantes:
* `sass` - Chemin vers le fichier source Sass principal
* `style` - Chemin vers le CSS non minifié
##### AltCSS(sass, scss...)
```scss
// style.scss
@import "./node_modules/nes.css/css/nes.css"
```
##### JavaScript
```js
// script.js
import "nes.css/css/nes.min.css";
```
Vous devez installer css-loader.
##### HTML
```html
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
</head>
<body></body>
</html>
```
#### Par CDN
Importer le fichier CSS via la balise `<link />`:
```html
<!-- minify -->
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<!-- core style only -->
<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
```
### Polices
NES.css ne fournit aucune police, nous maintenons cependant la liste des polices que nous recommandons dans le cadre de l'utilisation de notre librairie.
| Language | Font |
| --------- | ------------------------------------------------------------------ |
| (Default) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
| English | [Kongtext](https://www.dafont.com/kongtext.font) |
| Japanese | [美咲フォント](http://littlelimit.net/misaki.htm) |
| Japanese | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) |
| Korean | [둥근모꼴](http://cactus.tistory.com/193) |
| Chinese | [Zpix (最像素)](https://github.com/SolidZORO/zpix-pixel-font) |
## Utilisation
NES.css fournit seulement des composants, vous devez définir votre layout/structure de page
La police recommandée pour l'utilisation de NES.css est [Press Start 2P][press-start-2p-font]. Toutefois, [Press Start 2P][press-start-2p-font] ne prend en charge que les caractères anglosaxons. Lorsque vous utilisez ce framework avec ds langues autre que l'anglais, nous vous recommandons d'utiliser une autre police. Suivez les [instructions][google-fonts-guide] fournis par Google Font pour les inclure, ou utilisez la méthode ci dessous :
```html
<head>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
<style>
html, body, pre, code, kbd, samp {
font-family: "font-family you want to use";
}
</style>
</head>
```
## CSS seulement
NES.css est constitué seulement de CSS et n'inclut ou demande aucunement du JavaScript.
## Support des différents navigateurs
NES.css est compatible avec la dernière version des navigateurs suivants:
* Chrome
* Firefox
* Safari
Non testé:
* IE/Edge
## Copyright and license
Code and documentation copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Code released under the MIT License. Docs released under Creative Commons.
## Developpement
Si vous êtes intéressé dans la participation à ce projet, nous accueillons les contributions de chacun et êtes les bienvenus !
Lisez le fichier [`CONTRIBUTING.md`][contributing-document] pour plus de détails et d'informations sur la manière de participer et nous aider à rendre NES.css encore plus incroyable !
[commitizen]: http://commitizen.github.io/cz-cli/
[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[contributing-document]: /CONTRIBUTING.md
[gitter]: https://gitter.im/nostalgic-css/Lobby
[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg
[google-fonts-guide]: https://developers.google.com/fonts/docs/getting_started
[press-start-2p-font]: https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P
================================================
FILE: .github/README-jp.md
================================================
<div align="center">
<a href="https://nostalgic-css.github.io/NES.css/" target="_blank"><img src="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" alt="NES.css: NES-style CSS framework" style="max-width: 100%;" width="600" height="315"></a>
<a href="/README.md">English</a> / <a href="README-zh-CN.md">简体中文</a> / <a href="README-es.md">Español</a> / <a href="README-pt-BR.md">Português</a> / <a href="README-ru.md">Русский</a>
</div>
NES.cssは **ファミコン風(8bit ライク)** なCSSフレームワークです。
[![Gitter][gitter-badge]][gitter] [![Commitizen friendly][commitizen-badge]][commitizen]
## インストール
### スタイル
NES.cssはnpm(推奨)、またはYarn、CDNのいずれかを介して利用できます。
#### パッケージマネージャを使う場合
```shell
npm install nes.css
# or
yarn add nes.css
```
私たちの`package.json`には、以下のキーの配下にいくつかの追加のメタデータが含まれています:
* `sass` - メインのSassソースファイルへのパス
* `style` - 非圧縮のCSSへのパス
##### AltCSS(sass, scss...)
```scss
// style.scss
@import "./node_modules/nes.css/css/nes.css"
```
##### JavaScript
```js
// script.js
import "nes.css/css/nes.min.css";
```
css-loaderが必要です。
##### HTML
```html
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
</head>
<body></body>
</html>
```
#### CDNを使う場合
`<link />`要素を使ってCSSをインポートする:
```html
<!-- 圧縮版 -->
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
<!-- 最新版 -->
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<!-- コアスタイルのみ -->
<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
```
### フォント
NES.cssはいかなるフォントも提供していませんが、ライブラリと一緒に使用をお勧めするフォントリストを整備しています。
| 言語 | フォント |
| ------------ | ------------------------------------------------------------------ |
| (デフォルト) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
| 英語 | [Kongtext](https://www.dafont.com/kongtext.font) |
| 日本語 | [美咲フォント](http://littlelimit.net/misaki.htm) |
| 日本語 | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) |
| 韓国語 | [둥근모꼴](http://cactus.tistory.com/193) |
| 中国語 | [Zpix (最像素)](https://github.com/SolidZORO/zpix-pixel-font) |
## 使い方
NES.cssはコンポーネントのスタイルのみを提供しています。レイアウトはみなさんが好きなように定義してください。
NES.cssの推奨フォントは[Press Start 2P][press-start-2p-font]です。ただし、[Press Start 2P][press-start-2p-font]は英語の文字のみをサポートしています。英語以外の言語でこのフレームワークを使用する場合は、別のフォントを使用してください。それらを読み込む方法は方法はGoogle Fontsの[指示][google-fonts-guide]に従うか、以下のように読み込んでください。
```html
<head>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
<style>
html, body, pre, code, kbd, samp {
font-family: "font-family you want to use";
}
</style>
</head>
```
## CSSのみ
NES.cssはCSSのみで構成されており、JavaScriptには依存しません。
## ブラウザサポート
NES.cssは次のブラウザの最新バージョンと互換性があります。
* Chrome
* Firefox
* Safari
未確認
* IE/Edge
## コピーライトとライセンス
コードとドキュメント copyright 2018 [B.C.Rikko](https://github.com/BcRikko). コードはMITライセンスの下で公開されています。ドキュメントはクリエイティブ コモンズの下で公開されています。
## 開発
このプロジェクトにご協力いただける場合は、すべてのコントリビュートを歓迎します。NES.cssを素晴らしいものにする方法の詳細は[`CONTRIBUTING.md`][contributing-document]をご覧ください。
[commitizen]: http://commitizen.github.io/cz-cli/
[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[contributing-document]: ./CONTRIBUTING-jp.md
[gitter]: https://gitter.im/nostalgic-css/Lobby
[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg
[google-fonts-guide]: https://developers.google.com/fonts/docs/getting_started
[press-start-2p-font]: https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P
================================================
FILE: .github/README-pt-BR.md
================================================
<div align="center">
<a href="https://nostalgic-css.github.io/NES.css/" target="_blank"><img src="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" alt="NES.css: NES-style CSS framework" style="max-width: 100%;" width="600" height="315"></a>
<a href="/README.md">English</a> / <a href="README-jp.md">日本語</a> / <a href="README-zh-CN.md">简体中文</a> / <a href="README-es.md">Español</a> / <a href="README-ru.md">Русский</a>
</div>
NES.css é um Framework CSS, no **estilo NES(8bit)**.
[![Gitter][gitter-badge]][gitter] [![Commitizen friendly][commitizen-badge]][commitizen]
## Instalação
### Estilos
NES.css está disponível seja através do npm (preferível) ou Yarn, ou pelo CDN.
#### via gerenciador de pacotes
```shell
npm install nes.css
# ou
yarn add nes.css
```
Nosso `package.json` contém alguns metadata adicionais, sob as seguintes chaves:
* `sass` - caminho para nosso arquivo de código fonte principal Sass
* `style` - caminho para nosso CSS não-minificado
##### AltCSS(sass, scss...)
```scss
// style.scss
@import "./node_modules/nes.css/css/nes.css"
```
##### JavaScript
```js
// script.js
import "nes.css/css/nes.min.css";
```
Você precisa instalar o css-loader.
##### HTML
```html
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
</head>
<body></body>
</html>
```
### via CDN
Importe o CSS através de um elemento `<link />`:
```html
<!-- minify -->
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<!-- core style only -->
<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
```
### Fontes
NES.css não fornece nenhuma fonte, mas nós mantemos uma lista de fontes recomendadas por nós para a utilização em conjunto com a biblioteca.
| Idioma | Fonte |
| -------- | ------------------------------------------------------------------ |
| (Padrão) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
| Inglês | [Kongtext](https://www.dafont.com/kongtext.font) |
| Japonês | [美咲フォント](http://littlelimit.net/misaki.htm) |
| Japonês | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) |
| Coreano | [둥근모꼴](http://cactus.tistory.com/193) |
| Chinês | [Zpix (最像素)](https://github.com/SolidZORO/zpix-pixel-font) |
## Utilização
NES.css apenas fornece os componentes. Você precisará definir seu próprio layout.
A fonte recomendada para NES.css é a [Press Start 2P][press-start-2p-font]. No entanto, ela apenas fornece suporte para caracteres ingleses. Quando você estiver usando este framework em qualquer outro idioma com exceção do inglês, por favor use outra fonte. Siga as [instruções][google-fonts-guide] fornecidas pelo Google Fonts sobre como incluí-la, ou simplismente faça a inclusão como consta abaixo:
```html
<head>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
<style>
html, body, pre, code, kbd, samp {
font-family: "font-family you want to use";
}
</style>
</head>
```
## Exclusivamente CSS
NES.css apenas usa CSS e não depende de qualquer JavaScript.
## Suporte para Browsers
NES.css é compatível com as mais novas versões dos seguintes browsers.
* Chrome
* Firefox
* Safari
Não testado
* IE/Edge
## Copyright e licença
Código e documentação copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Código lançado sobre a Licença MIT. Documentação e novos lançamentos com Creative Commons.
## Desenvolvimento
Se você quiser nos ajudar com o projeto, nós agradecemos contribuições de todos os tipos! Verifique nosso [`CONTRIBUTING-pt-BR.md`][contributing-document] para mais detalhes em como você pode ajudar a tornar o NES.css incrível!
[commitizen]: http://commitizen.github.io/cz-cli/
[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[contributing-document]: ./CONTRIBUTING-pt-BR.md
[gitter]: https://gitter.im/nostalgic-css/Lobby
[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg
[google-fonts-guide]: https://developers.google.com/fonts/docs/getting_started
[press-start-2p-font]: https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P
================================================
FILE: .github/README-ru.md
================================================
<div align="center">
<a href="https://nostalgic-css.github.io/NES.css/" target="_blank"><img src="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" alt="NES.css: NES-style CSS framework" style="max-width: 100%;" width="600" height="315"></a>
<a href="/README.md">English</a> / <a href="README-jp.md">日本語</a> / <a href="README-zh-CN.md">简体中文</a> / <a href="README-pt-BR.md">Português</a>
</div>
NES.css - это CSS фреймворк в стиле **NES(8bit)**
[![Gitter][gitter-badge]][gitter] [![Commitizen friendly][commitizen-badge]][commitizen]
## Установка
### С помощью стилей
NES.css доступен через npm (более предпочтительный), Yarn, или CDN.
#### Через менеджер пакетов
```shell
npm install nes.css
# или
yarn add nes.css
```
Наш `package.json` содержит дополнительную информацию в этих полях:
* `sass` - Путь до главного Sass файла
* `style` - Путь до неминифицированного CSS
##### AltCSS(sass, scss...)
```scss
// style.scss
@import "./node_modules/nes.css/css/nes.css"
```
##### JavaScript
```js
// script.js
import "nes.css/css/nes.min.css";
```
Вам необходимо установить css-загрузчик.
##### HTML
```html
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
</head>
<body></body>
</html>
```
#### Через CDN
Использования через тэг `<link />`:
```html
<!-- Миницифированные -->
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
<!-- Последние -->
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<!-- Только основные стили -->
<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
```
### Шрифты
NES.css не предоставляет никаких шрифтов, но мы поддерживаем следующие шрифты, которые рекомендуются к использованию с этой билиотекой
| Язык | Шрифт |
| ------------ | ------------------------------------------------------------------ |
| По умолчанию | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
| Английский | [Kongtext](https://www.dafont.com/kongtext.font) |
| Японский | [美咲フォント](http://littlelimit.net/misaki.htm) |
| Японский | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) |
| Корейский | [둥근모꼴](http://cactus.tistory.com/193) |
| китайский | [Zpix (最像素)](https://github.com/SolidZORO/zpix-pixel-font) |
## Использование
NES.css предоставляет компоненты. Вам нужно будет определить собственный лейаут.
Рекомендуемый для NES.css шрифт - [Press Start 2P][press-start-2p-font]. Однако, [Press Start 2P][press-start-2p-font] поддерживает только латинские символы. Когда вы используете NES.css не с английским языком, используйте другой шрифт. Cледуйте [инструкции][google-fonts-guide] Google Fonts про то, как их использовать или используйте их так:
```html
<head>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
<style>
html, body, pre, code, kbd, samp {
font-family: "font-family который вы хотите использовать";
}
</style>
</head>
```
## Только CSS
Для NES.css нужен только CSS и совсем не нужен JavaScript
## Поддержка браузерами
NES.css совместим с новейшими версяями следующих браузеров:
* Chrome
* Firefox
* Safari
Работоспособность не гарантируется:
* IE/Edge
## Лицензия и защита авторских прав
Código y documentación copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Код выпущен под лицензией MIT. Документация выпущена под лицензией Creative Commons.
## Разработка
Мы всегда рады вкладам! Обратите внимание [`CONTRIBUTING.md`][contributing-document] для большего количества деталей о том, как вы можете помочь нам делать NES.css более крутым!
[commitizen]: http://commitizen.github.io/cz-cli/
[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[contributing-document]: ./CONTRUBUTING-ru.md
[gitter]: https://gitter.im/nostalgic-css/Lobby
[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg
[google-fonts-guide]: https://developers.google.com/fonts/docs/getting_started
[press-start-2p-font]: https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P
================================================
FILE: .github/README-zh-CN.md
================================================
<div align="center">
<a href="https://nostalgic-css.github.io/NES.css/" target="_blank"><img src="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" alt="NES.css: NES-style CSS framework" style="max-width:100%;" width="600" height="315"></a>
<a href="/README.md">English</a> / <a href="README-jp.md">日本語</a> / <a href="README-es.md">Español</a> / <a href="README-pt-BR.md">Português</a> / <a href="README-ru.md">Русский</a>
</div>
NES.css 是一款 **NES-风格(8位机)** 的CSS 框架.
[![Gitter][gitter-badge]][gitter] [](http://commitizen.github.io/cz-cli/)
## 安装
#### via package manager
```shell
npm install nes.css
# or
yarn add nes.css
```
##### AltCSS(sass, scss...)
```scss
// style.scss
@import "./node_modules/nes.css/css/nes.css"
```
##### JavaScript
```js
// script.js
import "nes.css/css/nes.min.css";
```
您需要安装css加载程序.
##### HTML
```html
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
</head>
<body></body>
</html>
```
### via CDN
```html
<!-- non-minified -->
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<!-- core style only -->
<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
```
### 推荐字体
| 语言 | 字体 |
| ------ | ------------------------------------------------------------------ |
| (默认) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
| 英语 | [Kongtext](https://www.dafont.com/kongtext.font) |
| 日语 | [美咲フォント](http://littlelimit.net/misaki.htm) |
| 日语 | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) |
| 韩语 | [둥근모꼴](http://cactus.tistory.com/193) |
| 中文 | [Zpix (最像素)](https://github.com/SolidZORO/zpix-pixel-font) |
## 使用
NES.css 只提供组件. 你需要定义你自己的布局.
默认字体[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P) 只支持英文字符. 当你把这个框架与其他非英语的语言一起使用的时候, 请使用另外的字体. 请根据这个关于Google Fonts的 [说明](https://developers.google.com/fonts/docs/getting_started) 了解如何把它引入项目, 或者按照如下方式简单引入:
```html
<head>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
<style>
html, body, pre, code, kbd, samp {
font-family: "font-family you want to use";
}
</style>
</head>
```
## 只需要CSS
NES.css 仅仅需要 CSS 而不依赖其他任何 JavaScript.
## 浏览器支持
NES.css 与如下浏览器的最新版本兼容.
* Chrome
* Firefox
* Safari
未经测试
* IE/Edge
## 版权许可
代码以及文档版权 2018 [B.C.Rikko](https://github.com/BcRikko). 代码基于MIT许可发布. 文档基于Creative Commons许可发布.
[gitter]: https://gitter.im/nostalgic-css/Lobby
[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg
================================================
FILE: .gitignore
================================================
node_modules
.vscode
.idea
css
storybook-static
.DS_Store
# Ignoring built up css and map files
scss/*.css
scss/*.css.map
================================================
FILE: .npmignore
================================================
# User & editor settings
.editorconfig
.prettierignore
.vscode
# Build files
.circleci
.github
.storybook
commitlint.config.js
node_modules
# Documentation files
docs
favicon.ico
index.html
storybook-static
style.css
================================================
FILE: .prettierignore
================================================
**/*.html
**/*.md
demo/lib/*
================================================
FILE: .storybook/addons.js
================================================
/* eslint-disable import/no-extraneous-dependencies */
import '@storybook/addon-knobs/register';
import '@storybook/addon-backgrounds/register';
/* eslint-enable */
================================================
FILE: .storybook/config.js
================================================
/* eslint-disable import/no-extraneous-dependencies */
import {
addParameters,
configure,
} from '@storybook/html';
/* eslint-enable */
import '../scss/nes.scss'; // eslint-disable-line import/no-unresolved
// automatically import all files ending in *.stories.js
const req = require.context('../story', true, /.stories.js$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
const options = [
{ name: 'Blue', value: 'blue' },
{ name: 'Green', value: 'green' },
{ name: 'Yellow', value: 'yellow' },
{ name: 'Orange', value: 'orange' },
{ name: 'Red', value: 'red' },
{ name: 'Purple', value: 'purple' },
{ name: 'Black', value: 'black' },
{ name: 'White', value: 'white', default: true },
];
addParameters({ backgrounds: options });
configure(loadStories, module);
================================================
FILE: .storybook/preview-head.html
================================================
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<style>
html, body, #root {
align-items: center;
background-color: transparent !important;
display: flex;
height: 100vh;
justify-content: center;
width: 100vw;
}
#root {
padding: 20px;
}
</style>
================================================
FILE: .storybook/webpack.config.js
================================================
const path = require('path');
const scssFunctions = require('../scripts/scssFunctions');
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: 'sass-loader',
options: {
functions: scssFunctions,
},
},
],
include: path.resolve(__dirname, '../'),
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader',
},
],
},
};
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
View this document in another language:
[简体中文](.github/CODE_OF_CONDUCT-zh-CN.md) / [日本語](.github/CODE_OF_CONDUCT-jp.md) / [Español](.github/CODE_OF_CONDUCT-es.md) / [Português](.github/CODE_OF_CONDUCT-pt-BR.md)
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [support@nostalgi.cc][support-email]. If contacting the full project team is not desirable, feel free to contact any of them individually:
* B.C.Rikko <[b.c.rikko@gmail.com](mailto:b.c.rikko@gmail.com)>
* Igor Guastalla <[limaguastallaigor@gmail.com](mailto:limaguastallaigor@gmail.com)>
* Trezy <[tre@trezy.com](mailto:tre@trezy.com)>
All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[support-email]: mailto:support@nostalgi.cc
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing
View this document in another language:
[简体中文](.github/CONTRIBUTING-zh-CN.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md) / [Русский](.github/CONTRIBUTING-ru.md) / [한국어](.github/CONTRIBUTING-ko.md)
You want to contribute to the project? Awesome!
## Things to know
This project adheres to the Contributor Covenant code of conduct. By participating, you are expected to uphold this code. Please see our [Code of Conduct][code-of-conduct] for details on reporting unacceptable behavior.
**Working on your first Pull Request?**
[How to Contribute to an Open Source Project on GitHub][egghead]
## How do
* Project setup?
[We've got you covered!](#project-setup)
* Found a bug?
[Let us know!][new-issue]
* Patched a bug?
[Make a PR!][new-pr]
* Adding a new feature?
Make sure to [open an issue][new-issue] describing your feature, then open a [new PR][new-pr] when you're ready for feedback!
## Project setup
We're really happy you want to contribute to the project! ❤️ The following steps will get you up and running:
1. Fork and clone the repo
2. Install the required dependencies:
```sh
$ npm install
```
3. Start up the dev server:
To view all available components in an interactive interface, use storybook.
```sh
$ npm run storybook
```
### Directories
```sh
.
├── index.html: Demo page
├── style.css: Demo page style
├── css: Distribution files
├── docs: Storybook stories
└── scss: Source
├── base
│ ├── reboot.scss: Don't change! (Bootstrap Reboot)
│ ├── generic.scss: Generic style and reboot.css
│ └── variables.scss: Common variables
├── elements
├── components
├── form
├── icons: 16x16 icons
├── pixel-arts: For icons other than 16x16.
└── utilities
```
> Tip: Keep your `master` branch pointing at the original repository and make pull requests from branches on your fork. To do this, run:
>
> ```
> git remote add upstream https://github.com/nostalgic-css/NES.css.git
> git fetch upstream
> git branch --set-upstream-to=upstream/master master
> ```
>
> This will add the original repository as a "remote" called "upstream," fetch the git information from that remote, and set your local `master` branch to use the `upstream/master` branch whenever you run `git pull`. At that point, you can create all of your branches from this `master` branch. Whenever you want to update your version of `master`, do a regular `git pull`.
## Contributing for members of the `nostalgic-css` organization
Below are steps which must be followed by the members of the `nostalgic-css` organization. External collaborators only have to follow the above guidelines.
### Steps for development
1. Branch from `develop` using the formatting rules below.
2. Do the work required to satisfy the issue. If you identify work that is unrelated to the issue, please [create a new issue][new-issue] and do the work on a separate branch.
3. Submit your PRs to merge back into `develop`.
* Any change which would affect current development should be documented in the description.
* PRs with an issue should be include that issue's number in the title. IE: `[#33] Fix bug`
* Assign the PR to yourself.
* When the PR is ready to be merged, A review should be requested from the `nostalgic-css/NES.css` team.
4. Once the PR is approved, it is the responsibility of the **assignee** to merge the changes to the branch.
### Commit formatting
We use [Commitizen][commitizen] and [`commitlint`][commitlint] to make sure all of the commits to the project are easy to read, and [`semantic-release`][semantic-release] to ensure that our releases are automated, [unromantic, and unsentimental][sentimental-versioning].
[code-of-conduct]: CODE_OF_CONDUCT.md
[commitizen]: https://github.com/commitizen/cz-cli
[commitlint]: [https://github.com/marionebl/commitlint]
[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
[new-issue]: https://github.com/nostalgic-css/NES.css/issues/new/choose
[new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop
[semantic-release]: https://github.com/semantic-release/semantic-release
[sentimental-versioning]: http://sentimentalversioning.org/
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2018 B.C.Rikko <https://github.com/BcRikko>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<div align="center">
<a href="https://nostalgic-css.github.io/NES.css/" target="_blank"><img src="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" alt="NES.css: NES-style CSS framework" style="max-width: 100%;" width="600" height="315"></a>
<a href=".github/README-jp.md">日本語</a> / <a href=".github/README-zh-CN.md">简体中文</a> / <a href=".github/README-es.md">Español</a> / <a href=".github/README-pt-BR.md">Português</a> / <a href=".github/README-ru.md">Русский</a> / <a href=".github/README-fr.md">Français</a>
</div>
NES.css is a **NES-style(8bit-like)** CSS Framework.
[![Gitter][gitter-badge]][gitter] [![Commitizen friendly][commitizen-badge]][commitizen]
## Installation
### Styles
NES.css is available via either npm (preferred), Yarn, or a CDN.
#### via package manager
```shell
npm install nes.css
# or
yarn add nes.css
```
Our `package.json` contains some additional metadata under the following keys:
* `sass` - path to our main Sass source file
* `style` - path to our non-minified CSS
##### AltCSS(sass, scss...)
```scss
// style.scss
@import "./node_modules/nes.css/css/nes.css"
```
##### JavaScript
```js
// script.js
import "nes.css/css/nes.min.css";
```
You need to install css-loader.
##### HTML
```html
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
</head>
<body></body>
</html>
```
#### via CDN
Import the CSS via a `<link />` element:
```html
<!-- minify -->
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<!-- core style only -->
<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
```
### Fonts
NES.css doesn't provide any fonts, but we do maintain the following list of fonts that we recommend for usage alongside the library.
| Language | Font |
| --------- | ------------------------------------------------------------------ |
| (Default) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
| English | [Kongtext](https://www.dafont.com/kongtext.font) |
| Japanese | [美咲フォント](http://littlelimit.net/misaki.htm) |
| Japanese | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) |
| Korean | [둥근모꼴](http://cactus.tistory.com/193) |
| Chinese | [Zpix (最像素)](https://github.com/SolidZORO/zpix-pixel-font) |
## Usage
NES.css only provides components. You will need to define your own layout.
The recommended font for NES.css is [Press Start 2P][press-start-2p-font]. However, [Press Start 2P][press-start-2p-font] only supports English characters. When you're using this framework with any language other than English, please use another font. Follow the Google Fonts [instructions][google-fonts-guide] about how to include them, or simply include it as below:
```html
<head>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
<style>
html, body, pre, code, kbd, samp {
font-family: "font-family you want to use";
}
</style>
</head>
```
## CSS Only
NES.css only requires CSS and doesn't depend on any JavaScript.
## Browser Support
NES.css is compatible with the newest version of the following browsers:
* Chrome
* Firefox
* Safari
Untested
* IE/Edge
## Copyright and license
Code and documentation copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Code released under the MIT License. Docs released under Creative Commons.
## Development
If you'd like to help us out with the project, we welcome contributions of all types! Check out our [`CONTRIBUTING.md`][contributing-document] for more details on how you can help make NES.css amazing!
[commitizen]: http://commitizen.github.io/cz-cli/
[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[contributing-document]: CONTRIBUTING.md
[gitter]: https://gitter.im/nostalgic-css/Lobby
[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg
[google-fonts-guide]: https://developers.google.com/fonts/docs/getting_started
[press-start-2p-font]: https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P
================================================
FILE: commitlint.config.js
================================================
/* eslint-env node */
module.exports = {
extends: ['@commitlint/config-conventional'],
// Add your own rules. See http://marionebl.github.io/commitlint
rules: {},
};
================================================
FILE: docs/index.html
================================================
<!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" />
<meta name="theme-color" content="#212529"/>
<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://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 src="./lib/dialog-polyfill.js"></script>
<script src="./lib/highlight.js"></script>
<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>
<script>
if (window.navigator.userAgent.toLocaleLowerCase().indexOf('trident') !== -1) {
window.alert('IE is not supported on this page.')
}
</script>
</head>
<body>
<div id="nescss">
<header :class="{ sticky: scrollPos > 50 }">
<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>
</a>
<p>NES-style CSS Framework.</p>
</div>
<div class="social-buttons">
<p>Share on SNS</p>
<div class="share">
<a href="https://twitter.com/share?text=NES.css%EF%BD%9CNES-style%20CSS%20Framework%20%40bc_rikko&url=https://nostalgic-css.github.io/NES.css/" target="_blank"><i class="nes-icon twitter"></i></a>
<a href="https://www.facebook.com/sharer.php?u=https://nostalgic-css.github.io/NES.css/&t=NES.css%EF%BD%9CNES-style%20CSS%20Framework" target="_blank"><i class="nes-icon facebook"></i></a>
<a href="https://www.linkedin.com/shareArticle?url=https%3A//nostalgic-css.github.io/NES.css/&title=NES.css%EF%BD%9CNES-style%20CSS%20Framework" target="_blank"><i class="nes-icon linkedin"></i></a>
<a href="https://github.com/nostalgic-css/NES.css" target="_blank"><i class="nes-icon github"></i></a>
</div>
</div>
</div>
</header>
<div class="container">
<main class="main-content">
<a class="github-link" :class="{ active: scrollPos < 200 }" 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>
<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 or Yarn, or a CDN.</p>
<p>Please read <a href="https://github.com/nostalgic-css/NES.css" target="_blank" rel="noopener">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>
<p v-if="sample.description" class="description nes-text">{{ sample.description }}</p>
<p v-if="sample.note" class="note nes-text is-error">{{ sample.note }}</p>
<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($event, sample.title)">copy</button>
<pre><code class="html">{{ sample.code }}</code></pre>
</section>
</section>
</section>
<!-- Members -->
<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 class="lazy" :data-src="'https://github.com/' + member.github + '.png?size=80'" :alt="'Core Member ' + member.name">
</div>
<div class="profile">
<h4 class="name">{{ member.name }}</h4>
<p>{{ member.feat }}</p>
<div>
<a :href="'https://github.com/' + member.github" target="_blank" rel="noopener" aria-label="github"><i class="nes-icon github"></i></a>
<a v-if="member.twitter" :href="'https://twitter.com/' + member.twitter" target="_blank" rel="noopener" aria-label="twitter"><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 class="lazy" :data-src="'https://github.com/' + member.github + '.png?size=80'" :alt="'Emeriti ' + member.name">
</div>
<div class="profile">
<h4 class="name">{{ member.name }}</h4>
<p>{{ member.feat }}</p>
<div>
<a :href="'https://github.com/' + member.github" target="_blank" rel="noopener" aria-label="github"><i class="nes-icon github"></i></a>
<a v-if="member.twitter" :href="'https://twitter.com/' + member.twitter" target="_blank" rel="noopener" aria-label="twitter"><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 lazy" :data-src="'https://github.com/' + user + '.png?size=64'" :alt="'Contributor ' + user">
<p>{{ user }}</p>
</a>
</template>
</section>
</section>
<!-- Articles -->
<section class="topic">
<h2 id="articles"><a href="#articles">#</a>Articles</h2>
<article class="article-link">
<h3 class="title">
<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>
</article>
<article class="article-link">
<h3 class="title">
<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>
</article>
</section>
</main>
<footer>
<p>
<span>©2018</span>
<a href="https://kuroeveryday.blogspot.com/" target="_blank" rel="noopener">Black Everyday Company</a>
<span>-</span>
<a href="https://twitter.com/bc_rikko" target="_blank" rel="noopener">@bc_rikko</a>
</p>
</footer>
<!-- Copied balloon -->
<div class="nes-balloon from-right copied-balloon" :style="copiedBalloon">
<p>copied!!</p>
</div>
<!-- FAB Button -->
<button type="button" class="nes-btn is-error scroll-btn" :class="{ active: scrollPos > 500 }" @click="window.scrollTo({ top:0, behavior: 'smooth' })"><span><</span></button>
</div>
</div>
</body>
<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>
================================================
FILE: docs/lib/dialog-polyfill.css
================================================
/* 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%)}
================================================
FILE: docs/lib/dialog-polyfill.js
================================================
/**
* Copyright (c) 2013 The Chromium Authors. All rights reserved.
*/
!function(){var e=window.CustomEvent;function t(e){for(;e;){if("dialog"===e.localName)return e;e=e.parentElement}return null}function o(e){e&&e.blur&&e!==document.body&&e.blur()}function i(e,t){for(var o=0;o<e.length;++o)if(e[o]===t)return!0;return!1}function n(e){return!(!e||!e.hasAttribute("method"))&&"dialog"===e.getAttribute("method").toLowerCase()}function a(e){if(this.dialog_=e,this.replacedStyleTop_=!1,this.openAsModal_=!1,e.hasAttribute("role")||e.setAttribute("role","dialog"),e.show=this.show.bind(this),e.showModal=this.showModal.bind(this),e.close=this.close.bind(this),"returnValue"in e||(e.returnValue=""),"MutationObserver"in window){new MutationObserver(this.maybeHideModal.bind(this)).observe(e,{attributes:!0,attributeFilter:["open"]})}else{var t,o=!1,i=function(){o?this.downgradeModal():this.maybeHideModal(),o=!1}.bind(this),n=function(n){if(n.target===e){var a="DOMNodeRemoved";o|=n.type.substr(0,a.length)===a,window.clearTimeout(t),t=window.setTimeout(i,0)}};["DOMAttrModified","DOMNodeRemoved","DOMNodeRemovedFromDocument"].forEach(function(t){e.addEventListener(t,n)})}Object.defineProperty(e,"open",{set:this.setOpen.bind(this),get:e.hasAttribute.bind(e,"open")}),this.backdrop_=document.createElement("div"),this.backdrop_.className="backdrop",this.backdrop_.addEventListener("click",this.backdropClick_.bind(this))}e&&"object"!=typeof e||((e=function(e,t){t=t||{};var o=document.createEvent("CustomEvent");return o.initCustomEvent(e,!!t.bubbles,!!t.cancelable,t.detail||null),o}).prototype=window.Event.prototype),a.prototype={get dialog(){return this.dialog_},maybeHideModal:function(){this.dialog_.hasAttribute("open")&&document.body.contains(this.dialog_)||this.downgradeModal()},downgradeModal:function(){this.openAsModal_&&(this.openAsModal_=!1,this.dialog_.style.zIndex="",this.replacedStyleTop_&&(this.dialog_.style.top="",this.replacedStyleTop_=!1),this.backdrop_.parentNode&&this.backdrop_.parentNode.removeChild(this.backdrop_),r.dm.removeDialog(this))},setOpen:function(e){e?this.dialog_.hasAttribute("open")||this.dialog_.setAttribute("open",""):(this.dialog_.removeAttribute("open"),this.maybeHideModal())},backdropClick_:function(e){if(this.dialog_.hasAttribute("tabindex"))this.dialog_.focus();else{var t=document.createElement("div");this.dialog_.insertBefore(t,this.dialog_.firstChild),t.tabIndex=-1,t.focus(),this.dialog_.removeChild(t)}var o=document.createEvent("MouseEvents");o.initMouseEvent(e.type,e.bubbles,e.cancelable,window,e.detail,e.screenX,e.screenY,e.clientX,e.clientY,e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,e.button,e.relatedTarget),this.dialog_.dispatchEvent(o),e.stopPropagation()},focus_:function(){var e=this.dialog_.querySelector("[autofocus]:not([disabled])");if(!e&&this.dialog_.tabIndex>=0&&(e=this.dialog_),!e){var t=["button","input","keygen","select","textarea"].map(function(e){return e+":not([disabled])"});t.push('[tabindex]:not([disabled]):not([tabindex=""])'),e=this.dialog_.querySelector(t.join(", "))}o(document.activeElement),e&&e.focus()},updateZIndex:function(e,t){if(e<t)throw new Error("dialogZ should never be < backdropZ");this.dialog_.style.zIndex=e,this.backdrop_.style.zIndex=t},show:function(){this.dialog_.open||(this.setOpen(!0),this.focus_())},showModal:function(){if(this.dialog_.hasAttribute("open"))throw new Error("Failed to execute 'showModal' on dialog: The element is already open, and therefore cannot be opened modally.");if(!document.body.contains(this.dialog_))throw new Error("Failed to execute 'showModal' on dialog: The element is not in a Document.");if(!r.dm.pushDialog(this))throw new Error("Failed to execute 'showModal' on dialog: There are too many open modal dialogs.");(function(e){for(;e&&e!==document.body;){var t=window.getComputedStyle(e),o=function(e,o){return!(void 0===t[e]||t[e]===o)};if(t.opacity<1||o("zIndex","auto")||o("transform","none")||o("mixBlendMode","normal")||o("filter","none")||o("perspective","none")||"isolate"===t.isolation||"fixed"===t.position||"touch"===t.webkitOverflowScrolling)return!0;e=e.parentElement}return!1})(this.dialog_.parentElement)&&console.warn("A dialog is being shown inside a stacking context. This may cause it to be unusable. For more information, see this link: https://github.com/GoogleChrome/dialog-polyfill/#stacking-context"),this.setOpen(!0),this.openAsModal_=!0,r.needsCentering(this.dialog_)?(r.reposition(this.dialog_),this.replacedStyleTop_=!0):this.replacedStyleTop_=!1,this.dialog_.parentNode.insertBefore(this.backdrop_,this.dialog_.nextSibling),this.focus_()},close:function(t){if(!this.dialog_.hasAttribute("open"))throw new Error("Failed to execute 'close' on dialog: The element does not have an 'open' attribute, and therefore cannot be closed.");this.setOpen(!1),void 0!==t&&(this.dialog_.returnValue=t);var o=new e("close",{bubbles:!1,cancelable:!1});this.dialog_.dispatchEvent(o)}};var r={};if(r.reposition=function(e){var t=document.body.scrollTop||document.documentElement.scrollTop,o=t+(window.innerHeight-e.offsetHeight)/2;e.style.top=Math.max(t,o)+"px"},r.isInlinePositionSetByStylesheet=function(e){for(var t=0;t<document.styleSheets.length;++t){var o=document.styleSheets[t],n=null;try{n=o.cssRules}catch(e){}if(n)for(var a=0;a<n.length;++a){var r=n[a],l=null;try{l=document.querySelectorAll(r.selectorText)}catch(e){}if(l&&i(l,e)){var s=r.style.getPropertyValue("top"),d=r.style.getPropertyValue("bottom");if(s&&"auto"!==s||d&&"auto"!==d)return!0}}}return!1},r.needsCentering=function(e){return"absolute"===window.getComputedStyle(e).position&&(!("auto"!==e.style.top&&""!==e.style.top||"auto"!==e.style.bottom&&""!==e.style.bottom)&&!r.isInlinePositionSetByStylesheet(e))},r.forceRegisterDialog=function(e){if((window.HTMLDialogElement||e.showModal)&&console.warn("This browser already supports <dialog>, the polyfill may not work correctly",e),"dialog"!==e.localName)throw new Error("Failed to register dialog: The element is not a dialog.");new a(e)},r.registerDialog=function(e){e.showModal||r.forceRegisterDialog(e)},r.DialogManager=function(){this.pendingDialogStack=[];var e=this.checkDOM_.bind(this);this.overlay=document.createElement("div"),this.overlay.className="_dialog_overlay",this.overlay.addEventListener("click",function(t){this.forwardTab_=void 0,t.stopPropagation(),e([])}.bind(this)),this.handleKey_=this.handleKey_.bind(this),this.handleFocus_=this.handleFocus_.bind(this),this.zIndexLow_=1e5,this.zIndexHigh_=100150,this.forwardTab_=void 0,"MutationObserver"in window&&(this.mo_=new MutationObserver(function(t){var o=[];t.forEach(function(e){for(var t,i=0;t=e.removedNodes[i];++i)t instanceof Element&&("dialog"===t.localName&&o.push(t),o=o.concat(t.querySelectorAll("dialog")))}),o.length&&e(o)}))},r.DialogManager.prototype.blockDocument=function(){document.documentElement.addEventListener("focus",this.handleFocus_,!0),document.addEventListener("keydown",this.handleKey_),this.mo_&&this.mo_.observe(document,{childList:!0,subtree:!0})},r.DialogManager.prototype.unblockDocument=function(){document.documentElement.removeEventListener("focus",this.handleFocus_,!0),document.removeEventListener("keydown",this.handleKey_),this.mo_&&this.mo_.disconnect()},r.DialogManager.prototype.updateStacking=function(){for(var e,t=this.zIndexHigh_,o=0;e=this.pendingDialogStack[o];++o)e.updateZIndex(--t,--t),0===o&&(this.overlay.style.zIndex=--t);var i=this.pendingDialogStack[0];i?(i.dialog.parentNode||document.body).appendChild(this.overlay):this.overlay.parentNode&&this.overlay.parentNode.removeChild(this.overlay)},r.DialogManager.prototype.containedByTopDialog_=function(e){for(;e=t(e);){for(var o,i=0;o=this.pendingDialogStack[i];++i)if(o.dialog===e)return 0===i;e=e.parentElement}return!1},r.DialogManager.prototype.handleFocus_=function(e){if(!this.containedByTopDialog_(e.target)&&document.activeElement!==document.documentElement&&(e.preventDefault(),e.stopPropagation(),o(e.target),void 0!==this.forwardTab_)){var t=this.pendingDialogStack[0];return t.dialog.compareDocumentPosition(e.target)&Node.DOCUMENT_POSITION_PRECEDING&&(this.forwardTab_?t.focus_():e.target!==document.documentElement&&document.documentElement.focus()),!1}},r.DialogManager.prototype.handleKey_=function(t){if(this.forwardTab_=void 0,27===t.keyCode){t.preventDefault(),t.stopPropagation();var o=new e("cancel",{bubbles:!1,cancelable:!0}),i=this.pendingDialogStack[0];i&&i.dialog.dispatchEvent(o)&&i.dialog.close()}else 9===t.keyCode&&(this.forwardTab_=!t.shiftKey)},r.DialogManager.prototype.checkDOM_=function(e){this.pendingDialogStack.slice().forEach(function(t){-1!==e.indexOf(t.dialog)?t.downgradeModal():t.maybeHideModal()})},r.DialogManager.prototype.pushDialog=function(e){var t=(this.zIndexHigh_-this.zIndexLow_)/2-1;return!(this.pendingDialogStack.length>=t)&&(1===this.pendingDialogStack.unshift(e)&&this.blockDocument(),this.updateStacking(),!0)},r.DialogManager.prototype.removeDialog=function(e){var t=this.pendingDialogStack.indexOf(e);-1!==t&&(this.pendingDialogStack.splice(t,1),0===this.pendingDialogStack.length&&this.unblockDocument(),this.updateStacking())},r.dm=new r.DialogManager,r.formSubmitter=null,r.useValue=null,void 0===window.HTMLDialogElement){var l=document.createElement("form");if(l.setAttribute("method","dialog"),"dialog"!==l.method){var s=Object.getOwnPropertyDescriptor(HTMLFormElement.prototype,"method");if(s){var d=s.get;s.get=function(){return n(this)?"dialog":d.call(this)};var c=s.set;s.set=function(e){return"string"==typeof e&&"dialog"===e.toLowerCase()?this.setAttribute("method",e):c.call(this,e)},Object.defineProperty(HTMLFormElement.prototype,"method",s)}}document.addEventListener("click",function(e){if(r.formSubmitter=null,r.useValue=null,!e.defaultPrevented){var o=e.target;if(o&&n(o.form)){if(!("submit"===o.type&&["button","input"].indexOf(o.localName)>-1)){if("input"!==o.localName||"image"!==o.type)return;r.useValue=e.offsetX+","+e.offsetY}t(o)&&(r.formSubmitter=o)}}},!1);var u=HTMLFormElement.prototype.submit;HTMLFormElement.prototype.submit=function(){if(!n(this))return u.call(this);var e=t(this);e&&e.close()},document.addEventListener("submit",function(e){var o=e.target;if(n(o)){e.preventDefault();var i=t(o);if(i){var a=r.formSubmitter;a&&a.form===o?i.close(r.useValue||a.value):i.close(),r.formSubmitter=null}}},!0)}r.forceRegisterDialog=r.forceRegisterDialog,r.registerDialog=r.registerDialog,"function"==typeof define&&"amd"in define?define(function(){return r}):"object"==typeof module&&"object"==typeof module.exports?module.exports=r:window.dialogPolyfill=r}();
================================================
FILE: docs/lib/highlight-theme.css
================================================
/*
* 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}
================================================
FILE: docs/lib/highlight.js
================================================
/*! highlight.js v9.14.2 | BSD3 License | git.io/hljslicense */
!function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?e(exports):n&&(n.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return n.hljs}))}(function(e){function n(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0===t.index}function a(e){return k.test(e)}function i(e){var n,t,r,i,o=e.className+" ";if(o+=e.parentNode?e.parentNode.className:"",t=M.exec(o))return w(t[1])?t[1]:"no-highlight";for(o=o.split(/\s+/),n=0,r=o.length;r>n;n++)if(i=o[n],a(i)||w(i))return i}function o(e){var n,t={},r=Array.prototype.slice.call(arguments,1);for(n in e)t[n]=e[n];return r.forEach(function(e){for(n in e)t[n]=e[n]}),t}function c(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3===i.nodeType?a+=i.nodeValue.length:1===i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function u(e,r,a){function i(){return e.length&&r.length?e[0].offset!==r[0].offset?e[0].offset<r[0].offset?e:r:"start"===r[0].event?e:r:e.length?e:r}function o(e){function r(e){return" "+e.nodeName+'="'+n(e.value).replace('"',""")+'"'}l+="<"+t(e)+E.map.call(e.attributes,r).join("")+">"}function c(e){l+="</"+t(e)+">"}function u(e){("start"===e.event?o:c)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=i();if(l+=n(a.substring(s,g[0].offset)),s=g[0].offset,g===e){f.reverse().forEach(c);do u(g.splice(0,1)[0]),g=i();while(g===e&&g.length&&g[0].offset===s);f.reverse().forEach(o)}else"start"===g[0].event?f.push(g[0].node):f.pop(),u(g.splice(0,1)[0])}return l+n(a.substr(s))}function s(e){return e.v&&!e.cached_variants&&(e.cached_variants=e.v.map(function(n){return o(e,{v:null},n)})),e.cached_variants||e.eW&&[o(e)]||[e]}function l(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var o={},c=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");o[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?c("keyword",a.k):B(a.k).forEach(function(e){c(e,a.k[e])}),a.k=o}a.lR=t(a.l||/\w+/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.endSameAsBegin&&(a.e=a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),null==a.r&&(a.r=1),a.c||(a.c=[]),a.c=Array.prototype.concat.apply([],a.c.map(function(e){return s("self"===e?a:e)})),a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var u=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=u.length?t(u.join("|"),!0):{exec:function(){return null}}}}r(e)}function f(e,t,a,i){function o(e){return new RegExp(e.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&"),"m")}function c(e,n){var t,a;for(t=0,a=n.c.length;a>t;t++)if(r(n.c[t].bR,e))return n.c[t].endSameAsBegin&&(n.c[t].eR=o(n.c[t].bR.exec(e)[0])),n.c[t]}function u(e,n){if(r(e.eR,n)){for(;e.endsParent&&e.parent;)e=e.parent;return e}return e.eW?u(e.parent,n):void 0}function s(e,n){return!a&&r(n.iR,e)}function p(e,n){var t=R.cI?n[0].toLowerCase():n[0];return e.k.hasOwnProperty(t)&&e.k[t]}function d(e,n,t,r){var a=r?"":j.classPrefix,i='<span class="'+a,o=t?"":I;return i+=e+'">',i+n+o}function h(){var e,t,r,a;if(!E.k)return n(k);for(a="",t=0,E.lR.lastIndex=0,r=E.lR.exec(k);r;)a+=n(k.substring(t,r.index)),e=p(E,r),e?(M+=e[1],a+=d(e[0],n(r[0]))):a+=n(r[0]),t=E.lR.lastIndex,r=E.lR.exec(k);return a+n(k.substr(t))}function b(){var e="string"==typeof E.sL;if(e&&!L[E.sL])return n(k);var t=e?f(E.sL,k,!0,B[E.sL]):g(k,E.sL.length?E.sL:void 0);return E.r>0&&(M+=t.r),e&&(B[E.sL]=t.top),d(t.language,t.value,!1,!0)}function v(){y+=null!=E.sL?b():h(),k=""}function m(e){y+=e.cN?d(e.cN,"",!0):"",E=Object.create(e,{parent:{value:E}})}function N(e,n){if(k+=e,null==n)return v(),0;var t=c(n,E);if(t)return t.skip?k+=n:(t.eB&&(k+=n),v(),t.rB||t.eB||(k=n)),m(t,n),t.rB?0:n.length;var r=u(E,n);if(r){var a=E;a.skip?k+=n:(a.rE||a.eE||(k+=n),v(),a.eE&&(k=n));do E.cN&&(y+=I),E.skip||E.sL||(M+=E.r),E=E.parent;while(E!==r.parent);return r.starts&&(r.endSameAsBegin&&(r.starts.eR=r.eR),m(r.starts,"")),a.rE?0:n.length}if(s(n,E))throw new Error('Illegal lexeme "'+n+'" for mode "'+(E.cN||"<unnamed>")+'"');return k+=n,n.length||1}var R=w(e);if(!R)throw new Error('Unknown language: "'+e+'"');l(R);var x,E=i||R,B={},y="";for(x=E;x!==R;x=x.parent)x.cN&&(y=d(x.cN,"",!0)+y);var k="",M=0;try{for(var C,A,S=0;;){if(E.t.lastIndex=S,C=E.t.exec(t),!C)break;A=N(t.substring(S,C.index),C[0]),S=C.index+A}for(N(t.substr(S)),x=E;x.parent;x=x.parent)x.cN&&(y+=I);return{r:M,value:y,language:e,top:E}}catch(O){if(O.message&&-1!==O.message.indexOf("Illegal"))return{r:0,value:n(t)};throw O}}function g(e,t){t=t||j.languages||B(L);var r={r:0,value:n(e)},a=r;return t.filter(w).filter(x).forEach(function(n){var t=f(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}),a.language&&(r.second_best=a),r}function p(e){return j.tabReplace||j.useBR?e.replace(C,function(e,n){return j.useBR&&"\n"===e?"<br>":j.tabReplace?n.replace(/\t/g,j.tabReplace):""}):e}function d(e,n,t){var r=n?y[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function h(e){var n,t,r,o,s,l=i(e);a(l)||(j.useBR?(n=document.createElementNS("http://www.w3.org/1999/xhtml","div"),n.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/<br[ \/]*>/g,"\n")):n=e,s=n.textContent,r=l?f(l,s,!0):g(s),t=c(n),t.length&&(o=document.createElementNS("http://www.w3.org/1999/xhtml","div"),o.innerHTML=r.value,r.value=u(t,c(o),s)),r.value=p(r.value),e.innerHTML=r.value,e.className=d(e.className,l,r.language),e.result={language:r.language,re:r.r},r.second_best&&(e.second_best={language:r.second_best.language,re:r.second_best.r}))}function b(e){j=o(j,e)}function v(){if(!v.called){v.called=!0;var e=document.querySelectorAll("pre code");E.forEach.call(e,h)}}function m(){addEventListener("DOMContentLoaded",v,!1),addEventListener("load",v,!1)}function N(n,t){var r=L[n]=t(e);r.aliases&&r.aliases.forEach(function(e){y[e]=n})}function R(){return B(L)}function w(e){return e=(e||"").toLowerCase(),L[e]||L[y[e]]}function x(e){var n=w(e);return n&&!n.disableAutodetect}var E=[],B=Object.keys,L={},y={},k=/^(no-?highlight|plain|text)$/i,M=/\blang(?:uage)?-([\w-]+)\b/i,C=/((^(<[^>]+>|\t|)+|(?:\n)))/gm,I="</span>",j={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0};return e.highlight=f,e.highlightAuto=g,e.fixMarkup=p,e.highlightBlock=h,e.configure=b,e.initHighlighting=v,e.initHighlightingOnLoad=m,e.registerLanguage=N,e.listLanguages=R,e.getLanguage=w,e.autoDetection=x,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",t={b:/[A-Z\_\.\-]+\s*:/,rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:/\S/,e:":",eE:!0,starts:{eW:!0,eE:!0,c:[{b:/[\w-]+\(/,rB:!0,c:[{cN:"built_in",b:/[\w-]+/},{b:/\(/,e:/\)/,c:[e.ASM,e.QSM]}]},e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"number",b:"#[0-9A-Fa-f]+"},{cN:"meta",b:"!important"}]}}]};return{cI:!0,i:/[=\/|'\$]/,c:[e.CBCM,{cN:"selector-id",b:/#[A-Za-z0-9_-]+/},{cN:"selector-class",b:/\.[A-Za-z0-9_-]+/},{cN:"selector-attr",b:/\[/,e:/\]/,i:"$"},{cN:"selector-pseudo",b:/:(:)?[a-zA-Z0-9\_\-\+\(\)"'.]+/},{b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{b:"@",e:"[{;]",i:/:/,c:[{cN:"keyword",b:/\w+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[e.ASM,e.QSM,e.CSSNM]}]},{cN:"selector-tag",b:c,r:0},{b:"{",e:"}",i:/\S/,c:[e.CBCM,t]}]}});hljs.registerLanguage("xml",function(s){var e="[A-Za-z0-9\\._:-]+",t={eW:!0,i:/</,r:0,c:[{cN:"attr",b:e,r:0},{b:/=\s*/,r:0,c:[{cN:"string",endsParent:!0,v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s"'=<>`]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist"],cI:!0,c:[{cN:"meta",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},s.C("<!--","-->",{r:10}),{b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"meta",b:/<\?xml/,e:/\?>/,r:10},{b:/<\?(php)?/,e:/\?>/,sL:"php",c:[{b:"/\\*",e:"\\*/",skip:!0},{b:'b"',e:'"',skip:!0},{b:"b'",e:"'",skip:!0},s.inherit(s.ASM,{i:null,cN:null,c:null,skip:!0}),s.inherit(s.QSM,{i:null,cN:null,c:null,skip:!0})]},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{name:"style"},c:[t],starts:{e:"</style>",rE:!0,sL:["css","xml"]}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{name:"script"},c:[t],starts:{e:"</script>",rE:!0,sL:["actionscript","javascript","handlebars","xml"]}},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"name",b:/[^\/><\s]+/,r:0},t]}]}});hljs.registerLanguage("javascript",function(e){var r="[A-Za-z$_][0-9A-Za-z$_]*",t={keyword:"in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await static import from as",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise"},a={cN:"number",v:[{b:"\\b(0[bB][01]+)"},{b:"\\b(0[oO][0-7]+)"},{b:e.CNR}],r:0},n={cN:"subst",b:"\\$\\{",e:"\\}",k:t,c:[]},c={cN:"string",b:"`",e:"`",c:[e.BE,n]};n.c=[e.ASM,e.QSM,c,a,e.RM];var s=n.c.concat([e.CBCM,e.CLCM]);return{aliases:["js","jsx"],k:t,c:[{cN:"meta",r:10,b:/^\s*['"]use (strict|asm)['"]/},{cN:"meta",b:/^#!/,e:/$/},e.ASM,e.QSM,c,e.CLCM,e.CBCM,a,{b:/[{,]\s*/,r:0,c:[{b:r+"\\s*:",rB:!0,r:0,c:[{cN:"attr",b:r,r:0}]}]},{b:"("+e.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[e.CLCM,e.CBCM,e.RM,{cN:"function",b:"(\\(.*?\\)|"+r+")\\s*=>",rB:!0,e:"\\s*=>",c:[{cN:"params",v:[{b:r},{b:/\(\s*\)/},{b:/\(/,e:/\)/,eB:!0,eE:!0,k:t,c:s}]}]},{b:/</,e:/(\/\w+|\w+\/)>/,sL:"xml",c:[{b:/<\w+\s*\/>/,skip:!0},{b:/<\w+/,e:/(\/\w+|\w+\/)>/,skip:!0,c:[{b:/<\w+\s*\/>/,skip:!0},"self"]}]}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[e.inherit(e.TM,{b:r}),{cN:"params",b:/\(/,e:/\)/,eB:!0,eE:!0,c:s}],i:/\[|%/},{b:/\$[(.]/},e.METHOD_GUARD,{cN:"class",bK:"class",e:/[{;=]/,eE:!0,i:/[:"\[\]]/,c:[{bK:"extends"},e.UTM]},{bK:"constructor get set",e:/\{/,eE:!0}],i:/#(?!!)/}});hljs.registerLanguage("scss",function(e){var t="[a-zA-Z-][a-zA-Z0-9_-]*",i={cN:"variable",b:"(\\$"+t+")\\b"},r={cN:"number",b:"#[0-9A-Fa-f]+"};({cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:!0,i:"[^\\s]",starts:{eW:!0,eE:!0,c:[r,e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"meta",b:"!important"}]}});return{cI:!0,i:"[=/|']",c:[e.CLCM,e.CBCM,{cN:"selector-id",b:"\\#[A-Za-z0-9_-]+",r:0},{cN:"selector-class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"selector-attr",b:"\\[",e:"\\]",i:"$"},{cN:"selector-tag",b:"\\b(a|abbr|acronym|address|area|article|aside|audio|b|base|big|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|command|datalist|dd|del|details|dfn|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|frame|frameset|(h[1-6])|head|header|hgroup|hr|html|i|iframe|img|input|ins|kbd|keygen|label|legend|li|link|map|mark|meta|meter|nav|noframes|noscript|object|ol|optgroup|option|output|p|param|pre|progress|q|rp|rt|ruby|samp|script|section|select|small|span|strike|strong|style|sub|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|tt|ul|var|video)\\b",r:0},{b:":(visited|valid|root|right|required|read-write|read-only|out-range|optional|only-of-type|only-child|nth-of-type|nth-last-of-type|nth-last-child|nth-child|not|link|left|last-of-type|last-child|lang|invalid|indeterminate|in-range|hover|focus|first-of-type|first-line|first-letter|first-child|first|enabled|empty|disabled|default|checked|before|after|active)"},{b:"::(after|before|choices|first-letter|first-line|repeat-index|repeat-item|selection|value)"},i,{cN:"attribute",b:"\\b(z-index|word-wrap|word-spacing|word-break|width|widows|white-space|visibility|vertical-align|unicode-bidi|transition-timing-function|transition-property|transition-duration|transition-delay|transition|transform-style|transform-origin|transform|top|text-underline-position|text-transform|text-shadow|text-rendering|text-overflow|text-indent|text-decoration-style|text-decoration-line|text-decoration-color|text-decoration|text-align-last|text-align|tab-size|table-layout|right|resize|quotes|position|pointer-events|perspective-origin|perspective|page-break-inside|page-break-before|page-break-after|padding-top|padding-right|padding-left|padding-bottom|padding|overflow-y|overflow-x|overflow-wrap|overflow|outline-width|outline-style|outline-offset|outline-color|outline|orphans|order|opacity|object-position|object-fit|normal|none|nav-up|nav-right|nav-left|nav-index|nav-down|min-width|min-height|max-width|max-height|mask|marks|margin-top|margin-right|margin-left|margin-bottom|margin|list-style-type|list-style-position|list-style-image|list-style|line-height|letter-spacing|left|justify-content|initial|inherit|ime-mode|image-orientation|image-resolution|image-rendering|icon|hyphens|height|font-weight|font-variant-ligatures|font-variant|font-style|font-stretch|font-size-adjust|font-size|font-language-override|font-kerning|font-feature-settings|font-family|font|float|flex-wrap|flex-shrink|flex-grow|flex-flow|flex-direction|flex-basis|flex|filter|empty-cells|display|direction|cursor|counter-reset|counter-increment|content|column-width|column-span|column-rule-width|column-rule-style|column-rule-color|column-rule|column-gap|column-fill|column-count|columns|color|clip-path|clip|clear|caption-side|break-inside|break-before|break-after|box-sizing|box-shadow|box-decoration-break|bottom|border-width|border-top-width|border-top-style|border-top-right-radius|border-top-left-radius|border-top-color|border-top|border-style|border-spacing|border-right-width|border-right-style|border-right-color|border-right|border-radius|border-left-width|border-left-style|border-left-color|border-left|border-image-width|border-image-source|border-image-slice|border-image-repeat|border-image-outset|border-image|border-color|border-collapse|border-bottom-width|border-bottom-style|border-bottom-right-radius|border-bottom-left-radius|border-bottom-color|border-bottom|border|background-size|background-repeat|background-position|background-origin|background-image|background-color|background-clip|background-attachment|background-blend-mode|background|backface-visibility|auto|animation-timing-function|animation-play-state|animation-name|animation-iteration-count|animation-fill-mode|animation-duration|animation-direction|animation-delay|animation|align-self|align-items|align-content)\\b",i:"[^\\s]"},{b:"\\b(whitespace|wait|w-resize|visible|vertical-text|vertical-ideographic|uppercase|upper-roman|upper-alpha|underline|transparent|top|thin|thick|text|text-top|text-bottom|tb-rl|table-header-group|table-footer-group|sw-resize|super|strict|static|square|solid|small-caps|separate|se-resize|scroll|s-resize|rtl|row-resize|ridge|right|repeat|repeat-y|repeat-x|relative|progress|pointer|overline|outside|outset|oblique|nowrap|not-allowed|normal|none|nw-resize|no-repeat|no-drop|newspaper|ne-resize|n-resize|move|middle|medium|ltr|lr-tb|lowercase|lower-roman|lower-alpha|loose|list-item|line|line-through|line-edge|lighter|left|keep-all|justify|italic|inter-word|inter-ideograph|inside|inset|inline|inline-block|inherit|inactive|ideograph-space|ideograph-parenthesis|ideograph-numeric|ideograph-alpha|horizontal|hidden|help|hand|groove|fixed|ellipsis|e-resize|double|dotted|distribute|distribute-space|distribute-letter|distribute-all-lines|disc|disabled|default|decimal|dashed|crosshair|collapse|col-resize|circle|char|center|capitalize|break-word|break-all|bottom|both|bolder|bold|block|bidi-override|below|baseline|auto|always|all-scroll|absolute|table|table-cell)\\b"},{b:":",e:";",c:[i,r,e.CSSNM,e.QSM,e.ASM,{cN:"meta",b:"!important"}]},{b:"@",e:"[{;]",k:"mixin include extend for if else each while charset import debug media page content font-face namespace warn",c:[i,e.QSM,e.ASM,r,e.CSSNM,{b:"\\s[A-Za-z0-9_.-]+",r:0}]}]}});
================================================
FILE: docs/script.js
================================================
const sampleCollection = [
{
title: 'texts',
showCode: false,
code: `<span class="nes-text is-primary">Primary</span>
<span class="nes-text is-success">Success</span>
<span class="nes-text is-warning">Warning</span>
<span class="nes-text is-error">Error</span>
<span class="nes-text is-disabled">Disabled</span>`,
},
{
title: 'buttons',
showCode: false,
code: `<a class="nes-btn" href="#">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>
<label class="nes-btn">
<span>Select your file</span>
<input type="file">
</label>`,
},
{
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>
<div style="background-color:#212529; padding: 1rem 0;">
<label>
<input type="radio" class="nes-radio is-dark" name="answer-dark" checked />
<span>Yes</span>
</label>
<label>
<input type="radio" class="nes-radio is-dark" name="answer-dark" />
<span>No</span>
</label>
</div>`,
},
{
title: 'checkboxes',
showCode: false,
code: `<label>
<input type="checkbox" class="nes-checkbox" checked />
<span>Enable</span>
</label>
<div style="background-color:#212529; padding: 1rem 0;">
<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>
<div style="background-color:#212529; padding: 1rem;" class="nes-field is-inline">
<label for="dark_field" style="color:#fff;">.input.is-dark</label>
<input type="text" id="dark_field" class="nes-input is-dark" placeholder="dark.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: `<label for="default_select">Default select</label>
<div class="nes-select">
<select required id="default_select">
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
<label for="success_select">nes-select.is-success</label>
<div class="nes-select is-success">
<select required id="success_select">
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
<label for="warning_select">nes-select.is-warning</label>
<div class="nes-select is-warning">
<select required id="warning_select">
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
<label for="error_select">nes-select.is-error</label>
<div class="nes-select is-error">
<select required id="error_select">
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
<div style="background-color:#212529; padding: 1rem 1.2rem 1rem 1rem;width:calc(100% + 8px)">
<label for="dark_select" style="color:#fff">nes-select.is-dark</label>
<div class="nes-select is-dark">
<select required id="dark_select">
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
</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>`,
},
{
title: 'dialogs',
note:
'NES.css does not include any JavaScript. If you want to use dialog element other than Chrome, you need polyfill.',
showCode: false,
code: `<!-- Dialog -->
<section>
<button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-default').showModal();">
Open dialog
</button>
<dialog class="nes-dialog" id="dialog-default">
<form method="dialog">
<p class="title">Dialog</p>
<p>Alert: this is a dialog.</p>
<menu class="dialog-menu">
<button class="nes-btn">Cancel</button>
<button class="nes-btn is-primary">Confirm</button>
</menu>
</form>
</dialog>
</section>
<!-- Dark dialog -->
<section>
<button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-dark').showModal();">
Open dark dialog
</button>
<dialog class="nes-dialog is-dark" id="dialog-dark">
<form method="dialog">
<p class="title">Dark dialog</p>
<p>Alert: this is a dialog.</p>
<menu class="dialog-menu">
<button class="nes-btn">Cancel</button>
<button class="nes-btn is-primary">Confirm</button>
</menu>
</form>
</dialog>
</section>
<!-- Rounded dialog -->
<section>
<button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-rounded').showModal();">
Open rounded dialog
</button>
<dialog class="nes-dialog is-rounded" id="dialog-rounded">
<form method="dialog">
<p class="title">Rounded dialog</p>
<p>Alert: this is a dialog.</p>
<menu class="dialog-menu">
<button class="nes-btn">Cancel</button>
<button class="nes-btn is-primary">Confirm</button>
</menu>
</form>
</dialog>
</section>
<!-- Dark and Rounded dialog -->
<section>
<button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-dark-rounded').showModal();">
Open dark and rounded dialog
</button>
<dialog class="nes-dialog is-dark is-rounded" id="dialog-dark-rounded">
<form method="dialog">
<p class="title">Dark and Rounded dialog</p>
<p>Alert: this is a dialog.</p>
<menu class="dialog-menu">
<button class="nes-btn">Cancel</button>
<button class="nes-btn is-primary">Confirm</button>
</menu>
</form>
</dialog>
</section>`,
},
{
title: 'lists',
showCode: false,
code: `<div class="lists">
<ul class="nes-list is-disc">
<li>Good morning.</li>
<li>Thou hast had a good night's sleep, I hope.</li>
<li>Thou hast had a good afternoon</li>
<li>Good night.</li>
</ul>
</div>
<div class="lists">
<ul class="nes-list is-circle">
<li>Good morning.</li>
<li>Thou hast had a good night's sleep, I hope.</li>
<li>Thou hast had a good afternoon</li>
<li>Good night.</li>
</ul>
</div>
<section class="nes-container is-dark">
<div class="lists">
<ul class="nes-list is-disc is-dark">
<li>Good morning.</li>
<li>Thou hast had a good night's sleep, I hope.</li>
<li>Thou hast had a good afternoon</li>
<li>Good night.</li>
</ul>
</div>
<div class="lists">
<ul class="nes-list is-circle is-dark">
<li>Good morning.</li>
<li>Thou hast had a good night's sleep, I hope.</li>
<li>Thou hast had a good afternoon</li>
<li>Good night.</li>
</ul>
</div>
</section>`,
},
{
title: 'tables',
showCode: false,
code: `<div class="nes-table-responsive">
<table class="nes-table is-bordered is-centered">
<thead>
<tr>
<th>Table.is-bordered</th>
<th>Table.is-centered</th>
<th>Table.is-centered</th>
<th>Table.is-centered</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good evening</td>
<td>Thou hast had a good night</td>
</tr>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good evening</td>
<td>Thou hast had a good night</td>
</tr>
</tbody>
</table>
</div>
<div class="nes-table-responsive">
<table class="nes-table is-bordered is-dark">
<thead>
<tr>
<th>Table.is-dark</th>
<th>Table.is-bordered</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternon</td>
</tr>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
</tr>
</tbody>
</table>
</div>`,
},
{
title: 'progress',
showCode: false,
code: `<progress class="nes-progress" value="90" max="100"></progress>
<progress class="nes-progress is-primary" value="80" max="100"></progress>
<progress class="nes-progress is-success" value="50" max="100"></progress>
<progress class="nes-progress is-warning" value="30" max="100"></progress>
<progress class="nes-progress is-error" value="10" max="100"></progress>
<progress class="nes-progress is-pattern" value="50" max="100"></progress>`,
},
{
title: 'avatars',
description: 'It is recommended to use the class "is-pixelated".',
showCode: false,
code: `<img class="nes-avatar is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
<img class="nes-avatar is-small is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
<img class="nes-avatar is-medium is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
<img class="nes-avatar is-large is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
<img class="nes-avatar is-rounded is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
<img class="nes-avatar is-rounded is-small is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
<img class="nes-avatar is-rounded is-medium is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
<img class="nes-avatar is-rounded is-large is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">`,
},
{
title: 'balloons',
showCode: false,
code: `<section class="nes-container">
<section class="message-list">
<section class="message -left">
<i class="nes-bcrikko"></i>
<!-- Balloon -->
<div class="nes-balloon from-left">
<p>Hello NES.css</p>
</div>
</section>
<section class="message -right">
<!-- Balloon -->
<div class="nes-balloon from-right">
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>
<i class="nes-bcrikko"></i>
</section>
</section>
</section>
<!-- Balloon 'is-dark' -->
<section class="nes-container is-dark">
<section class="message-list">
<section class="message -left">
<i class="nes-bcrikko"></i>
<!-- Balloon -->
<div class="nes-balloon from-left is-dark">
<p>Hello NES.css</p>
</div>
</section>
<section class="message -right">
<!-- Balloon -->
<div class="nes-balloon from-right is-dark">
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>
<i class="nes-bcrikko"></i>
</section>
</section>
</section>
</section>`,
},
{
title: 'cursor',
showCode: false,
code: `<p class="nes-balloon from-left nes-pointer">
This is not a clickable element, but it's an area of the pointer.
</p>`,
},
{
title: 'badges',
showCode: false,
code: `<a href="#" class="nes-badge">
<span class="is-dark">NES.css</span>
</a>
<a href="#" class="nes-badge">
<span class="is-primary">is</span>
</a>
<a href="#" class="nes-badge">
<span class="is-success">a</span>
</a>
<a href="#" class="nes-badge">
<span class="is-warning">great</span>
</a>
<a href="#" class="nes-badge">
<span class="is-error">framework!</span>
</a>
<a href="#" class="nes-badge is-split">
<span class="is-dark">npm</span>
<span class="is-primary">1.1.0</span>
</a>
<a href="#" class="nes-badge is-split">
<span class="is-dark">test</span>
<span class="is-success">100%</span>
</a>
<a href="#" class="nes-badge is-icon">
<span class="is-warning"><i class="nes-icon star is-small"></i></span>
<span class="is-primary">Icons</span>
</a>
<a href="#" class="nes-badge is-icon">
<span class="is-dark">hi</span>
<span class="is-warning">Text</span>
</a>`,
},
{
title: 'reaction-icons',
showCode: false,
description:
'If you want to change icon size, please use "is-small", "is-medium" and "is-large".',
code: `<section class="icon-list">
<!-- heart -->
<i class="nes-icon is-large heart"></i>
<i class="nes-icon is-large is-half heart"></i>
<i class="nes-icon is-large is-transparent heart"></i>
<i class="nes-icon is-large heart is-empty"></i>
<!-- star -->
<i class="nes-icon is-large star"></i>
<i class="nes-icon is-large star is-half"></i>
<i class="nes-icon is-large star is-transparent"></i>
<i class="nes-icon is-large star is-empty"></i>
<!-- like -->
<i class="nes-icon is-large like"></i>
<i class="nes-icon is-large like is-empty"></i>
</section>`,
},
{
title: 'sns-icons',
showCode: false,
description:
'If you want to change icon size, please use "is-small", "is-medium" and "is-large".',
code: `<section class="icon-list">
<!-- twitter -->
<i class="nes-icon twitter is-large"></i>
<!-- facebook -->
<i class="nes-icon facebook is-large"></i>
<!-- instagram -->
<i class="nes-icon instagram is-large"></i>
<!-- github -->
<i class="nes-icon github is-large"></i>
<!-- google -->
<i class="nes-icon google is-large"></i>
<!-- gmail -->
<i class="nes-icon gmail is-large"></i>
<!-- medium -->
<i class="nes-icon medium is-large"></i>
<!-- linkedin -->
<i class="nes-icon linkedin is-large"></i>
<!-- twitch -->
<i class="nes-icon twitch is-large"></i>
<!-- youtube -->
<i class="nes-icon youtube is-large"></i>
<!-- reddit -->
<i class="nes-icon reddit is-large"></i>
<!-- whatsapp -->
<i class="nes-icon whatsapp is-large"></i>
</section>`,
},
{
title: 'other-icons',
showCode: false,
description:
'If you want to change icon size, please use "is-small", "is-medium" and "is-large".',
code: `<section class="icon-list">
<!-- close -->
<i class="nes-icon close is-large"></i>
<!-- trophy -->
<i class="nes-icon trophy is-large"></i>
<!-- coin -->
<i class="nes-icon coin is-large"></i>
</section>`,
},
{
title: 'pixel-arts',
showCode: false,
code: `<section class="icon-list">
<!-- controllers -->
<i class="nes-logo"></i>
<i class="nes-jp-logo"></i>
<i class="snes-logo"></i>
<i class="snes-jp-logo"></i>
<!-- octocat -->
<i class="nes-octocat animate"></i>
<!-- phone -->
<i class="nes-smartphone"></i>
<i class="nes-phone"></i>
</section>`,
},
{
title: 'Nintendo-characters',
showCode: false,
note:
'Nintendo owns the copyright of these characters. Please comply with the Nintendo guidelines and laws of the applicable jurisdiction.',
code: `<section class="icon-list">
<!-- Copyright Nintendo -->
<i class="nes-mario"></i>
<i class="nes-ash"></i>
<i class="nes-pokeball"></i>
<i class="nes-bulbasaur"></i>
<i class="nes-charmander"></i>
<i class="nes-squirtle"></i>
<i class="nes-kirby"></i>
</section>`,
},
];
const coreteam = [
{
name: 'B.C.Rikko',
feat: 'Creator of NES.css',
github: 'BcRikko',
twitter: 'bc_rikko',
},
{
name: 'Igor Guastalla',
feat: 'Development support',
github: 'guastallaigor',
twitter: 'guastallaigor',
},
];
const emeriti = [
{
name: 'Trezy',
feat: 'Setup DevOps',
github: 'trezy',
twitter: 'TrezyCodes',
},
{
name: 'Abdullah Samman',
feat: 'Setup test suite',
github: 'evexoio',
},
];
// curl -s 'https://api.github.com/repos/nostalgic-css/NES.css/contributors?per_page=100' | jq '.[].login'
const contributors = [
'4k1k0',
'sombreroEnPuntas',
'Divoolej',
'soph-iest',
'montezume',
'sazzadsazib',
'HiKaylum',
'jdvivar',
'ohlookitsderpy',
'IngwiePhoenix',
'kyu-suke',
'jjspace',
'Baldomo',
'DanSnow',
'ernestomancebo',
'Ilyeo',
'Kartones',
'rrj-dev',
'vicainelli',
'stewartrule',
'kenshinji',
'youngkaneda',
'Takumi0901',
'loo41',
'alexd99',
'alexgleason',
'agarzola',
'AlphaWong',
'brendansparrow',
'Ermakoy',
'fleeting',
'JamesIves',
'jsoref',
'KOREAN139',
'KalobTaulien',
'LukBukkit',
'otaviopace',
'Pedro-Souza',
'iamrameffort',
'scottaohara',
'd0p1s4m4',
'lucasjs',
'musavvirahmed',
'sinofp',
'thisisabhinay',
'tnantoka',
];
new Vue({
el: '#nescss',
data() {
return {
collection: sampleCollection,
coreteam,
emeriti,
contributors,
animateOctocat: false,
copiedBalloon: {
display: 'none',
top: 0,
left: 0,
},
scrollPos: 0,
};
},
filters: {
capitalize(val) {
if (!val) return '';
val = val.toString();
return val.charAt(0).toUpperCase() + val.slice(1);
},
},
mounted() {
document.addEventListener('scroll', () => {
this.scrollPos = document.documentElement.scrollTop || document.body.scrollTop;
});
hljs.initHighlightingOnLoad();
[].forEach.call(document.querySelectorAll('dialog'), (a) => {
dialogPolyfill.registerDialog(a);
});
this.replaceImages();
},
methods: {
copy(event, id) {
this.showCopiedBalloon(event.pageY, event.pageX);
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;
},
showCopiedBalloon(top, left) {
this.copiedBalloon = {
display: 'block',
top: `${top - 100}px`,
left: `${left - 180}px`,
};
setTimeout(() => {
this.copiedBalloon.display = 'none';
}, 1000);
},
replaceImages() {
Array.from(document.querySelectorAll('img.lazy')).forEach((img) => {
img.onload = () => img.classList.remove('lazy');
img.src = img.dataset.src;
});
},
},
});
================================================
FILE: docs/style.css
================================================
@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
body {
padding: 0 2rem;
margin: 0 2rem;
}
#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;
max-width: 980px;
margin: 0 auto;
padding-top: 1rem;
transition: all 0.2s ease;
}
header > .container > .nav-brand {
margin-right: auto;
}
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 {
text-align: center;
margin-bottom: 2rem;
}
footer a {
color: #333;
text-decoration: none;
}
h2 > a {
margin-right: 1rem;
}
.topic {
margin-bottom: 3rem;
}
/* github link */
.github-link {
position: fixed;
top: 100px;
right: -240px;
z-index: 999;
display: flex;
height: 100px;
color: #333;
text-decoration: none;
transition: all 0.3s ease;
}
.github-link.active {
right: 10px;
}
.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-top: 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: 1.5rem;
}
.item {
margin-bottom: -1rem;
}
.item > * {
margin-bottom: 1.5rem !important;
}
/* Containers */
.item.containers > .nes-container {
display: inline-block;
max-width: 400px;
}
/* Balloons sample */
section.message-list {
display: flex;
flex-direction: column;
}
.message-list > .message {
display: flex;
margin-top: 2rem;
}
.message-list > .message > .nes-balloon {
max-width: 550px;
}
.message-list > .message i {
align-self: flex-end;
}
.message-list > .message.-left {
align-self: flex-start;
}
.message-list > .message.-right {
align-self: flex-end;
}
.message-list > .message.-left i {
margin-right: 2rem;
}
.message-list > .message.-right i {
margin-left: 2rem;
}
.icon-list > .blur-filter {
filter: blur(10px);
}
/* Copied balloon */
.nes-balloon.copied-balloon {
position: absolute;
display: none;
padding: 1rem;
box-shadow: 0 5px 20px 5px rgba(0,0,0,.6);
z-index: 1;
}
/* Topic */
h3.topic-title {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
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 {
display: block;
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;
width: 160px;
}
.contributor > p {
margin: .5rem;
font-size: 12px;
}
.contributor img.nes-avatar {
transition: all .4s;
display: inline-block;
}
.contributor:hover {
text-decoration: none;
opacity: 0.7;
}
/* Articles */
.article-link > .title a {
color: #333;
}
.article-link > .title span {
margin-left: 1rem;
}
/* Scroll back to top */
.scroll-btn {
position: fixed;
bottom: -60px;
right: 2rem;
box-shadow: 0 5px 20px rgba(0,0,0,.6);
transition: all 0.3s ease;
}
.scroll-btn.active {
bottom: 25px;
}
.scroll-btn > span {
display: block;
transform: rotateZ(90deg);
}
img.lazy {
background-color: #D3D3D3;
}
@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;
}
.message-list > .message > .nes-balloon {
max-width: 60%;
}
}
@media screen and (max-width: 580px) {
#nescss > .container {
margin-top: 190px;
}
}
================================================
FILE: package.json
================================================
{
"name": "nes.css",
"description": "NES.css is NES-style CSS Framework.",
"scripts": {
"watch": "npm run build:sass -- --watch",
"// Build task": "",
"build": "run-p build:core build:main",
"build:core": "npm run build:sass-core && npm run build:autoprefix-core && npm run build:cleancss-core",
"build:main": "npm run build:sass && npm run build:autoprefix && npm run build:cleancss",
"prebuild": "run-p prebuild:*",
"prebuild:stylelint": "npm run stylelint -- --fix",
"prebuild:clean": "rimraf css",
"postbuild": "npm run build:storybook",
"// For nes.css": "",
"build:sass": "node-sass --output-style expanded --source-map true --functions scripts/scssFunctions.js scss/nes.scss css/nes.css",
"build:autoprefix": "postcss --use autoprefixer --map false --output css/nes.css css/nes.css",
"build:cleancss": "cleancss -o css/nes.min.css css/nes.css",
"// For nes-core.css": "",
"build:sass-core": "node-sass --output-style expanded --source-map true --functions scripts/scssFunctions.js scss/nes-core.scss css/nes-core.css",
"build:autoprefix-core": "postcss --use autoprefixer --map false --output css/nes-core.css css/nes-core.css",
"build:cleancss-core": "cleancss -o css/nes-core.min.css css/nes-core.css",
"// Misc": "",
"stylelint": "stylelint scss/**/*.scss",
"storybook": "start-storybook -p 6006",
"build:storybook": "build-storybook",
"deploy": "npm run build",
"semantic-release": "semantic-release",
"commit": "git-cz",
"commit:retry": "git-cz --retry",
"commitmsg": "commitlint -e"
},
"repository": {
"type": "git",
"url": "https://github.com/nostalgic-css/NES.css.git"
},
"keywords": [
"css",
"scss",
"nes",
"framework"
],
"engines": {
"node": ">=10.0.0"
},
"author": "BcRikko (https://github.com/Bcrikko)",
"license": "MIT",
"bugs": {
"url": "https://github.com/nostalgic-css/NES.css/issues"
},
"homepage": "https://github.com/nostalgic-css/NES.css#readme",
"devDependencies": {
"@commitlint/cli": "^7.2.1",
"@commitlint/config-conventional": "^7.1.2",
"@semantic-release/exec": "^3.3.0",
"@storybook/addon-backgrounds": "^5.0.11",
"@storybook/addon-knobs": "^5.0.11",
"@storybook/html": "^5.0.0",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.0.4",
"classnames": "^2.2.6",
"clean-css-cli": "^4.2.1",
"commitizen": "^3.1.1",
"css-loader": "^2.0.0",
"cz-conventional-changelog": "^2.1.0",
"eslint": "^5.9.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.14.0",
"file-type": "^11.0.0",
"git-rev-sync": "^1.12.0",
"husky": "^1.0.0",
"lint-staged": "^7.3.0",
"node-sass": "^4.14.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^6.0.0",
"prettier": "^1.15.2",
"rimraf": "^2.6.2",
"sass-loader": "^7.1.0",
"semantic-release": "^15.13.14",
"style-loader": "^0.23.1",
"stylelint": "^9.5.0",
"stylelint-config-prettier": "^4.0.0",
"stylelint-config-recess-order": "^2.0.0",
"stylelint-config-standard": "^18.2.0",
"stylelint-prettier": "^1.0.5",
"stylelint-scss": "^3.3.1",
"url-loader": "^1.1.2"
},
"browserslist": [
"> 1%"
],
"commitlint": {
"extends": [
"@commitlint/config-conventional"
],
"rules": {
"subject-case": [
0,
"never",
"sentence-case"
],
"subject-full-stop": [
0,
"never",
"."
]
}
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"scss/**/*.scss": [
"npm run prebuild:stylelint",
"npm run postbuild",
"git add"
],
"*.js": [
"eslint '.storybook/**/*.js' 'story/**/*.js'"
]
},
"prettier": {
"printWidth": 100
},
"release": {
"plugins": [
"@semantic-release/commit-analyzer",
"@semantic-release/release-notes-generator",
"@semantic-release/npm",
"@semantic-release/github",
[
"@semantic-release/exec",
{
"prepareCmd": "./scripts/updatePackageHeader.js ${nextRelease.version}"
}
]
]
},
"stylelint": {
"plugins": [
"stylelint-scss",
"stylelint-prettier"
],
"extends": [
"stylelint-config-standard",
"stylelint-config-recess-order",
"stylelint-prettier/recommended"
],
"rules": {
"prettier/prettier": true,
"string-quotes": "double",
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true
},
"ignoreFiles": [
"docs/*"
]
},
"eslintConfig": {
"extends": "airbnb-base",
"rules": {
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"**/*.stories.js",
"**/*.template.js"
]
}
]
}
},
"eslintIgnore": [
"docs/*"
],
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
}
================================================
FILE: scripts/getBuildData.js
================================================
const git = require('git-rev-sync'); /* eslint-disable-line import/no-extraneous-dependencies */
module.exports = (isCompiled = false) => {
let buildData = '';
if (git.branch() !== 'master') {
if (isCompiled) {
buildData += `
Build Date: ${(new Date()).toISOString()}
Node Version: ${process.version}`;
}
buildData += `
Branch: ${git.branch()}
Commit: ${git.long()}`;
if (process.env.CIRCLECI) {
buildData += `
Build Number (CircleCI): ${process.env.CIRCLE_BUILD_NUM}`;
}
}
return buildData.replace(/^ +/gm, ' ');
};
================================================
FILE: scripts/getFileAsDataURI.js
================================================
/* eslint-disable import/no-extraneous-dependencies */
const filetype = require('file-type');
const fs = require('fs');
const path = require('path');
/* eslint-enable */
module.exports = (fileString) => {
const filepath = path.resolve(__dirname, fileString.getValue());
const fileBuffer = fs.readFileSync(filepath);
const fileDataURI = fileBuffer.toString('base64');
const { mime } = filetype(fileBuffer);
return `data:${mime};base64,${fileDataURI}`;
};
================================================
FILE: scripts/scssFunctions.js
================================================
const { types } = require('node-sass'); /* eslint-disable-line import/no-extraneous-dependencies */
const getBuildData = require('./getBuildData');
const getFileAsDataURI = require('./getFileAsDataURI');
module.exports = {
'build-data()': () => types.String(getBuildData(true)),
'get-file-as-data-uri($filepath)': filepath => types.String(getFileAsDataURI(filepath)),
};
================================================
FILE: scripts/updatePackageHeader.js
================================================
#!/usr/bin/env node
const fs = require('fs');
const path = require('path');
const getBuildData = require('./getBuildData');
const nextVersion = process.argv[2];
if (!nextVersion) {
throw new Error('This script requires a version number to be provided');
}
// Update the SCSS Package Header
const SCSSFilePath = path.resolve('scss', 'nes-core.scss');
let SCSSFile = fs.readFileSync(SCSSFilePath, 'utf8');
SCSSFile = SCSSFile.replace(/^ {2}Version: development/m, ` Version: ${nextVersion}`);
SCSSFile = SCSSFile.replace(/^#{build-data\(\)}/m, getBuildData());
fs.writeFileSync(SCSSFilePath, SCSSFile, 'utf8');
// Update the SCSS Package Header
const CSSFilePath = path.resolve('css', 'nes.css');
let CSSFile = fs.readFileSync(CSSFilePath, 'utf8');
CSSFile = CSSFile.replace(/^ {2}Version: development/m, ` Version: ${nextVersion}`);
fs.writeFileSync(CSSFilePath, CSSFile, 'utf8');
================================================
FILE: scss/base/_index.scss
================================================
@charset "utf-8";
@import "reboot.scss";
@import "color-palette.scss";
@import "variables.scss";
@import "generic.scss";
================================================
FILE: scss/base/color-palette.scss
================================================
// https://en.wikipedia.org/wiki/List_of_video_game_console_palettes#NES
$color-black: #212529;
$color-white: #fff;
$color-00: #7c7c7c;
$color-01: #0000fc;
$color-02: #0000bc;
$color-03: #4428bc;
$color-04: #940084;
$color-05: #a80020;
$color-06: #a81000;
$color-07: #881400;
$color-08: #503000;
$color-09: #007800;
$color-0A: #006800;
$color-0B: #005800;
$color-0C: #004058;
$color-0D: #000;
$color-0E: #000;
$color-0F: #000;
$color-10: #bcbcbc;
$color-11: #0078f8;
$color-12: #0058f8;
$color-13: #6844fc;
$color-14: #d800cc;
$color-15: #e40058;
$color-16: #f83800;
$color-17: #e45c10;
$color-18: #ac7c00;
$color-19: #00b800;
$color-1A: #00a800;
$color-1B: #00a844;
$color-1C: #088;
$color-1D: #000;
$color-1E: #000;
$color-1F: #000;
$color-20: #f8f8f8;
$color-21: #3cbcfc;
$color-22: #6888fc;
$color-23: #9878f8;
$color-24: #f878f8;
$color-25: #f85898;
$color-26: #f87858;
$color-27: #fca044;
$color-28: #f8b800;
$color-29: #b8f818;
$color-2A: #58d854;
$color-2B: #58f898;
$color-2C: #00e8d8;
$color-2D: #787878;
$color-2E: #000;
$color-2F: #000;
$color-30: #fcfcfc;
$color-31: #a4e4fc;
$color-32: #b8b8f8;
$color-33: #d8b8f8;
$color-34: #f8b8f8;
$color-35: #f8a4c0;
$color-36: #f0d0b0;
$color-37: #fbdfa6;
$color-38: #f8d878;
$color-39: #d8f878;
$color-3A: #b8f8b8;
$color-3B: #b8f8d8;
$color-3C: #00fcfc;
$color-3D: #d8d8d8;
$color-3E: #000;
$color-3F: #000;
================================================
FILE: scss/base/generic.scss
================================================
// Override reboot.scss
html,
body,
pre,
code,
kbd,
samp {
font-family: $font-family;
}
html {
cursor: $cursor-url, auto;
}
body {
font-size: $font-size;
color: $base-color;
background-color: $background-color;
-webkit-font-smoothing: antialiased;
}
label {
cursor: inherit;
}
a,
button {
cursor: $cursor-click-url, pointer;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: none;
}
// Prevent stray pixels on focused inputs such as checkboxes and radios
input[type="radio"],
input[type="checkbox"] {
outline: 0;
}
================================================
FILE: scss/base/reboot.scss
================================================
/*!
* Bootstrap Reboot v4.1.3 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@-ms-viewport {
width: device-width;
}
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
[tabindex="-1"]:focus {
outline: 0 !important;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
abbr[title],
abbr[data-original-title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline;
text-decoration: underline dotted;
cursor: help;
border-bottom: 0;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: 700;
}
dd {
margin-bottom: 0.5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
outline: 0;
}
pre,
code,
kbd,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 1em;
}
pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
-ms-overflow-style: scrollbar;
}
figure {
margin: 0 0 1rem;
}
img {
vertical-align: middle;
border-style: none;
}
svg {
overflow: hidden;
vertical-align: middle;
}
table {
border-collapse: collapse;
}
caption {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
th {
text-align: inherit;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
button {
border-radius: 0;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}
textarea {
overflow: auto;
resize: vertical;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
margin-bottom: 0.5rem;
font-size: 1.5rem;
line-height: inherit;
color: inherit;
white-space: normal;
}
progress {
vertical-align: baseline;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
output {
display: inline-block;
}
summary {
display: list-item;
cursor: pointer;
}
template {
display: none;
}
[hidden] {
display: none !important;
}
================================================
FILE: scss/base/variables.scss
================================================
// Font
$font-family: "Press Start 2P" !default;
$font-size: 16px !default;
$base-color: $color-black !default;
$background-color: $color-white !default;
$cursor-url: url(get-file-as-data-uri("../assets/cursor.png")) !default;
$cursor-click-url: url(get-file-as-data-uri("../assets/cursor-click.png")) 14 0 !default;
$border-size: 4px !default;
$default-colors: (
normal: $background-color,
hover: #e7e7e7,
shadow: #adafbc
) !default;
$disabled-colors: (
normal: #d3d3d3,
shadow: #adafbc
) !default;
$primary-colors: (
normal: #209cee,
hover: #108de0,
shadow: #006bb3
) !default;
$success-colors: (
normal: #92cc41,
hover: #76c442,
shadow: #4aa52e
) !default;
$warning-colors: (
normal: #f7d51d,
hover: #f2c409,
shadow: #e59400
) !default;
$error-colors: (
normal: #e76e55,
hover: #ce372b,
shadow: #8c2022
) !default;
================================================
FILE: scss/components/_index.scss
================================================
@charset "utf-8";
================================================
FILE: scss/elements/_index.scss
================================================
@charset "utf-8";
@import "avatar.scss";
@import "badges.scss";
@import "balloons.scss";
@import "buttons.scss";
@import "containers.scss";
@import "dialogs.scss";
@import "lists.scss";
@import "progress.scss";
@import "tables.scss";
@import "text.scss";
================================================
FILE: scss/elements/avatar.scss
================================================
@mixin img-style($param) {
$size: $param * 16;
width: $size;
height: $size;
&.is-rounded {
border-radius: 50px;
}
&.is-pixelated {
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: pixelated;
}
}
.nes-avatar {
@include img-style(2px);
&.is-small {
@include img-style(1px);
}
&.is-medium {
@include img-style(3px);
}
&.is-large {
@include img-style(4px);
}
}
================================================
FILE: scss/elements/badges.scss
================================================
@mixin span-style-is-icon($color, $background-color, $display, $width, $font-size) {
display: $display;
align-items: center;
justify-content: center;
width: $width;
font-size: $font-size;
color: $color;
text-align: center;
background-color: $background-color;
}
@mixin span-style($color, $background, $option, $width: 50%) {
position: absolute;
top: 0;
width: $width;
color: $color;
text-align: center;
background-color: $background;
@if $option == left {
left: 0;
} @else if $option == right {
right: 0;
}
}
@mixin badge-style($color, $background, $option: is-default) {
$box-shadow-first-two: 0 0.5em $background, 0 -0.5em $background;
@if $option == is-split {
&:first-child {
@include span-style($color, $background, left);
box-shadow: $box-shadow-first-two, 0 0 $background, -0.5em 0 $background;
}
&:last-child {
@include span-style($color, $background, right);
box-shadow: $box-shadow-first-two, 0.5em 0 $background, 0 0 $background;
}
} @else if $option == is-icon {
&:first-child {
@include span-style-is-icon($color, $background, flex, 2.7em, 0.5em);
position: absolute;
top: -2.8em;
left: -2.7em;
height: 2.7em;
}
&:last-child {
@include span-style-is-icon($color, $background, inline-block, 6em, 0.88em);
box-shadow: $box-shadow-first-two, 0.5em 0 $background, -0.5em 0 $background;
}
} @else {
&:first-child {
@include span-style($color, $background, 0, 100%);
box-shadow: $box-shadow-first-two, 0.5em 0 $background, -0.5em 0 $background;
}
}
}
// Default style
.nes-badge {
$em: 0.75em;
position: relative;
display: inline-block;
width: $em * 14;
height: $em * 2.5;
margin: 0.5em;
font-size: $em * 1.2;
white-space: nowrap;
vertical-align: top;
user-select: none;
// Other styles
// prettier-ignore
$types:
"dark" $background-color $base-color,
"primary" $background-color map-get($primary-colors, "normal"),
"success" $background-color map-get($success-colors, "normal"),
"warning" $base-color map-get($warning-colors, "normal"),
"error" $background-color map-get($error-colors, "normal");
@each $type in $types {
&.is-splited, // deprecated. Please use .is-split
&.is-split {
& span.is-#{nth($type, 1)} {
@include badge-style(nth($type, 2), nth($type, 3), is-split);
}
}
&.is-icon {
width: $em * 7;
& span.is-#{nth($type, 1)} {
@include badge-style(nth($type, 2), nth($type, 3), is-icon);
}
}
& span.is-#{nth($type, 1)} {
@include badge-style(nth($type, 2), nth($type, 3));
}
}
}
================================================
FILE: scss/elements/balloons.scss
================================================
@mixin box-shadow($color, $fromLeft: true) {
@if $fromLeft {
// prettier-ignore
box-shadow:
-4px 0,
4px 0,
-4px 4px $color,
0 4px,
-8px 4px,
-4px 8px,
-8px 8px;
} @else {
// prettier-ignore
box-shadow:
-4px 0,
4px 0,
4px 4px $color,
0 4px,
8px 4px,
4px 8px,
8px 8px;
}
}
.nes-balloon {
@include rounded-corners();
position: relative;
display: inline-block;
padding: 1rem 1.5rem;
margin: 8px;
margin-bottom: 30px;
background-color: $background-color;
> :last-child {
margin-bottom: 0;
}
&::before,
&::after {
position: absolute;
content: "";
}
&.is-dark {
@include rounded-corners(true);
color: $background-color;
background: $base-color;
border-image-outset: 2;
box-shadow: 0 0 0 8px $base-color;
&.from-left,
&.from-right {
&::before {
background-color: $base-color;
border-color: $background-color;
}
&::after {
color: $background-color;
background-color: $base-color;
}
}
&.from-left {
&::before {
box-shadow: -5px 10px 0 6px $base-color;
}
&::after {
@include box-shadow($base-color);
}
}
&.from-right {
&::before {
box-shadow: 5px 10px 0 6px $base-color;
}
&::after {
@include box-shadow($base-color, false);
}
}
}
&.from-left {
&::before,
&::after {
left: 2rem;
}
&::before {
bottom: -14px;
width: 26px;
height: 10px;
background-color: $background-color;
border-right: 4px solid $base-color;
border-left: 4px solid $base-color;
}
&::after {
bottom: -18px;
width: 18px;
height: 4px;
margin-right: 8px;
color: $base-color;
background-color: $background-color;
@include box-shadow($background-color);
}
}
&.from-right {
&::before,
&::after {
right: 2rem;
}
&::before {
bottom: -14px;
width: 26px;
height: 10px;
background-color: $background-color;
border-right: 4px solid $base-color;
border-left: 4px solid $base-color;
}
&::after {
bottom: -18px;
width: 18px;
height: 4px;
margin-left: 8px;
background-color: $background-color;
@include box-shadow($background-color, false);
}
}
}
================================================
FILE: scss/elements/buttons.scss
================================================
@mixin btn-style($color, $background, $hover-background, $shadow) {
color: $color;
background-color: $background;
&::after {
position: absolute;
top: -$border-size;
right: -$border-size;
bottom: -$border-size;
left: -$border-size;
content: "";
box-shadow: inset -4px -4px $shadow;
}
&:hover {
color: $color;
text-decoration: none;
background-color: $hover-background;
&::after {
box-shadow: inset -6px -6px $shadow;
}
}
&:focus {
box-shadow: 0 0 0 6px rgba($shadow, 0.3);
}
&:active:not(.is-disabled)::after {
box-shadow: inset 4px 4px $shadow;
}
}
// Default style
.nes-btn {
@include compact-rounded-corners();
position: relative;
display: inline-block;
padding: 6px 8px;
margin: $border-size;
text-align: center;
vertical-align: middle;
cursor: $cursor-click-url, pointer;
user-select: none;
@include btn-style(
$base-color,
map-get($default-colors, "normal"),
map-get($default-colors, "hover"),
map-get($default-colors, "shadow")
);
&:focus {
outline: 0;
}
&.is-disabled,
&.is-disabled:hover,
&.is-disabled:focus {
color: $base-color;
cursor: not-allowed;
background-color: map-get($disabled-colors, "normal");
box-shadow: inset -4px -4px map-get($disabled-colors, "shadow");
opacity: 0.6;
}
&.is-disabled:hover::after {
box-shadow: inset -4px -4px map-get($disabled-colors, "shadow");
}
// Other styles
// prettier-ignore
$types:
"primary" $background-color map-get($primary-colors, "normal") map-get($primary-colors, "hover") map-get($primary-colors, "shadow"),
"success" $background-color map-get($success-colors, "normal") map-get($success-colors, "hover") map-get($success-colors, "shadow"),
"warning" $base-color map-get($warning-colors, "normal") map-get($warning-colors, "hover") map-get($warning-colors, "shadow"),
"error" $background-color map-get($error-colors, "normal") map-get($error-colors, "hover") map-get($error-colors, "shadow");
@each $type in $types {
&.is-#{nth($type, 1)} {
@include btn-style(nth($type, 2), nth($type, 3), nth($type, 4), nth($type, 5));
}
}
input[type="file"] {
position: absolute;
pointer-events: none;
opacity: 0;
}
}
================================================
FILE: scss/elements/containers.scss
================================================
.nes-container {
position: relative;
padding: 1.5rem 2rem;
border-color: black;
border-style: solid;
border-width: 4px;
> :last-child {
margin-bottom: 0;
}
&.is-centered {
text-align: center;
}
&.is-right {
text-align: right;
}
&.with-title {
> .title {
display: table;
padding: 0 0.5rem;
margin: -1.8rem 0 1rem;
font-size: 1rem;
background-color: $background-color;
}
&.is-centered {
> .title {
margin: -2rem auto 1rem;
}
}
&.is-right {
> .title {
margin: -2rem 0 1rem auto;
}
}
}
&.is-dark {
position: relative;
margin: $border-size;
color: $background-color;
background-color: $base-color;
border-color: white;
&::after {
position: absolute;
top: -$border-size * 1.8;
right: -$border-size * 1.8;
bottom: -$border-size * 1.8;
left: -$border-size * 1.8;
z-index: -1;
content: "";
background-color: $base-color;
}
&.with-title {
> .title {
color: $background-color;
background-color: $base-color;
}
}
}
&.is-rounded {
@include rounded-corners();
padding: 1rem 1.5rem;
margin: $border-size;
&.with-title {
> .title {
margin-top: -1.5rem;
}
&.is-centered {
> .title {
margin: -1.5rem auto 1rem;
}
}
&.is-right {
> .title {
margin: -1.5rem 0 1rem auto;
}
}
}
&.is-dark {
@include rounded-corners(true);
&::after {
content: none;
}
&.with-title {
> .title {
margin-top: -1.3rem;
}
&.is-centered {
> .title {
margin: -1.3rem auto 1rem;
}
}
&.is-right {
> .title {
margin: -1.3rem 0 1rem auto;
}
}
}
}
}
}
================================================
FILE: scss/elements/dialogs.scss
================================================
.nes-dialog {
padding: 1.5rem 2rem;
border-width: $border-size;
> .backdrop,
&::backdrop {
background-color: rgba(0, 0, 0, 0.3);
}
> :last-child {
margin-bottom: 0;
}
&.is-rounded {
@include rounded-corners();
&.is-dark {
@include rounded-corners(true);
}
}
&.is-dark {
color: $background-color;
background-color: $base-color;
border-color: $background-color;
&:not(.is-rounded)::before {
position: absolute;
top: -$border-size * 2;
right: -$border-size * 2;
bottom: -$border-size * 2;
left: -$border-size * 2;
z-index: -1;
content: "";
border: $border-size solid $base-color;
}
}
}
================================================
FILE: scss/elements/lists.scss
================================================
@mixin list-before(
$class,
$disc-or-circle,
$colors: ($base-color, map-get($default-colors, "shadow"))
) {
&.is-#{$class} li::before {
position: absolute;
top: calc(50% - 8px);
left: -22px;
content: "";
@include pixelize(2px, $disc-or-circle, $colors);
}
}
.nes-list {
// prettier-ignore
$disc: (
(0,0,0,1,1,0,0,0),
(0,0,1,1,1,1,0,0),
(0,1,1,1,1,1,1,0),
(0,1,1,1,1,1,1,0),
(0,0,1,1,1,1,0,0),
(0,0,0,1,1,0,0,0)
);
// prettier-ignore
$circle: (
(0,0,0,1,1,0,0,0),
(0,0,1,1,1,1,0,0),
(0,1,1,0,0,1,1,0),
(0,1,1,0,0,1,1,0),
(0,0,1,1,1,1,0,0),
(0,0,0,1,1,0,0,0)
);
list-style-type: none;
& li {
position: relative;
}
@include list-before("disc", $disc);
@include list-before("circle", $circle);
&.is-dark {
$dark-colors: ($background-color, $base-color);
@include list-before("disc", $disc, $dark-colors);
@include list-before("circle", $circle, $dark-colors);
li {
color: $color-white;
}
}
}
================================================
FILE: scss/elements/progress.scss
================================================
.nes-progress {
@include compact-rounded-corners();
width: 100%;
height: 48px;
margin: 4px;
color: $base-color;
background-color: $background-color;
-webkit-appearance: none;
appearance: none;
@mixin progress-style($color) {
&::-webkit-progress-bar {
background-color: $background-color;
}
&::-webkit-progress-value {
background-color: $color;
}
&::-moz-progress-bar {
background-color: $color;
}
&::-ms-fill {
background-color: $color;
border: none;
}
}
@include progress-style($base-color);
&.is-rounded {
@include rounded-corners();
}
&.is-primary {
@include progress-style(map-get($primary-colors, "normal"));
}
&.is-success {
@include progress-style(map-get($success-colors, "normal"));
}
&.is-warning {
@include progress-style(map-get($warning-colors, "normal"));
}
&.is-error {
@include progress-style(map-get($error-colors, "normal"));
}
&.is-pattern {
&::-webkit-progress-value {
background-color: $base-color;
background-image: linear-gradient(
45deg,
$background-color 25%,
transparent 25%,
transparent 75%,
$background-color 75%,
$background-color
),
linear-gradient(
45deg,
$background-color 25%,
transparent 25%,
transparent 75%,
$background-color 75%,
$background-color
);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}
&::-moz-progress-bar {
background-color: $base-color;
background-image: -moz-linear-gradient(
45deg,
$background-color 25%,
transparent 25%,
transparent 75%,
$background-color 75%,
$background-color
),
-moz-linear-gradient(45deg, $background-color 25%, transparent 25%, transparent 75%, $background-color
75%, $background-color);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}
&::-ms-fill {
background-color: $base-color;
background-image: linear-gradient(
45deg,
$background-color 25%,
transparent 25%,
transparent 75%,
$background-color 75%,
$background-color
),
linear-gradient(
45deg,
$background-color 25%,
transparent 25%,
transparent 75%,
$background-color 75%,
$background-color
);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
border: none;
}
}
}
================================================
FILE: scss/elements/tables.scss
================================================
.nes-table-responsive {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.nes-table {
table-layout: fixed;
background-color: $background-color;
tr {
margin-left: -0.25em;
}
th,
td {
position: relative;
padding: 0.5rem;
word-wrap: break-word;
border-color: $base-color;
border-style: solid;
border-width: 0 0.25em 0.25em 0;
&:last-child {
border-right-width: 0;
}
&::after,
&::before {
position: absolute;
display: block;
width: 0.25em;
height: 0.25em;
content: "";
background-color: $base-color;
}
&::after {
bottom: -0.25em;
left: -0.25em;
}
&::before {
top: -0.25em;
right: -0.25em;
}
&:last-child::before {
top: initial;
bottom: -0.25em;
}
}
&.is-centered th {
text-align: center;
}
&.is-bordered {
margin: 4px;
border-spacing: 0;
border-collapse: separate;
@include compact-rounded-corners();
}
&.is-dark {
color: $background-color;
background-color: $base-color;
&.is-bordered {
@include compact-rounded-corners(true);
}
th,
td {
border-color: $background-color;
&::after,
&::before {
display: none;
}
}
}
/*************************************************************************** \
This eliminates the gap between the last row in a table and the border, as
well as hiding the derelict pixels in the bottom right and bottom left of
the last row of a table
\ ***************************************************************************/
tbody,
thead:last-child {
tr:last-child {
th,
td {
border-bottom-width: 0;
&:first-child::after,
&:last-child::before {
display: none;
}
}
}
}
}
================================================
FILE: scss/elements/text.scss
================================================
.nes-text {
&.is-primary {
color: map-get($primary-colors, "normal");
}
&.is-success {
color: map-get($success-colors, "normal");
}
&.is-warning {
color: map-get($warning-colors, "normal");
}
&.is-error {
color: map_get($error-colors, "normal");
}
&.is-disabled {
color: map_get($disabled-colors, "normal");
}
}
================================================
FILE: scss/form/_index.scss
================================================
@charset "utf-8";
@import "inputs.scss";
@import "radios.scss";
@import "checkboxes.scss";
@import "selects.scss";
================================================
FILE: scss/form/checkboxes.scss
================================================
.nes-checkbox {
// prettier-ignore
$checkbox: (
(1,1,1,1,1,1,1,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,1,1,1,1,1,1,1,0,0),
);
// prettier-ignore
$checkbox-checked: (
(1,1,1,1,1,1,1,0,1,1),
(1,0,0,0,0,0,0,1,1,1),
(1,0,0,0,0,0,1,1,0,0),
(1,1,0,0,0,1,1,0,0,0),
(1,1,1,0,1,1,0,1,0,0),
(1,0,1,1,1,0,0,1,0,0),
(1,0,0,1,0,0,0,1,0,0),
(1,1,1,1,1,1,1,1,0,0)
);
// prettier-ignore
$checkbox-focus: (
(2,2,2,2,2,2,2,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,2,2,2,2,2,2,2,0,0),
);
// prettier-ignore
$checkbox-checked-focus: (
(2,2,2,2,2,2,2,0,1,1),
(2,0,0,0,0,0,0,1,1,1),
(1,0,0,0,0,0,1,1,0,0),
(1,1,0,0,0,1,1,0,0,0),
(2,1,1,0,1,1,0,2,0,0),
(2,0,1,1,1,0,0,2,0,0),
(2,0,0,1,0,0,0,2,0,0),
(2,2,2,2,2,2,2,2,0,0)
);
$colors: ($base-color, map-get($default-colors, "shadow"));
$colors-checkbox-dark: ($color-white, map-get($default-colors, "shadow"));
margin-left: 28px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@include visually-hidden();
& + span {
position: relative;
cursor: $cursor-click-url, pointer;
}
& + span::before,
&:checked + span::before {
position: absolute;
top: -3px;
left: -28px;
content: "";
}
// prettier-ignore
& + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize(2px, $checkbox, $colors);
}
// prettier-ignore
&:focus + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize(2px, $checkbox-focus, $colors);
}
&:checked + span::before {
@include pixelize(2px, $checkbox-checked, $colors);
}
&:checked:focus + span::before {
@include pixelize(2px, $checkbox-checked-focus, $colors);
}
&.is-dark {
+ span {
color: $color-white;
}
// prettier-ignore
+ span::before { /* stylelint-disable-line no-descending-specificity */
color: $color-white;
}
&:checked + span::before {
@include pixelize(2px, $checkbox-checked-focus, $colors-checkbox-dark);
color: $color-white;
}
&:checked:focus + span::before {
@include pixelize(2px, $checkbox-checked-focus, $colors-checkbox-dark);
color: $color-white;
}
}
&.is-disabled {
$color: map-get($disabled-colors, "normal");
$colors-radio-disabled: ($color, map-get($disabled-colors, "shadow"));
+ span {
color: $color;
cursor: not-allowed;
}
/* stylelint-disable-next-line no-descending-specificity */
+ span::before {
color: $color;
cursor: not-allowed;
}
/* stylelint-disable-next-line no-descending-specificity */
&:checked + span::before {
@include pixelize(2px, $checkbox-checked-focus, $colors-radio-disabled);
color: $color;
}
&:checked:focus + span::before {
@include pixelize(2px, $checkbox-checked-focus, $colors-radio-disabled);
color: $color;
}
}
}
================================================
FILE: scss/form/inputs.scss
================================================
.nes-input,
.nes-textarea {
@mixin border-style($border, $outline) {
@include compact-border-image($border);
outline-color: $outline;
}
@include compact-rounded-corners();
width: calc(100% - #{2 * $border-size});
padding: 0.5rem 1rem;
margin: 4px;
background-clip: padding-box;
&.is-dark {
@include border-style(map-get($default-colors, "normal"), map-get($default-colors, "hover"));
color: $background-color;
background-color: $base-color;
}
&.is-success {
@include border-style(map-get($success-colors, "normal"), map-get($success-colors, "hover"));
}
&.is-warning {
@include border-style(map-get($warning-colors, "normal"), map-get($warning-colors, "hover"));
}
&.is-error {
@include border-style(map-get($error-colors, "normal"), map-get($error-colors, "hover"));
}
&.is-disabled {
@include border-style(map-get($disabled-colors, "normal"), map-get($disabled-colors, "shadow"));
color: map-get($disabled-colors, "normal");
cursor: not-allowed;
}
}
.nes-field {
> label {
display: block;
}
.nes-input,
.nes-textarea {
display: block;
}
&.is-inline {
display: flex;
align-items: center;
> label {
flex-basis: 0;
flex-grow: 1;
margin: 0;
margin-right: 1.5rem;
text-align: right;
}
.nes-input,
.nes-textarea {
flex-basis: 0;
flex-grow: 5;
}
}
}
@media screen and (max-width: 768px) {
.nes-field.is-inline {
display: block;
> label {
margin-bottom: 0.5rem; // reboot.css:label
text-align: left;
}
.nes-input {
max-width: 100%;
}
}
}
================================================
FILE: scss/form/radios.scss
================================================
.nes-radio {
// prettier-ignore
$radio: (
(1,1,0,0,0,0),
(1,1,1,1,0,0),
(1,1,1,1,1,0),
(1,1,1,1,1,1),
(1,1,1,1,1,0),
(1,1,1,1,0,0),
(1,1,0,0,0,0),
);
// prettier-ignore
$radio-checked-focus: (
(2,2,0,0,0,0),
(2,2,2,2,0,0),
(2,2,2,2,2,0),
(2,2,2,2,2,2),
(2,2,2,2,2,0),
(2,2,2,2,0,0),
(2,2,0,0,0,0),
);
$colors: ($base-color, map-get($default-colors, "shadow"));
$colors-radio-dark: ($color-white, map-get($default-colors, "shadow"));
margin-right: 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@include visually-hidden();
& + span {
position: relative;
display: inline-flex;
align-items: center;
cursor: $cursor-click-url, pointer;
}
&:checked + span::before {
position: absolute;
left: -20px;
margin-top: -15px;
content: "";
@include pixelize(2px, $radio, $colors);
}
&:checked:hover,
&:checked:focus {
& + span::before {
animation: blink 1s infinite steps(1);
}
}
&:checked:focus + span::before {
@include pixelize(2px, $radio-checked-focus, $colors);
}
&.is-dark {
+ span {
color: $color-white;
}
// prettier-ignore
+ span::before { /* stylelint-disable-line no-descending-specificity */
color: $color-white;
}
&:checked + span::before {
@include pixelize(2px, $radio-checked-focus, $colors-radio-dark);
color: $color-white;
}
&:checked:focus + span::before {
@include pixelize(2px, $radio-checked-focus, $colors-radio-dark);
color: $color-white;
}
}
&.is-disabled {
$color: map-get($disabled-colors, "normal");
$colors-radio-disabled: ($color, map-get($disabled-colors, "shadow"));
+ span {
color: $color;
cursor: not-allowed;
}
/* stylelint-disable-next-line no-descending-specificity */
+ span::before {
color: $color;
cursor: not-allowed;
}
&:checked:hover,
&:checked:focus {
& + span::before {
animation: unset;
}
}
/* stylelint-disable-next-line no-descending-specificity */
&:checked + span::before {
@include pixelize(2px, $radio-checked-focus, $colors-radio-disabled);
color: $color;
}
&:checked:focus + span::before {
@include pixelize(2px, $radio-checked-focus, $colors-radio-disabled);
color: $color;
}
}
}
================================================
FILE: scss/form/selects.scss
================================================
.nes-select {
// prettier-ignore
$dropdown: (
(1,1,1,1,1,1,1),
(1,1,1,1,1,1,1),
(0,1,1,1,1,1,0),
(0,1,1,1,1,1,0),
(0,0,1,1,1,0,0),
(0,0,0,1,0,0,0),
);
$colors: ($base-color, map-get($default-colors, "shadow"));
position: relative;
width: calc(100% - #{2 * $border-size});
margin: 4px;
select {
@include compact-rounded-corners();
width: 100%;
padding: 0.5rem 2.5rem 0.5rem 1rem;
cursor: $cursor-click-url, pointer;
border-radius: 0;
outline-color: map-get($default-colors, "hover");
-webkit-appearance: none;
appearance: none;
&:invalid {
color: map-get($disabled-colors, shadow);
}
}
&.is-dark select {
color: $background-color;
background-color: $base-color;
}
&::after {
@include pixelize(3px, $dropdown, $colors);
position: absolute;
top: calc(50% - 11px);
right: 36px;
pointer-events: none;
content: "";
}
// prettier-ignore
$types:
"dark" map-get($default-colors, "normal") map-get($default-colors, "hover"),
"success" map-get($success-colors, "normal") map-get($success-colors, "hover"),
"warning" map-get($warning-colors, "normal") map-get($warning-colors, "hover"),
"error" map-get($error-colors, "normal") map-get($error-colors, "hover"),
"disable" map-get($disabled-colors, "normal") map-get($disabled-colors, "shadow");
@each $type in $types {
&.is-#{nth($type, 1)} {
$color: nth($type, 2);
&::after {
color: $color;
}
select {
@include compact-border-image($color);
outline-color: nth($type, 3);
}
}
}
&.is-disabled {
@extend .is-disable;
select {
color: map-get($disabled-colors, "normal");
cursor: not-allowed;
}
}
}
gitextract_kqv882sr/
├── .circleci/
│ └── config.yml
├── .editorconfig
├── .github/
│ ├── CODE_OF_CONDUCT-es.md
│ ├── CODE_OF_CONDUCT-jp.md
│ ├── CODE_OF_CONDUCT-pt-BR.md
│ ├── CODE_OF_CONDUCT-zh-CN.md
│ ├── CONTRIBUTING-es.md
│ ├── CONTRIBUTING-jp.md
│ ├── CONTRIBUTING-ko.md
│ ├── CONTRIBUTING-pt-BR.md
│ ├── CONTRIBUTING-zh-CN.md
│ ├── CONTRUBUTING-ru.md
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── README-es.md
│ ├── README-fr.md
│ ├── README-jp.md
│ ├── README-pt-BR.md
│ ├── README-ru.md
│ └── README-zh-CN.md
├── .gitignore
├── .npmignore
├── .prettierignore
├── .storybook/
│ ├── addons.js
│ ├── config.js
│ ├── preview-head.html
│ └── webpack.config.js
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── commitlint.config.js
├── docs/
│ ├── index.html
│ ├── lib/
│ │ ├── dialog-polyfill.css
│ │ ├── dialog-polyfill.js
│ │ ├── highlight-theme.css
│ │ └── highlight.js
│ ├── script.js
│ └── style.css
├── package.json
├── scripts/
│ ├── getBuildData.js
│ ├── getFileAsDataURI.js
│ ├── scssFunctions.js
│ └── updatePackageHeader.js
├── scss/
│ ├── base/
│ │ ├── _index.scss
│ │ ├── color-palette.scss
│ │ ├── generic.scss
│ │ ├── reboot.scss
│ │ └── variables.scss
│ ├── components/
│ │ └── _index.scss
│ ├── elements/
│ │ ├── _index.scss
│ │ ├── avatar.scss
│ │ ├── badges.scss
│ │ ├── balloons.scss
│ │ ├── buttons.scss
│ │ ├── containers.scss
│ │ ├── dialogs.scss
│ │ ├── lists.scss
│ │ ├── progress.scss
│ │ ├── tables.scss
│ │ └── text.scss
│ ├── form/
│ │ ├── _index.scss
│ │ ├── checkboxes.scss
│ │ ├── inputs.scss
│ │ ├── radios.scss
│ │ └── selects.scss
│ ├── helpers/
│ │ ├── _index.scss
│ │ └── pointer.scss
│ ├── icons/
│ │ ├── _index.scss
│ │ ├── close.scss
│ │ ├── coin.scss
│ │ ├── facebook.scss
│ │ ├── github.scss
│ │ ├── gmail.scss
│ │ ├── google.scss
│ │ ├── heart.scss
│ │ ├── icons.scss
│ │ ├── instagram.scss
│ │ ├── like.scss
│ │ ├── linkedin.scss
│ │ ├── medium.scss
│ │ ├── reddit.scss
│ │ ├── star.scss
│ │ ├── trophy.scss
│ │ ├── twitch.scss
│ │ ├── twitter.scss
│ │ ├── whatsapp.scss
│ │ └── youtube.scss
│ ├── nes-core.scss
│ ├── nes.scss
│ ├── pixel-arts/
│ │ ├── _index.scss
│ │ ├── ash.scss
│ │ ├── bcrikko.scss
│ │ ├── bulbasaur.scss
│ │ ├── charmander.scss
│ │ ├── kirby.scss
│ │ ├── mario.scss
│ │ ├── nes-icon.scss
│ │ ├── nes-jp-icon.scss
│ │ ├── octocat.scss
│ │ ├── phone.scss
│ │ ├── pokeball.scss
│ │ ├── smartphone.scss
│ │ ├── snes-icon.scss
│ │ ├── snes-jp-icon.scss
│ │ └── squirtle.scss
│ └── utilities/
│ ├── _index.scss
│ ├── animations.scss
│ ├── fill-gaps.scss
│ ├── icon-mixin.scss
│ ├── rounded-corners-mixin.scss
│ └── visually-hidden.scss
├── sketch/
│ └── NES-css-index.sketch
└── story/
├── _helpers/
│ ├── icons.js
│ └── shared.js
├── avatars/
│ ├── avatars.stories.js
│ └── avatars.template.js
├── badge/
│ ├── badge.stories.js
│ └── badge.template.js
├── balloons/
│ ├── balloons.stories.js
│ └── balloons.template.js
├── buttons/
│ ├── buttons.stories.js
│ └── buttons.template.js
├── containers/
│ ├── containers.stories.js
│ └── containers.template.js
├── dialogs/
│ ├── dialogs.stories.js
│ └── dialogs.template.js
├── icons/
│ ├── icons.stories.js
│ ├── icons.template.js
│ ├── reactions.template.js
│ └── sprites.template.js
├── inputs/
│ ├── checkboxes.template.js
│ ├── input.template.js
│ ├── inputs.stories.js
│ └── radio.template.js
├── lists/
│ ├── lists.stories.js
│ └── lists.template.js
├── progress/
│ ├── progress.stories.js
│ └── progress.template.js
├── select/
│ ├── select.stories.js
│ └── select.template.js
├── table/
│ ├── table.stories.js
│ └── table.template.js
├── text/
│ ├── text.stories.js
│ └── text.template.js
└── textarea/
├── textarea.stories.js
└── textarea.template.js
SYMBOL INDEX (37 symbols across 4 files)
FILE: .storybook/config.js
function loadStories (line 12) | function loadStories() {
FILE: docs/lib/dialog-polyfill.js
function t (line 4) | function t(e){for(;e;){if("dialog"===e.localName)return e;e=e.parentElem...
function o (line 4) | function o(e){e&&e.blur&&e!==document.body&&e.blur()}
function i (line 4) | function i(e,t){for(var o=0;o<e.length;++o)if(e[o]===t)return!0;return!1}
function n (line 4) | function n(e){return!(!e||!e.hasAttribute("method"))&&"dialog"===e.getAt...
function a (line 4) | function a(e){if(this.dialog_=e,this.replacedStyleTop_=!1,this.openAsMod...
method dialog (line 4) | get dialog(){return this.dialog_}
FILE: docs/lib/highlight.js
function n (line 2) | function n(e){return e.replace(/&/g,"&").replace(/</g,"<").replac...
function t (line 2) | function t(e){return e.nodeName.toLowerCase()}
function r (line 2) | function r(e,n){var t=e&&e.exec(n);return t&&0===t.index}
function a (line 2) | function a(e){return k.test(e)}
function i (line 2) | function i(e){var n,t,r,i,o=e.className+" ";if(o+=e.parentNode?e.parentN...
function o (line 2) | function o(e){var n,t={},r=Array.prototype.slice.call(arguments,1);for(n...
function c (line 2) | function c(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i...
function u (line 2) | function u(e,r,a){function i(){return e.length&&r.length?e[0].offset!==r...
function s (line 2) | function s(e){return e.v&&!e.cached_variants&&(e.cached_variants=e.v.map...
function l (line 2) | function l(e){function n(e){return e&&e.source||e}function t(t,r){return...
function f (line 2) | function f(e,t,a,i){function o(e){return new RegExp(e.replace(/[-\/\\^$*...
function g (line 2) | function g(e,t){t=t||j.languages||B(L);var r={r:0,value:n(e)},a=r;return...
function p (line 2) | function p(e){return j.tabReplace||j.useBR?e.replace(C,function(e,n){ret...
function d (line 2) | function d(e,n,t){var r=n?y[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)...
function h (line 2) | function h(e){var n,t,r,o,s,l=i(e);a(l)||(j.useBR?(n=document.createElem...
function b (line 2) | function b(e){j=o(j,e)}
function v (line 2) | function v(){if(!v.called){v.called=!0;var e=document.querySelectorAll("...
function m (line 2) | function m(){addEventListener("DOMContentLoaded",v,!1),addEventListener(...
function N (line 2) | function N(n,t){var r=L[n]=t(e);r.aliases&&r.aliases.forEach(function(e)...
function R (line 2) | function R(){return B(L)}
function w (line 2) | function w(e){return e=(e||"").toLowerCase(),L[e]||L[y[e]]}
function x (line 2) | function x(e){var n=w(e);return n&&!n.disableAutodetect}
FILE: docs/script.js
method data (line 658) | data() {
method capitalize (line 674) | capitalize(val) {
method mounted (line 680) | mounted() {
method copy (line 691) | copy(event, id) {
method startAnimate (line 706) | startAnimate() {
method stopAnimate (line 709) | stopAnimate() {
method showCopiedBalloon (line 712) | showCopiedBalloon(top, left) {
method replaceImages (line 722) | replaceImages() {
Condensed preview — 149 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (271K chars).
[
{
"path": ".circleci/config.yml",
"chars": 6130,
"preview": "orbs:\n node: circleci/node@4.0.1\nversion: 2.1\n\ndefaults: &defaults\n\n working_directory: ~/app\n\nsupported-node-versions"
},
{
"path": ".editorconfig",
"chars": 188,
"preview": "root = true\n\n[*]\ncharset = utf-8\nindent_size = 2\nindent_style = space\nend_of_line = lf\ninsert_final_newline = true\ntrim_"
},
{
"path": ".github/CODE_OF_CONDUCT-es.md",
"chars": 3881,
"preview": "# Código de Conducta convenido para Contribuyentes\n\nVer este documento en otro idioma:\n[English](/CODE_OF_CONDUCT.md) / "
},
{
"path": ".github/CODE_OF_CONDUCT-jp.md",
"chars": 1949,
"preview": "# コントリビューター行動規範\n\nこのドキュメントを別の言語で表示する：\n[English](/CODE_OF_CONDUCT.md) / [简体中文](CODE_OF_CONDUCT-zh-CN.md) / [Español](CODE_"
},
{
"path": ".github/CODE_OF_CONDUCT-pt-BR.md",
"chars": 3866,
"preview": "# Código de Conduta para Colaboradores\n\nVeja este documento em outro idioma:\n[English](/CODE_OF_CONDUCT.md) / [日本語](CODE"
},
{
"path": ".github/CODE_OF_CONDUCT-zh-CN.md",
"chars": 1543,
"preview": "# 参与者行为准则\n\n使用其他语言来阅读本文档:\n[English](/CODE_OF_CONDUCT.md) / [日本語](CODE_OF_CONDUCT-jp.md) / [Español](CODE_OF_CONDUCT-es.md"
},
{
"path": ".github/CONTRIBUTING-es.md",
"chars": 4470,
"preview": "# Contribución\n\nVer este documento en otro idioma:\n[English](/CONTRIBUTING.md) / [日本語](CONTRIBUTING-jp.md) / [简体中文](CONT"
},
{
"path": ".github/CONTRIBUTING-jp.md",
"chars": 3095,
"preview": "# 貢献する\n\nこのドキュメントを別の言語で表示する：\n[English](/CONTRIBUTING.md) / [简体中文](CONTRIBUTING-zh-CN.md) / [Español](CONTRIBUTING-es.md) "
},
{
"path": ".github/CONTRIBUTING-ko.md",
"chars": 3417,
"preview": "# Contributing(기여하기)\n\n다른 언어로 보기: \n[English](/CONTRIBUTING.md) / [简体中文](CONTRIBUTING-zh-CN.md) / [日本語](CONTRIBUTING-jp.md"
},
{
"path": ".github/CONTRIBUTING-pt-BR.md",
"chars": 4826,
"preview": "# Contribuindo\n\nVeja este documento em outro idioma:\n[English](/CONTRIBUTING.md) / [日本語](CONTRIBUTING-jp.md) / [简体中文](CO"
},
{
"path": ".github/CONTRIBUTING-zh-CN.md",
"chars": 2821,
"preview": "# 贡献\n\n使用其他语言来阅读本文档:\n[English](/CONTRIBUTING.md) / [日本語](CONTRIBUTING-jp.md) / [Español](CONTRIBUTING-es.md) / [Português"
},
{
"path": ".github/CONTRUBUTING-ru.md",
"chars": 4271,
"preview": "# Вклад\n\nПосмотри документы на другом языке:\n[简体中文](CONTRIBUTING-zh-CN.md) / [日本語](CONTRIBUTING-jp.md) / [Español](CONTR"
},
{
"path": ".github/FUNDING.yml",
"chars": 16,
"preview": "github: BcRikko\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 1000,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\n\n---\n\n<!-- Please fill your information below. -->\n<!-- Y"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 723,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\n\n---\n\n<!-- Please fill your information below. -->\n<!-"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 422,
"preview": "<!-- Please fill your information below the lines starting with `#`. -->\n<!-- You can delete these lines enclosed by `<`"
},
{
"path": ".github/README-es.md",
"chars": 4550,
"preview": "<div align=\"center\">\n <a href=\"https://nostalgic-css.github.io/NES.css/\" target=\"_blank\"><img src=\"https://user-images."
},
{
"path": ".github/README-fr.md",
"chars": 4767,
"preview": "<div align=\"center\">\n <a href=\"https://nostalgic-css.github.io/NES.css/\" target=\"_blank\"><img src=\"https://user-images."
},
{
"path": ".github/README-jp.md",
"chars": 3834,
"preview": "<div align=\"center\">\n <a href=\"https://nostalgic-css.github.io/NES.css/\" target=\"_blank\"><img src=\"https://user-images."
},
{
"path": ".github/README-pt-BR.md",
"chars": 4577,
"preview": "<div align=\"center\">\n <a href=\"https://nostalgic-css.github.io/NES.css/\" target=\"_blank\"><img src=\"https://user-images."
},
{
"path": ".github/README-ru.md",
"chars": 4438,
"preview": "<div align=\"center\">\n <a href=\"https://nostalgic-css.github.io/NES.css/\" target=\"_blank\"><img src=\"https://user-images."
},
{
"path": ".github/README-zh-CN.md",
"chars": 3069,
"preview": "<div align=\"center\">\n <a href=\"https://nostalgic-css.github.io/NES.css/\" target=\"_blank\"><img src=\"https://user-images."
},
{
"path": ".gitignore",
"chars": 123,
"preview": "node_modules\n.vscode\n.idea\ncss\nstorybook-static\n.DS_Store\n\n# Ignoring built up css and map files\nscss/*.css\nscss/*.css.m"
},
{
"path": ".npmignore",
"chars": 219,
"preview": "# User & editor settings\n.editorconfig\n.prettierignore\n.vscode\n\n# Build files\n.circleci\n.github\n.storybook\ncommitlint.co"
},
{
"path": ".prettierignore",
"chars": 29,
"preview": "**/*.html\n**/*.md\ndemo/lib/*\n"
},
{
"path": ".storybook/addons.js",
"chars": 165,
"preview": "/* eslint-disable import/no-extraneous-dependencies */\nimport '@storybook/addon-knobs/register';\nimport '@storybook/addo"
},
{
"path": ".storybook/config.js",
"chars": 817,
"preview": "/* eslint-disable import/no-extraneous-dependencies */\nimport {\n addParameters,\n configure,\n} from '@storybook/html';\n"
},
{
"path": ".storybook/preview-head.html",
"chars": 319,
"preview": "<link href=\"https://fonts.googleapis.com/css?family=Press+Start+2P\" rel=\"stylesheet\">\n<style>\n html, body, #root {\n "
},
{
"path": ".storybook/webpack.config.js",
"chars": 600,
"preview": "const path = require('path');\nconst scssFunctions = require('../scripts/scssFunctions');\n\nmodule.exports = {\n module: {"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3796,
"preview": "# Contributor Covenant Code of Conduct\n\nView this document in another language:\n[简体中文](.github/CODE_OF_CONDUCT-zh-CN.md)"
},
{
"path": "CONTRIBUTING.md",
"chars": 4322,
"preview": "# Contributing\n\nView this document in another language:\n[简体中文](.github/CONTRIBUTING-zh-CN.md) / [日本語](.github/CONTRIBUTI"
},
{
"path": "LICENSE",
"chars": 1095,
"preview": "MIT License\n\nCopyright (c) 2018 B.C.Rikko <https://github.com/BcRikko>\n\nPermission is hereby granted, free of charge, to"
},
{
"path": "README.md",
"chars": 4493,
"preview": "<div align=\"center\">\n <a href=\"https://nostalgic-css.github.io/NES.css/\" target=\"_blank\"><img src=\"https://user-images."
},
{
"path": "commitlint.config.js",
"chars": 174,
"preview": "/* eslint-env node */\n\nmodule.exports = {\n extends: ['@commitlint/config-conventional'],\n\n // Add your own rules. See "
},
{
"path": "docs/index.html",
"chars": 10885,
"preview": "<!DOCTYPE html>\n<html lang=\"ja\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/lib/dialog-polyfill.css",
"chars": 565,
"preview": "/* Copyright (c) 2013 The Chromium Authors. All rights reserved. */\n._dialog_overlay,dialog+.backdrop{right:0;bottom:0;l"
},
{
"path": "docs/lib/dialog-polyfill.js",
"chars": 10610,
"preview": "/**\n * Copyright (c) 2013 The Chromium Authors. All rights reserved.\n */\n!function(){var e=window.CustomEvent;function t"
},
{
"path": "docs/lib/highlight-theme.css",
"chars": 1141,
"preview": "/*\n * Visual Studio 2015 dark style\n * Author: Nicolas LLOBERA <nllobera@gmail.com>\n */\n .hljs{display:block;overflow-x:"
},
{
"path": "docs/lib/highlight.js",
"chars": 17718,
"preview": "/*! highlight.js v9.14.2 | BSD3 License | git.io/hljslicense */\n!function(e){var n=\"object\"==typeof window&&window||\"obj"
},
{
"path": "docs/script.js",
"chars": 20084,
"preview": "const sampleCollection = [\n {\n title: 'texts',\n showCode: false,\n code: `<span class=\"nes-text is-primary\">Pri"
},
{
"path": "docs/style.css",
"chars": 4985,
"preview": "@charset \"utf-8\";\n@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);\n\nbody {\n padding: 0 2rem;\n marg"
},
{
"path": "package.json",
"chars": 5121,
"preview": "{\n \"name\": \"nes.css\",\n \"description\": \"NES.css is NES-style CSS Framework.\",\n \"scripts\": {\n \"watch\": \"npm run buil"
},
{
"path": "scripts/getBuildData.js",
"chars": 600,
"preview": "const git = require('git-rev-sync'); /* eslint-disable-line import/no-extraneous-dependencies */\n\nmodule.exports = (isCo"
},
{
"path": "scripts/getFileAsDataURI.js",
"chars": 467,
"preview": "/* eslint-disable import/no-extraneous-dependencies */\nconst filetype = require('file-type');\nconst fs = require('fs');\n"
},
{
"path": "scripts/scssFunctions.js",
"chars": 377,
"preview": "const { types } = require('node-sass'); /* eslint-disable-line import/no-extraneous-dependencies */\n\nconst getBuildData "
},
{
"path": "scripts/updatePackageHeader.js",
"chars": 894,
"preview": "#!/usr/bin/env node\n\nconst fs = require('fs');\nconst path = require('path');\n\nconst getBuildData = require('./getBuildDa"
},
{
"path": "scss/base/_index.scss",
"chars": 122,
"preview": "@charset \"utf-8\";\n\n@import \"reboot.scss\";\n@import \"color-palette.scss\";\n@import \"variables.scss\";\n@import \"generic.scss\""
},
{
"path": "scss/base/color-palette.scss",
"chars": 1368,
"preview": "// https://en.wikipedia.org/wiki/List_of_video_game_console_palettes#NES\n\n$color-black: #212529;\n$color-white: #fff;\n\n$c"
},
{
"path": "scss/base/generic.scss",
"chars": 573,
"preview": "// Override reboot.scss\n\nhtml,\nbody,\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family;\n}\n\nhtml {\n cursor: $cursor-url"
},
{
"path": "scss/base/reboot.scss",
"chars": 4717,
"preview": "/*!\n * Bootstrap Reboot v4.1.3 (https://getbootstrap.com/)\n * Copyright 2011-2018 The Bootstrap Authors\n * Copyright 201"
},
{
"path": "scss/base/variables.scss",
"chars": 856,
"preview": "// Font\n$font-family: \"Press Start 2P\" !default;\n$font-size: 16px !default;\n\n$base-color: $color-black !default;\n$backgr"
},
{
"path": "scss/components/_index.scss",
"chars": 18,
"preview": "@charset \"utf-8\";\n"
},
{
"path": "scss/elements/_index.scss",
"chars": 256,
"preview": "@charset \"utf-8\";\n\n@import \"avatar.scss\";\n@import \"badges.scss\";\n@import \"balloons.scss\";\n@import \"buttons.scss\";\n@impor"
},
{
"path": "scss/elements/avatar.scss",
"chars": 510,
"preview": "@mixin img-style($param) {\n $size: $param * 16;\n\n width: $size;\n height: $size;\n\n &.is-rounded {\n border-radius: "
},
{
"path": "scss/elements/badges.scss",
"chars": 2711,
"preview": "@mixin span-style-is-icon($color, $background-color, $display, $width, $font-size) {\n display: $display;\n align-items:"
},
{
"path": "scss/elements/balloons.scss",
"chars": 2458,
"preview": "@mixin box-shadow($color, $fromLeft: true) {\n @if $fromLeft {\n // prettier-ignore\n box-shadow:\n -4px 0,\n "
},
{
"path": "scss/elements/buttons.scss",
"chars": 2298,
"preview": "@mixin btn-style($color, $background, $hover-background, $shadow) {\n color: $color;\n background-color: $background;\n\n "
},
{
"path": "scss/elements/containers.scss",
"chars": 1954,
"preview": ".nes-container {\n position: relative;\n padding: 1.5rem 2rem;\n border-color: black;\n border-style: solid;\n border-wi"
},
{
"path": "scss/elements/dialogs.scss",
"chars": 704,
"preview": ".nes-dialog {\n padding: 1.5rem 2rem;\n border-width: $border-size;\n\n > .backdrop,\n &::backdrop {\n background-color"
},
{
"path": "scss/elements/lists.scss",
"chars": 1032,
"preview": "@mixin list-before(\n $class,\n $disc-or-circle,\n $colors: ($base-color, map-get($default-colors, \"shadow\"))\n) {\n &.is"
},
{
"path": "scss/elements/progress.scss",
"chars": 2668,
"preview": ".nes-progress {\n @include compact-rounded-corners();\n\n width: 100%;\n height: 48px;\n margin: 4px;\n color: $base-colo"
},
{
"path": "scss/elements/tables.scss",
"chars": 1872,
"preview": ".nes-table-responsive {\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n.nes-table {\n table-layout: fix"
},
{
"path": "scss/elements/text.scss",
"chars": 356,
"preview": ".nes-text {\n &.is-primary {\n color: map-get($primary-colors, \"normal\");\n }\n\n &.is-success {\n color: map-get($su"
},
{
"path": "scss/form/_index.scss",
"chars": 116,
"preview": "@charset \"utf-8\";\n\n@import \"inputs.scss\";\n@import \"radios.scss\";\n@import \"checkboxes.scss\";\n@import \"selects.scss\";\n"
},
{
"path": "scss/form/checkboxes.scss",
"chars": 3241,
"preview": ".nes-checkbox {\n // prettier-ignore\n $checkbox: (\n (1,1,1,1,1,1,1,1,0,0),\n (1,0,0,0,0,0,0,1,0,0),\n (1,0,0,0,0"
},
{
"path": "scss/form/inputs.scss",
"chars": 1657,
"preview": ".nes-input,\n.nes-textarea {\n @mixin border-style($border, $outline) {\n @include compact-border-image($border);\n\n "
},
{
"path": "scss/form/radios.scss",
"chars": 2427,
"preview": ".nes-radio {\n // prettier-ignore\n $radio: (\n (1,1,0,0,0,0),\n (1,1,1,1,0,0),\n (1,1,1,1,1,0),\n (1,1,1,1,1,1)"
},
{
"path": "scss/form/selects.scss",
"chars": 1789,
"preview": ".nes-select {\n // prettier-ignore\n $dropdown: (\n (1,1,1,1,1,1,1),\n (1,1,1,1,1,1,1),\n (0,1,1,1,1,1,0),\n (0,"
},
{
"path": "scss/helpers/_index.scss",
"chars": 43,
"preview": "@charset \"utf-8\";\n\n@import \"pointer.scss\";\n"
},
{
"path": "scss/helpers/pointer.scss",
"chars": 55,
"preview": ".nes-pointer {\n cursor: $cursor-click-url, pointer;\n}\n"
},
{
"path": "scss/icons/_index.scss",
"chars": 41,
"preview": "@charset \"utf-8\";\n\n@import \"icons.scss\";\n"
},
{
"path": "scss/icons/close.scss",
"chars": 664,
"preview": "$icon-close-colors: ($base-color);\n// prettier-ignore\n$icon-close: (\n (1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1),\n (1,1,1,1,0,0"
},
{
"path": "scss/icons/coin.scss",
"chars": 673,
"preview": "$icon-coin-colors: (#060606, #fff, #ffc107);\n// prettier-ignore\n$icon-coin: (\n (0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0),\n (0,"
},
{
"path": "scss/icons/facebook.scss",
"chars": 687,
"preview": "$icon-facebook-colors: (#fff, #4566ae);\n// prettier-ignore\n$icon-facebook: (\n ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),\n ( 2"
},
{
"path": "scss/icons/github.scss",
"chars": 696,
"preview": "$icon-github-colors: (#fff, #333);\n// prettier-ignore\n$icon-github: (\n ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),\n ( 2,2,2,2"
},
{
"path": "scss/icons/gmail.scss",
"chars": 668,
"preview": "$icon-gmail-colors: (#eeecec, #fd2b2b);\n// prettier-ignore\n$icon-gmail: (\n (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),\n (0,0,0,"
},
{
"path": "scss/icons/google.scss",
"chars": 726,
"preview": "$icon-google-colors: (#4285f4, #fff, #db4437, #f4b400, #0f9d58);\n// prettier-ignore\n$icon-google: (\n ( 0,2,2,2,2,2,2,2,"
},
{
"path": "scss/icons/heart.scss",
"chars": 2627,
"preview": "$icon-heart-colors: (#fff, #444, #f22426, #842300);\n// prettier-ignore\n$icon-heart: (\n (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0"
},
{
"path": "scss/icons/icons.scss",
"chars": 4020,
"preview": "// reaction\n@import \"heart.scss\";\n@import \"star.scss\";\n@import \"like.scss\";\n\n// sns\n@import \"twitter.scss\";\n@import \"fac"
},
{
"path": "scss/icons/instagram.scss",
"chars": 716,
"preview": "$icon-instagram-colors: (#fff, #8005c8, #d40075, #e98c25, #d84646);\n// prettier-ignore\n$icon-instagram: (\n ( 0,0,2,2,2,"
},
{
"path": "scss/icons/like.scss",
"chars": 1339,
"preview": "$icon-like-colors: (#fff, #333, #2e77be);\n// prettier-ignore\n$icon-like: (\n (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),\n (0,0,0"
},
{
"path": "scss/icons/linkedin.scss",
"chars": 672,
"preview": "$icon-linkedin-colors: (#fff, #2577b9);\n// prettier-ignore\n$icon-linkedin: (\n (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),\n (2,2"
},
{
"path": "scss/icons/medium.scss",
"chars": 700,
"preview": "$icon-medium-colors: (#fff, #12100e);\n// prettier-ignore\n$icon-medium: (\n ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),\n ( 2,1,"
},
{
"path": "scss/icons/reddit.scss",
"chars": 696,
"preview": "$icon-reddit-colors: (#fff, #f40);\n// prettier-ignore\n$icon-reddit: (\n ( 0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0 ),\n ( 0,2,2,2"
},
{
"path": "scss/icons/star.scss",
"chars": 3063,
"preview": "$icon-star-colors: (#fff, #444, #ebe527, #f59f54);\n// prettier-ignore\n$icon-star: (\n (0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0),"
},
{
"path": "scss/icons/trophy.scss",
"chars": 1356,
"preview": "$icon-trophy-colors: (#fff, #444, #ebe527, #f59f54);\n// prettier-ignore\n$icon-trophy: (\n (0,0,2,2,2,2,2,2,2,2,2,2,2,0,0"
},
{
"path": "scss/icons/twitch.scss",
"chars": 699,
"preview": "$icon-twitch-colors: (#fff, #6441a4);\n// prettier-ignore\n$icon-twitch: (\n ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),\n ( 2,2,"
},
{
"path": "scss/icons/twitter.scss",
"chars": 701,
"preview": "$icon-twitter-colors: (#fff, #2c9ceb);\n// prettier-ignore\n$icon-twitter: (\n ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),\n ( 2,"
},
{
"path": "scss/icons/whatsapp.scss",
"chars": 664,
"preview": "$icon-whatsapp-colors: (#00ba37, #fff);\n// prettier-ignore\n$icon-whatsapp: (\n ( 0,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0 ),\n ( "
},
{
"path": "scss/icons/youtube.scss",
"chars": 698,
"preview": "$icon-youtube-colors: (#fff, #f00);\n// prettier-ignore\n$icon-youtube: (\n ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),\n ( 2,2,2"
},
{
"path": "scss/nes-core.scss",
"chars": 391,
"preview": "@charset \"utf-8\";\n\n/*!***************************************************************************\\\n NES.css Framework\n "
},
{
"path": "scss/nes.scss",
"chars": 141,
"preview": "@charset \"utf-8\";\n\n@import \"nes-core.scss\";\n@import \"components/_index.scss\";\n@import \"icons/_index.scss\";\n@import \"pixe"
},
{
"path": "scss/pixel-arts/_index.scss",
"chars": 391,
"preview": "@charset \"utf-8\";\n\n@import \"nes-icon.scss\";\n@import \"nes-jp-icon.scss\";\n@import \"snes-icon.scss\";\n@import \"snes-jp-icon."
},
{
"path": "scss/pixel-arts/ash.scss",
"chars": 986,
"preview": ".nes-ash {\n $ash-colors: (#f8f8ff, #ff614e, #007f7f, #181818, #ffe3c5, #426adb, #4169e1);\n // prettier-ignore\n $ash: "
},
{
"path": "scss/pixel-arts/bcrikko.scss",
"chars": 1082,
"preview": ".nes-bcrikko {\n $bcrikko-colors: (#333, #f9f2d7, #c5090c, #fff);\n\n // prettier-ignore\n $bcrikko: (\n (0,2,2,2,2,2,2"
},
{
"path": "scss/pixel-arts/bulbasaur.scss",
"chars": 1300,
"preview": ".nes-bulbasaur {\n $bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1, #3fc3b5, #fdfdf5, #ca242a);\n // prettier-ignore"
},
{
"path": "scss/pixel-arts/charmander.scss",
"chars": 1383,
"preview": ".nes-charmander {\n $charmander-colors: (#000202, #f77702, #eb2010, #fdfcff, #e5d70a, #e7d70e);\n // prettier-ignore\n $"
},
{
"path": "scss/pixel-arts/kirby.scss",
"chars": 1060,
"preview": ".nes-kirby {\n $kirby-colors: (#000, #ffaccc, #ff5478);\n // prettier-ignore\n $kirby: (\n (0,0,1,1,0,1,1,1,1,1,0,0,0,"
},
{
"path": "scss/pixel-arts/mario.scss",
"chars": 1032,
"preview": ".nes-mario {\n $mario-colors: (#f81c2f, #65352b, #ffbb8e, #000, #1560ad, #aeaeac, #fef102);\n // prettier-ignore\n $mari"
},
{
"path": "scss/pixel-arts/nes-icon.scss",
"chars": 812,
"preview": ".nes-logo {\n $logo-colors: (#3e3634, #c3c3c3, #787973, #bf1710);\n\n // prettier-ignore\n $logo: (\n (0,0,0,0,0,0,1,0,"
},
{
"path": "scss/pixel-arts/nes-jp-icon.scss",
"chars": 803,
"preview": ".nes-jp-logo {\n $logo-colors: (#333, #871f37, #dfd3b9);\n\n // prettier-ignore\n $logo: (\n (0,0,0,0,0,0,1,0,0,0,0,0,0"
},
{
"path": "scss/pixel-arts/octocat.scss",
"chars": 1722,
"preview": ".nes-octocat {\n $octocat-colors: (#333, #ffdec4, #cb7066);\n // prettier-ignore\n $octocat-1: (\n (0,0,0,1,0,0,0,0,0,"
},
{
"path": "scss/pixel-arts/phone.scss",
"chars": 919,
"preview": ".nes-phone {\n $phone-colors: (#596985, #3c4665, #000);\n // prettier-ignore\n $phone: (\n (0,0,3,3,3,3,3,3),\n (0,3"
},
{
"path": "scss/pixel-arts/pokeball.scss",
"chars": 957,
"preview": ".nes-pokeball {\n $pokeball-colors: (#060606, #ff001d, #fff, #9fa1a1);\n // prettier-ignore\n $pokeball: (\n (0,0,0,0,"
},
{
"path": "scss/pixel-arts/smartphone.scss",
"chars": 1461,
"preview": ".nes-smartphone {\n $smartphone-colors: (#fff, #060606);\n // prettier-ignore\n $smartphone: (\n (0,2,2,2,2,2,2,2,2,2,"
},
{
"path": "scss/pixel-arts/snes-icon.scss",
"chars": 810,
"preview": ".snes-logo {\n $logo-colors: (#333, #d7d7d7, #8932e5, #ad6df0);\n\n // prettier-ignore\n $logo: (\n (0,0,0,0,0,0,1,0,0,"
},
{
"path": "scss/pixel-arts/snes-jp-icon.scss",
"chars": 843,
"preview": ".snes-jp-logo {\n $px: 3px;\n $logo-colors: (#333, #d7d7d7, #7dbb78, #999cf7, #f40500, #f6f504);\n\n // prettier-ignore\n "
},
{
"path": "scss/pixel-arts/squirtle.scss",
"chars": 1318,
"preview": ".nes-squirtle {\n $squirtle-colors: (#000, #9cf, #cb6633, #9fa1a1, #fff, #f89934, #ff3);\n // prettier-ignore\n $squirtl"
},
{
"path": "scss/utilities/_index.scss",
"chars": 169,
"preview": "@charset \"utf-8\";\n\n@import \"animations.scss\";\n@import \"fill-gaps.scss\";\n@import \"icon-mixin.scss\";\n@import \"rounded-corn"
},
{
"path": "scss/utilities/animations.scss",
"chars": 77,
"preview": "@keyframes blink {\n 0% {\n opacity: 1;\n }\n\n 50% {\n opacity: 0;\n }\n}\n"
},
{
"path": "scss/utilities/fill-gaps.scss",
"chars": 134,
"preview": "// Fill gaps in pixel art dots\n// `transform` property conflict when used for nes-icon\n@mixin fill-gaps() {\n transform:"
},
{
"path": "scss/utilities/icon-mixin.scss",
"chars": 1684,
"preview": "@mixin pixelize($size, $matrix, $colors, $default-color: null) {\n $ret: \"\";\n $moz: \"\";\n @if ($default-color == null) "
},
{
"path": "scss/utilities/rounded-corners-mixin.scss",
"chars": 1930,
"preview": "%rounded-corner-defaults {\n border-style: solid;\n border-width: $border-size;\n}\n\n@mixin border-image($color) {\n borde"
},
{
"path": "scss/utilities/visually-hidden.scss",
"chars": 305,
"preview": "/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */\n@mixin visually-hidden() {\n // pos"
},
{
"path": "story/_helpers/icons.js",
"chars": 967,
"preview": "export const Icons = {\n twitter: 'twitter',\n facebook: 'facebook',\n github: 'github',\n google: 'google',\n youtube: "
},
{
"path": "story/_helpers/shared.js",
"chars": 106,
"preview": "export default {\n 'is-success': 'is-success',\n 'is-warning': 'is-warning',\n 'is-error': 'is-error',\n};\n"
},
{
"path": "story/avatars/avatars.stories.js",
"chars": 232,
"preview": "import { storiesOf } from '@storybook/html';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport Avatars from '."
},
{
"path": "story/avatars/avatars.template.js",
"chars": 671,
"preview": "import { select, boolean } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nexport default () => {\n "
},
{
"path": "story/badge/badge.stories.js",
"chars": 224,
"preview": "import { storiesOf } from '@storybook/html';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport Badge from './b"
},
{
"path": "story/badge/badge.template.js",
"chars": 846,
"preview": "import { select } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nimport sharedOptions from '../_he"
},
{
"path": "story/balloons/balloons.stories.js",
"chars": 235,
"preview": "import { storiesOf } from '@storybook/html';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport Ballons from '."
},
{
"path": "story/balloons/balloons.template.js",
"chars": 517,
"preview": "import { select, boolean } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nexport default () => {\n "
},
{
"path": "story/buttons/buttons.stories.js",
"chars": 233,
"preview": "import { storiesOf } from '@storybook/html';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport Buttons from '."
},
{
"path": "story/buttons/buttons.template.js",
"chars": 637,
"preview": "import { select } from '@storybook/addon-knobs';\n\nimport sharedOption from '../_helpers/shared';\n\nexport default () => {"
},
{
"path": "story/containers/containers.stories.js",
"chars": 247,
"preview": "import { storiesOf } from '@storybook/html';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport Containers from"
},
{
"path": "story/containers/containers.template.js",
"chars": 793,
"preview": "import { select, boolean } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nexport default () => {\n "
},
{
"path": "story/dialogs/dialogs.stories.js",
"chars": 232,
"preview": "import { storiesOf } from '@storybook/html';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport Dialogs from '."
},
{
"path": "story/dialogs/dialogs.template.js",
"chars": 542,
"preview": "import { boolean } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nexport default () => {\n const i"
},
{
"path": "story/icons/icons.stories.js",
"chars": 385,
"preview": "import { storiesOf } from '@storybook/html';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport Icons from './i"
},
{
"path": "story/icons/icons.template.js",
"chars": 447,
"preview": "import { radios, select } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nimport { Icons, Size } fr"
},
{
"path": "story/icons/reactions.template.js",
"chars": 727,
"preview": "import { select } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nimport { Reactions } from '../_he"
},
{
"path": "story/icons/sprites.template.js",
"chars": 258,
"preview": "import { select } from '@storybook/addon-knobs';\n\nimport { Sprites } from '../_helpers/icons';\n\nexport default () => {\n "
},
{
"path": "story/inputs/checkboxes.template.js",
"chars": 602,
"preview": "import { boolean } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nexport default () => {\n const i"
},
{
"path": "story/inputs/input.template.js",
"chars": 590,
"preview": "import { select } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nimport sharedOptions from '../_he"
},
{
"path": "story/inputs/inputs.stories.js",
"chars": 376,
"preview": "import { storiesOf } from '@storybook/html';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport Input from './i"
},
{
"path": "story/inputs/radio.template.js",
"chars": 752,
"preview": "import { boolean } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\n\nexport default () => {\n const "
},
{
"path": "story/lists/lists.stories.js",
"chars": 222,
"preview": "import { storiesOf } from '@storybook/html';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport Lists from './l"
},
{
"path": "story/lists/lists.template.js",
"chars": 614,
"preview": "import { radios, boolean } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nexport default () => {\n "
},
{
"path": "story/progress/progress.stories.js",
"chars": 238,
"preview": "import { storiesOf } from '@storybook/html';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport Progress from '"
},
{
"path": "story/progress/progress.template.js",
"chars": 725,
"preview": "import { select, boolean, number } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nimport sharedOpt"
},
{
"path": "story/select/select.stories.js",
"chars": 229,
"preview": "import { storiesOf } from '@storybook/html';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport Select from './"
},
{
"path": "story/select/select.template.js",
"chars": 785,
"preview": "import { boolean, select } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nimport sharedOptions fro"
},
{
"path": "story/table/table.stories.js",
"chars": 224,
"preview": "import { storiesOf } from '@storybook/html';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport Table from './t"
},
{
"path": "story/table/table.template.js",
"chars": 1063,
"preview": "import { boolean } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nexport default () => {\n const i"
},
{
"path": "story/text/text.stories.js",
"chars": 218,
"preview": "import { storiesOf } from '@storybook/html';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport Text from './te"
},
{
"path": "story/text/text.template.js",
"chars": 472,
"preview": "import { select } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nimport sharedOptions from '../_he"
},
{
"path": "story/textarea/textarea.stories.js",
"chars": 239,
"preview": "import { storiesOf } from '@storybook/html';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport Textarea from '"
},
{
"path": "story/textarea/textarea.template.js",
"chars": 461,
"preview": "import { select } from '@storybook/addon-knobs';\nimport classNames from 'classnames';\n\nimport sharedOptions from '../_he"
}
]
// ... and 1 more files (download for full content)
About this extraction
This page contains the full source code of the nostalgic-css/NES.css GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 149 files (245.3 KB), approximately 94.8k tokens, and a symbol index with 37 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.