Bug 733860 - [One Mozilla] New About Page

apps/mozorg/templates/mozorg/about-base.html

@@ -13,7 +13,7 @@
 
   <nav>
     <ul>
-      <li><a href="#">About</a></li>
+      <li><a href="{{ url('mozorg.about') }}">About</a></li>
       <li><a href="{{ url('mozorg.mission') }}">Our Mission</a></li>
       <li><a href="/about/forums/">Forums</a></li>
       <li><a href="/about/governance.html">Governance</a></li>

apps/mozorg/templates/mozorg/about.html

@@ -0,0 +1,57 @@
+{% extends "sand.html" %}
+
+{% block page_title %}Get to Know Mozilla{% endblock %}
+{% block body_id %}about{% endblock %}
+
+{% block extrahead %}
+  {{ css('about') }}
+{% endblock %}
+
+{% block content %}
+
+<article id="main-content">
+
+<h1 class="large center">Get to Know Mozilla</h1>
+
+<p class="intro">Whether you want to learn more about who we are, how to be a part of Mozilla or just where to find us, you've come to the right place. To find out what drives us and makes us different, please visit our <a href="{{ url('mozorg.mission') }}">mission</a> page.</p>
+
+<ul class="links">
+  <li>
+    <h4><a href="http://careers.mozilla.org/">Career center »</a></h4>
+    <p>Want to work on Firefox? Apply today!</p>
+  </li>
+  <li>
+    <h4><a href="{{ php_url('/press/') }}">Press center »</a></h4>
+    <p>Press info and other useful stuff</p>
+  </li>
+  <li>
+    <h4><a href="http://blog.mozilla.com/">Mozilla blog »</a></h4>
+    <p>News, notes and ramblings from the Mozilla project</p>
+  </li>
+  <li>
+    <h4><a href="{{ php_url('/privacy/') }}">Privacy center »</a></h4>
+    <p>Policies used to run the Mozilla community</p>
+  </li>
+</ul>
+
+<ul class="links">
+  <li>
+    <h4><a href="{{ php_url('/firefox/brand/') }}">Firefox brand toolkit »</a></h4>
+    <p>Logos, copy rules, visual assets and more</p>
+  </li>
+  <li>
+    <h4><a href="{{ php_url('about/partnerships') }}">Mozilla partnerships »</a></h4>
+    <p>Details about partnering with us</p>
+  </li>
+  <li>
+    <h4><a href="{{ php_url('about/contact') }}">Locations & contacts »</a></h4>
+    <p>Addresses, emails, support and feedback forms</p>
+  </li>
+  <li>
+    <h4><a href="{{ url('mozorg.contribute') }}">Get involved »</a></h4>
+    <p>Become a volunteer contributor in a number of different areas.</p>
+  </li>
+</ul>
+
+</article>
+{% endblock %}

apps/mozorg/urls.py

@@ -4,6 +4,7 @@ import views
 urlpatterns = patterns('',
     url(r'^$', views.home, name='mozorg.home'),
 
+    url(r'^about/$', views.about, name='mozorg.about'),
     url(r'^button/$', views.button),
     url(r'^channel/$', views.channel),
     url(r'^sandstone/', views.sandstone),

apps/mozorg/views.py

@@ -27,6 +27,9 @@ def home(request):
                              {'form': form,
                               'success': success})
 
+def about(request):
+    return l10n_utils.render(request, "mozorg/about.html")
+
 def contribute(request):
     return l10n_utils.render(request, "mozorg/contribute.html")
 

media/css/about.less

@@ -0,0 +1,33 @@
+@import "sandstone/variables.less";
+@import "sandstone/mixins.less";
+
+#main-content {
+
+    h1 {
+        margin-bottom: @baseLine;
+    }
+
+    .intro {
+        .span(4);
+        margin-left: 0;
+        padding-top: @baseLine;
+    }
+
+    ul.links {
+        .span(3);
+        li {
+            list-style-type: none;
+            margin-left: 0;
+            padding-top: @baseLine;
+            border-bottom: 1px dotted @borderColor;
+            min-height: @baseLine * 4;
+        }
+        h4 {
+            margin-bottom: @baseLine / 6;
+        }
+        p {
+            margin-bottom: @baseLine / 2;
+        }
+    }
+
+}

settings/base.py

@@ -44,6 +44,9 @@ def JINJA_CONFIG():
 # and js files that can be bundled together by the minify app.
 MINIFY_BUNDLES = {
     'css': {
+        'about': (
+            'css/about.less',
+        ),
         'b2g': (
             'css/b2g.less',
         ),