Most of the new Mozilla Persona landing page

Bug 727657 - [Launch Persona ID] 3 pages on mozilla.org in One Mozilla theme

apps/mozorg/templates/mozorg/persona.html

@@ -0,0 +1,62 @@
+{% extends "base.html" %}
+
+{% block page_title %}Mozilla Persona - an identity system for the web{% endblock %}
+{% block body_id %}persona{% endblock %}
+
+{% block extrahead %}
+  {{ css('persona') }}
+{% endblock %}
+
+{% block content %}
+
+<hgroup class="container">
+  <h1 class="large">Introducing Mozilla Persona</h1>
+  <h2>an identity system for the web</h2>
+</hgroup>
+
+<section id="primary" class="container">
+
+  <div class="row">
+
+    <div class="span5">
+
+      <h3>A Better Way to Sign In</h3>
+      <p>Mozilla Persona is based on the belief that your online identity should belong exclusively to you. With that in mind, we’ve created Persona ID to improve the way you sign in to websites.</p>
+      <p>Persona ID allows you to sign in to sites with a single, consistent email address of your choosing. So, instead of having to manage usernames and passwords across your favorite sites and devices, you’ll have more time to do the important stuff. We’ll manage the details!</p>
+
+      <h3>Own Your Data</h3>
+      <p>Many sign in systems carry your profile data with them, and even share that info with other sites and social networks. We believe you should control how your personal information is shared, so with Persona ID you only need to provide your email address to get started.</p>
+
+      <h3>Easy for Publishers</h3>
+      <p>Persona ID makes things easy for site owners, too. Enabling it on your site only takes a few lines of code, and helps build good user relationships by providing them with a trusted sign-in option. It’s a win-win!</p>
+
+    </div>
+
+    <aside id="signin" class="span5">
+
+      <figure id="signin-example">
+        <img src="/media/img/persona/signin.png" alt="Persona sign-in example" />
+        <figcaption>It’s simple: just click the Sign in button, enter your preferred email and you’re ready to go.</figcaption>
+      </figure>
+
+      <div id="openphoto">
+        <h3>Try it Yourself</h3>
+        <p>Go to <a href="http://openphoto.me/">Open Photo</a> and sign in.</p>
+      </div>
+
+    </aside>
+
+  </div>
+
+</section>
+
+<section id="persona-themes" class="container">
+  <h3>Looking for Personas themes in Firefox?  <a href="https://addons.mozilla.org/en-US/firefox/personas/">Click here.</a></h3>
+</section>
+
+<small id="small-print" class="container">
+  <a href="#">Privacy Policy</a>         <a href="#">Terms of Service</a>
+</small>
+
+
+{% endblock %}

apps/mozorg/urls.py

@@ -1,11 +1,12 @@
 from django.conf.urls.defaults import *
