diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index 54fdf9d..0000000 --- a/Gruntfile.js +++ /dev/null @@ -1,52 +0,0 @@ -// 包装函数 -module.exports = function(grunt) { - // 任务配置,所有插件的配置信息 - grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), - //删除文件 - clean: { - dist:['src/style.css'] - }, - stylus:{ - build: { - options: { - }, - files: [{ - 'src/style.css': [ - 'src/style.styl' - ] - }] - } - }, - concat: { - options: { - banner: '/*!\n' + - '* home page (https://github.com/jaywcjlove/hotkeys)\n' + - '*/\n' - }, - dist:{ - src: [ - 'node_modules/jslite/build/JSLite.min.js', - 'node_modules/highlight.js/lib/highlight.js', - 'src/hotkeys_main.js' - ], - dest: 'src/main.js' - } - }, - // watch插件的配置信息 - watch: { - js: { - files: ['src/*.styl','src/hotkeys_main.js'], - tasks: ['default'] - } - } - }); - - // 任务加载 - require('load-grunt-tasks')(grunt); - - - // 告诉grunt当我们在终端中输入grunt时需要做些什么 - grunt.registerTask('default', ['clean','concat','stylus']); - -}; diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..1c24d41 --- /dev/null +++ b/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/')); +}); \ No newline at end of file diff --git a/index.html b/index.html index 5d6e664..b43ed07 100644 --- a/index.html +++ b/index.html @@ -3,115 +3,121 @@ hotkeys + -
HotKeys
+
+
HotKeys
+ +
+ + + + + + + + + + + + +
+
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.
-
+
-
- - - - - - - - - - - - + +
+
+
    +
  • esc
    • +
  • F1
    • +
  • F2
    • +
  • F3
    • +
  • F4
    • +
  • F5
    • +
  • F6
    • +
  • F7
    • +
  • F8
    • +
  • F9
    • +
  • F10
    • +
  • F11
    • +
  • F12
    • +
  • 〇
    • +
  • ~`
    • +
  • !1
    • +
  • @2
    • +
  • #3
    • +
  • $4
    • +
  • %5
    • +
  • ^6
    • +
  • &7
    • +
  • *8
    • +
  • (9
    • +
  • )0
    • +
  • ＿-
    • +
  • ＋=
    • +
  • delete
    • +
  • tab
    • +
  • Q
    • +
  • W
    • +
  • E
    • +
  • R
    • +
  • T
    • +
  • Y
    • +
  • U
    • +
  • I
    • +
  • O
    • +
  • P
    • +
  • {[
    • +
  • }]
    • +
  • |\
    • +
  • CapsLock
    • +
  • A
    • +
  • S
    • +
  • D
    • +
  • F
    • +
  • G
    • +
  • H
    • +
  • J
    • +
  • K
    • +
  • L
    • +
  • :;
    • +
  • "'
    • +
  • enterreturn
    • +
  • shift
    • +
  • Z
    • +
  • X
    • +
  • C
    • +
  • V
    • +
  • B
    • +
  • N
    • +
  • M
    • +
  • <,
    • +
  • >.
    • +
  • ?/
    • +
  • shift
    • +
  • fn
    • +
  • control
    • +
  • altoption
    • +
  • command
    • +
  • +
  • command
    • +
  • altoption
    • +
  • ◀
    • +
  • ▲
    • +
  • ▶
    • +
  • ▼
    • +
-
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.
+
+ +
+
-
-
-
    -
  • esc
    • -
  • F1
    • -
  • F2
    • -
  • F3
    • -
  • F4
    • -
  • F5
    • -
  • F6
    • -
  • F7
    • -
  • F8
    • -
  • F9
    • -
  • F10
    • -
  • F11
    • -
  • F12
    • -
  • 〇
    • -
  • ~`
    • -
  • !1
    • -
  • @2
    • -
  • #3
    • -
  • $4
    • -
  • %5
    • -
  • ^6
    • -
  • &7
    • -
  • *8
    • -
  • (9
    • -
  • )0
    • -
  • ＿-
    • -
  • ＋=
    • -
  • delete
    • -
  • tab
    • -
  • Q
    • -
  • W
    • -
  • E
    • -
  • R
    • -
  • T
    • -
  • Y
    • -
  • U
    • -
  • I
    • -
  • O
    • -
  • P
    • -
  • {[
    • -
  • }]
    • -
  • |\
    • -
  • CapsLock
    • -
  • A
    • -
  • S
    • -
  • D
    • -
  • F
    • -
  • G
    • -
  • H
    • -
  • J
    • -
  • K
    • -
  • L
    • -
  • :;
    • -
  • "'
    • -
  • enterreturn
    • -
  • shift
    • -
  • Z
    • -
  • X
    • -
  • C
    • -
  • V
    • -
  • B
    • -
  • N
    • -
  • M
    • -
  • <,
    • -
  • >.
    • -
  • ?/
    • -
  • shift
    • -
  • fn
    • -
  • control
    • -
  • altoption
    • -
  • command
    • -
  • -
  • command
    • -
  • altoption
    • -
  • ◀
    • -
  • ▲
    • -
  • ▶
    • -
  • ▼
    • -
