Merge pull request #785 from ueokande/docs-mobile-support

Support responsive design on docs

7 files changed, 425 insertions, 7 deletions

diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 0000000..5ceb7ec
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1,3 @@
+/.bundle
+/_site/
+/vendor/bundle/
diff --git a/docs/Gemfile b/docs/Gemfile
new file mode 100644
index 0000000..33d9d3b
--- /dev/null
+++ b/docs/Gemfile
@@ -0,0 +1,3 @@
+source "https://rubygems.org"
+
+gem 'github-pages', group: :jekyll_plugins
diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock
new file mode 100644
index 0000000..cbf515a
--- /dev/null
+++ b/docs/Gemfile.lock
@@ -0,0 +1,258 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (6.0.3.2)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 0.7, < 2)
+      minitest (~> 5.1)
+      tzinfo (~> 1.1)
+      zeitwerk (~> 2.2, >= 2.2.2)
+    addressable (2.7.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.11.1)
+    colorator (1.1.0)
+    commonmarker (0.17.13)
+      ruby-enum (~> 0.5)
+    concurrent-ruby (1.1.7)
+    dnsruby (1.61.4)
+      simpleidn (~> 0.1)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    ethon (0.12.0)
+      ffi (>= 1.3.0)
+    eventmachine (1.2.7)
+    execjs (2.7.0)
+    faraday (1.0.1)
+      multipart-post (>= 1.2, < 3)
+    ffi (1.13.1)
+    forwardable-extended (2.6.0)
+    gemoji (3.0.1)
+    github-pages (207)
+      github-pages-health-check (= 1.16.1)
+      jekyll (= 3.9.0)
+      jekyll-avatar (= 0.7.0)
+      jekyll-coffeescript (= 1.1.1)
+      jekyll-commonmark-ghpages (= 0.1.6)
+      jekyll-default-layout (= 0.1.4)
+      jekyll-feed (= 0.13.0)
+      jekyll-gist (= 1.5.0)
+      jekyll-github-metadata (= 2.13.0)
+      jekyll-mentions (= 1.5.1)
+      jekyll-optional-front-matter (= 0.3.2)
+      jekyll-paginate (= 1.1.0)
+      jekyll-readme-index (= 0.3.0)
+      jekyll-redirect-from (= 0.15.0)
+      jekyll-relative-links (= 0.6.1)
+      jekyll-remote-theme (= 0.4.1)
+      jekyll-sass-converter (= 1.5.2)
+      jekyll-seo-tag (= 2.6.1)
+      jekyll-sitemap (= 1.4.0)
+      jekyll-swiss (= 1.0.0)
+      jekyll-theme-architect (= 0.1.1)
+      jekyll-theme-cayman (= 0.1.1)
+      jekyll-theme-dinky (= 0.1.1)
+      jekyll-theme-hacker (= 0.1.1)
+      jekyll-theme-leap-day (= 0.1.1)
+      jekyll-theme-merlot (= 0.1.1)
+      jekyll-theme-midnight (= 0.1.1)
+      jekyll-theme-minimal (= 0.1.1)
+      jekyll-theme-modernist (= 0.1.1)
+      jekyll-theme-primer (= 0.5.4)
+      jekyll-theme-slate (= 0.1.1)
+      jekyll-theme-tactile (= 0.1.1)
+      jekyll-theme-time-machine (= 0.1.1)
+      jekyll-titles-from-headings (= 0.5.3)
+      jemoji (= 0.11.1)
+      kramdown (= 2.3.0)
+      kramdown-parser-gfm (= 1.1.0)
+      liquid (= 4.0.3)
+      mercenary (~> 0.3)
+      minima (= 2.5.1)
+      nokogiri (>= 1.10.4, < 2.0)
+      rouge (= 3.19.0)
+      terminal-table (~> 1.4)
+    github-pages-health-check (1.16.1)
+      addressable (~> 2.3)
+      dnsruby (~> 1.60)
+      octokit (~> 4.0)
+      public_suffix (~> 3.0)
+      typhoeus (~> 1.3)
+    html-pipeline (2.13.0)
+      activesupport (>= 2)
+      nokogiri (>= 1.4)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.9.0)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (>= 1.17, < 3)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-avatar (0.7.0)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-coffeescript (1.1.1)
+      coffee-script (~> 2.2)
+      coffee-script-source (~> 1.11.1)
+    jekyll-commonmark (1.3.1)
+      commonmarker (~> 0.14)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-commonmark-ghpages (0.1.6)
+      commonmarker (~> 0.17.6)
+      jekyll-commonmark (~> 1.2)
+      rouge (>= 2.0, < 4.0)
+    jekyll-default-layout (0.1.4)
+      jekyll (~> 3.0)
+    jekyll-feed (0.13.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-gist (1.5.0)
+      octokit (~> 4.2)
+    jekyll-github-metadata (2.13.0)
+      jekyll (>= 3.4, < 5.0)
+      octokit (~> 4.0, != 4.4.0)
+    jekyll-mentions (1.5.1)
+      html-pipeline (~> 2.3)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-optional-front-matter (0.3.2)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-paginate (1.1.0)
+    jekyll-readme-index (0.3.0)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-redirect-from (0.15.0)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-relative-links (0.6.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-remote-theme (0.4.1)
+      addressable (~> 2.0)
+      jekyll (>= 3.5, < 5.0)
+      rubyzip (>= 1.3.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-seo-tag (2.6.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-sitemap (1.4.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-swiss (1.0.0)
+    jekyll-theme-architect (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-cayman (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-dinky (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-hacker (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-leap-day (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-merlot (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-midnight (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-minimal (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-modernist (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-primer (0.5.4)
+      jekyll (> 3.5, < 5.0)
+      jekyll-github-metadata (~> 2.9)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-slate (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-tactile (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-time-machine (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-titles-from-headings (0.5.3)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    jemoji (0.11.1)
+      gemoji (~> 3.0)
+      html-pipeline (~> 2.2)
+      jekyll (>= 3.0, < 5.0)
+    kramdown (2.3.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.2.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.3.6)
+    mini_portile2 (2.4.0)
+    minima (2.5.1)
+      jekyll (>= 3.5, < 5.0)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    minitest (5.14.1)
+    multipart-post (2.1.1)
+    nokogiri (1.10.10)
+      mini_portile2 (~> 2.4.0)
+    octokit (4.18.0)
+      faraday (>= 0.9)
+      sawyer (~> 0.8.0, >= 0.5.3)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (3.1.1)
+    rb-fsevent (0.10.4)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.4)
+    rouge (3.19.0)
+    ruby-enum (0.8.0)
+      i18n
+    rubyzip (2.3.0)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    sawyer (0.8.2)
+      addressable (>= 2.3.5)
+      faraday (> 0.8, < 2.0)
+    simpleidn (0.1.1)
+      unf (~> 0.1.4)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    thread_safe (0.3.6)
+    typhoeus (1.4.0)
+      ethon (>= 0.9.0)
+    tzinfo (1.2.7)
+      thread_safe (~> 0.1)
+    unf (0.1.4)
+      unf_ext
+    unf_ext (0.0.7.7)
+    unicode-display_width (1.7.0)
+    zeitwerk (2.4.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  github-pages
+
+BUNDLED WITH
+   1.16.2
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 40080b5..0569452 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -17,7 +17,7 @@
 </head>
 
 <body>
-  <header>
+  <header class='header-wide'>
     <h1><a href='index.html'>Vim Vixen</a></h1>
     <ul>
       <li><a target="_blank" rel="noopener" href='https://github.com/ueokande/vim-vixen'>GitHub</a></li>
@@ -25,7 +25,11 @@
     </ul>
   </header>
 
-  <aside>
+  <header class='header-mobile'>
+    <h1><a href='index.html'>Vim Vixen</a></h1>
+  </header>
+
+  <aside class='aside-wide'>
     <h1>Guide</h1>
     <ul>
       <li><a href='./keymaps.html'>Keymaps</a></li>
@@ -36,6 +40,24 @@
     </ul>
   </aside>
 
+  <input class="open-menu-checkbox" type="checkbox" />
+  <span class="open-menu-bar-container">
+    <span class="open-menu-bar"></span><span class="open-menu-bar"></span><span class="open-menu-bar"></span>
+  </span>
+
+  <aside class='aside-mobile'>
+    <ul>
+      <li><a href='./keymaps.html'>Keymaps</a></li>
+      <li><a href='./console_commands.html'>Console commands</a></li>
+      <li><a href='./blacklist.html'>Blacklist</a></li>
+      <li><a href='./search_engines.html'>Search engines</a></li>
+      <li><a href='./properties.html'>Properties</a></li>
+      <li class='separator'></li>
+      <li><a target="_blank" rel="noopener" href='https://github.com/ueokande/vim-vixen'>GitHub</a></li>
+      <li><a target="_blank" rel="noopener" href='https://addons.mozilla.org/firefox/addon/vim-vixen/'>Firefox Add-ons</a></li>
+    </ul>
+  </aside>
+
   <main>
     <article>
       {{ content }}
diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
index 18380ed..762e494 100644
--- a/docs/assets/css/style.scss
+++ b/docs/assets/css/style.scss
@@ -37,7 +37,7 @@ h1, h2, h3, h4, h5 {
   }
 }
 
-header {
+.header-wide {
   border-bottom: 1px solid $border-color;
   position: fixed;
   width: 100%;
@@ -63,6 +63,19 @@ header {
   }
 }
 
+.header-mobile {
+  border-bottom: 1px solid $border-color;
+  position: fixed;
+  width: 100%;
+  background-color: white;
+
+  h1 {
+    padding: 0 1.5rem;
+    line-height: 4rem;
+    text-align: center;
+  }
+}
+
 aside {
   width: 15rem;
   position: fixed;
@@ -80,14 +93,44 @@ aside {
 
   ul {
     li {
+      display: block;
       a {
         padding: .35rem 1.5rem .35rem 1.5rem;
         line-height: 2.5;
+        display: block;
       }
     }
+
+    .separator {
+      height: 0;
+      border-bottom: 1px solid $border-color;
+    }
   }
 }
 
+.aside-wide {
+  width: 15rem;
+  position: fixed;
+  top: 4rem;
+  left: 0;
+  bottom: 0;
+}
+
+.aside-mobile {
+  width: 15rem;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: -16rem;
+  bottom: 0;
+  border-right: 1px solid $border-color;
+  padding: 4rem 0;
+  background-color: white;
+  box-shadow: 0 0 1rem #aaa;
+  transition-property: left;
+  transition-duration: 0.3s;
+}
+
 main {
   padding: 4rem 4rem 4rem 20rem;
   margin: 0 auto;
@@ -166,3 +209,92 @@ footer {
   right: 0;
   background-color: lightgreen;
 }
+
+.open-menu-checkbox {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  position: fixed;
+  left: 16px;
+  top: 16px;
+  opacity: 0;
+  z-index: 4;
+}
+
+
+.open-menu-bar-container {
+  position: fixed;
+  top: 16px;
+  left: 16px;
+  width: 32px;
+  height: 32px;
+  display: inline-block;
+  z-index: 2;
+}
+.open-menu-bar {
+  display: block;
+  width: 32px;
+  height: 4px;
+  margin: 5px 0;
+  background: #444;
+  border-radius: 2px;
+  transition-duration: 0.3s;
+
+  &:nth-of-type(1) {
+    transform-origin: 3px 50%;
+  }
+
+  &:nth-of-type(2) {
+    transform-origin: 0% 100%;
+  }
+
+  &:nth-of-type(3) {
+    transform-origin: 3px 50%;
+  }
+}
+
+.open-menu-checkbox:checked ~ .aside-mobile {
+  left: 0;
+}
+
+.open-menu-checkbox:checked ~ .open-menu-bar-container > .open-menu-bar {
+  &:nth-of-type(1) {
+    transform: rotate(45deg) translate(3px, -3px);
+  }
+
+  &:nth-of-type(2) {
+    opacity: 0;
+    transform: scale(0.2, 0.2);
+  }
+
+  &:nth-of-type(3) {
+    transform: rotate(-45deg) translate(3px, 3px);
+  }
+}
+
+// for PC
+@media (min-width: 769px) {
+  .header-mobile {
+    display: none;
+  }
+  .aside-mobile {
+    display: none;
+  }
+  .open-menu-checkbox, .open-menu-bar-container {
+    display: none;
+  }
+}
+
+// for mobile
+@media (max-width: 768px) {
+  .header-wide {
+    display: none;
+  }
+  .aside-wide {
+    display: none;
+  }
+
+  main {
+    padding: 4rem 2rem 2rem 2rem;
+  }
+}
diff --git a/docs/console_commands.md b/docs/console_commands.md
index 1cdcb6e..434f74a 100644
--- a/docs/console_commands.md
+++ b/docs/console_commands.md
@@ -35,7 +35,7 @@ To use a search engine other than the default, specify the search engine to use
 :open yahoo How to contribute to Vim-Vixen
 ```
 
-To adjust the default search-engine and add/remove search engines, see the [search engines](./search_engines.html) section.
+To adjust the default search-engine and add/remove search engines, see the [search engines](./search_engines.md) section.
 
 Use <kbd>Tab</kbd> to select from the autocomplete suggestions. To configure this, set the [`complete` property.](./properties.html#complete)
 
@@ -94,5 +94,5 @@ the current page.
 ## `:set`
 
 The `:set` command can be used to temporarily override properties in the
-console. See the [properties](./properties.html) section for more details on
+console. See the [properties](./properties.md) section for more details on
 the available properties.
diff --git a/docs/index.md b/docs/index.md
index 8e4f3a3..b06d45d 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -32,7 +32,7 @@ tabs, use <kbd>u</kbd>.
 To open a link, press <kbd>f</kbd> to enter the **follow mode** to select a
 link.  Then you can select links by alphabetic keys.
 
-See also [Keymaps](./keymaps.html) for more detailed of keymaps.
+See also [Keymaps](./keymaps.md) for more detailed of keymaps.
 
 ### Using commands
 
@@ -51,7 +51,7 @@ or search keywords with search engine (such as Google) like:
 :open How to use Vim
 ```
 
-You can see completed commands on [Console commands](./console_commands.html).
+You can see completed commands on [Console commands](./console_commands.md).
 
 ## Copyright