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

android keys refinements

This commit is contained in:
Matthias Kretschmann 2012-07-16 15:05:44 +02:00
parent 59c8873822
commit 4429506404
5 changed files with 65 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/kbdftw.css
View File

@ -83,11 +83,11 @@ kbd.android {
}
kbd.android.dark {
background: #222222;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #505050;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #505050;
}
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;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #36647b;
}
@font-face {
font-family: 'RobotoRegular';

38
assets/css/site.css
View File

@ -53,7 +53,7 @@ a:hover {
margin-right: auto;
padding-left: 1.5em;
padding-right: 1.5em;
max-width: 55.6em;
max-width: 40em;
}
/*
WebKit Defaults:
@ -140,11 +140,11 @@ kbd.android {
}
kbd.android.dark {
background: #222222;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #505050;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #505050;
}
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;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #36647b;
}
@font-face {
font-family: 'RobotoRegular';
@ -157,8 +157,20 @@ kbd.android.color {
-------------------------------------------------- */
code {
display: block;
color: #666;
color: #ccc;
font-size: .8em;
text-align: left;
}
body > header {
margin-left: auto;
margin-right: auto;
padding-left: 1.5em;
padding-right: 1.5em;
max-width: 40em;
text-align: left;
}
body > footer {
padding: 2em 0;
}
article > section {
padding: 2em 0 3.5em 0;
@ -168,21 +180,25 @@ article > section p {
margin-right: auto;
padding-left: 1.5em;
padding-right: 1.5em;
max-width: 55.6em;
max-width: 40em;
margin-bottom: 1.5em;
}
article > section p:last-child {
margin-bottom: 0;
}
article > section h2 {
article > section header {
margin-left: auto;
margin-right: auto;
padding-left: 1.5em;
padding-right: 1.5em;
max-width: 55.6em;
max-width: 40em;
text-align: left;
}
article > section header h2 {
color: #ccc;
}
article > section#keysdark {
background: #999;
border-top: 1px solid #fff;
box-shadow: 0 -1px 0 #cccccc;
}
@ -197,7 +213,8 @@ article > section#keysios {
border-top: 1px solid #c0becf;
box-shadow: 0 -1px 0 #9b9aa5;
}
article > section#keysios h2 {
article > section#keysios h2,
article > section#keysios code {
color: #696972;
}
article > section#keysandroid {
@ -205,7 +222,8 @@ article > section#keysandroid {
border-top: 1px solid #505050;
box-shadow: 0 -1px 0 #000000;
}
article > section#keysandroid h2 {
article > section#keysandroid h2,
article > section#keysandroid code {
color: #2e2d2e;
}
.navbar {
@ -225,7 +243,7 @@ article > section#keysandroid h2 {
margin-right: auto;
padding-left: 1.5em;
padding-right: 1.5em;
max-width: 55.6em;
max-width: 40em;
text-align: left;
margin: 0;
font-size: 16px;

4
assets/less/kbdftw.less
View File

@ -90,13 +90,13 @@ kbd {
inset 0 1px 0 #868686;
&.dark {
background: #222222;
box-shadow: 0 2px 2px rgba(0,0,0,.3),
box-shadow: 0 2px 2px rgba(0,0,0,.7),
0 1px 0 #444,
inset 0 1px 0 #505050;
}
&.color {
background: #083c5b;
box-shadow: 0 2px 2px rgba(0,0,0,.3),
box-shadow: 0 2px 2px rgba(0,0,0,.7),
0 1px 0 #444,
inset 0 1px 0 #36647b;
}

27
assets/less/site.less
View File

@ -47,7 +47,7 @@ a:hover {
margin-right: auto;
padding-left: 1.5em;
padding-right: 1.5em;
max-width: 55.6em;
max-width: 40em;
}
// import kbd styles
@ -59,8 +59,18 @@ a:hover {
code {
display: block;
color: #666;
color: #ccc;
font-size: .8em;
text-align: left;
}
body > header {
.container;
text-align: left;
}
body > footer {
padding: 2em 0;
}
article > section {
@ -71,9 +81,13 @@ article > section {
margin-bottom: 1.5em;
&:last-child { margin-bottom: 0 }
}
h2 {
header {
.container;
color: #ccc;
text-align: left;
h2 {
color: #ccc;
}
}
&#keysdefault {
@ -81,6 +95,7 @@ article > section {
}
&#keysdark {
background: #999;
border-top: 1px solid #fff;
box-shadow: 0 -1px 0 #ccc;
}
@ -90,7 +105,7 @@ article > section {
border-top: 1px solid #c0becf;
box-shadow: 0 -1px 0 #9b9aa5;
h2 { color: #696972; }
h2, code { color: #696972; }
}
&#keysandroid {
@ -98,7 +113,7 @@ article > section {
border-top: 1px solid #505050;
box-shadow: 0 -1px 0 #000;
h2 { color: #2e2d2e; }
h2, code { color: #2e2d2e; }
}
}

16
index.html
View File

@ -22,7 +22,9 @@
<article>
<section id="keysdefault">
<h2>Default</h2>
<header>
<h2>Default</h2>
</header>
<p>
<kbd>Q</kbd> <kbd>W</kbd> <kbd>E</kbd> <kbd>R</kbd> <kbd>T</kbd> <kbd>Y</kbd>
</p>
@ -32,7 +34,9 @@
</section>
<section id="keysdark">
<h2>Dark</h2>
<header>
<h2>Dark</h2>
</header>
<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>
@ -42,7 +46,9 @@
</section>
<section id="keysios">
<h2>iOS</h2>
<header>
<h2>iOS</h2>
</header>
<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>
@ -52,7 +58,9 @@
</section>
<section id="keysandroid">
<h2>Android</h2>
<header>
<h2>Android</h2>
</header>
<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>