Initial commit

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+out
+npm-debug.log

.node-version

@@ -0,0 +1 @@
+v8.9.3

.travis.yml

@@ -0,0 +1,27 @@
+language: node_js
+
+node_js:
+  - "node"
+  - "lts/*"
+
+before_script:
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
+  - sleep 3
+
+script:
+  - npm test
+  - npm run package:linux
+
+branches:
+  only:
+    - master
+
+cache:
+  directories:
+    - node_modules
+
+notifications:
+  email:
+    on_success: never
+    on_failure: change

README.md

@@ -0,0 +1,7 @@
+## Refer to run electron project
+
+```sh
+$ yarn
+$ yarn start
+$ yarn package:win
+```

assets/code-blocks.js

@@ -0,0 +1,19 @@
+const fs = require('fs')
+const path = require('path')
+
+const codeBlocksWithPaths = document.querySelectorAll('code[data-path]')
+
+Array.prototype.forEach.call(codeBlocksWithPaths, (code) => {
+  const codePath = path.join(__dirname, '..', code.dataset.path)
+  const extension = path.extname(codePath)
+  code.classList.add(`language-${extension.substring(1)}`)
+  code.textContent = fs.readFileSync(codePath)
+})
+
+document.addEventListener('DOMContentLoaded', () => {
+  const highlight = require('highlight.js')
+  const codeBlocks = document.querySelectorAll('pre code')
+  Array.prototype.forEach.call(codeBlocks, (code) => {
+    highlight.highlightBlock(code)
+  })
+})

assets/css/about.css

@@ -0,0 +1,155 @@
+/* Welcome ------------------------ */
+
+.about {
+  --about-space: 4rem;
+
+  position: absolute;
+  display: flex;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0;
+  background-color: hsl(0,0%,98%);
+  pointer-events: none;
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(1.1);
+  transition: visibility 0s .12s linear , opacity .12s ease-in, transform .12s ease-in;
+}
+.about.is-shown {
+  pointer-events: auto;
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+  transition: visibility 0s 0s linear , opacity .24s ease-out, transform .24s ease-out;
+}
+
+.about-wrapper {
+  margin: auto;
+}
+
+.about-header {
+  padding: var(--about-space) 0;
+  border-bottom: 1px solid hsl(0,0%,88%);
+}
+
+.about-logo {
+  display: block;
+  margin: 0 auto;
+  width: 320px; /* TODO: Adjust asset to this size */
+  max-width: 100%;
+}
+
+.about-sections {
+  max-width: 680px;
+  padding: 0 var(--about-space);
+}
+
+.about-section {
+  margin: var(--about-space) 0;
+}
+
+.about h2 {
+  text-align: center;
+  margin: 0 0 1em 0;
+  font-size: 1.5em;
+  color: hsl(0, 0%, 55%);
+}
+
+.about .about-code h2 {
+  color: hsl(330, 65%, 55%);
+}
+
+.about .play-along h2 {
+  color: hsl(222, 53%, 50%);
+}
+
+.about-button {
+  display: block;
+  margin: 0 auto;
+  padding: .4em 1.2em;
+  font: inherit;
+  font-size: 1.6em;
+  color: inherit;
+  border: 2px solid;
+  border-radius: 4px;
+  background-color: transparent;
+}
+.about-button:focus {
+  outline: none;
+  border-color: hsl(0,0%,88%);
+}
+
+footer.about-section {
+  text-align: center;
+}
+
+.rainbow-button-wrapper {
+  --rainbow-button-width: 170px;
+  --rainbow-button-height: 50px;
+  --rainbow-button-width-inner: 164px;
+  --rainbow-button-height-inner: 44px;
+  --rainbow-color-1: hsl(116, 30%, 36%);
+  --rainbow-color-2: hsl(194, 60%, 36%);
+  --rainbow-color-3: hsl(222, 53%, 50%);
+  --rainbow-color-4: hsl(285, 47%, 46%);
+  --rainbow-color-5: hsl(330, 65%, 48%);
+  --rainbow-color-6: hsl(32, 79%, 49%);
+  --rainbow-color-7: hsl(53, 84%, 50%);
+
+  display: inline-block;
+  width: var(--rainbow-button-width);
+  height: var(--rainbow-button-height);
+  position: relative;
+  overflow: hidden;
+  border-radius: 5px;
+}
+
+.rainbow-button-wrapper:before {
+  display: block;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 600px;
+  height: var(--rainbow-button-height);
+  background: #CCC;
+  background: linear-gradient(to right, var(--rainbow-color-1) 0%, var(--rainbow-color-2) 14%, var(--rainbow-color-3) 28%, var(--rainbow-color-4) 42%, var(--rainbow-color-5) 56%, var(--rainbow-color-6) 70%, var(--rainbow-color-7) 84%, var(--rainbow-color-1) 100%);
+  background-position: -200px 0;
+  transition: all 0.5s;
+  content: "";
+}
+
+.rainbow-button-wrapper button {
+  display: block;
+  width: var(--rainbow-button-width-inner);
+  height: var(--rainbow-button-height-inner);
+  position: absolute;
+  z-index: 3;
+  top: 3px;
+  left: 3px;
+  border: none;
+  background: white;
+  color: black;
+  font-size: 1.3rem;
+}
+
+.rainbow-button-wrapper:hover:before {
+  background-position: 200px 0;
+}
+
+@media (min-width: 940px) {
+  .about-header {
+    align-self: center;
+    padding: var(--about-space);
+    border-right: 1px solid hsl(0,0%,88%);
+    border-bottom: none;
+  }
+  .about-wrapper {
+    display: flex;
+  }
+}