Merge branch 'develop' into patch-1

.circleci/config.yml

@@ -0,0 +1,199 @@
+version: 2.1
+
+defaults: &defaults
+  docker:
+    - image: circleci/node
+
+  working_directory: ~/app
+
+
+
+
+
+jobs:
+  checkout:
+    <<: *defaults
+
+    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
+
+    steps:
+      - attach_workspace:
+          at: .
+
+      - restore_cache:
+          name: Restore npm Package Cache
+          keys:
+            - npm-{{ checksum "package-lock.json" }}
+            - npm-
+
+      - run:
+          name: Install Dependencies
+          command: npm install
+
+      - save_cache:
+          name: Save npm Package Cache
+          key: npm-{{ checksum "package-lock.json" }}
+          paths:
+            - node_modules
+
+      - persist_to_workspace:
+          root: .
+          paths:
+            - node_modules
+
+  build:
+    <<: *defaults
+
+    steps:
+      - attach_workspace:
+          at: .
+
+      - restore_cache:
+          name: Restore Build Cache
+          keys:
+            - build-{{ .Branch }}-{{ .Environment.CIRCLE_SHA1 }}
+            - build-{{ .Branch }}
+            - build-master
+            - build-
+
+      - run:
+          name: Build the Framework
+          command: npm run build
+
+      - save_cache:
+          name: Save Build Cache
+          key: build-{{ .Branch }}-{{ .Environment.CIRCLE_SHA1 }}
+          paths:
+            - css
+
+      - persist_to_workspace:
+          root: .
+          paths:
+            - css
+
+  commitlint:
+    <<: *defaults
+
+    steps:
+      - attach_workspace:
+          at: .
+
+      - run:
+          name: Lint commit messages
+          command: npx semantic-commitlint -- --ci
+
+  lint:
+    <<: *defaults
+
+    steps:
+      - attach_workspace:
+          at: .
+
+      - run:
+          name: Lint styles
+          command: npx stylelint -- --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
+
+    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
+      - install-dependencies:
+          requires:
+            - checkout
+      # - test:
+      #     requires:
+      #       - install-dependencies
+      # - coverage:
+      #     requires:
+      #       - install-dependencies
+      - commitlint:
+          requires:
+            - install-dependencies
+      - lint:
+          requires:
+            - install-dependencies
+      - build:
+          requires:
+            - install-dependencies
+      - release:
+          requires:
+            - commitlint
+            - build
+            - lint
+            # - test
+          filters:
+            branches:
+              only: master

.github/ISSUE_TEMPLATE.md

@@ -1,4 +1,18 @@
-<!-- 
+<!-- Please fill your information below the lines starting with `#`. -->
-  I'm not very good at English. So, I'm glad if you write in English as easy as possible.
+<!-- You can delete these lines enclosed by `<` and `>` before posting, too. -->
-  日本語がわかる方はなるべく日本語でお願いします。
+
--->
+# Description of the issue
+<!-- What is the issue/problem you are facing? -->
+
+# What was expected to be seen
+<!-- What were you expecting to see? -->
+
+# What actually was seen instead
+<!-- What did you actually see? Try to be precise as possible! -->
+
+# Environment
+Browser: <!-- Version of your browser. -->
+Build environment (i.e. NodeJS): <!-- If you have issues building the SCSS into CSS, add your information here. Delete this otherwise. -->
+
+# Suggestion(s) for fixing this issue
+<!-- What are your thoughts? How could this possibly be resolved? -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,11 @@
-<!-- 
+<!-- Please fill your information below the lines starting with `#`. -->
-  I'm not very good at English. So, I'm glad if you write in English as easy as possible.
+<!-- 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? -->

.gitignore

@@ -1,2 +1,4 @@
 node_modules
 .vscode
+css
+storybook-static

.npmignore

@@ -0,0 +1,3 @@
+node_modules
+.vscode
+storybook-static

.storybook/addons.js

