<div class="centered">
<h1><strong>Hubot > </strong>Greetings unidentified one, please enter your GitHub user name</h1>
<input type="text" /></input>
<span class="meta">(Enter GitHub user name)</span>
</div>
<footer>
<span class="status"></span>
</footer>
xxxxxxxxxx
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
$sans: 'Noto Stans';
* {
box-sizing: border-box;
}
@mixin vertical-align {
position: relative;
top: 50%;
transform: translateY(-50%);
transform: translateY(-50%);
transform: translateY(-50%);
}
html {
background-image: linear-gradient(#007AAA, #292931);
top: 0;
bottom: 0;
position: absolute;
display: inline-block;
height: 100%;
width: 100%;
}
body {
font-family: 'Noto Sans', sans-serif;
padding: 1em;
font-smoothing: antialiased;
top: 0;
bottom: 0;
position: absolute;
display: inline-block;
height: 100%;
width: 100%;
}
h1 {
font-size: 21px;
color: #fff;
letter-spacing: -0.05em;
line-height: 28px;
font-weight: normal;
margin: 20px 0;
strong {
font-weight: bold;
}
}
@-webkit-keyframes typing {
from { width: 0 }
to { width: 100% }
}
@-moz-keyframes typing {
from { width: 0% }
to { width:100% }
}
@-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: rgba(#fff, .8) }
}
@-moz-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #fff }
}
h1 {
width: 100%;
white-space: nowrap;
overflow: hidden;
border-right: 12px solid #fff;
padding-right: 2px;
animation: typing 1s steps(71, end), blink-caret 1s step-end infinite;
animation: typing 1s steps(71, end), blink-caret 1s step-end infinite;
}
.centered {
@include vertical-align;
width: 100%;
max-width: 700px;
margin: 0 auto;
text-align: left;
input {
background: #212121;
padding: 20px;
width: 100%;
border: none;
color: #fff;
border-radius: 2px;
font-size: 24px;
outline: none;
cursor: block;
}
.meta {
display: inline-block;
margin: 10px 0;
font-size: 13px;
line-height: 24px;
color: rgba(#fff, .7);
}
}
footer {
height: 50px;
text-align: center;
position: absolute;
background: #212121;
bottom: 0;
left: 0;
right: 0;
.status {
display: inline-block;
height: 50px;
width: 100px;
background-image: url('http://cl.ly/image/2w1Q1P0p2H1i/image');
&.thinking {
background-image: url('http://cl.ly/image/1l0Q283n2U0q/image');
}
}
}
$('input').focus(function(){
$('.status').toggleClass('thinking');
});
$('input').blur(function(){
$('.status').toggleClass('thinking');
});