Merge pull request #358 from nostalgic-css/develop

Release v2.2.x minor update
nostalgic-css · Sep 30, 2019 · d5843e6 · d5843e6
2 parents 24c0670 + 72a12ac
commit d5843e6
Show file tree

Hide file tree

Showing 14 changed files with 254 additions and 24 deletions.
diff --git a/.github/CONTRUBUTING-ru.md b/.github/CONTRUBUTING-ru.md
@@ -0,0 +1,103 @@
+# Вклад
+
+Посмотри документы на другом языке:
+[简体中文](.github/CONTRIBUTING-zh-CN.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md)/ [English](../CONTRIBUTING.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. Запустите сервер:
+    ```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/
diff --git a/.github/README-pt-BR.md b/.github/README-pt-BR.md
@@ -23,7 +23,7 @@ yarn add nes.css
 ```
 
 Nosso `package.json` contém alguns metadata adicionais, sob as seguintes chaves:
-* `sass` - caminho para nosso arquivo fronte Sass principal
+* `sass` - caminho para nosso arquivo de código fonte principal Sass
 * `style` - caminho para nosso CSS não-minificado
 
 ### via CDN

diff --git a/.github/README-ru.md b/.github/README-ru.md
@@ -0,0 +1,106 @@
+<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=".github/README-jp.md">日本語</a> / <a href="README-zh-CN.md">简体中文</a> / <a href=".github/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
+
+#### Через CDN
+
+Использования через тэг `<link />`:
+
+```html
+<!-- Миницифированные -->
+<link href="https://unpkg.com/nes.css@2.2.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)                          |
+
+## Использование
+
+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]: ./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
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,7 +1,7 @@
 # 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-zh-CN.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md) / [Русский](.github/CONTRIBUTING-ru.md)
 
 You want to contribute to the project? Awesome!
 

diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <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-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>
 </div>
 
 NES.css is a **NES-style(8bit-like)** CSS Framework.

diff --git a/docs/script.js b/docs/script.js
@@ -11,7 +11,7 @@ const sampleCollection = [
   {
     title: 'buttons',
     showCode: false,
-    code: `<a class="nes-btn">Normal</a>
+    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>

diff --git a/scss/elements/buttons.scss b/scss/elements/buttons.scss
@@ -12,9 +12,8 @@
     box-shadow: inset -4px -4px $shadow;
   }
 
-  &:hover,
-  &:focus {
-    color: inherit;
+  &:hover {
+    color: $color;
     text-decoration: none;
     background-color: $hover-background;
 
@@ -23,6 +22,10 @@
     }
   }
 
+  &:focus {
+    box-shadow: 0 0 0 6px rgba($shadow, 0.3);
+  }
+
   &:active:not(.is-disabled)::after {
     box-shadow: inset 4px 4px $shadow;
   }

diff --git a/scss/form/checkboxes.scss b/scss/form/checkboxes.scss
@@ -53,6 +53,8 @@
   -moz-appearance: none;
   appearance: none;
 
