Add three flavors of Sandstone visual style

apps/b2g/templates/b2g/about.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "sand.html" %}
 
 {% block page_title %}About the Boot to Gecko Project{% endblock %}
 {% block body_id %}b2g-about{% endblock %}
@@ -44,7 +44,7 @@
 
 </article>
 
-<div id="sidebar" class="span2 offset2">
+<div class="sidebar span2 offset2">
 
   <nav>
     <ul>

apps/b2g/templates/b2g/b2g.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "sand.html" %}
 
 {% block page_title %}Boot to Gecko Project{% endblock %}
 {% block body_id %}b2g{% endblock %}

apps/b2g/templates/b2g/faq.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "sand.html" %}
 
 {% block page_title %}Boot to Gecko Project FAQ{% endblock %}
 {% block body_id %}b2g-developer-faq{% endblock %}
@@ -123,7 +123,7 @@
 
 </article>
 
-<div id="sidebar" class="span2 offset2">
+<div class="sidebar span2 offset2">
 
   <nav>
     <ul>

apps/collusion/templates/collusion/collusion.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "sand.html" %}
 
 {% block page_title %}Collusion{% endblock %}
 {% block body_id %}collusion{% endblock %}

apps/collusion/templates/collusion/demo.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "sand.html" %}
 
 {% block page_title %}Collusion Demo{% endblock %}
 {% block body_id %}collusion-demo{% endblock %}

apps/marketplace/templates/marketplace/marketplace.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "sand.html" %}
 
 {% block page_title_prefix %}{% endblock %}
 {% block page_title %}Mozilla Marketplace{% endblock %}

apps/mozorg/templates/mozorg/contribute.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "sand.html" %}
 
 {% block page_title %}Get Involved: Volunteer Opportunities at Mozilla{% endblock %}
 {% block body_id %}contribute{% endblock %}

apps/mozorg/templates/mozorg/firefox/base.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
 
+{% block body_class %}sky{% endblock %}
+
 {% block page_title_prefix %}Mozilla Firefox Web Browser — {% endblock %}
 
 {% block site_css %}

apps/mozorg/templates/mozorg/sandstone.html

@@ -2,6 +2,8 @@
 
 {% block page_title %}Sandstone - Bedrock’s Layer of CSS Love{% endblock %}
 
+{% block body_class %}stone {{ super() }}{% endblock %}
+
 {% block site_css %}
   {{ css('sandstone-guide') }}
 {% endblock %}
@@ -15,6 +17,7 @@
 
 <nav class="menu-bar billboard">
   <ul>
+    <li><a href="#flavors">Flavors</a></li>
     <li><a href="#grid">Less framework</a></li>
     <li><a href="#tabzilla-demo">Tabzilla</a></li>
     <li><a href="#typefaces">Typefaces</a></li>
@@ -22,6 +25,47 @@
   </ul>
 </nav>
 
+<section id="flavors" class="container divider">
+<div class="row">
+
+  <div class="span3">
+
+    <hgroup>
+      <h2 class="mozilla-red">Flavors</h2>
+      <h4 class="mozilla-red">Sand, Stone, &amp; Sky</h4>
+    </hgroup>
+
+    <p>The sandstone visual style offers a light set of guidelines for page designs, but is not a set of absolute rules. A neutral flavor is provided by default, along with more distinct flavors for Mozilla pages and Firefox pages. Other sites and pages can be modified with their own distinct flavor.</p>
+    <a class="top" href="#top">back to top</a>
+
+  </div>
+
+  <div class="span2 css-code small">
+    <h4>Try them out:</h4>
+    <ul id="theme-switcher">
+      <li id="theme-stone"><a href="#" class="button-white"><span></span>Default <b>“stone”</b></a></li>
+      <li id="theme-sand"><a href="#" class="button-white"><span></span>Mozilla <b>“sand”</b></a></li>
+      <li id="theme-sky"><a href="#" class="button-white"><span></span>Firefox <b>“sky”</b></a></li>
+    </ul>
+  </div>
+
+  <div class="span5">
+
+    <h4>On the Menu</h4>
+
+    <ul>
+      <li>“Stone” flavor is a neutral grey.</li>
+      <li>“Sand” flavor has a warm and distinctive look, intended for core mozilla.org pages.</li>
+      <li>“Sky” flavor is a bright blue for Firefox pages.</li>
+      <li>Other sites can cook up their own flavor where appropriate.</li>
+    </ul>
+
+
+  </div>
+
+</div>
+</section>
+
 <section id="grid" class="container divider">
 <div class="row">
 