@@ -1 +1 @@
-import '@storybook/addon-knobs/register';
+import '@storybook/addon-knobs/register'; // eslint-disable-line import/no-extraneous-dependencies

.storybook/config.js

@@ -1,6 +1,6 @@
-import { configure } from '@storybook/html';
+import { configure } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
 
-import '../css/nes.min.css'
+import '../css/nes.css'; // eslint-disable-line import/no-unresolved
 
 // automatically import all files ending in *.stories.js
 const req = require.context('../docs', true, /.stories.js$/);

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">

README-jp.md

@@ -1,13 +1,12 @@
 <div align="center">
-  <a href="https://bcrikko.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="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>
 </div>
 
 NES.cssは **ファミコン風(8bit ライク)** なCSSフレームワークです。
 
-
+[![Gitter][gitter-badge]][gitter] [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-[![Gitter][gitter-badge]][gitter]
 
 ## Install
 
@@ -38,7 +37,19 @@ TODO: npm での使用方法を書く
 
 NES.cssはコンポーネントのスタイルのみを提供しています。レイアウトはみなさんが好きなように定義してください。
 
-デフォルトでは`Press Start 2P`フォントを使っています。英語以外（日本語など）で利用される場合は、別途フォントを読み込んで使ってください。
+デフォルトのフォントは[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P)を使っています。英語以外（日本語など）で利用される場合は、別途フォントを読み込んで使ってください。 フォントを読み込む方法は、Google Fontsの[Get Started](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>
+```
 
 ### Recommended Fonts
 

README.md

@@ -1,13 +1,12 @@
 <div align="center">
-  <a href="https://bcrikko.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="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>
 </div>
 
 NES.css is a **NES-style(8bit-like)** CSS Framework.
 
-
+[![Gitter][gitter-badge]][gitter] [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-[![Gitter][gitter-badge]][gitter]
 
 ## Install
 
@@ -37,7 +36,19 @@ TODO: npm での使用方法を書く
 
 NES.css only provides components. You will need to define your own layout.
 
-The default font is Press Start 2P which only supports English characters. When you're using this framework with any language except English, please use another font.
+The default font is [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P) which only supports English characters. When you're using this framework with any language except English, please use another font. Please follow the [instructions](https://developers.google.com/fonts/docs/getting_started) from Google Fonts 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>
+```
 
 ### Recommended Fonts
 

commitlint.config.js

@@ -0,0 +1,8 @@
+/* eslint-env node */
+
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+
+  // Add your own rules. See http://marionebl.github.io/commitlint
+  rules: {},
+};

docs/buttons.stories.js

@@ -13,6 +13,7 @@ stories.add('button', () => {
     'is-success': 'is-success',
     'is-warning': 'is-warning',
     'is-error': 'is-error',
+    'is-disabled': 'is-disabled',
   }, '');
   return `<button type="button" class="btn ${extraClass}">Normal</button>`;
 });

docs/icons.stories.js

