Merge pull request MayOneUS#26 from MayOneUS/jh-theplan

Jh theplan
gabrielgrant · Mar 6, 2015 · df266fd · df266fd
2 parents 7461d0c + ebb608b
commit df266fd
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 67 deletions.
diff --git a/_includes/progress.html b/_includes/progress.html
@@ -1,9 +1,10 @@
 <div class="progress-include">
   <h2 class="headline">A Congress Committed to Reform</h2>
   <div class="sub-headline"><span>Our goal:</span> Win a simple majority to cosponsor fundamental reform of the way campaigns are funded.</div>
-  <div class="legend">Our Goal <i class="fa fa-star"></i></div>
+  <div class="legend lengend-shift">Our Goal <i class="fa fa-star"></i></div>
   <div class="senate bar-line">
     <div class="label">Senate</div>
+    <br class="mobile-break">
     <div class="bar">
       <div class="progress-section">
         <div class="count">23</div>
@@ -17,6 +18,7 @@ <h2 class="headline">A Congress Committed to Reform</h2>
   </div>
   <div class="house bar-line">
     <div class="label">House</div>
+    <br class="mobile-break">
     <div class="bar">
       <div class="progress-section">
         <div class="count">189</div>

diff --git a/_sass/_faq.scss b/_sass/_faq.scss
@@ -1,5 +1,3 @@
-
-
 /** 
  * Mayday Panel Styles
  */

diff --git a/_sass/_progress.scss b/_sass/_progress.scss
@@ -1,3 +1,29 @@
+/**
+ * Variables
+ */
+$progress-breakpoint-large:1200px;
+$progress-breakpoint-medium:968px;
+$progress-breakpoint-small:715px;
+
+@mixin breakpoint-small {
+  @media (max-width: #{$progress-breakpoint-small - 1px}) {
+    @content;
+  }
+}
+
+@mixin breakpoint-medium {
+   @media (min-width: #{$progress-breakpoint-medium}) and (max-width: #{$progress-breakpoint-medium - 1px}) {
+     @content;
+   }
+}
+
+@mixin breakpoint-large {
+  @media (min-width: #{$progress-breakpoint-medium}) and (max-width: #{$progress-breakpoint-large - 1px}) {
+    @content;
+  }
+}
+
+
 .progress-include {
   background: #e4e5e9 url(/images/capitol_building.png) 0 bottom;
   overflow: hidden;
@@ -24,6 +50,18 @@
     padding: 14px 3.5% 0px 3.5%;
     position: relative;
     z-index: 99;
+    @include breakpoint-large{
+      padding-bottom: 1em;
+    }
+
+    @include breakpoint-medium {
+      padding-bottom: 0em;
+
+    }
+
+    @include breakpoint-small {
+      padding-bottom: 1em;
+    }
   }
   .legend {
     color: $dark-red-color;
@@ -36,6 +74,23 @@
     position: relative;
     z-index: 99;
   }
