[Bug 815180] Use the right Firefox download button

This button looks like the one in the Sandstone style guide. Which doesn't provide code.
mythmon · Nov 30, 2012 · 0a99b21 · 0a99b21
1 parent 6d4fa53
commit 0a99b21
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 42 deletions.
diff --git a/apps/products/templates/products/product.html b/apps/products/templates/products/product.html
@@ -17,17 +17,17 @@ <h1 class="product-title cf">
     </h1>
 
     {% if product.slug == 'firefox' %}
-      <div class="download-button">
-        <a href="http://www.mozilla.org/firefox#desktop" class="button">
-          <h2>{{ _('Firefox') }}</h2>
-          {# L10n: The <br/> is wholely visual. It would be good to include a <br/> about half way through the translation. #}
-          <span>{{ _('Free<br/> Download') }}</span>
-          <i class="down-arrow"></i>
+      <div class="download-firefox">
+        <a href="http://www.mozilla.org/firefox#desktop" class="download-button">
+          <span class="download-content">
+            <span class="download-title">{{ _('Firefox') }}</span>
+            {{ _('Free Download') }}
+          </download>
         </a>
         <ul class="info">
-          <li><a href="http://www.mozilla.org/legal/privacy/firefox">Privacy Policy</a></li>
-          <li><a href="http://www.mozilla.org/en-US/firefox/notes">What's New</a></li>
           <li><a href="http://www.mozilla.org/firefox/all.html">Systems and Languages</a></li>
+          <li><a href="http://www.mozilla.org/en-US/firefox/notes">What's New</a></li>
+          <li><a href="http://www.mozilla.org/legal/privacy/firefox">Privacy</a></li>
         </ul>
       </div>
     {% endif %}

diff --git a/media/img/icons-sprite.png b/media/img/icons-sprite.png
diff --git a/media/img/icons/firefox-small.png b/media/img/icons/firefox-small.png
diff --git a/media/less/products.less b/media/less/products.less
@@ -10,45 +10,49 @@
   margin: 0 8px 0 0;
 }
 
-.download-button {
+.download-firefox {
   position: absolute;
   top: 0;
   right: 0;
+  font-family: 'Open Sans', sans-serif;
 
-  a.button {
-    position: relative;
-    top: 0;
+  .download-button {
+    height: 48px;
     display: block;
     .gradient(#81BC2E, #81BC2E, #659324);
-    color: #fff;
-    padding: 3px 15px;
-    transition: top 0s;
-    transition: all 0.5s;
     .border-radius(5px);
     .box-shadow(~"0 2px 0 0 rgba(0, 0, 0, 0.1), 0 -2px 0 0 rgba(0, 0, 0, 0.3) inset");
+    line-height: 40px;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    transition: top 0s;
+    transition: all 0.5s;
 
-    h2 {
-      display: inline;
-      font-family: 'MetaMedium', Arial, Helvetica, sans-serif;
-      font-size: 2.5em;
-    }
-
-    span {
-      display: inline-block;
-      font-size: 0.8em;
-      color: #DDD;
-      margin-left: 15px;
-      line-height: 1.1em;
-    }
-
-    i.down-arrow {
-      display: inline-block;
-      width: 32px;
-      height: 32px;
-      background: url('../img/icons-sprite.png') -42px -1897px no-repeat;
-      position: absolute;
-      top: 6px;
-      right: 12px;
+    .download-content {
+      display: block;
+      background: url('../img/icons/firefox-small.png') left top no-repeat;
+      height: 52px;
+      margin-left: -25px;
+      padding: 0 20px 0 65px;
+      color: #B5E786;
+
+      .download-title {
+        display: inline-block;
+        font-family: georgia,"Bitstream Charter",serif;
+        font-size: 24px;
+        position: relative;
+        padding-right: 25px;
+        color: #fff;
+
+        &:after {
+          width: 32px;
+          height: 32px;
+          content: "";
+          background: url('../img/icons-sprite.png') -42px -1897px no-repeat;
+          position: absolute;
+          top: 5px;
+          right: -6px;
+        }
+      }
     }
 
     &:hover {
@@ -57,24 +61,27 @@
     }
 
     &:active {
-      top: 1px;
       .box-shadow(~"0 2px 0 0 rgba(0, 0, 0, 0.1), 0 -1px 0 0 rgba(0, 0, 0, 0.3) inset, 0 12px 24px 2px #83C822 inset");
     }
   }
 
   ul.info {
     font-size: 0.7em;
-    margin: 0;
+    margin: 4px 0 0 0;
     padding: 0;
-    font-family: 'Moz', Arial, Helvetica, sans-serif;
+    text-align: right;
 
     li {
       list-style: none;
       display: inline;
 
+      a {
+        color: #999;
+      }
+
       &:not(:first-child):before {
         content: "|";
-        color: #AAA;
+        color: #999;
         padding-right: 3px;
       }
     }