Adding Clarification to select Red State

campaignzero · Nov 24, 2016 · 748b4c0 · 748b4c0
1 parent ec158ce
commit 748b4c0
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 4 deletions.
diff --git a/app/app.js b/app/app.js
@@ -276,7 +276,7 @@ var appWidget = {
 
         if (state === lastState) {
           lastState = '';
-          jQuery('.state-selection', elm).html('<div class="message animated slideInUp"><i class="material-icons animated fadeInUp">keyboard_arrow_up</i> Select a State to Get Started <i class="material-icons animated fadeInUp">keyboard_arrow_up</i></div>');
+          jQuery('.state-selection', elm).html('<div class="message animated slideInUp"><i class="material-icons animated fadeInUp">keyboard_arrow_up</i> Select a <strong>Red</strong> State <span>to Get Started</span> <i class="material-icons animated fadeInUp">keyboard_arrow_up</i></div>');
           return false;
         }
 

diff --git a/app/style.css b/app/style.css
@@ -251,6 +251,9 @@
       color: #333;
       font-weight: 400;
       text-transform: uppercase; }
+      #electoral-college-widget .state-selection .message strong {
+        color: #cc3d3d;
+        font-weight: 600; }
       #electoral-college-widget .state-selection .message i {
         position: relative;
         color: #BBB; }

diff --git a/app/style.scss b/app/style.scss
@@ -351,6 +351,11 @@
       font-weight: 400;
       text-transform: uppercase;
 
+      strong {
+        color: #cc3d3d;
+        font-weight: 600;
+      }
+
       i {
         position: relative;
         color: #BBB;

diff --git a/app/template/map.html b/app/template/map.html
@@ -228,7 +228,7 @@ <h2>We have until <strong>December 19th</strong> to convince <strong>38</strong>
 <div class="state-selection animated slideInUp">
     <div class="message">
         <i class="material-icons animated fadeInUp">keyboard_arrow_up</i>
-        Select a State <span>to Get Started</span>
+        Select a <strong>Red</strong> State <span>to Get Started</span>
         <i class="material-icons animated fadeInUp">keyboard_arrow_up</i>
     </div>
 </div>

diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 
   <!-- The styles -->
   <link rel="stylesheet" href="website/css/bootstrap.min.css" />
-  <link rel="stylesheet" href="website/css/styles.css?v=1.0.1" />
+  <link rel="stylesheet" href="website/css/styles.css?v=1.0.3" />
 
   <meta property="og:url" content="https://makedemocracymatter.org" />
   <meta property="og:title" content="Make Democracy Matter" />
@@ -173,7 +173,7 @@ <h2>We need your help</h2>
 </section>
 
 <script src="website/js/jquery.min.js"></script>
-<script src="website/js/custom-scripts.js?v=1.0.0"></script>
+<script src="website/js/custom-scripts.js?v=1.0.3"></script>
 <script src="website/js/bootstrap.min.js"></script>
 <script src="widget.js?v=1.1.0" charset="utf-8"></script>
 </body>

diff --git a/website/css/styles.css b/website/css/styles.css
@@ -362,6 +362,18 @@ nav ul, nav li {
   background: #880027 !important;
 }
 
+#electoral-college-widget .message strong {
+  background: #ec0044 !important;
+  color: #FFF !important;
+  padding: 0 2px;
+}
+
+#electoral-college-widget.xxl .message strong,
+#electoral-college-widget.xl .message strong,
+#electoral-college-widget.l .message strong {
+  padding: 0 2px 0 8px;
+}
+
 #electoral-college-widget .message,
 #electoral-college-widget h1 {
   color: #FFF !important;