@@ -186,3 +230,34 @@
 
 
 {% endblock %}
+
+{% block js %}
+<script>
+  $(document).ready(function() {
+
+    $("#theme-stone").click(function() {
+      $("body").addClass('stone');
+      $("body").removeClass('sand');
+      $("body").removeClass('sky');
+      $("#masthead > h1 > img").attr('src','/media/img/sandstone/header-mozilla-stone.png');
+      return false;
+    });
+
+    $("#theme-sand").click(function() {
+      $("body").addClass('sand');
+      $("body").removeClass('stone');
+      $("body").removeClass('sky');
+      $("#masthead > h1 > img").attr('src','/media/img/sandstone/header-mozilla-sand.png');
+      return false;
+    });
+
+    $("#theme-sky").click(function() {
+      $("body").addClass('sky');
+      $("body").removeClass('stone');
+      $("body").removeClass('sand');
+      $("#masthead > h1 > img").attr('src','/media/img/sandstone/header-mozilla-stone.png');
+      return false;
+    });
+  });
+</script>
+{% endblock %}

apps/persona/templates/persona/about.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "sand.html" %}
 
 {% block page_title_prefix %}{% endblock %}
 {% block page_title %}About Mozilla Persona{% endblock %}

apps/persona/templates/persona/developer-faq.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "sand.html" %}
 
 {% block page_title_prefix %}{% endblock %}
 {% block page_title %}Mozilla Persona Developer FAQ{% endblock %}

apps/persona/templates/persona/persona.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "sand.html" %}
 
 {% block page_title_prefix %}{% endblock %}
 {% block page_title %}Mozilla Persona — an identity system for the web{% endblock %}

apps/persona/templates/persona/privacy-policy.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "sand.html" %}
 
 {% block page_title_prefix %}{% endblock %}
 {% block page_title %}Mozilla Persona Terms of Service{% endblock %}

apps/persona/templates/persona/terms-of-service.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "sand.html" %}
 
 {% block page_title_prefix %}{% endblock %}
 {% block page_title %}Mozilla Persona Terms of Service{% endblock %}

media/css/firefox/template.less

@@ -1,34 +1,16 @@
 @import "../sandstone/sandstone.less";
 @import "menu.less";
 
-
-
 #masthead h1 {
     padding: @baseLine 0;
 }
 
-#wrapper {
-    background-color: #eee;
-    background-image: url(/media/img/firefox/template/bg.png);
-}
-
 #main-feature .download-button-small {
     position: absolute;
     top: 0;
     right: 48px;
 }
 
-a,
-a:link,
-a:visited {
-    color: @linkBlue;
-}
-
-a:hover,
-a:active {
-    color: darken(@linkBlue, 10%);
-}
-
 .stacked h1 {
     font-size: 32px;
     letter-spacing: -1px;

media/css/sandstone-guide.less

@@ -4,3 +4,47 @@
     list-style-type: none;
     margin: 0 0  @baseLine / 3  0;
 }
+
+#theme-switcher {
+    margin: 0;
+    li {
+        margin: 0 0  @baseLine / 3  0;
+        list-style-type: none;
+        a {
+            display: block;
+            padding: 6px;
+            .open-sans;
+            font-size: 11px;
+            line-height: 16px;
+            text-align: center;
+            text-transform: uppercase;
+            height: auto;
+            b {
+                font-weight: normal;
+                text-transform: none;
+            }
+            span {
+                display: block;
+                background: url(/media/img/sandstone/bg-stone.png);
+                height: 48px;
+                margin-bottom: 6px;
+            }
+        }
+    }
+    li#theme-sand a span {
+        background: url(/media/img/sandstone/bg-sand.png);
+    }
+    li#theme-sky a span {
+        background: url(/media/img/sandstone/bg-sky.png);
+    }
+}
+
+.stone #theme-switcher #theme-stone .button-white,
+.sand  #theme-switcher #theme-sand  .button-white,
+.sky   #theme-switcher #theme-sky   .button-white {
+    background: #d7d5d5;
+    border-color: #bcb9b9;
+    text-shadow: 0 1px #fff;
+    @shadow: 0 1px 1px rgba(255,255,255,0.75), 0 1px 3px rgba(0,0,0,0.1) inset;
+    .box-shadow(@shadow);
+}

