le site

assets/css/kbdftw.css

@@ -8,8 +8,6 @@ width: auto;
 
 Apple Keyboard font: VAG Rounded
 */
-/*  Le variables
----------------------- */
 /*  Le kbd
 ---------------------- */
 kbd {
@@ -56,8 +54,8 @@ kbd.dark {
 kbd.ios {
   font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
   color: #000;
-  border-color: rgba(0, 0, 0, 0.4);
+  border-color: rgba(0, 0, 0, 0.6);
-  border-top-color: #7c7b84;
+  border-top-color: rgba(0, 0, 0, 0.4);
   background-color: ##b7b7bc;
   background-image: -moz-linear-gradient(top, #efeff0, #b7b7bc);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#efeff0), to(#b7b7bc));
@@ -69,19 +67,14 @@ kbd.ios {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff;
 }
 kbd.android {
-  /* 
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-			  Uncomment this to load Roboto.
-			  Make sure to include the font files
-			  somewhere in your project structure.
-			*/
-
   color: #ffffff;
   text-shadow: none;
   padding: .3em;
   border: 1px solid rgba(0, 0, 0, 0.05);
-  -webkit-border-radius: 4px;
+  -webkit-border-radius: 3px;
-  -moz-border-radius: 4px;
+  -moz-border-radius: 3px;
-  border-radius: 4px;
+  border-radius: 3px;
   -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -96,14 +89,6 @@ kbd.android.color {
   background: #083c5b;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #36647b;
 }
-/*  Mixins
----------------------- */
-.font-roboto {
-  font-family: RobotoRegular, "Helvetica Neue", Arial, sans-serif;
-  font-weight: normal;
-  font-style: normal;
-  padding: .3em .3em .2em .3em;
-}
 @font-face {
   font-family: 'RobotoRegular';
   src: url('../fonts/Roboto-Regular-webfont.eot');

assets/css/roboto.css

@@ -1,9 +1,3 @@
-.font-roboto {
-  font-family: RobotoRegular, "Helvetica Neue", Arial, sans-serif;
-  font-weight: normal;
-  font-style: normal;
-  padding: .3em .3em .2em .3em;
-}
 @font-face {
   font-family: 'RobotoRegular';
   src: url('../fonts/Roboto-Regular-webfont.eot');

assets/css/site.css

@@ -1,6 +1,59 @@
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+  display: block;
+}
+audio,
+canvas,
+video {
+  display: inline-block;
+}
+audio:not([controls]) {
+  display: none;
+}
+[hidden] {
+  display: none;
+}
+/* Basics 
+   -------------------------------------------------- */
 body {
   background: #eee;
   font: 24px/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
+  text-align: center;
+  margin: 0;
+  padding-top: 1em;
+}
+a,
+a:visited {
+  text-decoration: none;
+  color: #6ec7e5;
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+a:hover {
+  color: #72d2f1;
+}
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+  max-width: 55.6em;
 }
 /*
 WebKit Defaults:
@@ -12,8 +65,6 @@ width: auto;
 
 Apple Keyboard font: VAG Rounded
 */
-/*  Le variables
----------------------- */
 /*  Le kbd
 ---------------------- */
 kbd {
@@ -60,8 +111,8 @@ kbd.dark {
 kbd.ios {
   font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
   color: #000;
-  border-color: rgba(0, 0, 0, 0.4);
+  border-color: rgba(0, 0, 0, 0.6);
-  border-top-color: #7c7b84;
+  border-top-color: rgba(0, 0, 0, 0.4);
   background-color: ##b7b7bc;
   background-image: -moz-linear-gradient(top, #efeff0, #b7b7bc);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#efeff0), to(#b7b7bc));
@@ -73,19 +124,14 @@ kbd.ios {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff;
 }
 kbd.android {
-  /* 
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-			  Uncomment this to load Roboto.
-			  Make sure to include the font files
-			  somewhere in your project structure.
-			*/
-
   color: #ffffff;
   text-shadow: none;
   padding: .3em;
   border: 1px solid rgba(0, 0, 0, 0.05);
-  -webkit-border-radius: 4px;
+  -webkit-border-radius: 3px;
-  -moz-border-radius: 4px;
+  -moz-border-radius: 3px;
-  border-radius: 4px;
+  border-radius: 3px;
   -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -100,14 +146,6 @@ kbd.android.color {
   background: #083c5b;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #36647b;
 }
-/*  Mixins
----------------------- */
-.font-roboto {
-  font-family: RobotoRegular, "Helvetica Neue", Arial, sans-serif;
-  font-weight: normal;
-  font-style: normal;
-  padding: .3em .3em .2em .3em;
-}
 @font-face {
   font-family: 'RobotoRegular';
   src: url('../fonts/Roboto-Regular-webfont.eot');
@@ -115,9 +153,91 @@ kbd.android.color {
   font-weight: normal;
   font-style: normal;
 }
+/* Content 
+   -------------------------------------------------- */
+code {
+  display: block;
+  color: #666;
+  font-size: .8em;
+}
+article > section {
+  padding: 2em 0 3.5em 0;
+}
+article > section p {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+  max-width: 55.6em;
+  margin-bottom: 1.5em;
+}
+article > section p:last-child {
+  margin-bottom: 0;
+}
+article > section h2 {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+  max-width: 55.6em;
+  color: #ccc;
+}
+article > section#keysdark {
+  border-top: 1px solid #fff;
+  box-shadow: 0 -1px 0 #cccccc;
+}
+article > section#keysios {
+  background-image: -moz-linear-gradient(top, #9c9ba6, #43444b);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9c9ba6), to(#43444b));
+  background-image: -webkit-linear-gradient(top, #9c9ba6, #43444b);
+  background-image: -o-linear-gradient(top, #9c9ba6, #43444b);
+  background-image: linear-gradient(top, #9c9ba6, #43444b);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9c9ba6', endColorstr='#ff43444b', GradientType=0);
+  border-top: 1px solid #c0becf;
+  box-shadow: 0 -1px 0 #9b9aa5;
+}
+article > section#keysios h2 {
+  color: #696972;
+}
+article > section#keysandroid {
+  background: #181818;
+  border-top: 1px solid #505050;
+  box-shadow: 0 -1px 0 #000000;
+}
+article > section#keysandroid h2 {
+  color: #2e2d2e;
+}
+.navbar {
+  background: #eee;
+  background: rgba(238, 238, 238, 0.9);
+  -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);
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  padding: 0 1em;
+}
+.navbar p {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+  max-width: 55.6em;
+  text-align: left;
+  margin: 0;
+  font-size: 16px;
+}
 kbd.android {
-  font-family: RobotoRegular, "Helvetica Neue", Arial, sans-serif;
+  font-family: RobotoRegular, sans-serif;
   font-weight: normal;
   font-style: normal;
+  /*
+	  The font files are a bit weirdly aligned,
+	  this centers the glyphs on the buttons again
+	*/
+
   padding: .3em .3em .2em .3em;
 }

assets/less/kbdftw.less

@@ -9,8 +9,8 @@ width: auto;
 Apple Keyboard font: VAG Rounded
 */
 
-/*  Le variables
+// Le variables
----------------------- */
+// ----------------------
 
 @textColor: 		#444;
 @textColorDark: 	#eee;
@@ -59,12 +59,11 @@ kbd {
 					inset 0 -1px 3px #272727;
 	}
 
-	
 	&.ios {
 		font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
 		color: #000;
-			border-color: rgba(0,0,0,.4);
+		border-color: rgba(0,0,0,.6);
-			border-top-color: #7c7b84;			
+		border-top-color: rgba(0,0,0,.4);			
 		
 		background-color: ##b7b7bc;
 		#gradient > .vertical(#efeff0, #b7b7bc);
@@ -75,17 +74,16 @@ kbd {
 	}
 
 	&.android {
-			/* 
+		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-			  Uncomment this to load Roboto.
+	// Uncomment the following line to load Roboto.
-			  Make sure to include the font files
+	// Make sure to include the font files
-			  somewhere in your project structure.
+	// somewhere in your project structure.
-			*/
 		//.font-roboto;
 		color: #ffffff;
 		text-shadow: none;
 		padding: .3em;
 		border: 1px solid rgba(0,0,0,.05);
-			.border-radius(4px);
+		.border-radius(3px);
 		background: #5e5e5e;
 		box-shadow: 0 2px 2px rgba(0,0,0,.3),
 					0 1px 0 #444,
@@ -106,8 +104,8 @@ kbd {
 }
 
 
-/*  Mixins
+//  Mixins
----------------------- */
+// ----------------------
 
 // Border Radius
 .border-radius(@radius) {
@@ -147,5 +145,5 @@ kbd {
 		filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor)));
 	}
 }
-
+// import roboto styles
 @import 'roboto.less';

assets/less/roboto.less

@@ -1,8 +1,12 @@
-// Roboto for Android keys
+// Roboto mixin for Android keys
-.font-roboto {
+.font-roboto() {
-	font-family: RobotoRegular, "Helvetica Neue", Arial, sans-serif;
+	font-family: RobotoRegular, sans-serif;
 	font-weight: normal;
 	font-style: normal;
+	/*
+	  The font files are a bit weirdly aligned,
+	  this centers the glyphs on the buttons again
+	*/
 	padding: .3em .3em .2em .3em;
 }
 @font-face {

assets/less/site.less

@@ -1,11 +1,126 @@
+// HTML5 display definitions
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+/* Basics 
+   -------------------------------------------------- */
+   
 body {
 	background: #eee;
 	font: 24px/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
+	text-align: center;
+	margin: 0;
+	padding-top: 1em;
 }
 
+h1, h2 {
 	
+}
+
+a,
+a:visited {
+	text-decoration: none;
+	color: #6ec7e5;
+	-webkit-transition: all .3s ease-in-out;
+	-moz-transition: all .3s ease-in-out;
+	-o-transition: all .3s ease-in-out;
+	-ms-transition: all .3s ease-in-out;
+	transition: all .3s ease-in-out;
+}
+
+a:hover {
+	color: #72d2f1;
+}
+
+// Box sizing
+* {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+// Grid container
+.container { 
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: 1.5em;
+	padding-right: 1.5em;
+	max-width: 55.6em;
+}
+
+// import kbd styles
 @import 'kbdftw.less';
 
+
+/* Content 
+   -------------------------------------------------- */
+
+code {
+	display: block;
+	color: #666;
+	font-size: .8em;
+}
+
+article > section {
+	padding: 2em 0 3.5em 0;
+	
+	p {
+		.container;
+		margin-bottom: 1.5em;
+		&:last-child { margin-bottom: 0 }
+	}
+	h2 {
+		.container;
+		color: #ccc;
+	}
+	
+	&#keysdefault {
+		
+	}
+	
+	&#keysdark {
+		border-top: 1px solid #fff;
+		box-shadow: 0 -1px 0 #ccc;
+	}
+	
+	&#keysios {
+		#gradient > .vertical(#9c9ba6, #43444b);
+		border-top: 1px solid #c0becf;
+		box-shadow: 0 -1px 0 #9b9aa5;
+		
+		h2 { color: #696972; }
+	}
+	
+	&#keysandroid {
+		background: #181818;
+		border-top: 1px solid #505050;
+		box-shadow: 0 -1px 0 #000;
+		
+		h2 { color: #2e2d2e; }
+	}
+}
+
+.navbar {
+	background: #eee;
+	background: rgba(238, 238, 238, .9);
+	.box-shadow(0 1px 3px rgba(0,0,0,.1));
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	padding: 0 1em;
+}
+
+.navbar p {
+	.container;
+	text-align: left;
+	margin: 0;
+	font-size: 16px;
+}
+
+// load Roboto
 kbd.android {
 	.font-roboto;
 }

index.html

@@ -13,30 +13,65 @@
 </head>
 <body>
 
-	<p>Please press the <kbd>Q</kbd> key</p>
+	<header>
+		<hgroup>
+			<h1>kbd</h1>
+			<p>for fun &amp; profit</p>
+		</hgroup>
+	</header>
 	
-	<p><kbd>⌘</kbd></p>
+	<article>
+		<section id="keysdefault">
+			<h2>Default</h2>
+			<p>
+				<kbd>Q</kbd> <kbd>W</kbd> <kbd>E</kbd> <kbd>R</kbd> <kbd>T</kbd> <kbd>Y</kbd>
+			</p>
+			<p>
+				<code>&lt;kbd&gt;Q&lt;/kbd&gt;</code>
+			</p>
+		</section>
 		
-	<hr />
+		<section id="keysdark">
+			<h2>Dark</h2>
+			<p>
+				<kbd class="dark">Q</kbd> <kbd class="dark">W</kbd> <kbd class="dark">E</kbd> <kbd class="dark">R</kbd> <kbd class="dark">T</kbd> <kbd class="dark">Y</kbd>
+			</p>
+			<p>
+				<code>&lt;kbd class="dark"&gt;Q&lt;/kbd&gt;</code>
+			</p>
+		</section>
 		
-	<p>Please press the <kbd class="dark">Q</kbd> key</p>
+		<section id="keysios">
+			<h2>iOS</h2>
+			<p>
+				<kbd class="ios">Q</kbd> <kbd class="ios">W</kbd> <kbd class="ios">E</kbd> <kbd class="ios">R</kbd> <kbd class="ios">T</kbd> <kbd class="ios">Y</kbd>
+			</p>
+			<p>
+				<code>&lt;kbd class="ios"&gt;Q&lt;/kbd&gt;</code>
+			</p>
+		</section>
 		
-	<p><kbd class="dark">⌘</kbd></p>
+		<section id="keysandroid">
+			<h2>Android</h2>
+			<p>
+				<kbd class="android">q</kbd> <kbd class="android">w</kbd> <kbd class="android">e</kbd> <kbd class="android">r</kbd> <kbd class="android">t</kbd> <kbd class="android">y</kbd> <kbd class="android dark">/</kbd> <kbd class="android dark">.</kbd> <kbd class="android color">Go</kbd>
+			</p>
+			<p>
+				<code>&lt;kbd class="android"&gt;q&lt;/kbd&gt;</code>
+				<code>&lt;kbd class="android dark"&gt;q&lt;/kbd&gt;</code>
+				<code>&lt;kbd class="android color"&gt;q&lt;/kbd&gt;</code>
+			</p>
+		</section>
 
-	<hr />
+	</article>
 	
-	<p>Please press the <kbd class="ios">Q</kbd> key</p>
+	<footer>
+		<p>A fun project by <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
+	</footer>
 	
-	<p><kbd class="ios">⌘</kbd></p>
+	<div class="navbar">
-	
+		<p><a href="http://kremalicious.com">&larr; Back to article</a></p>
-	<hr />
+	</div>
-	
-	<p>Please press the <kbd class="android">Q</kbd> key</p>
-	<p>Please press the <kbd class="android">d</kbd> key</p>
-	<p>Please press the <kbd class="android dark">d</kbd> key</p>
-	<p>Please press the <kbd class="android color">d</kbd> key</p>
-	
-	<p><kbd class="android">⌘</kbd></p>
 	
 </body>
 </html>