front/registration: visual tweaks

This commit is contained in:
rr- 2016-03-27 23:00:54 +02:00
parent 6a194b1d54
commit 85949bba04
5 changed files with 47 additions and 20 deletions

View file

@ -37,7 +37,7 @@ form.tabular .buttons {
form:not(.tabular) ul li label { form:not(.tabular) ul li label {
display: block; display: block;
padding: 0.5em 0; padding: 1em 0 0.5em 0;
} }
textarea, textarea,

View file

@ -5,6 +5,10 @@ body {
font-size: 12pt; font-size: 12pt;
} }
a {
color: #24AADD;
}
#content-holder { #content-holder {
margin-top: 1em; margin-top: 1em;
text-align: center; text-align: center;

View file

@ -3,14 +3,38 @@
width: 20em; width: 20em;
float: left; float: left;
} }
#user-registration div.info { #user-registration .info {
line-height: 1.8em;
float: left; float: left;
margin-left: 3em; margin-left: 3em;
border-radius: 0.2em; border-radius: 0.2em;
width: 20em; width: 20em;
} }
#user-registration .info p:first-child, #user-registration .info ul {
#user-registration form li:first-child label { list-style-type: none;
margin: 0;
padding: 0;
}
#user-registration .info li {
margin: 0;
padding: 0;
}
#user-registration .info i {
margin-right: 0.5em;
}
#user-registration .info i.fa { color: #24AADD; }
#user-registration .info p:first-child {
margin: 0 0 0.5em 0;
}
#user-registration .input li:first-child label {
padding-top: 0; padding-top: 0;
margin-top: 0; margin-top: 0;
} }
#user-registration .buttons {
margin-top: 1em;
}
p.hint {
margin-top: 0.5em;
color: gray;
font-size: 80%;
}

View file

@ -4,8 +4,8 @@
<meta charset='utf-8'/> <meta charset='utf-8'/>
<title><!-- change via config.ini --></title> <title><!-- change via config.ini --></title>
<link href='/bundle.min.css' rel='stylesheet' type='text/css'> <link href='/bundle.min.css' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'> <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'> <link href='//fonts.googleapis.com/css?family=Inconsolata|Droid+Sans' rel='stylesheet' type='text/css'>
</head> </head>
<body> <body>
<div id='top-nav-holder'></div> <div id='top-nav-holder'></div>

View file

@ -5,22 +5,20 @@
<fieldset class='input'> <fieldset class='input'>
<ul> <ul>
<li> <li>
<label for='user-name'>User name:</label> <label for='user-name'>User name</label>
<input id='user-name' name='user-name' type='text' autocomplete='off' placeholder='e.g. darth_vader' required/> <input id='user-name' name='user-name' type='text' autocomplete='off' placeholder='letters, digits, _, -' required/>
</li> </li>
<li> <li>
<label for='user-password'>Password:</label> <label for='user-password'>Password</label>
<input id='user-password' name='user-password' type='password' autocomplete='off' placeholder='e.g. cupcake' required/> <input id='user-password' name='user-password' type='password' autocomplete='off' placeholder='5+ characters' required/>
</li> </li>
<li> <li>
<label for='user-email'>Email (optional):</label> <label for='user-email'>Email</label>
<input id='user-email' name='user-email' type='email' autocomplete='off' placeholder='e.g. vader@empire.gov'/> <input id='user-email' name='user-email' type='email' autocomplete='off' placeholder='optional'/>
<p class="hint">Used for password reminder and to show a <a href='http://gravatar.com/'>Gravatar</a>. Leave blank for random Gravatar.</p>
</li> </li>
</ul> </ul>
</fieldset> </fieldset>
<hr/>
<p>By clicking "Create an account" button below, you are agreeing to the <a href='/help/tos'>Terms of Service</a>.</p>
<hr/>
<fieldset class='buttons'> <fieldset class='buttons'>
<input type='submit' value='Create an account'/> <input type='submit' value='Create an account'/>
</fieldset> </fieldset>
@ -28,11 +26,12 @@
<div class='info'> <div class='info'>
<p>Registered users can:</p> <p>Registered users can:</p>
<ul> <ul>
<li>upload new posts</li> <li><i class="fa fa-upload"></i> upload new posts</li>
<li>mark them as favorite</li> <li><i class="fa fa-heart"></i> mark them as favorite</li>
<li>add comments</li> <li><i class="fa fa-commenting-o"></i> add comments</li>
<li>vote up/down on posts and comments</li> <li><i class="fa fa-star-half-o"></i> vote up/down on posts and comments</li>
</ul> </ul>
<p>Your e-mail will be used to show your <a href='http://gravatar.com/'>Gravatar</a> and for password reminders only. Leave blank for random Gravatar.</p> <hr/>
<p>By creating an account, you are agreeing to the <a href='/help/tos'>Terms of Service</a>.</p>
</div> </div>
</div> </div>