media/css/sandstone/buttons.less

@@ -35,7 +35,9 @@
     }
 }
 
-.button-blue {
+.button-blue,
+.button-blue:link,
+.button-blue:visited {
     .button;
     background-color: @buttonBlue;
     #gradient > .vertical(@buttonBlue, @buttonBlueDark);
@@ -45,7 +47,9 @@
     }
 }
 
-.button-white {
+.button-white,
+.button-white:link,
+.button-white:visited {
     .button;
     border: 1px solid #d0d0d0;
     background: #fff;
@@ -66,6 +70,14 @@
     }
 }
 
+.button-white.selected {
+    background: #d7d5d5;
+    border-color: #bcb9b9;
+    text-shadow: 0 1px #fff;
+    @shadow: 0 1px 1px rgba(255,255,255,0.75), 0 1px 3px rgba(0,0,0,0.1) inset;
+    .box-shadow(@shadow);
+}
+
 .button,
 .button-blue,
 .button-white {

media/css/sandstone/sandstone.less

@@ -21,19 +21,49 @@ body {
 }
 
 #wrapper {
-    background: #f5f1e8 url(/media/img/sandstone/background-gradient.png) 0 0 repeat-x;
+    background: #f9f9f9 url(/media/img/sandstone/bg-stone.png) 0 0 repeat-x;
 }
 
 a {
-    color: @linkRed;
+    color: @linkBlue;
     text-decoration: none;
     &:hover,
     &:active {
-        color: darken(@linkRed, 10%);
+        color: darken(@linkBlue, 10%);
         text-decoration: underline;
     }
 }
 
+.sand {
+    #wrapper {
+        background-color: #f5f1e8;
+        background-image: url(/media/img/sandstone/bg-sand.png);
+    }
+    a {
+        color: @linkRed;
+        &:hover,
+        &:active {
+            color: darken(@linkRed, 10%);
+        }
+    }
+}
+
+.sky {
+    #wrapper {
+        background-color: #eee;
+        background-image: url(/media/img/sandstone/bg-sky.png);
+    }
+
+    a {
+        color: @linkSkyBlue;
+        &:hover,
+        &:active {
+            color: darken(@linkSkyBlue, 10%);
+        }
+    }
+
+}
+
 h1, h2, h3, h4, h5, h6, .huge, .large {
     .open-sans-light;
     display: block;

media/css/sandstone/variables.less

@@ -3,8 +3,9 @@
 @textColorTertiary: #666;
 @textColorLight:     #bbb;
 
-@linkRed:  rgb(175,50,50);
-@linkBlue: rgb(103,167,208);
+@linkRed:     rgb(175,50,50);
+@linkBlue:    rgb(41,131,200);
+@linkSkyBlue: rgb(103,167,208);
 
 @buttonGreen: #81bc2e;
 @buttonGreenDark: darken(@buttonGreen, 10%);

templates/base.html

@@ -46,7 +46,7 @@
             {% endblock %}
 
             {% block site_header_logo %}
-            <h1><img src="/media/img/sandstone/header-mozilla.png" alt="mozilla"></h1>
+            <h1><img src="/media/img/sandstone/header-mozilla-stone.png" alt="mozilla"></h1>
             {% endblock %}
 
             {% block breadcrumbs %}{% endblock %}

templates/sand.html

@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+
+{% block body_class %}sand{% endblock %}
+
+{% block site_header_logo %}
+<h1><img src="/media/img/sandstone/header-mozilla-sand.png" alt="mozilla"></h1>
+{% endblock %}