More research project page setup

apps/research/templates/research/research.html

@@ -2,19 +2,23 @@
 
 {% block page_title %}Mozilla Research{% endblock %}
 
+{% block breadcrumbs %}
+  <nav class="breadcrumbs">
+    <a href="#">Home</a> >
+    <span>Mozilla Research</span>
+  </nav>
+{% endblock %}
+
 {% block content %}
-<div id="main-feature">
+
+<div id="main-content">
+<div class="row">
+<article class="span7" role="main">
 
 <hgroup>
   <h1>Mozilla Research</h1>
   <h2>Pushing the boundaries of the Open Web</h2>
 </hgroup>
-    
-</div>
-
-<div id="main-content">
-<div class="row">
-<article class="span7" role="main">
 
 <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
 
@@ -54,15 +58,21 @@
 
 </article>
 
-<div id="sidebar" class="span2 offset1">
+<div id="sidebar" class="span3">
 
 <nav>
     <ul>
-        <li><a href="#">Lorem</a></li>
+        <li>Projects</li>
-        <li><a href="#">Ipsum</a></li>
+        <li><a href="#">Emscripten</a></li>
-        <li><a href="#">Dolor</a></li>
+        <li><a href="#">Rust</a></li>
-        <li><b>Sit Amet</b></li>
+        <li><a href="#">Servo</a></li>
-        <li><a href="#">Lorem</a></li>
+        <li><a href="#">Static Analysis for JavaScript</a></li>
+        <li><a href="#">Web Security</a></li>
+        <li><a href="#">Static Analysis for C++</a></li>
+        <li><a href="#">Advanced Language Design</a></li>
+        <li><a href="#">Advances Systems/Platform Architecture</a></li>
+        <li><a href="#">Security Analysis & Tooling</a></li>
+        <li><a href="#">Just-in-time Compilation Technologies</a></li>
     </ul>
 </nav>
 

media/css/sandstone/sandstone.less

@@ -3,7 +3,6 @@
 @import "reset.less";
 @import "fonts.less";
 
-/* }}} */
 /* {{{ Basic Colors, Text, Links */
 
 body {
@@ -14,6 +13,10 @@ body {
     background: #fff;
 }
 
+#outer-wrapper {
+    border-top: 2px solid #fff;
+}
+
 #wrapper {
     background: #f2f0ee url(/media/img/sandstone/bg.png) 0 0 repeat-x;
 }
@@ -31,20 +34,28 @@ a:active {
 h1, h2, h3, h4, h5, h6 {
     .open-sans;
     font-weight: 300;
-    margin: 24px 0 12px 0;
+    margin: 0 0 12px 0;
+    line-height: 100%;
 }
 
 h1 { font-size: 48px; }
 h2 { font-size: 32px; }
-h3 { font-size: 24px; }
+h3 { font-size: 28px; }
-h4 { font-size: 18px; }
+h4 { font-size: 24px; }
 h5 { font-size: 16px; }
 h6 { font-size: 14px; }
 
+hgroup {
+    h1, h2, h3, h4, h5, h6 {
+        margin-bottom: 0;
+    }
+}
+
 p,
 ul,
 ol,
-dl {
+dl,
+hgroup {
     margin: 0 0 24px 0;
 }
 
@@ -57,11 +68,11 @@ li {
 
 #gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
 
-#outer-wrapper {
+#main-content {
-    border-top: 2px solid #fff;
+    padding-bottom: 48px;
 }
 
-#main-content {
+#main-feature {
     padding-bottom: 48px;
 }
 
@@ -199,7 +210,7 @@ px      68    160    252    344    436    */
 
     nav.breadcrumbs {
         float: none;
-        padding: 24px 0;
+        padding: 24px 0 12px 0;
 
         a,
         span {

templates/base.html

@@ -26,7 +26,27 @@
     <div id="wrapper">
 
         {% block site_header %}
-          {% include "includes/header.html" %}
+          {# start #header #}
+          <header id="masthead">
+            <a href="http://www.mozilla.org/" id="tabzilla">{{ _('Mozilla') }}</a>
+
+            {# start menu #nav-main #}
+            <nav id="nav-main" role="navigation">
+            <ul>
+                <li><a href="#">Mission</a></li>
+                <li><a href="#">About</a></li>
+                <li><a href="#">Products</a></li>
+                <li><a href="#">Get Involved</a></li>
+            </ul>
+            </nav>
+            {# end menu #nav-main #}
+
+            <h1><img src="/media/img/sandstone/header-mozilla.png" alt="mozilla"></h1>
+
+            {% block breadcrumbs %}{% endblock %}
+
+          </header>
+          {# end #header #}
         {% endblock %}
 
         {% block content %}{% endblock %}

templates/includes/header.html

@@ -1,11 +0,0 @@
-{# start #header #}
-<header id="masthead">
-    <a href="http://www.mozilla.org/" id="tabzilla">{{ _('Mozilla') }}</a>
-
-    {# start menu #nav-main #}
-    <div id="nav-main" role="navigation">
-    </div>
-    {# end menu #nav-main #}
-
-</header>
-{# end #header #}