+  @include visually-hidden();
+
   & + span {
     position: relative;
     cursor: $cursor-click-url, pointer;

diff --git a/scss/form/radios.scss b/scss/form/radios.scss
@@ -27,6 +27,8 @@
   -moz-appearance: none;
   appearance: none;
 
+  @include visually-hidden();
+
   & + span {
     position: relative;
     cursor: $cursor-click-url, pointer;

diff --git a/scss/icons/instagram.scss b/scss/icons/instagram.scss
@@ -3,18 +3,18 @@ $icon-instagram-colors: (#fff, #8005c8, #d40075, #e98c25, #d84646);
 $icon-instagram: (
   ( 0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0),
   ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
-  ( 2,2,0,0,0,0,0,0,0,0,0,0,0,0,2,2),
-  ( 2,2,0,0,0,0,0,0,0,0,0,2,2,0,2,2),
-  ( 2,2,0,0,0,0,0,0,0,0,0,2,2,0,2,2),
-  ( 2,2,0,0,0,0,2,2,2,2,0,0,0,0,2,2),
-  ( 3,2,0,0,0,2,0,0,0,0,2,0,0,0,2,3),
-  ( 3,3,0,0,0,2,0,0,0,0,2,0,0,0,3,3),
-  ( 3,3,0,0,0,3,0,0,0,0,3,0,0,0,3,3),
-  ( 3,3,0,0,0,3,0,0,0,0,3,0,0,0,3,3),
-  ( 4,4,0,0,0,0,3,3,3,3,0,0,0,0,3,3),
-  ( 4,4,0,0,0,0,0,0,0,0,0,0,0,0,3,3),
-  ( 4,4,0,0,0,0,0,0,0,0,0,0,0,0,5,5),
-  ( 4,4,0,0,0,0,0,0,0,0,0,0,0,0,5,5),
+  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2),
+  ( 2,2,1,1,1,1,1,1,1,1,1,2,2,1,2,2),
+  ( 2,2,1,1,1,1,1,1,1,1,1,2,2,1,2,2),
+  ( 2,2,1,1,1,1,2,2,2,2,1,1,1,1,2,2),
+  ( 3,2,1,1,1,2,1,1,1,1,2,1,1,1,2,3),
+  ( 3,3,1,1,1,2,1,1,1,1,2,1,1,1,3,3),
+  ( 3,3,1,1,1,3,1,1,1,1,3,1,1,1,3,3),
+  ( 3,3,1,1,1,3,1,1,1,1,3,1,1,1,3,3),
+  ( 4,4,1,1,1,1,3,3,3,3,1,1,1,1,3,3),
+  ( 4,4,1,1,1,1,1,1,1,1,1,1,1,1,3,3),
+  ( 4,4,1,1,1,1,1,1,1,1,1,1,1,1,5,5),
+  ( 4,4,4,1,1,1,1,1,1,1,1,1,1,5,5,5),
   ( 0,4,4,4,4,4,4,4,4,5,5,5,5,5,5,0),
   ( 0,0,4,4,4,4,4,4,5,5,5,5,5,5,0,0)
 );
diff --git a/scss/icons/twitter.scss b/scss/icons/twitter.scss
@@ -3,7 +3,7 @@ $icon-twitter-colors: (#fff, #2c9ceb);
 $icon-twitter: (
   ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),
   ( 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2 ),
-  ( 2,0,2,2,2,2,2,2,2,1,1,1,2,2,2,2 ),
+  ( 2,1,2,2,2,2,2,2,2,1,1,1,2,2,2,2 ),
   ( 2,1,1,1,2,2,2,2,1,1,1,1,1,2,2,2 ),
   ( 2,1,1,1,1,1,2,1,1,1,1,1,1,1,1,2 ),
   ( 2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2 ),

diff --git a/scss/pixel-arts/ash.scss b/scss/pixel-arts/ash.scss
@@ -4,12 +4,12 @@
   $ash: (
     (0,0,0,0,4,4,4,4,4,4,0,0,0,0),
     (0,0,0,4,2,2,2,1,1,3,4,0,0,0),
-    (0,0,4,2,2,2,2,1,1,1,1,4,1,0),
+    (0,0,4,2,2,2,2,1,1,1,1,4,0,0),
     (0,0,4,2,2,2,2,1,1,3,3,4,4,0),
     (0,4,4,4,2,2,2,2,2,2,2,2,2,4),
-    (0,4,4,4,4,4,4,4,2,2,2,4,4,1),
-    (4,4,4,4,4,4,4,5,5,4,5,4,1,1),
-    (0,4,4,5,5,5,4,5,5,4,5,4,1,1),
+    (0,4,4,4,4,4,4,4,2,2,2,4,4,0),
+    (4,4,4,4,4,4,4,5,5,4,5,4,0,0),
+    (0,4,4,5,5,5,4,5,5,4,5,4,0,0),
     (0,0,4,5,5,5,5,5,5,5,5,4,0,0),
     (0,4,7,4,4,5,5,5,5,5,4,0,0,0),
     (0,4,7,4,4,4,4,4,4,4,0,0,0,0),

diff --git a/scss/utilities/_index.scss b/scss/utilities/_index.scss
@@ -3,3 +3,4 @@
 @import "animations.scss";
 @import "icon-mixin.scss";
 @import "rounded-corners-mixin.scss";
+@import "visually-hidden.scss";
diff --git a/scss/utilities/visually-hidden.scss b/scss/utilities/visually-hidden.scss
@@ -0,0 +1,13 @@
+/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
+@mixin visually-hidden() {
+  // position: absolute;
+  // margin: -1px;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}