-from views import contribute, channel, button, new, styleguide, geolocation
+from views import contribute, channel, button, new, persona, styleguide, geolocation
 
 urlpatterns = patterns('',
     (r'^button/', button),
     (r'^channel/', channel),
     (r'^contribute/', contribute),
     (r'^new/', new),
+    (r'^persona/', persona),
     (r'^styleguide/', styleguide),
 
     (r'^firefox/geolocation/', geolocation)

apps/mozorg/views.py

@@ -7,6 +7,9 @@ def index(request):
 def contribute(request):
     return l10n_utils.render(request, "mozorg/contribute.html")
 
+def persona(request):
+    return l10n_utils.render(request, "mozorg/persona.html")
+
 def channel(request):
     data = {}
 

media/css/persona.less

@@ -0,0 +1,62 @@
+@import "sandstone/variables.less";
+@import "sandstone/mixins.less";
+
+hgroup {
+    text-align: center;
+    padding-top: @baseLine * 2;
+    padding-bottom: @baseLine * 2;
+
+    h2 {
+        font-size: 48px;
+    }
+}
+
+#primary {
+    padding-top: @baseLine * 2;
+    padding-bottom: @baseLine * 2;
+    @shadow: 0 1px 1px rgba(0,0,0,0.1), 0 0 0 1px #fff;
+    .box-shadow(@shadow);
+    background: #fff;
+    #gradient > .radial(center, 45px, ellipse, farthest-corner, #f5f1e8 0%, #ffffff 100%);
+    .clearfix;
+}
+
+#signin-example figcaption {
+    text-align: center;
+    font-style: italic;
+    color: @textColorSecondary;
+    margin: auto @gridGutterWidth  @baseLine * 2  @gridGutterWidth;
+}
+
+#openphoto {
+    text-align: center;
+    padding: @baseLine;
+    margin: @baseLine * 2  @gridColumnWidth + @gridGutterWidth;
+    border-top: 1px dotted @borderColor;
+    border-bottom: 1px dotted @borderColor;
+
+    p {
+        margin: 0;
+        .open-sans;
+        font-weight: 300;
+    }
+}
+
+#persona-themes {
+    text-align: center;
+    margin-top: @baseLine;
+    margin-bottom: @baseLine;
+    @shadow: 0 1px 1px rgba(0,0,0,0.1), 0 0 0 1px #fff;
+    .box-shadow(@shadow);
+    background: #fff;
+
+    h3 {
+        margin: 0;
+        padding: @baseLine;
+    }
+}
+
+#small-print {
+    text-align: center;
+    padding-bottom: @baseLine * 2;
+}

media/css/sandstone/mixins.less

@@ -68,6 +68,12 @@
     background-image: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor);
     background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
   }
+  .radial(@posX:center, @posY:center, @shape:circle, @size:closest-side, @startColor:white, @endColor:black){
+    background-image: -moz-radial-gradient(@posX @posY, @shape @size, @startColor, @endColor);
+    background-image: -webkit-radial-gradient(@posX @posY, @shape @size, @startColor, @endColor);
+    background-image: -o-radial-gradient(@posX @posY, @shape @size, @startColor, @endColor);
+    background-image: radial-gradient(@posX @posY, @shape @size, @startColor, @endColor);
+}
 }
 
 

media/css/sandstone/sandstone.less

@@ -104,10 +104,14 @@ li {
 
 #gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
 
-#main-content {
-    padding-bottom: 48px;
+#masthead,
+#main-feature,
+#main-content,
+#colophon {
+    .container
 }
 
+#main-content,
 #main-feature {
     padding-bottom: 48px;
 }
@@ -284,10 +288,9 @@ li {
 cols    1     2      3      4      5      6      7      8      9      10
 px      68    160    252    344    436    528    620    712    804    896    */
 
-#masthead,
-#colophon,
-#main-feature,
-#main-content {
+
+.container {
+    display: block;
     margin: 0 auto;
     padding-left: 48px;
     padding-right: 48px;
@@ -307,10 +310,7 @@ px      68    160    252    344    436    528    620    712    */
 
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     
-    #masthead,
-    #colophon,
-    #main-feature,
-    #main-content {
+    .container {
         width: 712px;
         padding-left: 28px;
         padding-right: 28px;
@@ -328,11 +328,8 @@ cols    1     2      3
 px      68    160    252    */
 
 @media only screen and (max-width: 767px) {
-    
-    #masthead,
-    #colophon,
-    #main-feature,
-    #main-content {
+
+    .container {
         width: 252px;
         padding-left: 34px;
         padding-right: 34px;
@@ -351,10 +348,7 @@ px      68    160    252    344    436    */
 
 @media only screen and (min-width: 480px) and (max-width: 767px) {
 
-    #masthead,
-    #colophon,
-    #main-feature,
-    #main-content {
+    .container {
         width: 480px;
         padding-left: 22px;
         padding-right: 22px;

settings/base.py

@@ -69,6 +69,9 @@ MINIFY_BUNDLES = {
             'css/covehead/geolocation.css',
             'css/jquery/nyroModal.css'
         ),
+        'persona': (
+            'css/persona.less',
+        ),
         'styleguide': (
             'css/sandstone/sandstone.less',
             'css/sandstone/styleguide.less',