Copy and styling tweaks

app.js

@@ -101,7 +101,7 @@ app.get('/history', function(req, res){
 });
 
 app.get('/live-updates', function(req, res){
-  res.render('live-updates.html');
+  res.redirect("/");
 });
 
 // Run event stats generation every 1 hour

locale/en_US/makerparty.json

@@ -16,7 +16,7 @@
     "After Your Event Desc": "Gather feedback and thank your participants, share what you made and help us improve Maker Party!",
     "Appmaker Desc": "<a href='https://apps.webmaker.org/'>Appmaker</a> is a simple way to create and share mobile apps even if you don't know code. Drag and drop components to build apps  for your friends, classroom or community.",
     "Attend an Event": "Attend an Event",
-    "Attend an Event Desc": "Join Maker Party by attending an event. Visit our <a href='https://events.webmaker.org'>events page</a> and see what's happening in your neighbourhood.",
+    "Attend an Event Desc": "Attend an Event. Visit our <a href=\"https://events.webmaker.org/\">events page</a> and see what's happening in your neighbourhood during Maker Party, or any time of year.",
     "Back-Up Plan Title": "Back-Up Plan",
     "Back-Up Plan Desc": "Unfortunately, tech problems are an all too familiar part of events. No matter the preparation, wireless networks or computers can cause unexpected issues. If a few computers are malfunctioning, perhaps ask participants to buddy up on computers and work in groups. We suggest having a couple offline activities prepared in the case of an emergency.",
     "Banner": "Banner",
@@ -47,8 +47,8 @@
     "Brand Palette": "Brand Palette",
     "Bullhorn Illustration": "Bullhorn Illustration",
     "Buttons": "Buttons",
-    "Callout": "Keep teaching the web",
-    "Callout Desc": "Here are <a href=\"/resources\">resources</a> to share web literacy skills at events of all types and sizes.",
+    "Callout": "Teach the web with Mozilla!",
+    "Callout Desc": "Use these <a href=\"/resources\">resources</a> to plan a web literacy event tailored especially for your audience.",
     "Choose Your Event Type": "Choose Your Event Type",
     "Choose your Event Type Title": "Choose your Event Type",
     "Choose your Event Type Desc": "The first step to running a great Maker Party event is considering what you want to accomplish. How many people do you expect will attend? Do you want to work alone or with partners?  What kind of activities would you like to include?",
@@ -96,7 +96,7 @@
     "Get Updates": "Get Updates",
     "Google+": "Google+",
     "Have fun with our tools": "Have fun with our tools",
-    "Have fun with our tools Desc": "You can use anything you like to teach the web at your Maker Party event, from the wonderful array of tools available online to good old pencils and paper. Mozilla Webmaker is proud to offer fun, easy-to-use, free <a href='https://webmaker.org/tools'>tools</a>: see the inner working of a webpage with <b>X-Ray Goggles</b>; learn HTML and CSS using <b>Thimble</b> and remix video, audio and images from the web with <b>Popcorn Maker.</b>",
+    "Have fun with our tools Desc": "You can use anything you like to teach the web at your Maker Party event, from the wonderful array of tools available online to good old pencils and paper. Mozilla Webmaker is proud to offer fun, easy-to-use, free <a href='https://webmaker.org/tools'>tools</a>: see the inner working of a webpage with <b>X-Ray Goggles</b>; learn HTML and CSS using <b>Thimble</b>; remix video, audio and images from the web with <b>Popcorn Maker</b>, and build an personal mobile app with <b>Appmaker</b>.",
     "Have questions Title": "<a href=\"http://discourse.webmakerprototypes.org/category/maker-party\">Have questions?</a>",
     "Have questions Desc": "Ask our friendly community for advice on how to host and teach the web. Share your stories and experiences in our <a href=\"http://discourse.webmakerprototypes.org/category/maker-party\">discussion forum</a>.",
     "Heatmap Title": "Events around the world",
@@ -111,7 +111,7 @@
     "Event Partners": "Event Partners",
     "Event Partners Desc": "Host an event during Maker Party, or help us by creating remixable teaching resources for event hosts to share with their learners. We’ll support you with free training and resources.",
     "Host an Event": "Host an Event",
-    "Host an Event Desc": "Anyone can host an event in their city or town. Thousands of individual events teaching the culture, mechanics and citizenship of the web make up a global, two-month party.",
+    "Host an Event Desc": "Host an Event. During our annual two-month party (July to September), individuals and organizations from around the world host thousands of events teaching the culture, mechanics and citizenship of the web. Hosting an event during the rest of the year? Add it to our <a href=\"https://events.webmaker.org/\">events page</a>!",
     "How does Maker Party work?": "How does Maker Party work?",
     "Images from Maker Party 2014": "Images from Maker Party 2014",
     "Images from Maker Party 2014 Desc": "Curious to see what a Maker Party event looks like? Check out these photos from events around the world.",

public/less/style.less

@@ -637,9 +637,9 @@ body.error {
       transform: scale(0.35);
       opacity: 0.9; /*opacity proportional to the size*/
 
-      -webkit-animation: moveclouds 90s linear infinite;
-      -moz-animation: moveclouds 90s linear infinite;
-      -o-animation: moveclouds 90s linear infinite;
+      -webkit-animation: moveclouds 70s linear infinite;
+      -moz-animation: moveclouds 70s linear infinite;
+      -o-animation: moveclouds 70s linear infinite;
     }
 
     @-webkit-keyframes moveclouds {
@@ -658,14 +658,14 @@ body.error {
 
   @media (max-width: @screen-xs-max) {
     .cloud {
-      width: 200px;
-      height: 60px;
+      width: 120px;
+      height: 40px;
       position: relative;
     }
 
     /*Time to animate*/
     .x1 {
-      top: -50px;
+      top: -30px;
       left: 120px;
       -webkit-transform: scale(0.4);
       -moz-transform: scale(0.4);
@@ -679,9 +679,9 @@ body.error {
     .x2 {
       left: 0px;
 
-      -webkit-transform: scale(0.2);
-      -moz-transform: scale(0.2);
-      transform: scale(0.2);
+      -webkit-transform: scale(0.5);
+      -moz-transform: scale(0.5);
+      transform: scale(0.5);
       opacity: 0.9;
 
       -webkit-animation: moveclouds 30s linear infinite;
@@ -690,13 +690,13 @@ body.error {
     }
 
     .x3 {
-      top: 30px;
+      top: 70px;
       left: 50px;
 
       -webkit-transform: scale(0.3);
       -moz-transform: scale(0.3);
       transform: scale(0.3);
-      opacity: 0.8;
+      opacity: 0.7;
 
       -webkit-animation: moveclouds 60s linear infinite;
       -moz-animation: moveclouds 60s linear infinite;
@@ -892,8 +892,16 @@ body.error {
   @media (max-width: @screen-xs-max) {
     padding: 20px 5px;
   }
+  .badge-preview {
+    text-align: center;
+    float: left;
+  }
   img {
     width: 100%;
+    @media (max-width: @screen-xs-max) {
+      width: 50%;
+      margin-bottom: 15px;
+    }
   }
   h2 {
     margin-top: 15px;
@@ -992,6 +1000,9 @@ body.error {
   }
   .flickr-pics {
     height: 200px;
+    @media (max-width: @screen-xs-max) {
+      height: 100%;
+    }
   }
   .elastislide-horizontal nav span {
     background-color: @mp-green;

views/home.html

@@ -72,7 +72,7 @@
       <!-- thank you note -->
       <div class="row" id="thank-you-note">
         <div class="col-md-3 col-sm-3">
-          <a href="https://webmaker.org/badges/skill-sharer"><img src="/img/badge_skill_sharer.png"></a>
+          <a href="https://webmaker.org/badges/skill-sharer" class="badge-preview"><img src="/img/badge_skill_sharer.png"></a>
         </div>
         <div class="col-md-9 col-sm-9">
           <!-- <h2>{{ gettext("Thank You Note Title") }}</h2> -->
@@ -102,12 +102,14 @@
         <div class="col-md-4 col-sm-4 modules">
           <a href="/{{localeInfo.lang}}/resources"><img src="/img/makerparty_hostanevent_illustration.png" alt="{{ gettext('Maker Party Host An Event Illustration') }}" /></a>
           <h3><a href="/{{localeInfo.lang}}/resources">{{ gettext("Host an Event") }}</a></h3>
-          <p>{{ gettext("Host an Event Desc") }}</p>
+          <!-- <p>{{ gettext("Host an Event Desc") | safe }}</p> -->
+          <p>Host an Event. During our annual two-month party (July to September), individuals and organizations from around the world host thousands of events teaching the culture, mechanics and citizenship of the web. Hosting an event during the rest of the year? Add it to our <a href="https://events.webmaker.org/">events page</a>!</p>
         </div>
         <div class="col-md-4 col-sm-4 modules">
           <a href="https://events.webmaker.org" target="_blank"><img src="/img/makerparty_attendanevent_illustration2.png" alt="{{ gettext('Maker Party Attend An Event Illustration') }}" /></a>
           <h3><a href="https://events.webmaker.org" target="_blank">{{ gettext("Attend an Event") }}</a></h3>
-          <p>{{ gettext("Attend an Event Desc") | safe }}</p>
+          <!-- <p>{{ gettext("Attend an Event Desc") | safe }}</p> -->
+          <p>Attend an Event. Visit our <a href="https://events.webmaker.org/">events page</a> and see what's happening in your neighbourhood during Maker Party, or any time of year.</p>
         </div>
         <div class="col-md-4 col-sm-4 modules">
           <a href="/{{localeInfo.lang}}/resources"><img src="/img/makerparty_getsupport_illustration.png" alt="{{ gettext('Maker Party Get Support Illustration') }}" /></a>
@@ -128,7 +130,8 @@
       <div class="row">
         <div class="col-md-6 big-section">
           <h2>{{ gettext("Have fun with our tools") }}</h2>
-          <p>{{ gettext("Have fun with our tools Desc") | safe }}</p>
+          <!-- <p>{{ gettext("Have fun with our tools Desc") | safe }}</p> -->
+          <p>You can use anything you like to teach the web at your Maker Party event, from the wonderful array of tools available online to good old pencils and paper. Mozilla Webmaker is proud to offer fun, easy-to-use, free <a href='https://webmaker.org/tools'>tools</a>: see the inner working of a webpage with <b>X-Ray Goggles</b>; learn HTML and CSS using <b>Thimble</b>; remix video, audio and images from the web with <b>Popcorn Maker</b>, and build an personal mobile app with <b>Appmaker</b>.</p>
         </div>
         <div class="col-md-6 big-section">
           <h2>{{ gettext("Learn by teaching") }}</h2>

views/layout.html

@@ -160,9 +160,9 @@
           <div class="row">
             <div class="col-md-12 text-center">
               <!-- <h2>{{ gettext("Callout") }}</h2> -->
-              <h2>Keep teaching the web</h2>
+              <h2>Teach the web with Mozilla!</h2>
               <!-- <p>{{ gettext("Callout Desc") | safe }}</p> -->
-              <p>Here are <a href="/{{localeInfo.lang}}/resources">resources</a> to share web literacy skills at events of all types and sizes.</p>
+              <p>Use these <a href="/{{localeInfo.lang}}/resources">resources</a> to plan a web literacy event tailored especially for your audience.</p>
             </div>
           </div>
         </div>