Skip to content

Instantly share code, notes, and snippets.

@ckreutz

ckreutz/dabblet.css

Created May 10, 2013 17:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ckreutz/5555970 to your computer and use it in GitHub Desktop.
Save ckreutz/5555970 to your computer and use it in GitHub Desktop.
Download ZIP
Login form
Raw
dabblet.css
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box; }
a {
text-decoration: none; }
a:hover {
text-decoration: underline; }
.flo-l {
float: left; }
.flo-r {
float: right; }
.clr-b {
clear: both; }
.clr-l {
clear: left; }
.cf {
overflow: hidden; }
input[type='submit'],
input[type='checkbox'],
input[type='checkbox'] + label {
cursor: pointer; }
body, html {
height: 100%;
width: 100%; }
body {
background: lightgray;
font-family: sans-serif; }
.screen {
position: relative;
background: #018DD8;
background: radial-gradient(#018DD8, #016195);
margin: 0 auto;
width: 100%;
max-width: 320px;
min-width: 295px;
height: 100%;
max-height: 515px;
min-height: 460px; }
.logo {
display:block;
position: relative;
width: 45%;
top: 20px;
margin: 0 auto; }
.small {
font-size: 0.72em;
color: #eeeeee; }
label.small:hover {
color: gray; }
.large {
color: #fff;
font-size: 1.3em;
line-height: 1em;
font-family: Georgia, serif;
font-weight: 700;
margin-bottom: 0.6em; }
.medium {
font-size: 0.8em;
color: #fff; }
.medium:hover {
color: #b3b3b3; }
.signup-link {
margin-top: 1.4em; }
.login {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 1.5em 1.5em; }
.login input[type='text'],
.login input[type='password'] {
width: 100%;
margin-bottom: 1.5em;
border: 1px solid #00a0d1;
border-radius: 3px;
height: 2.2em;
font-size: 1.2em;
color: #666666;
padding-left: 0.5em; }
.login input[type='password'] {
margin-bottom: 0.7em; }
.login input[type='submit'] {
margin-top: 0.7em;
background: #e5790c;
background: linear-gradient(#e5790c, #f2800d);
border-radius: 3px;
border: 0;
height: 2em;
color: #fff;
font-family: Georgia, serif;
font-size: 1.3em;
font-weight: 700;
padding: 0 0.5em; }
.login input[type='submit']:hover {
background: linear-gradient(#00bdf7, #00aade); }
.login label.small {
padding-left: 0.5em; }
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='screen'>
<img class='logo' src='https://dl.dropboxusercontent.com/u/920676/wethinq-q.png' />
<form action='' class='login cf'>
<p class='large'>Welcome</p>
<input type='text' placeholder='Username or Email' autofocus />
<input type='password' placeholder='Password' />
<a class='small flo-l' href=''>Did you forget?</a>
<div class='flo-r cf'>
<input class='flo-l' type='checkbox' id='remember-me' />
<label class='small flo-l' for='remember-me'>Remember me</label>
</div>
<div class='signup-link flo-l clr-l'>
<a class='medium' href=''>Sign Up</a>
</div>
<input class='flo-r' type='submit' value='Sign In' />
</form>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment