Add doc website.

6 years ago · 04a237b019
parent 4d45d40207
commit 04a237b019
8 changed files with 1043 additions and 0 deletions
--- a/doc/.gitignore
+++ b/doc/.gitignore
@ -0,0 +1 @@
 node_modules/
--- a/doc/gulpfile.js
+++ b/doc/gulpfile.js
@ -0,0 +1,25 @@
 var gulp = require('gulp');
 var watch = require('gulp-watch');
 var stylus = require('gulp-stylus');
 // var rename = require("gulp-rename");
 var nib = require('nib');
 gulp.task('default', function() {
  // 将你的默认的任务代码放在这
 });
 // 侦听文件改变执行任务
 gulp.task('watch', function (cb) {
    gulp.watch('./src/style.styl', ['stylus']);
 });
 // RUI CSS 生成
 gulp.task('stylus', function () {
    gulp.src('./src/style.styl')
        .pipe(stylus({
            compress:true,
            use: nib()
        }))
        // .pipe(rename('RUI.min.css'))
        .pipe(gulp.dest('./src/'));
 });
--- a/doc/index.html
+++ b/doc/index.html
@ -0,0 +1,381 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>hotkeys.js - A robust Javascript library for capturing keyboard input.</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.">
  <link rel="stylesheet" type="text/css" href="src/style.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.8.0/styles/default.min.css">
 </head>
 <body>
 <div class="header">
 <a href="https://github.com/jaywcjlove/hotkeys" target="_blank" class="github-corner"> <svg viewBox="0 0 250 250"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg> </a>
  <div class="title">HotKeys</div>
  <div class="lang"><a href="javascript:tran.setLang('default');">English</a><a href="javascript:tran.setLang('cn');">中文</a></div>
  <div class="github_wrapper">
      <a href="https://github.com/jaywcjlove/hotkeys/zipball/master">
          <button class="github_style">Download as zip <!--{cn}zip 下载--></button>
      </a> 
      <a href="https://github.com/jaywcjlove/hotkeys/tarball/master">
          <button class="github_style">Download as tar.gz <!--{cn}tar.gz 下载--></button>
      </a> 
      <a href="https://github.com/jaywcjlove/hotkeys/">
          <button class="github_style">Fork on Github <!--{cn}复制代码到Github仓库--></button>
      </a> 
      <a href="https://github.com/jaywcjlove/hotkeys/">
          <button class="github_style">Doc on Github <!--{cn}文档在Github上--></button>
      </a> 
  </div>
  <div class="info">A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.
    <!--{cn}捕获键盘输入和输入组合键，是一个强大的JavaScript库。它没有依赖。尝试按下你的键盘，下面的按钮将高亮显示-->
    </div>
 </div>
 <div class="board">
    <div class="keyboard" id="keyboard">
        <ul>
            <li data-keycode="27">esc</li>
            <li data-keycode="112">F1</li>
            <li data-keycode="113">F2</li>
            <li data-keycode="114">F3</li>
            <li data-keycode="115">F4</li>
            <li data-keycode="116">F5</li>
            <li data-keycode="117">F6</li>
            <li data-keycode="118">F7</li>
            <li data-keycode="119">F8</li>
            <li data-keycode="120">F9</li>
            <li data-keycode="121">F10</li>
            <li data-keycode="122">F11</li>
            <li data-keycode="123">F12</li>
            <li data-keycode="-1">〇</li>
            <li data-keycode="192"><span>~</span><span>`</span></li>
            <li data-keycode="49"><span>!</span><span>1</span></li>
            <li data-keycode="50"><span>@</span><span>2</span></li>
            <li data-keycode="51"><span>#</span><span>3</span></li>
            <li data-keycode="52"><span>$</span><span>4</span></li>
            <li data-keycode="53"><span>%</span><span>5</span></li>
            <li data-keycode="54"><span>^</span><span>6</span></li>
            <li data-keycode="55"><span>&</span><span>7</span></li>
            <li data-keycode="56"><span>*</span><span>8</span></li>
            <li data-keycode="57"><span>(</span><span>9</span></li>
            <li data-keycode="48"><span>)</span><span>0</span></li>
            <li data-keycode="189"><span>＿</span><span>-</span></li>
            <li data-keycode="187"><span>＋</span><span>=</span></li>
            <li data-keycode="8"><span>delete</span></li>
            <li data-keycode="9"><span>tab</span></li>
            <li data-keycode="81">Q</li>
            <li data-keycode="87">W</li>
            <li data-keycode="69">E</li>
            <li data-keycode="82">R</li>
            <li data-keycode="84">T</li>
            <li data-keycode="89">Y</li>
            <li data-keycode="85">U</li>
            <li data-keycode="73">I</li>
            <li data-keycode="79">O</li>
            <li data-keycode="80">P</li>
            <li data-keycode="219"><span>{</span><span>[</span></li>
            <li data-keycode="221"><span>}</span><span>]</span></li>
            <li data-keycode="220"><span>|</span><span>\</span></li>
            <li data-keycode="20"><i></i><span>CapsLock</span></li>
            <li data-keycode="65">A</li>
            <li data-keycode="83">S</li>
            <li data-keycode="68">D</li>
            <li data-keycode="70">F</li>
            <li data-keycode="71">G</li>
            <li data-keycode="72">H</li>
            <li data-keycode="74">J</li>
            <li data-keycode="75">K</li>
            <li data-keycode="76">L</li>
            <li data-keycode="186"><span>:</span><span>;</span></li>
            <li data-keycode="222"><span>"</span><span>'</span></li>
            <li data-keycode="13"><i>enter</i><span>return</span></li>
            <li data-keycode="16"><span>shift</span></li>
            <li data-keycode="90">Z</li>
            <li data-keycode="88">X</li>
            <li data-keycode="67">C</li>
            <li data-keycode="86">V</li>
            <li data-keycode="66">B</li>
            <li data-keycode="78">N</li>
            <li data-keycode="77">M</li>
            <li data-keycode="188"><span>&lt;</span><span>,</span></li>
            <li data-keycode="190"><span>&gt;</span><span>.</span></li>
            <li data-keycode="191"><span>?</span><span>/</span></li>
            <li data-keycode="16"><span>shift</span></li>
            <li data-keycode="-1"><span>fn</span></li>
            <li data-keycode="17"><span>control</span></li>
            <li data-keycode="18"><i>alt</i><span>option</span></li>
            <li data-keycode="91"><span>command</span></li>
            <li data-keycode="32"></li>
            <li data-keycode="93"><span>command</span></li>
            <li data-keycode="18"><i>alt</i><span>option</span></li>
            <li data-keycode="37">◀</li>
            <li data-keycode="38">▲</li>
            <li data-keycode="39">▶</li>
            <li data-keycode="40">▼</li>
        </ul>
    </div>
 </div>
 <div class="warpper">
    <div class="key_info" id="key_info"></div>
    <br/>
    <p>HotKeys is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~3kb), and has no dependencies. It should not interfere with any JavaScript libraries or frameworks.<!--{cn}HotKeys有一些特别的功能，输入捕获键盘的库，很容易上手使用，你有理由使用它(~3kb)，并没有依赖。它不干涉任何其它的JavaScript框架或者库--></p>
    <h1>USAGE<!--{cn}用法--></h1>
    <p>Include hotkeys.js in your web app.<!--{cn}在您的web应用中引用hotkeys.js--></p>
 <pre><code class="html">
  &lt;script type=&quot;text/javascript&quot; src=&quot;hotkeys.js&quot;&gt;&lt;/script&gt;
 </code></pre>
    <h2>Browser Support<!--{cn}浏览器支持--></h2>
    <p>Mousetrap has been tested and should work in<!--{cn}捕获器进行了测试，应该在这些浏览器中工作--></p>
 <pre><code class="sh">
  Internet Explorer 6+
  Safari
  Firefox
  Chrome
 </code></pre>
    <h1>Building<!--{cn}构建--></h1>
    <p>You will need Node.js installed on your system. you can run gulp directly:
    <!--{cn}您需要在系统上安装Node.js的。您可以直接运行 Gulp ：--></p>
    <pre>
 <code class="sh">
  # bower install
  $ bower install hotkeysjs
  # npm install
  $ npm install hotkeys-js
  $ gulp build && gulp min && gulp map
  # The resulting files are:
  # dist/hotkeys.js
  # dist/hotkeys.min.js
  # dist/hotkeys.min.map
 </code></pre>
    <h1>DEFINING SHORTCUTS<!--{cn}定义快捷键--></h1>
    <p>One global method is exposed, key which defines shortcuts when called directly.<!--{cn}一个全局的方法暴露出来，关键的时候直接调用定义的快捷键。--></p>
    <pre>
 <code class="js">
  hotkeys('a', function(event,handler){
      //event.srcElement: input 
      //event.target: input
      if(event.target === "input"){
          alert('you pressed a!')
      }
      alert('you pressed a!') 
  });
  hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
      switch(handler.key){
          case "ctrl+a":alert('you pressed ctrl+a!');break;
          case "ctrl+b":alert('you pressed ctrl+b!');break;
          case "r":alert('you pressed r!');break;
          case "f":alert('you pressed f!');break;
      }
  });
  hotkeys('*','wcj', function(e){
      console.log('do something',e);
  });
 </code></pre>
    <h1>API REFERENCE<!--{cn}API参考--></h1>
    <h2>Asterisk "*"</h2>
    <p>Modifier key judgments<!--{cn}修改关键判断--></p>
    <pre>
 <code class="js">
  hotkeys('*','wcj', function(e){
      if(hotkeys.shift) console.log('shift is pressed！');
      if(hotkeys.ctrl) console.log('shift is pressed! ');
      if(hotkeys.alt) console.log('shift is pressed! ');
  });
 </code></pre>
    <h2>setScope</h2>
    <p>Use the <!--{cn}使用--><code>hotkeys.setScope</code> method to set scope.<!--{cn}设定范围。--></p>
    <pre>
 <code class="js">
  // define shortcuts with a scope
  hotkeys('ctrl+o, ctrl+alt+enter', 'issues', function(){
      console.log('do something');
  });
  hotkeys('o, enter', 'files', function(){ 
      console.log('do something else');
  });
  // set the scope (only 'all' and 'issues' shortcuts will be honored)
  hotkeys.setScope('issues'); // default scope is 'all'
 </code></pre>
    <h2>deleteScope</h2>
    <p>Use the <!--{cn}使用--><code>hotkeys.deleteScope</code> method to delete set scope.<!--{cn}删除设定范围。--></p>
    <pre>
 <code class="js">
  hotkeys.deleteScope('issues');
 </code></pre>
    <h2>unbind</h2>
    <p>Similar to defining shortcuts, they can be unbound using <!--{cn}定义的快捷键，解除绑定可以使用它--><code>hotkeys.unbind</code>.</p>
    <pre>
 <code class="js">
  // unbind 'a' handler
  hotkeys.unbind('a');
  // unbind a hotkeys only for a single scope
  // when no scope is specified it defaults to the current scope (hotkeys.getScope())
  hotkeys.unbind('o, enter', 'issues');
  hotkeys.unbind('o, enter', 'files');
 </code></pre>
    <h2>isPressed</h2>
    <p>Other key queries. For example, <!--{cn}查询其它键。例如，--><code>hotkeys.isPressed(77)</code> is true if the <!--{cn}如果是真--><code>M</code> key is currently pressed.<!--{cn}当前按下的键。--></p>
    <pre>
 <code class="js">
  hotkeys('a', function(){
      console.log(hotkeys.isPressed("A")); //=> true
      console.log(hotkeys.isPressed(65)); //=> true
  });
 </code></pre>
    <h2>getPressedKeyCodes</h2>
    <p>returns an array of key codes currently pressed.<!--{cn}返回当前按下的键盘码。--></p>
    <pre>
 <code class="js">
  hotkeys('command+ctrl+shift+a', function(){
      console.log(hotkeys.getPressedKeyCodes()); //=> [67, 16, 17, 91, 65] 
  })
 </code></pre>
    <h2>filter<!--{cn}filter过滤--></h2>
    <p>
 <code>INPUT</code> <code>SELECT</code> <code>TEXTAREA</code> default does not handle.<!--{cn}默认不处理他们。--><br/>
 <code>Hotkeys.filter</code> to return to the <!--{cn}它返回--><code>true</code> shortcut keys set to play a role<!--{cn}设置热键发挥起作用-->, <code>flase</code> shortcut keys set up failure.<!--{cn}设置热键不起作用。-->
    </p>
    <pre>
 <code class="js">
  hotkeys.filter = function(event){
    return true;
  }
  //How to add the filter to edit labels. &lt;div contentEditable=&quot;true&quot;&gt;&lt;/div&gt;
  //"contentEditable" Older browsers that do not support drops
  hotkeys.filter = function(event) {
      var tagName = (event.target || event.srcElement).tagName;
      return !(tagName.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
  }
  hotkeys.filter = function(event){
      var tagName = (event.target || event.srcElement).tagName;
      hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other');
      return true;
  }
 </code></pre>
    <h2>noConflict</h2>
    <p>Relinquish HotKeys’s control of the <!--{cn}放弃在--><code>hotkeys</code> variable.<!--{cn}的全局变量--></p>
    <pre>
 <code class="js">
  var k = hotkeys.noConflict();
  k('a', function() {
      console.log("do something")
  });
  hotkeys()
  // -->Uncaught TypeError: hotkeys is not a function(anonymous function) 
  // @ VM2170:2InjectedScript._evaluateOn 
  // @ VM2165:883InjectedScript._evaluateAndWrap 
  // @ VM2165:816InjectedScript.evaluate @ VM2165:682
 </code></pre>
    <h1>SUPPORTED KEYS<!--{cn}支持的热键--></h1>
    <p>HotKeys understands the following modifiers:<!--{cn}热键支持的修饰键：-->
    <code>⇧</code>, <code>shift</code>, <code>option</code>, <code>⌥</code>, <code>alt</code>, <code>ctrl</code>, <code>control</code>, <code>command</code>, and <code>⌘</code>.</p>
    <p>The following special keys can be used for shortcuts:<!--{cn}下面的特殊键，可用于快捷键：-->
    <code>backspace</code>, <code>tab</code>, <code>clear</code>, <code>enter</code>, <code>return</code>, <code>esc</code>, <code>escape</code>, <code>space</code>,
    <code>up</code>, <code>down</code>, <code>left</code>, <code>right</code>, <code>home</code>, <code>end</code>, <code>pageup</code>, <code>pagedown</code>, <code>del</code>, <code>delete</code>
    and <!--{cn}和--><code>f1</code> through <!--{cn}~--><code>f19</code>.<!--{cn}。--></p>
 <p>
 <code>⌘</code> Command()<br/>
 <code>⌃</code> Control<br/>
 <code>⌥</code> Option(alt)<br/>
 <code>⇧</code> Shift<br/>
 <code>⇪</code> Caps Lock(Capital)<br/>
 <code>fn</code> Does not support fn<br/>
 <code>↩︎</code> return/Enter space <br/>
 </p>
    <div class="github_shields">
        <a href="https://github.com/jaywcjlove/hotkeys/network" target="_blank" rel="external"><img src="https://img.shields.io/github/forks/jaywcjlove/hotkeys.svg?style=social" alt=""></a> <a href="https://github.com/jaywcjlove/hotkeys/stargazers" target="_blank" rel="external"><img src="https://img.shields.io/github/stars/jaywcjlove/hotkeys.svg?style=social" alt=""></a> <a href="https://github.com/jaywcjlove/hotkeys/watchers" target="_blank" rel="external"><img src="https://img.shields.io/github/watchers/jaywcjlove/hotkeys.svg?style=social&label=Watch" alt=""></a> <a href="https://github.com/jaywcjlove/followers" target="_blank" rel="external"><img src="https://img.shields.io/github/followers/jaywcjlove.svg?style=social" alt=""></a> 
    </div>
    <div class="kennywang">© <a target="_blank" href="http://jaywcjlove.github.io">kenny.wang</a> 2015</div>
 </div>
 <script type="text/javascript" src="//unpkg.com/translater.js@1.0.9/dist/translater.min.js?198711"></script>
 <script type="text/javascript" src="//unpkg.com/hotkeys-js@2.0.8/dist/hotkeys.min.js?198711"></script>
 <script type="text/javascript" src="src/main.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>
 </body>
 </html>
--- a/doc/package.json
+++ b/doc/package.json
@ -0,0 +1,29 @@
 {
  "name": "hotkeys",
  "version": "1.0.0",
  "description": "",
  "main": "src/hotkeys.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/jaywcjlove/hotkeys.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jaywcjlove/hotkeys/issues"
  },
  "homepage": "https://github.com/jaywcjlove/hotkeys",
  "devDependencies": {
    "highlight.js": "^8.8.0",
    "jslite": "^1.1.6"
  },
  "dependencies": {
    "gulp": "^3.9.0",
    "gulp-stylus": "^2.1.0",
    "gulp-watch": "^4.3.5",
    "nib": "^1.1.0"
  }
 }
--- a/doc/src/hotkeys_main.js
+++ b/doc/src/hotkeys_main.js
@ -0,0 +1,47 @@
 ;(function($){
    var $li_all = $('#keyboard li')
    hotkeys('*', function(evn){
        var key_num = evn.keyCode,str = '';
        str = 'keyCode:' + key_num; 
        if(hotkeys.shift)   str += ', shift';
        if(hotkeys.ctrl)    str += ', ctrl';
        if(hotkeys.alt)     str += ', alt';
        if(hotkeys.control) str += ', control';
        if(hotkeys.command) str += ', command';
        $('#key_info').html(str);
        console.log("evn1",evn,String.fromCharCode(evn.keyCode));
        $li_all.each(function(index, el) {
            var kc = $(el).data('keycode');
            if(kc === key_num) $(el).addClass('pressed');
        });
        return false
    });
    $li_all.on('click',function(){
        var key_num = $(this).data('keycode');
        $('#key_info').html(key_num > -1 ? 'keyCode:' + $(this).data('keycode') : '');
    })
    $(document).on('keyup',function(){
        $li_all.removeClass('pressed');
    })
 })(JSLite);
--- a/doc/src/main.js
+++ b/doc/src/main.js
@ -0,0 +1,53 @@
 /*!
 * home page (https://github.com/jaywcjlove/hotkeys)
 */
 var keyboards = document.getElementById('keyboard').getElementsByTagName('li');
 var keyinfo = document.getElementById('key_info')
 // var $li_all = $('#keyboard li')
 hotkeys('*', function (evn) {
  var key_num = evn.keyCode, str = '';
  str = 'keyCode:' + key_num;
  if (hotkeys.shift) str += ', shift';
  if (hotkeys.ctrl) str += ', ctrl';
  if (hotkeys.alt) str += ', alt';
  if (hotkeys.control) str += ', control';
  if (hotkeys.command) str += ', command';
  keyinfo.innerHTML = str;
  console.log("evn1", evn, String.fromCharCode(evn.keyCode));
  for(var i =0;i < keyboards.length; i++){
    var kc = parseInt(keyboards[i].dataset.keycode,10);
    if (kc === key_num) keyboards[i].className = 'pressed';
  }
  return false
 });
 function addEvent(elem, event, fn) {
  if (elem.addEventListener) {
    elem.addEventListener(event, fn, false);
  } else if (elem.attachEvent) {
    elem.attachEvent('on' + event, fn);
  } else {
    elem['on' + event] = fn;
  }
 }
 for(var i =0;i < keyboards.length; i++){
  keyboards[i].onclick = function (params) {
    var kc = parseInt(this.dataset.keycode, 10);
    keyinfo.innerHTML = 'keyCode:' + kc;
  }
 }
 addEvent(document,'keyup',function(){
  for (var i = 0; i < keyboards.length; i++) {
    var kc = parseInt(keyboards[i].dataset.keycode, 10);
    keyboards[i].className = '';
  }
 })
 var tran = new Translater();
--- a/doc/src/style.css
+++ b/doc/src/style.css
--- a/doc/src/style.styl
+++ b/doc/src/style.styl
@ -0,0 +1,505 @@
@charset "utf-8"
 /* http://images.apple.com/v/macbook/c/design/images/keyboard_backlight_off_large_2x.jpg */
 // 使用nib模块 和 CSS reset
 // ==================================
@import 'nib'
 // CSS reset
 global-reset()
 reset-html5()
 mq_tablet = "screen and (min-width: 480px) and (max-width: 1004px)"
 mq_mobile = "screen and (max-width: 479px)"
 /* margin */
 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, img, form, applet, fieldset, legend, button, input, textarea, th, table, tr, td
  margin: 0
  padding: 0
  border: none
 /* body */
 body
  font-family: "微软雅黑"
  font-size: 12px
  color:#535353
  position: relative
  background: #fff
  font-family: "PingHei","Lucida Grande", "Lucida Sans Unicode", "STHeitiSC-Light", "Helvetica","Arial","Verdana","sans-serif"
 body, div, fieldset, form, h1, h2, h3, h4, h5, h6, html, p 
  -webkit-text-size-adjust: none
 /* img */
 img
  padding: 0
  margin: 0
  vertical-align: top
  border: none
 /* div */
 li,ul
  outside: none
  list-style: none
  margin: 0 auto
  padding: 0 auto
  display: block
  font-family: "Vrinda"
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
 .clear
  clear: both
  height: 0
  width: 100%
 span, b, i, a, :after, :before
  -webkit-transition: all 0.5s
 /* font */
 a
  text-decoration: none
 a:hover, a:active, a:focus
  text-decoration: none
 i
  font-style: normal
 auto-width()
  width: 995px
  margin: 0 auto 0 auto
  @media mq_tablet
    width: auto
    padding 20px
  @media mq_mobile
    width auto
    padding 20px
 a.github-corner
  position: fixed; 
  top: 0; 
  right: 0; 
 .github-corner 
  svg
    fill:#e1e1e1
    color:#000
    position:absolute
    top:0
    border:0
    right:0
    z-index:99
    width:4.375rem
    height:4.375rem
 .github-corner:hover 
  .octo-arm
    -webkit-animation:octocat-wave 560ms ease-in-out
    animation:octocat-wave 560ms ease-in-out
@-webkit-keyframes octocat-wave
  0%,100%
    -webkit-transform:rotate(0);
    transform:rotate(0)
  20%,60%
    -webkit-transform:rotate(-25deg)
    transform:rotate(-25deg)
  40%,80%
    -webkit-transform:rotate(10deg)
    transform:rotate(10deg)
@keyframes octocat-wave
  0%,100%
    -webkit-transform:rotate(0)
    transform:rotate(0)
  20%,60%
    -webkit-transform:rotate(-25deg)
    transform:rotate(-25deg)
  40%,80%
    -webkit-transform:rotate(10deg)
    transform:rotate(10deg)
 .header
  background-color: #292929
  padding: 74px 0 80px 0
  @media mq_tablet
    padding: 64px 0 25px 0
  @media mq_mobile
    padding: 54px 0 15px 0
  .lang
    text-align center
    padding-top 20px
    a 
      color #fff
      margin 0 5px
  .info
    padding: 25px 0 8px 0
    text-align: center
    font-size: 27px
    line-height: 34px
    color:#878787
    auto-width()
    @media mq_tablet
      font-size 21px
      line-height 24px
    @media mq_mobile
      font-size 14px
      line-height 18px
  .title    
    text-align: center
    font-size: 53px
    font-weight: bold
    color: #fff;
  .github_wrapper 
      text-align: center
      padding: 60px 0 22px 0
      @media mq_tablet
        padding: 64px 0 15px 0
      @media mq_mobile
        padding: 29px 0 0 0
        margin 10px 30px 0 30px
      .github_style
        position: relative
        display: inline-block
        border: 1px solid #ddd
        border-bottom-color: #bbb
        padding: 9px 15px
        font-family: Helvetica, arial, freesans, clean, sans-serif
        font-size: 12px
        font-weight: bold
        color: #666
        text-shadow: 0 1px rgba(255, 255, 255, 0.9)
        cursor: pointer
        border-radius: 3px
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
        background: whitesmoke
        background-image: linear-gradient(-90deg, whitesmoke 0%, #e5e5e5 100%)
        @media mq_mobile
          padding: 3px 10px
          margin-top 5px
        &:hover
          color: #337797;
          border: 1px solid #CBE3EE
          border-bottom-color: #97C7DD
          background: #f0f7fa
          background-image: -moz-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
          background-image: -webkit-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
          background-image: -o-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
          background-image: -ms-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
        &:active
          border: 1px solid #2A65A0
          border-bottom-color: #0770A0
          color: #fff
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3)
          background: #0770a0
          background-image: -moz-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
          background-image: -webkit-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
          background-image: -o-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
          background-image: -ms-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
          -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
          -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
 .warpper
  padding: 0 0 100px 0
  font-size: 16px
  auto-width()
  code
    border-radius: 4px
    background-color:#ECECEC
    padding:1px 5px
    color:#9F0101
    @media mq_mobile
      font-size: 12px;
      line-height 14px
      padding:0 5px
  pre 
    width auto
    code
      color:#000
      font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace
      font-size: 14px
      line-height 18px
  p 
    padding: 10px 0 8px 5px
    font-size: 14px
    line-height: 21px
    @media mq_mobile
      padding: 10px 0 5px 5px
      line-height 18px
  h1 
    padding:15px 0 5px 5px
    font-weight bold
    @media mq_mobile
      font-weight bold
      padding-left 5px
      font-size 18px
  h2
    padding: 15px 0 5px 15px 
    font-weight: bold
    font-size: 14px
    @media mq_mobile
      font-weight bold
      padding-left 5px
      font-size 14px
  .key_info
    position:fixed
    top:10px
    left:10px
  .kennywang
    text-align:center
    padding: 15px 0 0 0
    font-size: 12px
  .github_shields
    padding: 60px 0 0 0
    text-align:center
 .keyboard
  height: 394px
  border-radius: 10px
  border: 1px solid #C9C9C9
  background: #F2F2F2
  box-shadow: 2px 0px 2px #E2E2E2 inset,-2px 2px 3px #E2E2E2 inset,1px -0px 0px #C1C1C1 inset,0px -2px 3px #C1C1C1 inset
  user-select: none
  auto-width()
  margin-top -66px
  @media mq_mobile
    display none
    height: auto
  @media mq_tablet
    display none
  ul
    width: 992px
    margin-top: 9px
    padding-left: 11px
    position: relative
    float: left
    /* border:2px solid black;*/
    li
      width: 62px
      height: 62px
      float: left
      margin-right: 5px
      margin-bottom: 5px
      background: #151515
      color: rgb(200,200,200)
      text-align: center
      line-height: 62px
      font-size: 12px
      border-radius: 5px
      border: 1px solid #3A3A3A
      box-shadow: 1px 0px 0px rgb(0,0,0),0px 1px 0px rgb(0,0,0),-1px 0px 0px rgb(0,0,0),0px -1px 0px rgb(0,0,0)
      -webkit-user-select: none
      -moz-user-select: none
      -ms-user-select: none
      user-select: none
      cursor: pointer
      position: relative
      &:active
        color:#52F800
        background-color: #100068
        border:1px solid #332376
    .pressed
      color:#52F800
      background-color: #100068
      border:1px solid #332376
 .keyboard li:nth-child(1)
  width: 99px
  height: 28px
  line-height: 28px
  text-indent: 1em
  text-align: left
 .keyboard li:nth-child(2),
 .keyboard li:nth-child(3),
 .keyboard li:nth-child(4),
 .keyboard li:nth-child(5),
 .keyboard li:nth-child(6),
 .keyboard li:nth-child(7),
 .keyboard li:nth-child(8),
 .keyboard li:nth-child(9),
 .keyboard li:nth-child(10),
 .keyboard li:nth-child(11),
 .keyboard li:nth-child(12),
 .keyboard li:nth-child(13),
 .keyboard li:nth-child(14)
  width: 60px
  height: 28px
  line-height: 28px
 .keyboard li:nth-child(15),
 .keyboard li:nth-child(16),
 .keyboard li:nth-child(17),
 .keyboard li:nth-child(18),
 .keyboard li:nth-child(19),
 .keyboard li:nth-child(20),
 .keyboard li:nth-child(21),
 .keyboard li:nth-child(22),
 .keyboard li:nth-child(23),
 .keyboard li:nth-child(24),
 .keyboard li:nth-child(25),
 .keyboard li:nth-child(26),
 .keyboard li:nth-child(27),
 .keyboard li:nth-child(40),
 .keyboard li:nth-child(41),
 .keyboard li:nth-child(42),
 .keyboard li:nth-child(53),
 .keyboard li:nth-child(54),
 .keyboard li:nth-child(64),
 .keyboard li:nth-child(65),
 .keyboard li:nth-child(66)
  padding: 7px 0
  height: 48px
 .keyboard li:nth-child(15) span,
 .keyboard li:nth-child(16) span,
 .keyboard li:nth-child(17) span,
 .keyboard li:nth-child(18) span,
 .keyboard li:nth-child(19) span,
 .keyboard li:nth-child(20) span,
 .keyboard li:nth-child(21) span,
 .keyboard li:nth-child(22) span,
 .keyboard li:nth-child(23) span,
 .keyboard li:nth-child(24) span,
 .keyboard li:nth-child(25) span,
 .keyboard li:nth-child(26) span,
 .keyboard li:nth-child(27) span,
 .keyboard li:nth-child(40) span,
 .keyboard li:nth-child(41) span,
 .keyboard li:nth-child(42) span,
 .keyboard li:nth-child(53) span,
 .keyboard li:nth-child(54) span,
 .keyboard li:nth-child(64) span,
 .keyboard li:nth-child(65) span,
 .keyboard li:nth-child(66) span
  line-height: 23px
  height: 23px
  width: 100%
  float: left
  font-size:14px
 .keyboard li:nth-child(28) span,
 .keyboard li:nth-child(55) span,
 .keyboard li:nth-child(67) span
  line-height: 14px
  margin-top: 43px
  float: right
  margin-right: 8px
 //字母键
 .keyboard li:nth-child(30),
 .keyboard li:nth-child(31),
 .keyboard li:nth-child(32),
 .keyboard li:nth-child(33),
 .keyboard li:nth-child(34),
 .keyboard li:nth-child(35),
 .keyboard li:nth-child(36),
 .keyboard li:nth-child(37),
 .keyboard li:nth-child(38),
 .keyboard li:nth-child(39),
 .keyboard li:nth-child(44),
 .keyboard li:nth-child(45),
 .keyboard li:nth-child(46),
 .keyboard li:nth-child(47),
 .keyboard li:nth-child(48),
 .keyboard li:nth-child(49),
 .keyboard li:nth-child(50),
 .keyboard li:nth-child(51),
 .keyboard li:nth-child(52),
 .keyboard li:nth-child(57),
 .keyboard li:nth-child(58),
 .keyboard li:nth-child(59),
 .keyboard li:nth-child(60),
 .keyboard li:nth-child(61),
 .keyboard li:nth-child(62),
 .keyboard li:nth-child(63)
  font-size:18px
  line-height: 64px
 .keyboard li:nth-child(29) span,
 .keyboard li:nth-child(43) span,
 .keyboard li:nth-child(56) span,
 .keyboard li:nth-child(68) span,
 .keyboard li:nth-child(69) span,
 .keyboard li:nth-child(70) span,
 .keyboard li:nth-child(71) span,
 .keyboard li:nth-child(73) span,
 .keyboard li:nth-child(74) span
  line-height: 14px
  margin-top: 43px
  text-indent: 5px
  float: left
 .keyboard li:nth-child(28),
 .keyboard li:nth-child(29)
  width: 73px
 .keyboard li:nth-child(43),
 .keyboard li:nth-child(55)
  width: 102px
 .keyboard 
  li:nth-child(43).pressed
    i
      background:#52f800
  li:nth-child(43)
    &:active
      i
        background:#52f800
    i
      position: absolute
      top: 5px
      left: 5px
      width: 6px
      height: 6px
      background: #fff
      border-radius: 3px
 .keyboard li:nth-child(55) i,
 .keyboard li:nth-child(70) i
  position: absolute
  right: 8px
  top: 5px
  font-size: 12px
  line-height: 12px
 .keyboard li:nth-child(70) i
  left: -26px
 .keyboard li:nth-child(74) i
  position: absolute
  left: 8px
  top: 5px
  font-size: 12px
  line-height: 12px
 .keyboard li:nth-child(56)
  width: 136px
 .keyboard li:nth-child(67)
  width: 137px
 .keyboard li:nth-child(71),
 .keyboard li:nth-child(73)
  width: 70px
 .keyboard li:nth-child(72)
  width: 333px
 .keyboard li:nth-child(76),
 .keyboard li:nth-child(78)
  height: 29px
  line-height: 29px
 .keyboard li:nth-child(76)
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
 .keyboard li:nth-child(78)
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  position: absolute
  bottom: 0
  right: 84px