Quick fixes

wp-content/themes/norfolk-counts/front-page.php

@@ -1,36 +1,19 @@
 <?php the_post();
 $fields = get_fields();
 $stories = get_all_stories();
+shuffle($stories);
 ?>
 <!-- STEPS CONTENT -->
 <section class="steps-container">
   <!-- Step #0 -->
-  <div 
-  class="step step-0"
-  data-log-ga
-  data-ga-category="view-tool"
-  data-ga-action="view"
-  data-ga-label="View landing page of tool">
+  <div class="step step-0" data-log-ga data-ga-category="view-tool" data-ga-action="view" data-ga-label="View landing page of tool">
     <div class="row">
       <div class="small-12 columns text-center">
-        <img
-          src="<?php echo get_stylesheet_directory_uri(); ?>/images/img-windmill.svg"
-          alt=""
-          class="img-house"
-        />
+        <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/img-windmill.gif" alt="" class="img-house" />
         <h1><?= get_bloginfo('name') ?></h1>
         <?php the_content(); ?>
 
-        <a
-          href="#"
-          data-log-ga
-          data-ga-category="find-out-button"
-          data-ga-action="click"
-          data-ga-label="Find out what"
-          class="btn-action active uppercase begin"
-          data-go-step="1"
-          ><?= $fields['step_1_cta'] ?></a
-        >
+        <a href="#" data-log-ga data-ga-category="find-out-button" data-ga-action="click" data-ga-label="Find out what" class="btn-action active uppercase begin" data-go-step="1"><?= $fields['step_1_cta'] ?></a>
       </div>
     </div>
   </div>
@@ -45,26 +28,8 @@ class="btn-action active uppercase begin"
         <h2><?= $fields['step_1']['step_1_question'] ?></h2>
         <p><?= $fields['step_1']['step_1_text'] ?></p>
 
-        <a
-          href="#"
-          class="btn-action light"
-          data-log-ga
-          data-ga-category="live-in-norfolk-button"
-          data-ga-action="click"
-          data-ga-label="Yes - Lives in Norfolk"
-          data-go-step="2"
-          >Yes, I do!</a
-        >
-        <a
-          href="#"
-          class="btn-action light"
-          data-log-ga
-          data-ga-category="not-in-norfolk-button"
-          data-ga-action="click"
-          data-ga-label="No - doesn't live in Norfolk"
-          data-go-step="1-no"
-          >No, I don't...</a
-        >
+        <a href="#" class="btn-action light" data-log-ga data-ga-category="live-in-norfolk-button" data-ga-action="click" data-ga-label="Yes - Lives in Norfolk" data-go-step="2">Yes, I do!</a>
+        <a href="#" class="btn-action light" data-log-ga data-ga-category="not-in-norfolk-button" data-ga-action="click" data-ga-label="No - doesn't live in Norfolk" data-go-step="1-no">No, I don't...</a>
       </div>
     </div>
   </div>
@@ -76,30 +41,16 @@ class="btn-action light"
       <div class="small-12 columns text-center">
         <span class="progress incomplete">Step 1/2</span>
 
-        <h2><?= $fields['step_1']['no_answer_text'] ?></h2>
+        <h2><?= $fields['step_1']['no_answer_text'] ?>
+
+        </h2>
+        <div style="display:block;"> <a class="move-link" href="<?= $fields['step_1']['no_answer_link']['url'] ?>" data-log-ga data-ga-category="metro-link" data-ga-action="click" data-ga-label="Clicked 'reasons to move'" data-link-out="<?= $fields['step_1']['no_answer_link']['url'] ?>" target="_blank"><?= $fields['step_1']['no_answer_link']['title'] ?></a>
+        </div>
         <p>
-          <a
-            href="<?= $fields['step_1']['no_answer_link']['url'] ?>"
-            data-log-ga
-            data-ga-category="metro-link"
-            data-ga-action="click"
-            data-ga-label="Clicked 'reasons to move'"
-            data-link-out="<?= $fields['step_1']['no_answer_link']['url'] ?>"
-            target="_blank"
-            ><?= $fields['step_1']['no_answer_link']['title'] ?></a
-          ><br />And, if you need yet another reason...
+          And, if you need yet another reason...
         </p>
 
-        <a
-          href="#"
-          class="btn-action light large"
-          data-log-ga
-          data-ga-category="norfolk-is-proud"
-          data-ga-action="click"
-          data-ga-label="Clicked 'why norfolk is proud'"
-          data-go-step="2"
-          ><?= $fields['step_1']['no_answer_cta'] ?></a
-        >
+        <a href="#" class="btn-action light large" data-log-ga data-ga-category="norfolk-is-proud" data-ga-action="click" data-ga-label="Clicked 'why norfolk is proud'" data-go-step="2"><?= $fields['step_1']['no_answer_cta'] ?></a>
       </div>
     </div>
   </div>