@@ -11,8 +11,10 @@ stories.add('icon', () => {
     'icon twitter': 'icon twitter',
     'icon facebook': 'icon facebook',
     'icon github': 'icon github',
+    'icon google': 'icon google',
     'icon youtube': 'icon youtube',
     'icon close': 'icon close',
+    pokeball: 'pokeball',
     'octocat animate': 'octocat animate',
     'icon trophy': 'icon trophy',
     'nes-logo': 'nes-logo',

docs/table.stories.js

@@ -9,13 +9,14 @@ stories.addDecorator(withKnobs);
 stories.add('table', () => {
   const isBordered = boolean('is-bordered', true) ? 'is-bordered' : '';
   const isCentered = boolean('is-centered', false) ? 'is-centered' : '';
+  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
 
-  const selectedClasses = [isBordered, isCentered];
+  const selectedClasses = [isBordered, isCentered, isDark];
 
   return `<table class="table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
         <thead>
           <tr>
-            <th>Table</th>
+            <th>Table.is-dark</th>
             <th>Table.is-bordered</th>
             <th>Table.is-centered</th>
           </tr>

index.html

@@ -11,6 +11,7 @@
 
     <title>NES.css - NES-style CSS Framework</title>
 
+    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
     <link href="./css/nes.css" rel="stylesheet" />
     <link href="./style.css" rel="stylesheet" />
 
@@ -47,6 +48,7 @@
         <button type="button" class="btn is-success">Success</button>
         <button type="button" class="btn is-warning">Warning</button>
         <button type="button" class="btn is-error">Error</button>
+        <button type="button" class="btn is-disabled">Disabled</button>
       </div>
     </section>
 
@@ -59,13 +61,13 @@
         </div>
         <div class="container is-dark with-title">
           <p class="title">Container.is-dark</p>
-          <p style="color: white;">Good morning. Thou hast had a good night's sleep, I hope.</p>
+          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
         </div>
         <div class="container is-rounded">
           <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
         </div>
         <div class="container is-rounded is-dark">
-          <p style="color: white;">Good morning. Thou hast had a good night's sleep, I hope.</p>
+          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
         </div>
       </div>
     </section>
@@ -130,12 +132,11 @@
       </div>
     </section>
 
-    <section class="container with-title">
+    <section class="container with-title" style="display:flex">
       <h2 class="title">Table</h2>
-      <table class="table is-bordered is-centered" style="margin:15px 4px 5px 4px">
+      <table class="table is-bordered is-centered" style="margin:15px 15px 5px 0;">
         <thead>
           <tr>
-            <th>Table</th>
             <th>Table.is-bordered</th>
             <th>Table.is-centered</th>
           </tr>
@@ -144,12 +145,28 @@
           <tr>
             <td>Thou hast had a good morning</td>
             <td>Thou hast had a good afternoon</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 night</td>
+          </tr>
+        </tbody>
+      </table>
+      <table class="table is-bordered is-dark" style="margin:15px 4px 5px 15px">
+        <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 morning</td>
+          </tr>
+          <tr>
+            <td>Thou hast had a good morning</td>
+            <td>Thou hast had a good afternoon</td>
           </tr>
         </tbody>
       </table>
@@ -194,6 +211,22 @@
           <i class="icon youtube"></i>
           <i class="icon youtube is-medium"></i>
           <i class="icon youtube is-large"></i>
+
+          <i class="icon google"></i>
+          <i class="icon google is-medium"></i>
+          <i class="icon google is-large"></i>
+
+          <i class="icon medium"></i>
+          <i class="icon medium is-medium"></i>
+          <i class="icon medium is-large"></i>
+
+          <i class="icon twitch"></i>
+          <i class="icon twitch is-medium"></i>
+          <i class="icon twitch is-large"></i>
+        
+          <i class="icon reddit"></i>
+          <i class="icon reddit is-medium"></i>
+          <i class="icon reddit is-large"></i>
         </div>
       </section>
 
@@ -209,6 +242,8 @@
           <i class="icon trophy"></i>
           <i class="icon trophy is-medium"></i>
           <i class="icon trophy is-large"></i>
+
+          <i class="pokeball"></i>
         </div>
       </section>
 

package.json

@@ -1,23 +1,28 @@
 {
   "name": "nes.css",
-  "version": "0.0.2",
+  "version": "0.0.0-development",
   "description": "NES.css is NES-style CSS Framework.",
   "scripts": {
     "watch": "npm run build:sass -- --watch",
-    "build": "npm run build:clean && npm run build:stylelint && npm run build:sass && npm run build:autoprefix && npm run build:cleancss && npm run build-storybook",
+    "build": "npm run build:clean && npm run build:stylelint && npm run build:sass && npm run build:autoprefix && npm run build:cleancss && npm run build:storybook",
     "stylelint": "stylelint scss/**/*.scss",
     "build:stylelint": "npm run stylelint -- --fix",
     "build:clean": "rimraf css",
     "build:sass": "node-sass --output-style expanded --source-map true 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",
-    "deploy": "npm run build",
     "storybook": "start-storybook -p 6006",
-    "build:storybook": "build-storybook"
+    "build:storybook": "build-storybook",
+    "deploy": "npm run build",
+    "semantic-commitlint": "semantic-commitlint",
+    "semantic-release": "semantic-release",
+    "commit": "git-cz",
+    "commit:retry": "git-cz --retry",
+    "commitmsg": "commitlint -e"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/BcRikko/NES.css.git"
+    "url": "https://github.com/nostalgic-css/NES.css.git"
   },
   "keywords": [
     "css",
@@ -28,24 +33,30 @@
   "author": "BcRikko (https://github.com/Bcrikko)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/BcRikko/NES.css/issues"
+    "url": "https://github.com/nostalgic-css/NES.css/issues"
   },
-  "homepage": "https://github.com/BcRikko/NES.css#readme",
+  "homepage": "https://github.com/nostalgic-css/NES.css#readme",
   "devDependencies": {
+    "@commitlint/cli": "^7.2.1",
+    "@commitlint/config-conventional": "^7.1.2",
     "@storybook/addon-knobs": "^4.0.11",
     "@storybook/html": "^4.0.11",
     "autoprefixer": "^9.1.5",
     "babel-loader": "^8.0.4",
     "clean-css-cli": "^4.2.1",
+    "commitizen": "^3.0.5",
     "eslint": "^5.9.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-plugin-import": "^2.14.0",
+    "cz-conventional-changelog": "^2.1.0",
     "husky": "^1.0.0",
     "lint-staged": "^7.3.0",
     "node-sass": "^4.9.3",
     "postcss-cli": "^6.0.0",
     "prettier": "^1.15.2",
     "rimraf": "^2.6.2",
+    "semantic-commitlint": "^1.3.2",
+    "semantic-release": "^15.12.3",
     "stylelint": "^9.5.0",
     "stylelint-config-prettier": "^4.0.0",
     "stylelint-config-recess-order": "^2.0.0",
@@ -56,25 +67,36 @@
   "browserslist": [
     "> 1%"
   ],
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "pre-commit": "lint-staged",
+      "prepare-commit-msg": "npm run semantic-commitlint -- -h"
     }
   },
   "lint-staged": {
     "scss/**/*.scss": [
       "npm run build",
-      "git add ./css",
       "git add"
     ],
     "*.js": [
-      "eslint .",
+      "eslint '.storybook/**/*.js' 'docs/**/*.js'",
       "git add"
     ]
   },
   "prettier": {
     "printWidth": 100
   },
+  "release": {
+    "verifyRelease": [
+      "semantic-commitlint"
+    ]
+  },
   "stylelint": {
     "plugins": [
       "stylelint-scss",
@@ -94,5 +116,10 @@
   },
   "eslintConfig": {
     "extends": "airbnb-base"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }

scss/base/generic.scss

@@ -9,11 +9,24 @@ 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: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+label {
+  cursor: inherit;
+}
+
+a,
+button {
+  cursor: $cursor-click-url, pointer;
 }
 
 button,
@@ -22,3 +35,9 @@ button,
 [type="submit"] {
   -webkit-appearance: none;
 }
+
+// Prevent stray pixels on focused inputs such as checkboxes and radios
+input[type="radio"],
+input[type="checkbox"] {
+  outline: 0;
+}

scss/base/variables.scss

@@ -1,7 +1,9 @@
 // Font
-@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
 $font-family: "Press Start 2P" !default;
 $font-size: 16px !default;
 
 $base-color: $color-black;
 $background-color: $color-white;
+
+$cursor-url: url(../assets/cursor.png);
+$cursor-click-url: url(../assets/cursor-click.png);

scss/elements/buttons.scss

@@ -14,6 +14,65 @@
   }
 }
 
+@mixin btn-extra-pixelize-style($color, $background, $hover-background, $shadow) {
+  color: $color;
+  background-color: $background;
+
+  &:hover,
+  &:focus {
+    background-color: $hover-background;
+    outline: 0;
+    // prettier-ignore
+    box-shadow: 
+      0 -4px $hover-background,
+      inset 0 -2px $shadow,
+      0 -8px #212529,
+      4px 0 $shadow,
+      4px -4px #212529, 
+      8px 0 #212529, 
+      0 4px $shadow, 
+      4px 4px #212529, 
+      0 8px #212529,
+      -4px 0 $hover-background, 
+      inset -2px 0 $shadow, 
+      -4px -4px #212529, 
+      -8px 0 #212529,
+      -4px 4px #212529;
+  }
+
+  &:active {
+    // prettier-ignore
+    box-shadow: 
+      0 -4px $shadow, 
+      0 -8px #212529, 
+      4px 0 $hover-background, 
+      4px -4px #212529,
+      8px 0 #212529, 
+      0 4px $hover-background, 
+      4px 4px #212529, 
+      0 8px #212529, 
+      -4px 0 $shadow,
+      -4px -4px #212529, 
+      -8px 0 #212529, 
+      -4px 4px #212529;
+  }
+
+  // prettier-ignore
+  box-shadow: 
+    0 -4px $background, 
+    0 -8px #212529, 
+    4px 0 $shadow, 
+    4px -4px #212529, 
+    8px 0 #212529,
+    0 4px $shadow, 
+    4px 4px #212529, 
+    0 8px #212529, 
+    -4px 0 $background, 
+    -4px -4px #212529,
+    -8px 0 #212529, 
+    -4px 4px #212529;
+}
+
 // Default style
 .btn {
   $border-size: 4px;
@@ -24,7 +83,7 @@
   margin: $border-size;
   text-align: center;
   vertical-align: middle;
-  cursor: pointer;
+  cursor: $cursor-click-url, pointer;
   user-select: none;
 
   @include btn-style($base-color, #fff, #e7e7e7, #adafbc);
@@ -59,6 +118,16 @@
     outline: 0;
   }
 
+  &.is-disabled,
+  &.is-disabled:hover,
+  &.is-disabled:focus {
+    color: $base-color;
+    cursor: not-allowed;
+    background-color: #d3d3d3;
+    box-shadow: inset -4px -4px #adafbc;
+    opacity: 0.6;
+  }
+
   // Other styles
   // prettier-ignore
   $types:
@@ -72,4 +141,25 @@
       @include btn-style(nth($type, 2), nth($type, 3), nth($type, 4), nth($type, 5));
     }
   }
+
+  &.is-rounded {
+    box-sizing: content-box;
+    padding: 6px 8px;
+    @include btn-extra-pixelize-style($base-color, #fff, #e7e7e7, #adafbc);
+
+    &::before,
+    &::after {
+      border-width: 0;
+    }
+    @each $type in $types {
+      &.is-#{nth($type, 1)} {
+        @include btn-extra-pixelize-style(
+          nth($type, 2),
+          nth($type, 3),
+          nth($type, 4),
+          nth($type, 5)
+        );
+      }
+    }
+  }
 }

scss/elements/checkboxes.scss

@@ -54,7 +54,7 @@
 
   & + span {
     position: relative;
-    cursor: pointer;
+    cursor: $cursor-click-url, pointer;
   }
 
   & + span::before,

scss/elements/containers.scss

@@ -72,6 +72,14 @@
     }
   }
 
+  &.is-center {
+    text-align: center;
+  }
+
+  &.is-right {
+    text-align: right;
+  }
+
   &.with-title {
     padding-top: 2rem;
 
@@ -83,24 +91,27 @@
       background-color: $background-color;
     }
 
-    &.is-center {
+    &.is-rounded {
-      text-align: center;
-
       > .title {
-        margin: -2rem auto 1rem;
+        margin-top: -2.4rem;
+      }
+    }
+
+    &.is-center {
+      > .title {
+        margin: -2.4rem auto 1rem;
       }
     }
 
     &.is-right {
-      text-align: right;
-
       > .title {
-        margin: -2rem 0 1rem auto;
+        margin: -2.4rem 0 1rem auto;
       }
     }
   }
 
   &.is-dark {
+    color: $background-color;
     &::before {
       background-color: $base-color;
     }

scss/elements/radios.scss

@@ -28,7 +28,7 @@
 
   & + span {
     position: relative;
-    cursor: pointer;
+    cursor: $cursor-click-url, pointer;
   }
 
   &:checked + span::before {

scss/elements/tables.scss

@@ -1,13 +1,7 @@
 .table {
   table-layout: fixed;
-  background-color: #fff;
+  background-color: $background-color;
-
+  @mixin thsAndTdsBoxShadow($color) {
-  &.is-centered th {
-    text-align: center;
-  }
-  &.is-bordered {
-    box-shadow: 4px 0 $base-color, 0 -4px $base-color, -4px 0 $base-color, 0 4px $base-color;
-
     th,
     td {
       padding: 0.5rem;
@@ -16,14 +10,45 @@
 
     tr {
       th + th {
-        box-shadow: -4px 0 $base-color;
+        box-shadow: -4px 0 $color;
       }
       td {
-        box-shadow: 0 -4px $base-color;
+        box-shadow: 0 -4px $color;
       }
       td:not(:first-child) {
-        box-shadow: -4px 0 $base-color, 0 -4px $base-color;
+        box-shadow: -4px 0 $color, 0 -4px $color;
       }
     }
   }
+  &.is-centered th {
+    text-align: center;
+  }
+  &.is-bordered {
+    box-shadow: 4px 0 $base-color, 0 -4px $base-color, -4px 0 $base-color, 0 4px $base-color;
+    @include thsAndTdsBoxShadow($base-color);
+  }
+  &.is-dark {
+    position: relative;
+    color: $background-color;
+    background-color: $base-color;
+    box-shadow: 4px -4px $base-color, -4px -4px $base-color, -4px 4px $base-color,
+      4px 4px $base-color;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      content: "";
+      background: linear-gradient(to left, transparent 4px, $background-color 4px) no-repeat,
+        linear-gradient(to bottom, transparent 4px, $background-color 4px) no-repeat,
+        linear-gradient(to right, transparent 4px, $background-color 4px) no-repeat,
+        linear-gradient(to top, transparent 4px, $background-color 4px) no-repeat;
+      background-position: 100% 0, 100% 0, 0 100%, 0 100%;
+      background-size: calc(100% - 4px) 4px, 4px calc(100% - 4px);
+    }
+
+    @include thsAndTdsBoxShadow($background-color);
+  }
 }

scss/form/inputs.scss

@@ -53,3 +53,18 @@
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .field.is-inline {
+    display: block;
+
+    > label {
+      margin-bottom: 0.5rem; // reboot.css:label
+      text-align: left;
+    }
+
+    .input {
+      max-width: 100%;
+    }
+  }
+}

scss/icons/google.scss

@@ -0,0 +1,20 @@
+$icon-google-colors: (#4285f4, #fff, #db4437, #f4b400, #0f9d58);
+// prettier-ignore
+$icon-google: (
+  ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),
+  ( 2,2,2,2,2,3,3,3,3,3,3,2,2,2,2,2 ),
+  ( 2,2,2,3,3,3,3,3,3,3,3,3,3,2,2,2 ),
+  ( 2,2,3,3,3,3,3,3,3,3,3,3,2,2,2,2 ),
+  ( 2,3,3,3,3,2,2,2,2,2,3,2,2,2,2,2 ),
+  ( 4,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2 ),
+  ( 4,4,3,2,2,2,2,2,2,2,2,2,2,2,2,2 ),
+  ( 4,4,4,2,2,2,2,2,1,1,1,1,1,1,1,2 ),
+  ( 4,4,4,2,2,2,2,2,1,1,1,1,1,1,1,2 ),
+  ( 4,4,4,2,2,2,2,2,1,1,1,1,1,1,1,2 ),
+  ( 4,4,5,2,2,2,2,2,2,2,2,2,1,1,1,2 ),
+  ( 4,5,5,5,2,2,2,2,2,2,2,1,1,1,1,2 ),
+  ( 2,5,5,5,5,2,2,2,2,2,5,1,1,1,2,2 ),
+  ( 2,2,5,5,5,5,5,5,5,5,5,5,1,1,2,2 ),
+  ( 2,2,2,5,5,5,5,5,5,5,5,5,5,2,2,2 ),
+  ( 0,2,2,2,2,5,5,5,5,5,5,2,2,2,2,0 )
+);

scss/icons/icons.scss

@@ -8,6 +8,10 @@
 @import "facebook.scss";
 @import "github.scss";
 @import "youtube.scss";
+@import "google.scss";
+@import "medium.scss";
+@import "twitch.scss";
+@import "reddit.scss";
 
 // others
 @import "close.scss";
@@ -78,6 +82,22 @@
     &.youtube::before {
       @include pixelize($icon-youtube, $icon-youtube-colors, $px);
     }
+
+    &.google::before {
+      @include pixelize($icon-google, $icon-google-colors, $px);
+    }
+
+    &.medium::before {
+      @include pixelize($icon-medium, $icon-medium-colors, $px);
+    }    
+    
+    &.twitch::before {
+      @include pixelize($icon-twitch, $icon-twitch-colors, $px);
+    }
+    
+    &.reddit::before {
+      @include pixelize($icon-reddit, $icon-reddit-colors, $px);
+    }
   }
 
   // default

scss/icons/medium.scss

@@ -0,0 +1,20 @@
+$icon-medium-colors: (#fff, #12100e);
+// prettier-ignore
+$icon-medium: (
+  ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),
+  ( 2,1,1,1,2,2,2,2,2,2,2,1,1,1,1,2 ),
+  ( 2,2,1,1,2,2,2,2,2,2,2,1,1,1,2,2 ),
+  ( 2,2,1,1,1,2,2,2,2,2,2,1,1,1,2,2 ),
+  ( 2,2,1,1,1,1,2,2,2,2,1,1,1,1,2,2 ),
+  ( 2,2,1,1,1,1,2,2,2,2,1,1,1,1,2,2 ),
+  ( 2,2,1,1,1,1,2,2,2,1,1,1,1,1,2,2 ),
+  ( 2,2,1,2,1,1,1,2,2,1,1,1,1,1,2,2 ),
+  ( 2,2,1,2,1,1,1,2,1,1,2,1,1,1,2,2 ),
+  ( 2,2,1,2,2,1,1,1,1,1,2,1,1,1,2,2 ),
+  ( 2,2,1,2,2,1,1,1,1,2,2,1,1,1,2,2 ),
+  ( 2,2,1,2,2,2,1,1,1,2,2,1,1,1,2,2 ),
+  ( 2,2,1,2,2,2,1,1,2,2,2,1,1,1,2,2 ),
+  ( 2,2,1,2,2,2,2,1,2,2,2,1,1,1,2,2 ),
+  ( 2,1,1,1,2,2,2,2,2,2,1,1,1,1,1,2 ),
+  ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),
+);

scss/icons/reddit.scss

@@ -0,0 +1,20 @@
+$icon-reddit-colors: (#fff, #f40);
+// prettier-ignore
+$icon-reddit: (
+  ( 0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0 ),
+  ( 0,2,2,2,2,2,2,2,1,1,1,2,1,2,2,0 ),
+  ( 2,2,2,2,2,2,2,1,2,2,2,1,1,1,2,2 ),
+  ( 2,2,2,2,2,2,2,1,2,2,2,2,1,2,2,2 ),
+  ( 2,2,2,2,2,2,1,1,1,1,2,2,2,2,2,2 ),
+  ( 2,1,1,2,1,1,1,1,1,1,1,1,2,1,1,2 ),
+  ( 2,1,2,1,1,1,1,1,1,1,1,1,1,2,1,2 ),
+  ( 2,2,1,1,1,2,2,1,1,2,2,1,1,1,2,2 ),
+  ( 2,1,1,1,1,2,2,1,1,2,2,1,1,1,1,2 ),
+  ( 2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2 ),
+  ( 2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2 ),
+  ( 2,2,1,1,1,2,1,1,1,1,2,1,1,1,2,2 ),
+  ( 2,2,2,1,1,1,2,2,2,2,1,1,1,2,2,2 ),
+  ( 2,2,2,2,1,1,1,1,1,1,1,1,2,2,2,2 ),
+  ( 0,2,2,2,2,2,1,1,1,1,2,2,2,2,2,0 ),
+  ( 0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0 )
+);

scss/icons/twitch.scss

@@ -0,0 +1,20 @@
+$icon-twitch-colors: (#fff, #6441a4);
+// prettier-ignore
+$icon-twitch: (
+  ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),
+  ( 2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,2 ),
+  ( 2,1,1,2,2,2,2,2,2,2,2,2,2,2,1,2 ),
+  ( 2,1,1,2,2,2,2,2,2,2,2,2,2,2,1,2 ),
+  ( 2,1,1,2,2,2,2,1,2,2,1,2,2,2,1,2 ),
+  ( 2,1,1,2,2,2,2,1,2,2,1,2,2,2,1,2 ),
+  ( 2,1,1,2,2,2,2,1,2,2,1,2,2,2,1,2 ),
+  ( 2,1,1,2,2,2,2,1,2,2,1,2,2,2,1,2 ),
+  ( 2,1,1,2,2,2,2,2,2,2,2,2,2,2,1,2 ),
+  ( 2,1,1,2,2,2,2,2,2,2,2,2,2,1,1,2 ),
+  ( 2,1,1,2,2,2,2,2,2,2,2,2,1,1,2,2 ),
+  ( 2,1,1,1,1,2,2,1,1,1,1,1,1,2,2,2 ),
+  ( 2,1,1,1,1,2,1,1,1,1,1,1,2,2,2,2 ),
+  ( 2,2,2,2,1,1,1,1,2,2,2,2,2,2,2,2 ),
+  ( 2,2,2,2,1,1,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,0 )
+);

scss/pixel-arts/_index.scss

@@ -6,3 +6,4 @@
 @import "snes-jp-icon.scss";
 @import "bcrikko.scss";
 @import "octocat.scss";
+@import "pokeball.scss";

scss/pixel-arts/pokeball.scss

@@ -0,0 +1,38 @@
+.pokeball {
+  $px: 6px;
+  $pokeball-colors: (#060606, #ff001d, #fff, #9fa1a1);
+  // prettier-ignore
+  $pokeball: (
+    (0,0,0,0,0,1,1,1,1,0,0,0,0,0),
+    (0,0,0,1,1,2,2,2,2,1,1,0,0,0),
+    (0,0,1,3,3,2,2,2,2,2,2,1,0,0),
+    (0,1,3,3,2,2,2,2,2,2,2,1,1,0),
+    (0,1,3,2,2,2,2,2,2,2,2,2,1,0),
+    (1,3,2,2,2,2,2,2,2,2,2,2,2,1),
+    (1,1,1,2,2,2,2,1,1,1,2,2,2,1),
+    (1,1,1,1,2,2,1,3,3,3,1,2,2,1),
+    (1,4,3,1,1,1,1,3,3,3,1,1,1,1),
+    (0,1,3,3,3,1,1,3,3,3,1,3,1,0),
+    (0,1,3,3,3,3,3,1,1,1,3,3,1,0),
+    (0,0,1,4,4,3,3,3,3,3,3,1,0,0),
+    (0,0,0,1,1,4,4,4,4,1,1,0,0,0),
+    (0,0,0,0,0,1,1,1,1,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  );
+
+  position: relative;
+  display: inline-block;
+  width: $px * 14;
+  height: $px * 14;
+
+  &::before {
+    position: absolute;
+    top: $px * -1;
+    left: $px * -1;
+    content: "";
+    background: transparent;
+
+    @include pixelize($pokeball, $pokeball-colors, $px);
+  }
+}