diff --git a/_includes/progress.html b/_includes/progress.html index 0939b15..ea81115 100644 --- a/_includes/progress.html +++ b/_includes/progress.html @@ -1,9 +1,10 @@

A Congress Committed to Reform

Our goal: Win a simple majority to cosponsor fundamental reform of the way campaigns are funded.
-
Our Goal
+
Our Goal
Senate
+
23
@@ -17,6 +18,7 @@

A Congress Committed to Reform

House
+
189
diff --git a/_sass/_faq.scss b/_sass/_faq.scss index 86b4a4d..6d3b3ff 100644 --- 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 index bc9d494..fe5fb48 100644 --- 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%; } } -} \ No newline at end of file +} + diff --git a/_sass/_the-plan.scss b/_sass/_the-plan.scss index 1b3b2e7..c839472 100644 --- 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 { diff --git a/the_plan.html b/the_plan.html index 79c1088..f2d76f4 100644 --- a/the_plan.html +++ b/the_plan.html @@ -7,13 +7,13 @@
-

The Plan

+

The Plan

-
- -

Our framers gave us a “representative democracy” — what they called, “a Republic.” But that Republic was to be representative of all of us. Congress, as Madison said, was to be “dependent on the People alone.” And by “the People,” as he explained, they meant “not the rich more than the poor.”

+
+ +

Our framers gave us a “representative democracy” — what they called, “a Republic.” But that Republic was to be representative of all of us. Congress, as Madison said, was to be “dependent on the People alone.” And by “the People,” as he explained, they meant “not the rich more than the poor.”

@@ -22,7 +22,7 @@

The Plan

-
+

Election Funding

@@ -39,12 +39,13 @@

A Congress Committed to Reform

Whether we give ordinary Americans more influence in our elections through matching their donations, providing vouchers, or instituting tax credits is not important to us as long as the bill meaningfully addresses the systemic of corruption in Washington, D.C.

To increase the momentum for reform, our strategy is to start by targeting the members of Congress most likely to support reform: those who are new to Congress and those who have supported reform in the past but have not yet recommitted in the 114th Congress. Reform legislation already has the support of over 200 legislators, so we need to close the gap.

-

The Mayday Laboratory

+

The Mayday Laboratory

Our campaign will experiment with the most effective tools of persuasion: money and popular support. We are organizing grassroots campaigns to show members of Congress that doing the right thing for our republic is also essential for their political future. And we’re going to hit them where it hurts by organizing donors to withhold their contributions to all candidates who do not support reform.

Our campaign will double-down on what works and let go of what doesn’t. Volunteers and supporters will play a vital role in creating a Congress committed to reform. And we are eager to hear from you about how to make this effort a success.

In 2015, Mayday will focus on generating support for reform within the Congress we already have. As the 2016 election approaches, we will explore the most effective means for Mayday to make a difference.

We are counting on you to be a part of our efforts to get our democracy back. Please sign-up to take action and spread the word to your friends and family. Too much is at stake to sit on the sidelines.

+
@@ -68,7 +69,7 @@

Reps we're focused on ${{ name }} Headshot

-