+  .lengend-shift{
+    @include breakpoint-large{
+      width: 50%;
+      float: right;
+    }
+
+    @include breakpoint-medium {
+      width: 100%;
+      float: right;
+    }
+
+    @include breakpoint-small {
+      width: 50%;
+      float: right;
+    }
+
+  }
   .bar-line {
     height: 60px;
     position: relative;
@@ -55,53 +110,89 @@
       height: 100%;
       width: 75%;
       border: 2px solid #ffffff;
+      border-radius: 5px;
       display: inline-block;
       position: relative;
-      .progress-section {
-        display: inline-block;
-        height: 100%;
-        float: left;
-        background-color: rgba(68, 147, 84, .9);
-        .count {
-          float: right;
-          color: white;
-          font-weight: 600;
-          font-size: 45px;
-          margin: 14px 8px 0 0;
-        }
+      @include breakpoint-large{
+        width: 87%;
+        margin-right: 10%;
       }
-      .togo-section {
-        display: inline-block;
-        float: right;
-        height: 100%;
-        background-color: rgba(123, 123, 123, .9)
+
+      @include breakpoint-medium {
+
+      }
+
+      @include breakpoint-small {
+        width: 87%;
+        margin-right: 10%;
+      }
+
+    }
+    .progress-section {
+      display: inline-block;
+      height: 100%;
+      float: left;
+      background-color: rgba(68, 147, 84, .9);
+    }
+    .count {
+      float: right;
+      color: white;
+      font-weight: 600;
+      font-size: 45px;
+      margin: 14px 8px 0 0;
+    }
+    .togo-section {
+      display: inline-block;
+      float: right;
+      height: 100%;
+      background-color: rgba(123, 123, 123, .9);
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+    }
+    .out-of {
+      text-align: center;
+      width: 50px;
+      color: white;
+      position: absolute;
+      right: -25px;
+      top: 6px;
+      .rectangle {
+        background-color: $dark-red-color;
+        height: 30px;
+        font-size: 20px;
+        padding-top: 6px;
       }
-      .out-of {
-        text-align: center;
-        width: 50px;
-        color: white;
-        position: absolute;
-        right: -25px;
-        top: 6px;
-        .rectangle {
-          background-color: $dark-red-color;
-          height: 30px;
-          font-size: 20px;
-          padding-top: 6px;
-        }
-        .triangle {
-          width: 0;
-          height: 0;
-          border-style: solid;
-          border-width: 15px 25px 0 25px;
-          border-color: $dark-red-color transparent transparent transparent;
-        }
+      .triangle {
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 15px 25px 0 25px;
+        border-color: $dark-red-color transparent transparent transparent;
       }
     }
   }
+  .mobile-break{
+    display: none;
+
+    @include breakpoint-large{
+      display: inline-block;
+    }
+
+    @include breakpoint-medium {
+      display: none;
+    }
+
+    @include breakpoint-small {
+      display: inline-block;
+    }
+
+  }
+
   .senate {
     .progress-section {
       width: 45%;
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
     }
     .togo-section {
       width: 55%
@@ -110,9 +201,12 @@
   .house {
     .progress-section {
       width: 87%;
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
     }
     .togo-section {
       width: 13%;
     }
   }
-}
+}
+
diff --git a/_sass/_the-plan.scss b/_sass/_the-plan.scss
@@ -1,3 +1,40 @@
+/** 
+ * Mayday Page Styles
+ */
+.headline-plan{
+  font-size: 60px;
+  margin-bottom: .315em;
+  @include small-desktop {
+    margin-bottom: .215em;
+  }
+}
+
+#plan-byline{//the plan-byline and progress-clearance are just to make sure the typography remains correct
+  margin-bottom: .8em;
+  font-size: 25px;
+  @include small-desktop {
+    margin-bottom: .7em;
+  }
+}
+#progress-clearance{
+  margin:0 0 1.8em 0;
+}
+.small-break p{
+  line-height: 1.7;
+  margin-top: 0em;
+  margin-bottom: 1.15em;
+
+  @include phone {
+    width: 100%
+  }
+
+}
+
+.small-break h2, .small-break h3{
+  font-weight: 400;
+  margin: 1.2em 0 .65em 0;
+}
+
 /** 
  * Mayday Panel Styles
  */
@@ -8,56 +45,54 @@
   margin-top: $top-spacing;
   border-radius: 0px;
   border: 1px $navy-blue-light-color solid;
-
-
   .panel-heading {
     background-color: $navy-blue-light-color;
     border: 1px $navy-blue-light-color solid;
     color: $offwhite-color;
     border-bottom: 8px $navy-blue-color solid;
     border-radius: 0px;
-
-    .panel-title {
-      font-size: $panel-mayday-title-size;
-      color: #fff;
-      font-weight: 700;
+  }
+  .panel-title {
+    font-size: $panel-mayday-title-size;
+    color: #fff;
+    font-weight: 700;
+    padding: 17px 0 17px 17px;
+    @include small-desktop {
+      font-size: 21px;
     }
   }
-
   .mayday-profile.active > .headshot > img {
     border: 3px solid $navy-blue-light-color;
     opacity: 1.0;
   }
-
   .mayday-profile {
     padding-left: 0px;
     margin-bottom: $bottom-spacing;
-
+    margin-left: 2px;
     .headshot {
       padding-right: 10px;;
     }
-
+    .push-left{
+      margin-left: 0;
+      padding-left: 0;
+    }
     .headshot > img {
       border: 3px solid transparent;
       opacity: 0.8;
       width: 100%;
     }
-
-
     h4 {
       margin: 0px;
     }
-
     h6 {
       margin: 3px 0px;
     }
-    
+
     @include tablet {
       h4 {
         margin: inherit;
         font-size: 1.6em;  
       }
-
       h6 {
         margin: 8px 0px;
         font-size: 1.2em;  
@@ -69,14 +104,12 @@
       h4 {
         font-size: 1.2em;  
       }
-
       h6 {
         margin: 8px 0px;
         font-size: 0.8em;  
       }
-    }
 
-
+    }
   }
 
   .mayday-profile:first-child .headshot > img {