-
-
-

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.

diff --git a/package.json b/package.json index a053095..9565641 100644 --- a/package.json +++ b/package.json @@ -17,13 +17,13 @@ }, "homepage": "https://github.com/jaywcjlove/hotkeys", "devDependencies": { - "grunt": "^0.4.5", - "grunt-contrib-clean": "^0.6.0", - "grunt-contrib-concat": "^0.5.1", - "grunt-contrib-stylus": "^0.22.0", - "grunt-contrib-watch": "^0.6.1", "highlight.js": "^8.8.0", - "jslite": "^1.1.6", - "load-grunt-tasks": "^3.2.0" + "jslite": "^1.1.6" + }, + "dependencies": { + "gulp": "^3.9.0", + "gulp-stylus": "^2.1.0", + "gulp-watch": "^4.3.5", + "nib": "^1.1.0" } } diff --git a/src/style.css b/src/style.css index 68ee3b8..5195f94 100644 --- a/src/style.css +++ b/src/style.css @@ -1,2 +1,2 @@ @charset "utf-8"; -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{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{padding:0;margin:0;vertical-align:top;border:none}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 .5s}a{text-decoration:none}a:hover,a:active,a:focus{text-decoration:none}i{font-style:normal}.title{text-align:center;font-size:53px;padding:74px 0 80px 0;font-weight:bold;background-color:#292929;height:300px;color:#fff}.warpper{width:995px;margin:-240px auto 0 auto;padding:0 0 100px 0;font-size:16px;}.warpper code{border-radius:4px;background-color:#ececec;padding:1px 5px;color:#9f0101}.warpper pre code{color:#000;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}.warpper p{padding:10px 0 8px 5px;font-size:14px;line-height:21px}.warpper h1{padding:15px 0 5px 15px}.warpper h2{padding:15px 0 5px 15px}.warpper .info{padding:0 35px 36px 45px;text-align:center;font-size:27px;line-height:34px;color:#878787}.warpper .github_wrapper{text-align:center;margin:0 0 22px 0;}.warpper .github_wrapper .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;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.1);box-shadow:0 1px 3px rgba(0,0,0,0.1);background:#f5f5f5;background-image:-moz-linear-gradient(-90deg,#f5f5f5 0%,#e5e5e5 100%);background-image:-webkit-linear-gradient(-90deg,#f5f5f5 0%,#e5e5e5 100%);background-image:-o-linear-gradient(-90deg,#f5f5f5 0%,#e5e5e5 100%);background-image:-ms-linear-gradient(-90deg,#f5f5f5 0%,#e5e5e5 100%);}.warpper .github_wrapper .github_style: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%)}.warpper .github_wrapper .github_style: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 .key_info{position:fixed;top:10px;left:10px}.warpper .kennywang{text-align:center;padding:15px 0 0 0;font-size:12px}.warpper .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 0 2px #e2e2e2 inset,-2px 2px 3px #e2e2e2 inset,1px 0 0 #c1c1c1 inset,0 -2px 3px #c1c1c1 inset;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.keyboard ul{width:992px;margin-top:9px;padding-left:11px;position:relative;float:left;}.keyboard ul li{width:62px;height:62px;float:left;margin-right:5px;margin-bottom:5px;background:#151515;color:#c8c8c8;text-align:center;line-height:62px;font-size:12px;border-radius:5px;border:1px solid #3a3a3a;box-shadow:1px 0 0 #000,0 1px 0 #000,-1px 0 0 #000,0 -1px 0 #000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative;}.keyboard ul li:active{color:#52f800;background-color:#100068;border:1px solid #332376}.keyboard ul .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}.keyboard li:nth-child(43):active i{background:#52f800}.keyboard li:nth-child(43) 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} \ No newline at end of file +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}body{line-height:1;color:#000;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0;vertical-align:middle}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}a img{border:none}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,main{margin:0;padding:0;border:0;outline:0;display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]),[hidden]{display:none}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{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{padding:0;margin:0;vertical-align:top;border:none}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;-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 .5s}a{text-decoration:none}a:hover,a:active,a:focus{text-decoration:none}i{font-style:normal}.header{background-color:#292929;padding:74px 0 80px 0;}@media screen and (min-width:480px) and (max-width:1004px){.header{padding:64px 0 25px 0}}@media screen and (max-width:479px){.header{padding:54px 0 15px 0}}.header .info{padding:25px 0 8px 0;text-align:center;font-size:27px;line-height:34px;color:#878787;width:995px;margin:0 auto 0 auto;}@media screen and (min-width:480px) and (max-width:1004px){.header .info{width:auto;padding:20px}}@media screen and (max-width:479px){.header .info{width:auto;padding:20px}}@media screen and (min-width:480px) and (max-width:1004px){.header .info{font-size:21px;line-height:24px}}@media screen and (max-width:479px){.header .info{font-size:14px;line-height:18px}}.header .title{text-align:center;font-size:53px;font-weight:bold;color:#fff}.header .github_wrapper{text-align:center;padding:80px 0 22px 0;}@media screen and (min-width:480px) and (max-width:1004px){.header .github_wrapper{padding:64px 0 15px 0}}@media screen and (max-width:479px){.header .github_wrapper{padding:29px 0 0 0;margin:10px 30px 0 30px}}.header .github_wrapper .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;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);box-shadow:0 1px 3px rgba(0,0,0,0.1);background:#f5f5f5;background-image:-webkit-linear-gradient(180deg, #f5f5f5 0%, #e5e5e5 100%);background-image:-moz-linear-gradient(180deg, #f5f5f5 0%, #e5e5e5 100%);background-image:-o-linear-gradient(180deg, #f5f5f5 0%, #e5e5e5 100%);background-image:-ms-linear-gradient(180deg, #f5f5f5 0%, #e5e5e5 100%);background-image:linear-gradient(-90deg, #f5f5f5 0%, #e5e5e5 100%);}@media screen and (max-width:479px){.header .github_wrapper .github_style{padding:3px 10px;margin-top:5px}}.header .github_wrapper .github_style:hover{color:#337797;border:1px solid #cbe3ee;border-bottom-color:#97c7dd;background:#f0f7fa;background-image:-moz--webkit-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-moz--moz-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-moz--o-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-moz--ms-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-moz-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-webkit--webkit-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-webkit--moz-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-webkit--o-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-webkit--ms-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-webkit-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-o--webkit-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-o--moz-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-o--o-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-o--ms-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-o-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-ms--webkit-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-ms--moz-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-ms--o-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-ms--ms-linear-gradient(180deg, #f0f7fa 0%, #d8eaf2 100%);background-image:-ms-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)}.header .github_wrapper .github_style: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--webkit-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-moz--moz-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-moz--o-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-moz--ms-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-moz-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%);background-image:-webkit--webkit-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-webkit--moz-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-webkit--o-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-webkit--ms-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-webkit-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%);background-image:-o--webkit-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-o--moz-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-o--o-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-o--ms-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-o-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%);background-image:-ms--webkit-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-ms--moz-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-ms--o-linear-gradient(180deg, #0770a0 0%, #0ca6dd 100%);background-image:-ms--ms-linear-gradient(180deg, #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);-webkit-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;width:995px;margin:0 auto 0 auto;}@media screen and (min-width:480px) and (max-width:1004px){.warpper{width:auto;padding:20px}}@media screen and (max-width:479px){.warpper{width:auto;padding:20px}}.warpper code{-webkit-border-radius:4px;border-radius:4px;background-color:#ececec;padding:1px 5px;color:#9f0101}.warpper pre{word-wrap:break-word;word-break:normal;}.warpper pre code{word-wrap:break-word;word-break:normal;color:#000;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}.warpper p{padding:10px 0 8px 5px;font-size:14px;line-height:21px}.warpper h1{padding:15px 0 5px 15px}.warpper h2{padding:15px 0 5px 15px}.warpper .key_info{position:fixed;top:10px;left:10px}.warpper .kennywang{text-align:center;padding:15px 0 0 0;font-size:12px}.warpper .github_shields{padding:60px 0 0 0;text-align:center}.keyboard{height:394px;-webkit-border-radius:10px;border-radius:10px;border:1px solid #c9c9c9;background:#f2f2f2;-webkit-box-shadow:2px 0 2px #e2e2e2 inset,-2px 2px 3px #e2e2e2 inset,1px 0 0 #c1c1c1 inset,0 -2px 3px #c1c1c1 inset;box-shadow:2px 0 2px #e2e2e2 inset,-2px 2px 3px #e2e2e2 inset,1px 0 0 #c1c1c1 inset,0 -2px 3px #c1c1c1 inset;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:995px;margin:0 auto 0 auto;margin-top:-66px;}@media screen and (min-width:480px) and (max-width:1004px){.keyboard{width:auto;padding:20px}}@media screen and (max-width:479px){.keyboard{width:auto;padding:20px}}@media screen and (max-width:479px){.keyboard{display:none;height:auto}}@media screen and (min-width:480px) and (max-width:1004px){.keyboard{display:none}}.keyboard ul{width:992px;margin-top:9px;padding-left:11px;position:relative;float:left;}.keyboard ul li{width:62px;height:62px;float:left;margin-right:5px;margin-bottom:5px;background:#151515;color:#c8c8c8;text-align:center;line-height:62px;font-size:12px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #3a3a3a;-webkit-box-shadow:1px 0 0 #000,0 1px 0 #000,-1px 0 0 #000,0 -1px 0 #000;box-shadow:1px 0 0 #000,0 1px 0 #000,-1px 0 0 #000,0 -1px 0 #000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative;}.keyboard ul li:active{color:#52f800;background-color:#100068;border:1px solid #332376}.keyboard ul .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}.keyboard li:nth-child(43):active i{background:#52f800}.keyboard li:nth-child(43) i{position:absolute;top:5px;left:5px;width:6px;height:6px;background:#fff;-webkit-border-radius:3px;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} \ No newline at end of file diff --git a/src/style.styl b/src/style.styl index ae1f49c..9b37036 100644 --- a/src/style.styl +++ b/src/style.styl @@ -1,5 +1,17 @@ @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 @@ -55,29 +67,110 @@ a:hover, a:active, a:focus 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 -.title - text-align: center - font-size: 53px - padding: 74px 0 80px 0 - font-weight: bold + +.header background-color: #292929 - height: 300px - color: #fff; - + padding: 74px 0 80px 0 + @media mq_tablet + padding: 64px 0 25px 0 + @media mq_mobile + padding: 54px 0 15px 0 + .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: 80px 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 - width: 995px - margin: -240px auto 0 auto padding: 0 0 100px 0 font-size: 16px + auto-width() code border-radius: 4px background-color:#ECECEC padding:1px 5px color:#9F0101 pre + word-wrap:break-word; + word-break:normal; code + word-wrap:break-word; + word-break:normal; color:#000 font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace font-size: 14px @@ -89,60 +182,7 @@ i padding:15px 0 5px 15px h2 padding: 15px 0 5px 15px - .info - padding: 0 35px 36px 45px - text-align: center - font-size: 27px - line-height: 34px - color:#878787 - .github_wrapper - text-align: center - margin: 0 0 22px 0 - .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 - -webkit-border-radius: 3px - -moz-border-radius: 3px - border-radius: 3px - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) - background: whitesmoke - background-image: -moz-linear-gradient(-90deg, whitesmoke 0%, #e5e5e5 100%) - background-image: -webkit-linear-gradient(-90deg, whitesmoke 0%, #e5e5e5 100%) - background-image: -o-linear-gradient(-90deg, whitesmoke 0%, #e5e5e5 100%) - background-image: -ms-linear-gradient(-90deg, whitesmoke 0%, #e5e5e5 100%) - &: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) + .key_info position:fixed top:10px @@ -161,10 +201,14 @@ i 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 - -webkit-user-select: none - -moz-user-select: none - -ms-user-select: none 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