@@ -115,22 +66,10 @@ class="btn-action light large"
         <p><?= $fields['step_2']['step_2_sub_text'] ?></p>
 
         <ul class="option-list">
-          <?php foreach ($stories as $post): ?>
-          <li>
-            <a
-              href="#"
-              data-log-ga
-              data-ga-category="stories"
-              data-ga-action="view"
-              data-ga-label="<?= esc_attr($post->post_title) ?>"
-              data-fb-event="ViewContent"
-              data-fb-event-name="<?= esc_attr($post->post_title) ?>"
-              class="btn-action"
-              data-go-step="transition"
-              data-first-story="<?= $post->ID ?>"
-              ><?= $post->post_title ?></a
-            >
-          </li>
+          <?php foreach ($stories as $post) : ?>
+            <li>
+              <a href="#" data-log-ga data-ga-category="stories" data-ga-action="view" data-ga-label="<?= esc_attr($post->post_title) ?>" data-fb-event="ViewContent" data-fb-event-name="<?= esc_attr($post->post_title) ?>" class="btn-action" data-go-step="transition" data-first-story="<?= $post->ID ?>"><?= $post->post_title ?></a>
+            </li>
           <?php endforeach; ?>
         </ul>
       </div>
@@ -147,8 +86,8 @@ class="btn-action"
       <div class="small-12 columns text-center">
         <div class="rotator-icon"></div>
         <div class="messages">
-          <?php foreach ($fields['preloader'] as $row): ?>
-          <p><?= $row['loader_text'] ?></p>
+          <?php foreach ($fields['preloader'] as $row) : ?>
+            <p><?= $row['loader_text'] ?></p>
           <?php endforeach; ?>
         </div>
       </div>
@@ -189,4 +128,4 @@ class="btn-action"
   </div> -->
   <!-- //Slider -->
 </section>
-<!-- LANDING PAGE -->
+<!-- LANDING PAGE -->

wp-content/themes/norfolk-counts/page-action.php

@@ -1,9 +1,10 @@
 <section class="section-action" data-log-ga data-ga-category="view-action-page" data-ga-action="view" data-ga-label="Action Page View" data-fb-event="ViewAction">
-  <div class="row">
+  <div class="row stats-container">
     <div class="small-12 columns">
       <h1>The people of Norfolk have done something amazing</h1>
     </div>
 
+
     <div class="small-12 medium-4 columns text-center action-highlight">
       <p>
         Norfolk has ensured
@@ -53,7 +54,7 @@
       </a>
     </div>
 
-    <div class="small-12 columns text-center">
+    <div class="text-center">
       <p class="footer">
         <a data-open="aboutModal" data-log-ga data-ga-category="action-about-us-button" data-ga-action="click" data-ga-label="About us Action Page">About us</a>
         /

wp-content/themes/norfolk-counts/partials/article-intro.php

@@ -22,24 +22,9 @@
             <?= $fields['stats_section'] ?>
           </div>
 
-          <div class="first-cta">
-            <div class="cta-heading">Ask Liz Truss to protect Norfolk's Aid contributions.</div>
-            <div class="cta-buttons">
-              <?php wp_reset_postdata(); ?>
-              <button data-open="doGooderModal" type="button" name="button" data-log-ga data-ga-category="email-button" data-ga-action="click" data-ga-label="Email" data-fb-event="CompleteAction" data-fb-event-name="Email" class="social active begin pointer email"><i></i> Email
-              </button>
-
-              <a href="https://ctt.ac/2ffE2" target="_blank" data-log-ga data-ga-category="tweet-mp-button" data-ga-action="click" data-ga-label="Tweet MP" data-fb-event="CompleteAction" data-fb-event-name="Tweet MP" data-link-out="https://ctt.ac/2ffE2">
-                <button type="button" name="button" class="social active begin pointer twitter"><i></i>
-                  Tweet
-                </button>
-
-              </a>
-            </div>
-          </div>
 
           <div class="small-12 medium-6 columns display-small-screens-only">
-            <figure class="article-image">
+            <figure class="article-image" style="margin-top:20px">
               <img src="<?= get_featured_image_src() ?>" alt="<?php esc_attr_e($post->post_title); ?>" />
               <figcaption>
                 Credit:
@@ -101,10 +86,10 @@
       </div>
 </div>
 
