From 84a6955cd109d5f8ac552514e8e28450bc45beba Mon Sep 17 00:00:00 2001
From: "Matthew Riley MacPherson (tofumatt)" <hi@tofumatt.com>
Date: Wed, 24 Jan 2018 19:13:37 +0000
Subject: [PATCH] fix: Reduce homepage CSS (fix #4211)

---
 src/amo/components/HomeHeroBanner/index.js    |   9 -
 src/amo/components/HomeHeroBanner/styles.scss | 333 ++----------------
 2 files changed, 27 insertions(+), 315 deletions(-)

diff --git a/src/amo/components/HomeHeroBanner/index.js b/src/amo/components/HomeHeroBanner/index.js
index f0d14e1c60..b132190543 100644
--- a/src/amo/components/HomeHeroBanner/index.js
+++ b/src/amo/components/HomeHeroBanner/index.js
@@ -23,7 +23,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
         <HeroSection
           key="wikipedia-context-menu-search"
           linkTo="/addon/wikipedia-context-menu-search/"
-          styleName="Home-wikipedia-context-menu-search"
         >
           <h3>{i18n.gettext('Wikipedia Context Menu Search')}</h3>
 
@@ -36,7 +35,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
         <HeroSection
           key="momentumdash"
           linkTo="/addon/momentumdash/"
-          styleName="Home-momentumdash"
         >
           <h3>{i18n.gettext('Momentum')}</h3>
 
@@ -50,7 +48,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
         <HeroSection
           key="undo-close-tab-button"
           linkTo="/addon/undo-close-tab-button/"
-          styleName="Home-undo-close-tab-button"
         >
           <h3>{i18n.gettext('Undo Close Tab Button')}</h3>
 
@@ -61,7 +58,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
         <HeroSection
           key="grammarly"
           linkTo="/addon/grammarly-1/"
-          styleName="Home-grammarly"
         >
           <h3>{i18n.gettext('Grammarly')}</h3>
           <p>
@@ -74,7 +70,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
         <HeroSection
           key="facebook-filter"
           linkTo="/addon/facebook-filter/"
-          styleName="Home-facebook-filter"
         >
           <h3>{i18n.gettext('Facebook Filter')}</h3>
           <p>
@@ -87,7 +82,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
         <HeroSection
           key="gesturefy"
           linkTo="/addon/gesturefy/"
-          styleName="Home-gesturefy"
         >
           <h3>{i18n.gettext('Gesturefy')}</h3>
 
@@ -98,7 +92,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
         <HeroSection
           key="lastpass"
           linkTo="/addon/lastpass-password-manager/"
-          styleName="Home-lastpass"
         >
           <h3>{i18n.gettext('LastPass Password Manager')}</h3>
 
@@ -112,7 +105,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
         <HeroSection
           key="multi-account-containers"
           linkTo="/addon/multi-account-containers/"
-          styleName="Home-multi-account-containers"
         >
           <h3>{i18n.gettext('Multi-Account Containers')}</h3>
 
@@ -126,7 +118,6 @@ export class HomeHeroBannerBase extends React.Component<Props> {
         <HeroSection
           key="tree-style-tab"
           linkTo="/addon/tree-style-tab/"
-          styleName="Home-tree-style-tab"
         >
           <h3>{i18n.gettext('Tree Style Tab')}</h3>
 
diff --git a/src/amo/components/HomeHeroBanner/styles.scss b/src/amo/components/HomeHeroBanner/styles.scss
index 58e98eed18..fdd2d6caa0 100644
--- a/src/amo/components/HomeHeroBanner/styles.scss
+++ b/src/amo/components/HomeHeroBanner/styles.scss
@@ -1,25 +1,12 @@
 @import "~core/css/inc/vars";
 
 /* stylelint-disable indentation */
-$colors: ("blue", #228ae6, #1b6ec2)
-         ("cyan", #15aabf, #1098ad)
-         ("grape", #be4bdb, #ae3ec9)
-         ("indigo", #4c6ef5, #3b5bdb)
-         ("pink", #e64980, #d6336c)
-         ("violet", #7950f2, #6741d9)
-         ("teal", #12b886, #0ca678)
-         ("grape", #be4bdb, #ae3ec9)
-         ("cyan", #15aabf, #1098ad)
-         ("blue", #228ae6, #1b6ec2)
-         ("indigo", #4c6ef5, #3b5bdb)
-         ("pink", #e64980, #d6336c)
-         ("violet", #7950f2, #6741d9)
-         ("cyan", #15aabf, #1098ad)
-         ("blue", #228ae6, #1b6ec2)
-         ("teal", #12b886, #0ca678)
-         ("indigo", #4c6ef5, #3b5bdb)
-         ("pink", #e64980, #d6336c)
-         ("violet", #7950f2, #6741d9);
+$colors-first-item:  ("violet", #7950f2, #6741d9)
+                     ("grape", #be4bdb, #ae3ec9);
+$colors-second-item: ("indigo", #4c6ef5, #3b5bdb)
+                     ("blue", #228ae6, #1b6ec2);
+$colors-third-item:  ("cyan", #15aabf, #1098ad)
+                     ("teal", #12b886, #0ca678);
 
 /* stylelint-enable indentation */
 
@@ -34,16 +21,6 @@ $colors: ("blue", #228ae6, #1b6ec2)
   @return $string;
 }
 
-@mixin four-point-stars($foreground, $background) {
-  background-color: $background;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='#{encodeColor($foreground)}' fill-opacity='0.4'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E");
-}
-
-@mixin wiggle($foreground, $background) {
-  background-color: $background;
-  background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='#{encodeColor($foreground)}' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
 @mixin bubbles($foreground, $background) {
   background-color: $background;
   background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='#{encodeColor($foreground)}' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
@@ -59,11 +36,6 @@ $colors: ("blue", #228ae6, #1b6ec2)
   background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10h10v10H0V10zM10 0h10v10H10V0z' fill='#{encodeColor($foreground)}' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
 }
 
-@mixin tic-tac-toe($foreground, $background) {
-  background-color: $background;
-  background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='#{encodeColor($foreground)}' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
-}
-
 @mixin hover($background) {
   transition: background-color $transition-short ease-in-out;
 
@@ -72,285 +44,34 @@ $colors: ("blue", #228ae6, #1b6ec2)
   }
 }
 
-// Generate CSS classes depending on the order (indexes) of the Hero sections.
-@for $x from 0 through 9 {
-  @for $y from 0 through 9 {
-    @for $z from 0 through 9 {
-      // It is not possible to have the same values for two (or more) different
-      // indexes.
-      @if ($x != $y and $y != $z and $z != $x) {
-        .Hero-order-#{$x}-#{$y}-#{$z} {
-          .HeroSection-styleName--Home-wikipedia-context-menu-search {
-            $color: nth($colors, $y + 1);
-            $bg-color: nth($color, 2);
-            $fg-color: nth($color, 3);
+.HeroSection {
+  &:nth-child(1) {
+    $color: nth($colors-first-item, random(length($colors-first-item)));
+    $bg-color: nth($color, 2);
+    $fg-color: nth($color, 3);
 
-            @include hover($bg-color);
+    @include hover($bg-color);
 
-            @if $x == 0 {
-              @include bubbles($fg-color, $bg-color);
-            } @else if $x == 1 {
-              @include floor-tile($fg-color, $bg-color);
-            } @else if $x == 2 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 3 {
-              @include polka-dots($fg-color, $bg-color);
-            } @else if $x == 4 {
-              @include bubbles($fg-color, $bg-color);
-            } @else if $x == 5 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 6 {
-              @include wiggle($fg-color, $bg-color);
-            } @else if $x == 7 {
-              @include floor-tile($fg-color, $bg-color);
-            } @else if $x == 8 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 9 {
-              @include four-point-stars($fg-color, $bg-color);
-            }
-          }
+    @include bubbles($fg-color, $bg-color);
+  }
 
-          .HeroSection-styleName--Home-momentumdash {
-            $color: nth($colors, $y + 2);
-            $bg-color: nth($color, 2);
-            $fg-color: nth($color, 3);
+  &:nth-child(2) {
+    $color: nth($colors-second-item, random(length($colors-second-item)));
+    $bg-color: nth($color, 2);
+    $fg-color: nth($color, 3);
 
-            @include hover($bg-color);
+    @include hover($bg-color);
 
-            @if $x == 0 {
-              @include tic-tac-toe($fg-color, $bg-color);
-            } @else if $x == 1 {
-              @include wiggle($fg-color, $bg-color);
-            } @else if $x == 2 {
-              @include bubbles($fg-color, $bg-color);
-            } @else if $x == 3 {
-              @include floor-tile($fg-color, $bg-color);
-            } @else if $x == 4 {
-              @include polka-dots($fg-color, $bg-color);
-            } @else if $x == 5 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 6 {
-              @include bubbles($fg-color, $bg-color);
-            } @else if $x == 7 {
-              @include wiggle($fg-color, $bg-color);
-            } @else if $x == 8 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 9 {
-              @include floor-tile($fg-color, $bg-color);
-            }
-          }
+    @include polka-dots($fg-color, $bg-color);
+  }
 
-          .HeroSection-styleName--Home-undo-close-tab-button {
-            $color: nth($colors, $y + 3);
-            $bg-color: nth($color, 2);
-            $fg-color: nth($color, 3);
+  &:nth-child(3) {
+    $color: nth($colors-third-item, random(length($colors-third-item)));
+    $bg-color: nth($color, 2);
+    $fg-color: nth($color, 3);
 
-            @include hover($bg-color);
+    @include hover($bg-color);
 
-            @if $x == 0 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 1 {
-              @include polka-dots($fg-color, $bg-color);
-            } @else if $x == 2 {
-              @include tic-tac-toe($fg-color, $bg-color);
-            } @else if $x == 3 {
-              @include wiggle($fg-color, $bg-color);
-            } @else if $x == 4 {
-              @include bubbles($fg-color, $bg-color);
-            } @else if $x == 5 {
-              @include polka-dots($fg-color, $bg-color);
-            } @else if $x == 6 {
-              @include tic-tac-toe($fg-color, $bg-color);
-            } @else if $x == 7 {
-              @include floor-tile($fg-color, $bg-color);
-            } @else if $x == 8 {
-              @include floor-tile($fg-color, $bg-color);
-            } @else if $x == 9 {
-              @include wiggle($fg-color, $bg-color);
-            }
-          }
-
-          .HeroSection-styleName--Home-grammarly {
-            $color: nth($colors, $y + 4);
-            $bg-color: nth($color, 2);
-            $fg-color: nth($color, 3);
-
-            @include hover($bg-color);
-
-            @if $x == 0 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 1 {
-              @include polka-dots($fg-color, $bg-color);
-            } @else if $x == 2 {
-              @include tic-tac-toe($fg-color, $bg-color);
-            } @else if $x == 3 {
-              @include wiggle($fg-color, $bg-color);
-            } @else if $x == 4 {
-              @include tic-tac-toe($fg-color, $bg-color);
-            } @else if $x == 5 {
-              @include bubbles($fg-color, $bg-color);
-            } @else if $x == 6 {
-              @include floor-tile($fg-color, $bg-color);
-            } @else if $x == 7 {
-              @include tic-tac-toe($fg-color, $bg-color);
-            } @else if $x == 8 {
-              @include polka-dots($fg-color, $bg-color);
-            } @else if $x == 9 {
-              @include bubbles($fg-color, $bg-color);
-            }
-          }
-
-          .HeroSection-styleName--Home-facebook-filter {
-            $color: nth($colors, $y + 5);
-            $bg-color: nth($color, 2);
-            $fg-color: nth($color, 3);
-
-            @include hover($bg-color);
-
-            @if $x == 0 {
-              @include floor-tile($fg-color, $bg-color);
-            } @else if $x == 1 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 2 {
-              @include polka-dots($fg-color, $bg-color);
-            } @else if $x == 3 {
-              @include tic-tac-toe($fg-color, $bg-color);
-            } @else if $x == 4 {
-              @include floor-tile($fg-color, $bg-color);
-            } @else if $x == 5 {
-              @include wiggle($fg-color, $bg-color);
-            } @else if $x == 6 {
-              @include bubbles($fg-color, $bg-color);
-            } @else if $x == 7 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 8 {
-              @include bubbles($fg-color, $bg-color);
-            } @else if $x == 9 {
-              @include polka-dots($fg-color, $bg-color);
-            }
-          }
-
-          .HeroSection-styleName--Home-gesturefy {
-            $color: nth($colors, $y + 6);
-            $bg-color: nth($color, 2);
-            $fg-color: nth($color, 3);
-
-            @include hover($bg-color);
-
-            @if $x == 0 {
-              @include floor-tile($fg-color, $bg-color);
-            } @else if $x == 1 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 2 {
-              @include polka-dots($fg-color, $bg-color);
-            } @else if $x == 3 {
-              @include tic-tac-toe($fg-color, $bg-color);
-            } @else if $x == 4 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 5 {
-              @include bubbles($fg-color, $bg-color);
-            } @else if $x == 6 {
-              @include polka-dots($fg-color, $bg-color);
-            } @else if $x == 7 {
-              @include tic-tac-toe($fg-color, $bg-color);
-            } @else if $x == 8 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 9 {
-              @include bubbles($fg-color, $bg-color);
-            }
-          }
-
-          .HeroSection-styleName--Home-lastpass {
-            $color: nth($colors, $y + 7);
-            $bg-color: nth($color, 2);
-            $fg-color: nth($color, 3);
-
-            @include hover($bg-color);
-
-            @if $x == 0 {
-              @include floor-tile($fg-color, $bg-color);
-            } @else if $x == 1 {
-              @include tic-tac-toe($fg-color, $bg-color);
-            } @else if $x == 2 {
-              @include wiggle($fg-color, $bg-color);
-            } @else if $x == 3 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 4 {
-              @include polka-dots($fg-color, $bg-color);
-            } @else if $x == 5 {
-              @include bubbles($fg-color, $bg-color);
-            } @else if $x == 6 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 7 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 8 {
-              @include bubbles($fg-color, $bg-color);
-            } @else if $x == 9 {
-              @include wiggle($fg-color, $bg-color);
-            }
-          }
-
-          .HeroSection-styleName--Home-multi-account-containers {
-            $color: nth($colors, $y + 8);
-            $bg-color: nth($color, 2);
-            $fg-color: nth($color, 3);
-
-            @include hover($bg-color);
-
-            @if $x == 0 {
-              @include polka-dots($fg-color, $bg-color);
-            } @else if $x == 1 {
-              @include tic-tac-toe($fg-color, $bg-color);
-            } @else if $x == 2 {
-              @include wiggle($fg-color, $bg-color);
-            } @else if $x == 3 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 4 {
-              @include polka-dots($fg-color, $bg-color);
-            } @else if $x == 5 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 6 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 7 {
-              @include polka-dots($fg-color, $bg-color);
-            } @else if $x == 8 {
-              @include wiggle($fg-color, $bg-color);
-            } @else if $x == 9 {
-              @include tic-tac-toe($fg-color, $bg-color);
-            }
-          }
-
-          .HeroSection-styleName--Home-tree-style-tab {
-            $color: nth($colors, $y + 9);
-            $bg-color: nth($color, 2);
-            $fg-color: nth($color, 3);
-
-            @include hover($bg-color);
-
-            @if $x == 0 {
-              @include tic-tac-toe($fg-color, $bg-color);
-            } @else if $x == 1 {
-              @include wiggle($fg-color, $bg-color);
-            } @else if $x == 2 {
-              @include wiggle($fg-color, $bg-color);
-            } @else if $x == 3 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 4 {
-              @include four-point-stars($fg-color, $bg-color);
-            } @else if $x == 5 {
-              @include bubbles($fg-color, $bg-color);
-            } @else if $x == 6 {
-              @include polka-dots($fg-color, $bg-color);
-            } @else if $x == 7 {
-              @include wiggle($fg-color, $bg-color);
-            } @else if $x == 8 {
-              @include bubbles($fg-color, $bg-color);
-            } @else if $x == 9 {
-              @include tic-tac-toe($fg-color, $bg-color);
-            }
-          }
-        }
-      }
-    }
+    @include floor-tile($fg-color, $bg-color);
   }
 }