148 lines
2.3 KiB
Plaintext
148 lines
2.3 KiB
Plaintext
// HTML5 display definitions
|
|
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
|
|
|
|
|
|
/* Basics
|
|
-------------------------------------------------- */
|
|
|
|
body {
|
|
background: #eee;
|
|
font: 24px/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
|
|
text-align: center;
|
|
margin: 0;
|
|
padding-top: 3em;
|
|
color: #ccc;
|
|
}
|
|
|
|
h1, h2, p {
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
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: 40em;
|
|
}
|
|
|
|
// import kbd styles
|
|
@import 'kbdfun.less';
|
|
|
|
|
|
/* Content
|
|
-------------------------------------------------- */
|
|
|
|
code {
|
|
display: block;
|
|
color: #ccc;
|
|
font-size: .8em;
|
|
}
|
|
|
|
body > header {
|
|
.box-shadow(0 3px 5px rgba(0,0,0,.1));
|
|
padding-bottom: 1em;
|
|
|
|
h1, p {
|
|
.container;
|
|
}
|
|
h1 { margin-bottom: .5em; }
|
|
}
|
|
|
|
body > footer {
|
|
padding: 2em 0;
|
|
font-size: .8em;
|
|
p { margin-bottom: 0 }
|
|
}
|
|
|
|
article > section {
|
|
padding: 2em 0 3.5em 0;
|
|
|
|
p {
|
|
.container;
|
|
&:last-child { margin-bottom: 0 }
|
|
}
|
|
header {
|
|
.container;
|
|
h2 { color: #ccc; }
|
|
}
|
|
|
|
&#keysdefault {
|
|
|
|
}
|
|
|
|
&#keysdark {
|
|
background: #999;
|
|
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, code { color: #696972; }
|
|
}
|
|
|
|
&#keysandroid {
|
|
background: #181818;
|
|
border-top: 1px solid #505050;
|
|
.box-shadow(0 -1px 0 #000);
|
|
|
|
h2, code { 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 1.5em;
|
|
}
|
|
|
|
.navbar p {
|
|
text-align: left;
|
|
margin: 0;
|
|
font-size: 14px;
|
|
a.github { float: right; }
|
|
}
|
|
|
|
kbd {
|
|
display: inline-block;
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
// load Roboto
|
|
kbd.android {
|
|
.font-roboto;
|
|
} |