diff --git a/index.html b/index.html index 49090b6..2dd95dc 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@
+
HotKeys
English中文
diff --git a/src/style.css b/src/style.css index 4609e04..a56b6eb 100644 --- a/src/style.css +++ b/src/style.css @@ -1,2 +1,2 @@ @charset "utf-8"; -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 .lang{text-align:center;padding-top:20px;}.header .lang a{color:#fff;margin:0 5px}.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:60px 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;}@media screen and (max-width:479px){.warpper code{font-size:12px;line-height:14px;padding:0 5px}}.warpper pre{width:auto;}.warpper pre code{color:#000;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px;line-height:18px}.warpper p{padding:10px 0 8px 5px;font-size:14px;line-height:21px;}@media screen and (max-width:479px){.warpper p{padding:10px 0 5px 5px;line-height:18px}}.warpper h1{padding:15px 0 5px 5px;font-weight:bold;}@media screen and (max-width:479px){.warpper h1{font-weight:bold;padding-left:5px;font-size:18px}}.warpper h2{padding:15px 0 5px 15px;font-weight:bold;font-size:14px;}@media screen and (max-width:479px){.warpper h2{font-weight:bold;padding-left:5px;font-size:14px}}.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 +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}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;-webkit-animation:octocat-wave 560ms ease-in-out;-moz-animation:octocat-wave 560ms ease-in-out;-o-animation:octocat-wave 560ms ease-in-out;-ms-animation:octocat-wave 560ms ease-in-out;animation:octocat-wave 560ms ease-in-out}@-webkit-keyframes octocat-wave{0%,100%{-webkit-transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}20%,60%{-webkit-transform:rotate(-25deg);-webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);-ms-transform:rotate(-25deg);transform:rotate(-25deg)}40%,80%{-webkit-transform:rotate(10deg);-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg)}}.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 .lang{text-align:center;padding-top:20px;}.header .lang a{color:#fff;margin:0 5px}.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:60px 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;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{border-radius:4px;background-color:#ececec;padding:1px 5px;color:#9f0101;}@media screen and (max-width:479px){.warpper code{font-size:12px;line-height:14px;padding:0 5px}}.warpper pre{width:auto;}.warpper pre code{color:#000;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px;line-height:18px}.warpper p{padding:10px 0 8px 5px;font-size:14px;line-height:21px;}@media screen and (max-width:479px){.warpper p{padding:10px 0 5px 5px;line-height:18px}}.warpper h1{padding:15px 0 5px 5px;font-weight:bold;}@media screen and (max-width:479px){.warpper h1{font-weight:bold;padding-left:5px;font-size:18px}}.warpper h2{padding:15px 0 5px 15px;font-weight:bold;font-size:14px;}@media screen and (max-width:479px){.warpper h2{font-weight:bold;padding-left:5px;font-size:14px}}.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;-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;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;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}@-moz-keyframes octocat-wave{0%,100%{-webkit-transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}20%,60%{-webkit-transform:rotate(-25deg);-webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);-ms-transform:rotate(-25deg);transform:rotate(-25deg)}40%,80%{-webkit-transform:rotate(10deg);-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg)}}@-webkit-keyframes octocat-wave{0%,100%{-webkit-transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}20%,60%{-webkit-transform:rotate(-25deg);-webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);-ms-transform:rotate(-25deg);transform:rotate(-25deg)}40%,80%{-webkit-transform:rotate(10deg);-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg)}}@-o-keyframes octocat-wave{0%,100%{-webkit-transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}20%,60%{-webkit-transform:rotate(-25deg);-webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);-ms-transform:rotate(-25deg);transform:rotate(-25deg)}40%,80%{-webkit-transform:rotate(10deg);-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg)}}@keyframes octocat-wave{0%,100%{-webkit-transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}20%,60%{-webkit-transform:rotate(-25deg);-webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);-ms-transform:rotate(-25deg);transform:rotate(-25deg)}40%,80%{-webkit-transform:rotate(10deg);-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg)}} \ No newline at end of file diff --git a/src/style.styl b/src/style.styl index 366d7d7..897db5f 100644 --- a/src/style.styl +++ b/src/style.styl @@ -78,7 +78,47 @@ auto-width() @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