Further cleanup of templates

apps/mozorg/templates/mozorg/contribute.html

@@ -83,7 +83,7 @@
     </video>
   </div>
   <p>
-    You don’t have to be a C++ guru (or even know what that means!) to get involved.
+    You don’t have to be a C++ guru (or even know what that means!) to get involved.<br>
     <b>You just have to love the Web.</b>
   </p>
 </section>

apps/mozorg/templates/mozorg/sandstone.html

@@ -17,6 +17,7 @@
   <ul>
     <li><a href="#grid">Less framework</a></li>
     <li><a href="#tabzilla-demo">Tabzilla</a></li>
+    <li><a href="#typefaces">Typefaces</a></li>
     <li><a href="#buttons">Buttons</a></li>
   </ul>
 </nav>
@@ -112,7 +113,7 @@
 
   </div>
 
-  <div class="span2 css-code small">
+  <div class="span2 css-code">
     <h4>LESS mixins</h4>
 
     <p><code>
@@ -140,38 +141,6 @@
 </div>
 </section>
 
-<section id="backgrounds" class="background container">
-<div class="row">
-
-  <div class="span3">
-
-    <h2 class="mozilla-red">Backgrounds</h2>
-
-    <p>Stumptown marfa bicycle rights cray. Occupy synth seitan magna, banh mi ut pour-over exercitation tofu keytar officia artisan VHS tempor qui. Accusamus excepteur banksy, dreamcatcher occupy stumptown eu before they sold out artisan small batch raw denim. Viral nulla four loko, nisi ad 3 wolf moon dolor seitan leggings PBR beard thundercats. Polaroid pitchfork brunch labore, aliqua mollit duis. </p><a class="top" href="#top">back to top</a>
-
-  </div>
-
-  <div class="span2 css-code bg small">
-    <h4 class="pad">Background CSS</h4>
-    <p class="pad"><code>
-      background: rgb(245,241,232) url('background-gradient.png') repeat-x top center;
-    </code></p>
-  </div>
-
-  <div class="span5">
-    <h4>Background Example</h4>
-    <p>
-
-      <a class="button" href="">Download the default backgrounds</a>
-      <a class="button" href="">Download the background PSD</a>
-
-    </p>
-
-  </div>
-
-</div>
-</section>
-
 <section id="buttons" class="container">
 <div class="row">
 
@@ -188,7 +157,7 @@
 
   </div>
 
-  <div class="span2 css-code small">
+  <div class="span2 css-code">
     <h4>Button CSS</h4>
     <p><code>
       .button<br>
@@ -197,14 +166,6 @@
     <p><code>
       .button-white
     </code></p>
-    <p><code>
-      &lt;a class="button"&gt;<br>
-        Primary<br>
-        &lt;small&gt;<br>
-          Optional<br>
-        &lt;/small&gt;<br>
-      &lt;/a&gt;
-    </code></p>
   </div>
 
   <div class="span5">
@@ -213,9 +174,6 @@
       <a class="button" href="">Primary Button</a>
       <a class="button-blue" href="">Primary Button</a>
     </p>
-    <p>
-      <a class="button" href="">Button <small>With secondary text</small></a>
-    </p>
     <p>
       <a class="button-white" href="">Secondary Button</a>
     </p>

media/css/b2g.less

@@ -1,5 +1,4 @@
-@import "sandstone/variables.less";
-@import "sandstone/mixins.less";
+@import "sandstone/sandstone.less";
 
 h1#main-feature {
     text-align: center;

media/css/contribute.less

@@ -35,7 +35,6 @@
         margin: @baseLine;
         text-align: center;
         b {
-            white-space: nowrap;
             font-weight: 400;
         }
     }

media/css/sandstone/buttons.less

@@ -1,4 +1,6 @@
-.button {
+.button,
+.button:link,
+.button:visited {
     .inline-block;
     .border-radius;
     .box-shadow(@buttonShadow);

media/css/sandstone/sandstone.less

@@ -89,7 +89,7 @@ h6 {
 .small,
 small {
     font-size: 12px;
-    line-height: 100%;
+    line-height: 16px;
 }
 
 hgroup {
@@ -122,6 +122,11 @@ dl dd {
     margin-bottom: @baseLine * 2;
 }
 
+code {
+    color: @textColorTertiary;
+    font-size: 14px;
+}
+
 .center {
     text-align: center;
 }
@@ -190,7 +195,7 @@ input[type=text]:focus {
 #masthead {
 
     h1 {
-        padding: @baseLine * 3  0  @baseLine * 1.5  0;
+        padding: (@baseLine * 2)  0  (@baseLine * 1.5)  0;
         margin: 0;
     }
 
@@ -245,8 +250,8 @@ input[type=text]:focus {
 
         a,
         span {
-            margin-right: 1em;
-            margin-left: 1em;
+            margin-right: .5em;
+            margin-left: .5em;
         }
 
         a:first-child,
@@ -497,11 +502,8 @@ px      68    160    252    */
 
     }
 
-    .huge {
-        font-size: 108px;
-        letter-spacing: -4px;
-    }
-
+    .huge,
+    .huge h1,
     .large,
     .large h1 {
         font-size: 48px;
@@ -532,6 +534,30 @@ px      68    160    252    */
         font-size: 14px;
     }
 
+
+    nav.menu-bar {
+        text-align: inherit;
+        line-height: 100%;
+
+        ul {
+            padding-top: @baseLine / 2;
+            padding-bottom: @baseLine / 2;
+            li {
+                display: block;
+                a {
+                    padding: @baseLine / 2;
+                    border: 0;
+                    display: block;
+                    border-top: 1px dotted @borderColor;
+                    border-left: 0;
+                }
+                &:first-child a {
+                    border-top: 0;
+                }
+            }
+        }
+    }
+
 }