diff --git a/browserid/static/css/style.css b/browserid/static/css/style.css
index 93e93173f4cbb81c585c11dcb9660ed4920d09c4..2c37d0596c76330fb6f070ae9d6191746b206923 100644
--- a/browserid/static/css/style.css
+++ b/browserid/static/css/style.css
@@ -19,101 +19,110 @@ body {
font-family: 'Tenor Sans', arial, serif;
}
-#splash .header {
- height: 4px;
+header {
+ border-top: 4px solid #333;
background-color: #333;
padding: 0 20% 0 20%;
-}
-
-#splash .tophalf, #splash .topquarter {
- background: #008;
- color: #fff;
- padding: 0;
margin: 0;
+ background: #008;
height: 230px;
+ color #fff;
min-width: 800px;
}
-#splash .tophalf .title {
- padding-top: 30px;
- font-weight: bold;
+header.quarter {
+ height: 50px;
}
-#splash .tophalf .labslogo > div {
- width: 600px;
+#labslogo {
margin: auto;
text-align: left;
- padding: 10px;
+ background: url("/i/labs-logo.png") 0 0 no-repeat;
+ width: 161px;
+ height: 34px;
+ margin: 10px 0 0 110px;
+ color: transparent;
+ display: inline-block;
}
-#splash .tophalf .subtitle {
- font-family: 'Shadows Into Light', arial, serif;
+.half h1 {
+ padding-top: .2em;
font-size: 3em;
+ font-weight: bold;
+ background: url("/i/browserid_logo.png") 0 0 no-repeat;
+ width: 366px;
+ height: 72px;
+ margin: 43px auto 0 auto;
+ clear: left;
+ color: transparent;
}
-#splash .topquarter {
- height: 50px;
+.quarter h1 {
+ float: left;
+ width: 135px;
+ height: 35px;
+ margin: 7px 0 0 10px;
}
-#splash .topquarter > div {
- width: 800px;
- margin: auto;
+.quarter h1 > a {
+ color: transparent;
}
-#splash .topquarter .title {
- padding-top: .2em;
+
+h2 {
+ font-family: 'Shadows Into Light', arial, serif;
font-size: 3em;
- font-weight: bold;
- float: left;
+ font-weight: normal;
+ color: #fff;
+ margin: -4px auto 0 auto;
+ text-align: center;
}
-#splash .topquarter .subtitle {
- font-family: 'Shadows Into Light', arial, serif;
+.quarter h2 {
font-size: 2em;
margin: .2em 0 0 .5em;
float: left;
}
-#splash .header .manage {
+
+header > #manageLink {
float: right;
background-color: #333;
color: #fff;
- padding: 5px 10px 5px 10px;
+ padding: 1px 10px 5px 10px;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
-#splash .bottomhalf {
- width: 800px;
- margin: auto;
+header > #manageLink:hover {
+ opacity:1;
+ color: #AAA;
}
-#splash .bottomhalf .why {
+.why {
+ width: 600px;
height: 130px;
- padding: 10px 100px 10px 100px;
+ padding: 10px 0;
+ margin: 0 auto;
}
-#splash .bottomhalf .why p {
+.why p {
font-size: 2em;
text-align: center;
}
-#splash .bottomhalf a {
+.why a {
color: #666;
text-decoration: none;
border-bottom: 1px dotted black;
}
-#splash .bottomhalf a:hover {
+.why a:hover {
color: #000;
opacity: 1;
}
-#splash .tophalf > div {
- text-align: center;
-}
-
a {
color: #fff;
text-decoration: none;
@@ -123,7 +132,7 @@ a:hover {
opacity: .6;
}
-#splash .footer {
+footer {
background-color: #F1F1F1;
border-top: 2px solid #ddd;
margin: 0;
@@ -133,39 +142,39 @@ a:hover {
font-size: 1.1em;
}
-#splash .footer > div {
+footer > div {
width: 800px;
margin: auto;
}
-#splash .footer > div > div {
+footer > div > div {
width: 400px;
padding: 10px;
}
-#splash .footer .right {
+footer .right {
padding-top: 13px;
float: right;
}
-#splash .footer .right img {
+footer .right img {
margin-bottom: -5px;
}
-#splash .footer a {
+footer a {
color: #666;
}
-#splash .footer .right p {
+footer .right p {
text-align: right;
}
-#splash .footer .copyright {
+footer .copyright {
font-weight: bold;
font-size: .8em;
}
-.bottomhalf .step .number {
+.step .number {
font-family: 'Shadows Into Light', arial, serif;
font-size: 4em;
float: left;
@@ -175,26 +184,26 @@ a:hover {
width: 50px;
}
-.bottomhalf .step {
- margin-top: 1em;
- margin-bottom: 2em;
+.step {
+ margin: 1em auto 2em auto;
font-size: 14px;
+ width: 800px;
}
-.bottomhalf .step > p, .bottomhalf .step > ol {
+.step > p, .step > ol {
margin-left: 50px;
}
-.bottomhalf .prose {
+.prose {
font-size: 1.5em;
}
-.bottomhalf .status {
+.status {
margin: 0 100px 0 100px;
font-size: 1.2em;
}
-.bottomhalf pre code {
+ pre code {
padding: 10px 15px 10px 15px;
margin: 1em 60px 1em 60px;
-webkit-border-radius: 10px;
@@ -275,4 +284,4 @@ a:hover {
.legal p {
margin-top : 1px;
-}
\ No newline at end of file
+}
diff --git a/browserid/views/layout.ejs b/browserid/views/layout.ejs
index 1ae2936f35a5f283b92d5e0d15f5e396055efc97..6568eefbf7da67e0dc0ed218c07f65ac1772f15f 100644
--- a/browserid/views/layout.ejs
+++ b/browserid/views/layout.ejs
@@ -1,15 +1,15 @@
<!DOCTYPE html>
<html>
<head>
- <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <meta charset=utf-8">
<title><%- title %></title>
- <link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/github.css">
+ <link rel="stylesheet" href="/css/style.css" type="text/css">
<!-- FIXME: minimize jquery for this -->
<script src="/js/jquery-1.6.2.min.js"></script>
<script src="/dialog/resources/underscore-min.js"></script>
<script>
-$(document).ready(function() {
+$(function() {
if ($('#emailList')) {
display_saved_ids();
}
@@ -83,28 +83,21 @@ function display_saved_ids()
</script>
</head>
<body>
-<div id="splash">
- <div class="header">
- <div class="manage"><a id="manageLink" href="manage">my account</a></div>
- </div>
+ <header class="<% if(fullpage) { %> half <% } else { %> quarter <% } %>">
+ <a id="manageLink" href="manage">my account</a>
+ <hgroup>
<% if (fullpage) { %>
- <div class="tophalf">
- <div class="labslogo"><div><img src="i/labs-logo.png"></div></div>
- <div class="title"><img src="i/browserid_logo.png"></div>
- <div class="subtitle">A better way to sign in.</div>
- </div>
+ <span id="labslogo">Mozilla Labs</span>
+ <h1>BrowserID</h1>
+ <h2>A better way to sign in.</h2>
<% } else { %>
- <div class="topquarter">
- <div>
- <a href="/"><div class="title"><img src="i/browserid_logo_lil.png"></div></a>
- <div class="subtitle"><%- title %></div>
- </div>
- </div>
+ <h1><a href="/"><img src="i/browserid_logo_lil.png">BrowserID</a></h1>
+ <h2><%- title %></h2>
<% } %>
- <div class="bottomhalf">
+ </hgroup>
+ </header>
<%- body %>
- </div>
- <div class="footer">
+ <footer>
<div>
<div class="right">
<p><img src="i/browserid_logo_sm.png"> is an <b>open source experiment</b><br />from the <a href="http://identity.mozilla.com">Identity Team</a> at
@@ -115,7 +108,6 @@ function display_saved_ids()
<p class="copyright">Copyright © 2011 Mozilla. All rights reserved. </p>
</div>
</div>
- </div>
-</div>
+ </footer>
</body>
</html>