-  <p class="footer">
-    <a data-open="aboutModal" data-log-ga data-ga-category="about-us-button" data-ga-action="click" data-ga-label="About us Action Page">About us</a>
-    /
-    <a data-open="impactModal" data-log-ga data-ga-category="impact-button" data-ga-action="click" data-ga-label="How we know Norfolk's impact Action Page">How we know Norfolk's impact?</a>
-  </p>
+<p class="footer">
+  <a data-open="aboutModal" data-log-ga data-ga-category="about-us-button" data-ga-action="click" data-ga-label="About us Action Page">About us</a>
+  /
+  <a data-open="impactModal" data-log-ga data-ga-category="impact-button" data-ga-action="click" data-ga-label="How we know Norfolk's impact Action Page">How we know Norfolk's impact?</a>
+</p>
 
 <!-- //Introduction -->

wp-content/themes/norfolk-counts/source/js/app.coffee

@@ -65,7 +65,7 @@ class Theme
         'event_callback': cb
 
   preload_main: (first_story)=>
-    promises = (@transition_message( 3000 * i, message ) for message, i in @messages)
+    promises = (@transition_message( 4000 * i, message ) for message, i in @messages)
     promises.push @load_carousel( first_story )
     Promise.all promises
     .then @show_landing
@@ -106,7 +106,7 @@ class Theme
         setTimeout ->
           $(elem).fadeOut 100
           resolve()
-        , 1500
+        , 2500
       , delay
 
 

wp-content/themes/norfolk-counts/source/scss/layout/_header.scss

@@ -29,8 +29,8 @@ header {
 
     @include breakpoint(medium) {
       background: url("../images/share-fb-desktop.svg") 0 0 no-repeat;
-      width: 170px;
-      height: 27px;
+      width: 165px;
+      height: 24px;
     }
   }
 }

wp-content/themes/norfolk-counts/source/scss/modules/_steps.scss

@@ -25,16 +25,38 @@
       }
     }
 
+    .move-link {
+      display: inline-block;
+      color: color(yellow);
+      border-bottom: 1px solid;
+      @include font-family(CanelaRegular);
+      font-size: 26px;
+      line-height: 20px;
+      letter-spacing: -0.34px;
+      margin-bottom: 20px;
+
+      @include breakpoint(medium) {
+        font-size: 50px;
+        line-height: 37px;
+        border-bottom: 2px solid;
+      }
+    }
+
     .img-house {
-      max-width: 75%;
+      width: 100%;
       display: block;
       margin: 0 auto;
-      margin-bottom: 40px;
       margin-top: 40px;
 
       @include breakpoint(medium) {
+        width: 100%;
+      }
+
+      @include breakpoint(large) {
+        width: 80%;
         max-width: 100%;
-        margin-top: 0px;
+        margin-top: -20px;
+        margin-bottom: -40px;
       }
     }
 

wp-content/themes/norfolk-counts/source/scss/pages/_action.scss

@@ -12,9 +12,9 @@
     text-align: center;
 
     @include breakpoint(medium) {
-      font-size: 55px;
-      line-height: 50px;
-      margin-bottom: 60px;
+      font-size: 29px;
+      line-height: 27px;
+      margin-bottom: 52px;
     }
   }
 
@@ -34,15 +34,15 @@
       color: color(yellow);
 
       @include breakpoint(medium) {
-        font-size: 26px;
-        margin-top: 35px;
+        margin-top: 25px;
       }
 
       a {
         color: color(yellow);
 
         @include breakpoint(medium) {
-          padding: 0 20px;
+          padding: 0 5px;
+          margin-top: 35px;
         }
 
         &:hover {
@@ -58,17 +58,22 @@
     margin: 0 auto;
 
     @include breakpoint(medium) {
-      margin-top: 20px;
+      margin-top: 0px;
       margin-bottom: 50px;
     }
   }
 
+  .stats-container {
+    max-width: 850px;
+    margin: 0 auto;
+  }
+
   .action-highlight {
     margin-bottom: 40px;
     text-align: center;
 
     @include breakpoint(medium) {
-      margin-bottom: 50px;
+      margin-bottom: 48px;
     }
 
     p {
@@ -83,15 +88,11 @@
       span {
         display: block;
         @include font-family(CanelaBold);
-        font-size: 60px;
-        line-height: 1;
+        font-size: 32px;
+        line-height: 20px;
         color: color(yellow);
-        margin: 10px 0 0 0;
+        margin: 15px 0 10px 0;
         letter-spacing: -0.34px;
-
-        @include breakpoint(medium) {
-          font-size: 80px;
-        }
       }
     }
   }