m
/
kbdfun
mirror of https://github.com/kremalicious/kbdfun.git
1
0
Fork 0
Code Releases Activity

first mockup

This commit is contained in:
Matthias Kretschmann 2012-07-15 05:27:36 +02:00
commit ebc7cda13f
4 changed files with 105 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
assets/less/kbdftw.less Normal file
View File

@ -0,0 +1,60 @@
/*
WebKit Defaults:
----------------------
display: inline;
font-family: monospace;
height: auto;
width: auto;
Apple Keyboard font: VAG Rounded
*/
/* Le variables
---------------------- */
@textColor: #444;
@textColorDark: #eee;
@fontFamily: "Lucida Grande", Lucida, Verdana, sans-serif;
kbd {
color: @textColor;
font-family: @fontFamily;
font-weight: normal;
font-style: normal;
text-align: center;
text-shadow: 0 1px 0 #fff;
display: inline;
padding: .3em .55em;
border-radius: 6px;
border: 1px solid #bbb;
background-color: #f7f7f7;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%);
box-shadow: 0px 2px 0 #ccc,
0 3px 1px #999,
0 4px 0 #fff,
inset 0 1px 0 #fff;
&.dark {
color: @textColorDark;
text-shadow: 0 -1px 0 #000;
border-color: #444;
border-bottom-color: #000;
background-color: #4d4c4c;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
box-shadow: 0px 2px 0 #222,
0 3px 1px #999,
0 4px 0 #ccc,
inset 0 1px 0 #aaa;
}
}

9
assets/less/less.js Normal file
View File

File diff suppressed because one or more lines are too long

4
assets/less/site.less Normal file
View File

@ -0,0 +1,4 @@
body {
background: #eee;
font: 24px/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

32
index.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--<link rel="stylesheet" href="assets/css/site.css" />
<link rel="stylesheet" href="assets/css/kbdftw.css" />-->
<link rel="stylesheet/less" href="assets/less/site.less" />
<link rel="stylesheet/less" href="assets/less/kbdftw.less" />
<script src="assets/less/less.js"></script>
</head>
<body>
<p>Please press the <kbd>Q</kbd> key</p>
<p><kbd>⌘</kbd></p>
<hr />
<p>Please press the <kbd class="dark">Q</kbd> key</p>
<p><kbd class="dark">⌘</kbd></p>
</body>
</html>