Gradients are back

apps/eol/templates/eol/desktop/home.html

@@ -2,49 +2,47 @@
 
 {% block content %}
 <section id="home">
-    <div id="home-wrapper">
-        <div class="container">
-            <article id="main-copy">
-                <h1>
-                    <span class="first-line">
-                        {# L10n: This is part of the headline: "Spark powered by Firefox for mobile" #}
-                        {{ _('Spark') }}
-                    </span>
-                    <span class="second-line">
-                        <img src="{{ MEDIA_URL }}img/line.png" alt="">
-                        {# L10n: This is part of the headline: "Spark powered by Firefox for mobile" #}
-                        {{ _('powered by') }}
-                        <img src="{{ MEDIA_URL }}img/line.png" alt="">
-                    </span>
-                    <span class="third-line">
-                        {# L10n: This is part of the headline: "Spark powered by Firefox for mobile" #}
-                        {{ _('Firefox for mobile') }}
-                    </span>
-                </h1>
-                <h2>
-                    {{ _('Spark is now over. Thanks to all participants!') }}
-                </h2>
-                <p>
-                    {{ _("Check out the game's results &amp; learn more about Firefox for Android.") }}
-                </p>
-                
-                <div id="ctas">
-                    <a href="#spark-results" id="spark-button">
-                        {{ _('See the complete <em>Game Results</em>') }}
-                    </a>
-                    <a id="firefox-button">
-                        {{ _('Take a look inside <em>Firefox <span>for</span> Android</em>') }}
-                    </a>
-                </div>
-            </article>
-            <div id="small-phones"></div>
-            <div id="phone-wrapper">
-                <canvas id="particles" height="380" width="350"></canvas>
-                <div id="light-ray"></div>
-                <canvas id="spark"></canvas>
-                <div id="phone">
-                    <div id="ff-preview"></div>
-                </div>
+    <div class="container">
+        <article id="main-copy">
+            <h1>
+                <span class="first-line">
+                    {# L10n: This is part of the headline: "Spark powered by Firefox for mobile" #}
+                    {{ _('Spark') }}
+                </span>
+                <span class="second-line">
+                    <img src="{{ MEDIA_URL }}img/line.png" alt="">
+                    {# L10n: This is part of the headline: "Spark powered by Firefox for mobile" #}
+                    {{ _('powered by') }}
+                    <img src="{{ MEDIA_URL }}img/line.png" alt="">
+                </span>
+                <span class="third-line">
+                    {# L10n: This is part of the headline: "Spark powered by Firefox for mobile" #}
+                    {{ _('Firefox for mobile') }}
+                </span>
+            </h1>
+            <h2>
+                {{ _('Spark is now over. Thanks to all participants!') }}
+            </h2>
+            <p>
+                {{ _("Check out the game's results &amp; learn more about Firefox for Android.") }}
+            </p>
+            
+            <div id="ctas">
+                <a href="#spark-results" id="spark-button">
+                    {{ _('See the complete <em>Game Results</em>') }}
+                </a>
+                <a id="firefox-button">
+                    {{ _('Take a look inside <em>Firefox <span>for</span> Android</em>') }}
+                </a>
+            </div>
+        </article>
+        <div id="small-phones"></div>
+        <div id="phone-wrapper">
+            <canvas id="particles" height="380" width="350"></canvas>
+            <div id="light-ray"></div>
+            <canvas id="spark"></canvas>
+            <div id="phone">
+                <div id="ff-preview"></div>
             </div>
         </div>
     </div>

media/css/base.css

@@ -272,10 +272,6 @@ body section {
     overflow:auto;
 }
 
-body section .container {
-/*    background: -moz-radial-gradient(600px center, circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.0) 40%);*/
-}
-
 /* NAVIGATION */
 
 header nav {

media/css/home.css

@@ -1,7 +1,3 @@
-#home-wrapper {
-    /*background:url('../img/home-bg.png') no-repeat top center;*/
-}
-
 #phone-wrapper {
     position:relative;
     top:130px;

media/css/states.css

@@ -65,6 +65,19 @@ header nav div.right {
     opacity:1;
 }
 
+/*Gradients*/
+.spark #spark-content .container {
+    background: -moz-radial-gradient(600px center, circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.0) 40%);
+}
+
+.firefox #firefox-content .container {
+    background: -moz-radial-gradient(600px center, circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.0) 40%);
+}
+
+.home #home .container {
+    background: -moz-radial-gradient(600px center, circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.0) 40%);    
+}
+
 /* Home Hidden state */
 #phone-wrapper {
     opacity:0;

media/css/transitions.css

@@ -56,12 +56,6 @@ header nav .left, header nav .right {
     -o-transition:0.25s top ease, 0.25s opacity linear;
 }
 
-#home-wrapper {
-    -moz-transition:0.5s all ease;
-    -webkit-transition:0.5s all ease;
-    -o-transition:0.5s all ease;
-}
-
 /* spark */
 
 #spark-content aside {-moz-transition:0.5s all ease;-webkit-transition:0.5s all ease;-o-transition:0.5s all ease;}
@@ -111,4 +105,4 @@ header nav .left, header nav .right {
 #small-phones {-moz-transition:0.5s opacity linear 0s;-webkit-transition:0.5s opacity linear 0s;-o-transition:0.5s opacity linear 0s;}
 #light-ray {-moz-transition:0.25s opacity linear 0s;-webkit-transition:0.25s opacity linear 0s;-o-transition:0.25s opacity linear 0s;}
 
-#ff-preview {-moz-transition:0.5s opacity linear;-webkit-transition:0.5s opacity linear;-o-transition:0.5s opacity linear;}
+#ff-preview {-moz-transition:0.25s opacity linear;-webkit-transition:0.25s opacity linear;-o-transition:0.25s opacity linear;}