editorial brand landing header changes (bug 1139491)

mozilla · Mar 12, 2015 · a32f6d0 · a32f6d0
1 parent 871f11a
commit a32f6d0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git a/src/media/css/feed/brands.styl b/src/media/css/feed/brands.styl
@@ -19,7 +19,7 @@
     position: relative;
     right: 10px;
     text-align: center;
-    width: unquote('calc(100% + 20px)');
+    width: width-calc('100% + 20px');
 
     &:hover {
         text-decoration: none;
@@ -28,13 +28,14 @@
         color: $white;
         font-size: 20px;
         font-weight: 300;
-        margin-top: 75px;
+        margin-top: 80px;
         margin-bottom: 10px;
     }
     h3:before {
-        background-color: rgba($greyscale-light-grey, .8);
-        left: unquote('calc(50% - 30px)');
+        border-radius: 50%;
+        border: 2px solid $white;
         height: 60px;
+        left: width-calc('50% - 30px');
         top: 15px;
         width: 60px;
     }
@@ -59,7 +60,9 @@
     width: 64px;
 
     h3:before {
-        left: unquote('calc(50% - 32px)');
+        border-radius: 50%;
+        border: 2px solid $white;
+        left: width-calc('50% - 32px');
         height: 64px;
         width: 64px;
     }

diff --git a/src/media/css/feed/colors.styl b/src/media/css/feed/colors.styl
@@ -12,6 +12,26 @@ feed_background_color($color) {
     }
 }
 
+brand_background_colors($color) {
+    .brand-landing-icon {
+        background-color: $color;
+    }
+    .brand-landing-curve {
+        background-color: rgba($color, 0.75);
+
+        // Heavyhanded mask for the curve bottom padding.
+        &:after {
+            background-color: rgba($color, 0.55);
+            bottom: -45px;
+            content: "";
+            height: 45px;
+            left: 0;
+            position: absolute;
+            width: 100%;
+        }
+    }
+}
+
 [data-feed-landing-color],
 [data-shelf-landing-carrier] {
     h1,
@@ -20,27 +40,35 @@ feed_background_color($color) {
     }
 }
 [data-feed-landing-color="amber"] {
+    brand_background_colors($color-collection--amber);
     collection_background_colors($color-collection--amber);
 }
 [data-feed-landing-color="garnet"] {
+    brand_background_colors($color-collection--garnet);
     collection_background_colors($color-collection--garnet);
 }
 [data-feed-landing-color="topaz"] {
+    brand_background_colors($color-collection--topaz);
     collection_background_colors($color-collection--topaz);
 }
 [data-feed-landing-color="amethyst"] {
+    brand_background_colors($color-collection--amethyst);
     collection_background_colors($color-collection--amethyst);
 }
 [data-feed-landing-color="sapphire"] {
+    brand_background_colors($color-collection--sapphire);
     collection_background_colors($color-collection--sapphire);
 }
 [data-feed-landing-color="emerald"] {
+    brand_background_colors($color-collection--emerald);
     collection_background_colors($color-collection--emerald);
 }
 [data-feed-landing-color="ruby"] {
+    brand_background_colors($color-collection--ruby);
     collection_background_colors($color-collection--ruby);
 }
 [data-feed-landing-color="aquamarine"] {
+    brand_background_colors($color-collection--aquamarine);
     collection_background_colors($color-collection--aquamarine);
 }
 

diff --git a/src/templates/_macros/feed_item.html b/src/templates/_macros/feed_item.html
@@ -211,7 +211,8 @@ <h3>{{ coll.name|translate(coll)|safe }}</h3>
           {% endfor %}
         </ul>
       {% endif %}
-      <div class="feed-curve feed-landing-curve">
+      <div class="feed-curve feed-landing-curve
+                  {{ 'brand-landing-curve' if feed_item.isBrand }}">
         {% if feed_item.isBrand %}
           <div class="brand-landing-header">
             <div class="brand-landing-icon" data-brand-type="{{ feed_item.type }}">