Content for the How You Help page

2016/assets/sass/_components.scss

@@ -96,22 +96,6 @@
   overflow: hidden;
   position: relative;
   height: 12em;
-
-  .section & {
-    margin: 0 -1em;
-
-    @media (min-width: $medium-screen) {
-      margin: 0 -1.5em;
-    }
-
-    @media (min-width: $large-screen) {
-      margin: 0 -2em;
-    }
-
-    @media (min-width: $huge-screen) {
-      margin: 0 -2.5em;
-    }
-  }
 }
 
 .slideshow__inner {
@@ -250,41 +234,6 @@ aside {
   }
 }
 
-.logo-lineup {
-  @extend .unstyled-list;
-
-  li {
-    display: block;
-
-    @media (min-width: $large-screen) {
-      display: inline-block;
-      margin-right: 1.5em;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-}
-
-%logo-lineup-hover-effect {
-  img {
-    opacity: 0.8;
-  }
-
-  a:hover img {
-    opacity: 1;
-  }
-}
-
-%logo-lineup-padding-compensation {
-  margin-top: 2em;
-
-  @media (min-width: $large-screen) {
-    margin-bottom: -1em !important; // must override :last-child selectors
-  }
-}
-
 // https://dev.twitter.com/web/embedded-tweets/css
 // overloaded selector to trump default link and paragraph styles
 blockquote.twitter-tweet {
@@ -441,22 +390,38 @@ blockquote.twitter-tweet {
   opacity: 0.6;
 }
 
-.supporter-logos {
-  @extend .unstyled-list;
-  margin: 0 auto;
-  max-width: 45em;
+
+.funders {
+  margin-top: -1em;
+  width: auto !important; // override 66% from .section>*
 
   li {
-    display: inline-block;
+    margin-top: 1em;
   }
 
-  a {
-    display: inline-block;
-    padding: 0.5em 0.5em 0 0.5em;
+  @media (min-width: $large-screen) {
+    @include clearfix();
+    padding-left: 0;
+
+    li {
+      width: 46%;
+      float: left;
+      margin-left: 4%;
+      padding-right: 5%;
+
+      &:nth-child(odd) {
+        clear: left;
+      }
+    }
   }
+}
 
-  img {
-    width: auto;
-    height: 50px;
+.help-list {
+  margin-top: -0.5em;
+  width: auto !important; // override 66% from .section>*
+  max-width: 26em;
+
+  li {
+    margin-top: 0.5em;
   }
 }

2016/assets/sass/_mixins.scss

@@ -14,7 +14,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
+  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%);
 }
 
 @mixin clearfix {

2016/assets/sass/_page-topper.scss

@@ -78,14 +78,6 @@
     }
   }
 
-  // Page toppers look good when the content is 66% width,
-  // rather than the default 50%.
-  @media (min-width: $huge-screen) {
-    & > * {
-      width: 66%;
-    }
-  }
-
   h1 {
     font-size: 3em;
     font-weight: 600;

2016/assets/sass/_sections.scss

@@ -50,24 +50,26 @@
     }
   }
 
-  @media (min-width: $huge-screen) {
-    & > * {
-      width: 50%;
-    }
-  }
-
   & > .row {
     width: auto;
   }
 }
 
-// @each $slug, $colour in $sections {
-//   .page--#{$slug} {
-//     background-color: $colour;
-//     color: #fff;
-//     @include coloured-links($colour);
-//   }
-// }
+.section--no-padding {
+  padding: 0;
+
+  @media (min-width: $small-screen) {
+    margin-left: $nav-width-small-screen;
+  }
+
+  @media (min-width: $medium-screen) {
+    margin-left: $nav-width-medium-screen;
+  }
+
+  @media (min-width: $large-screen) {
+    margin-left: $nav-width-large-screen;
+  }
+}
 
 .section--centred {
   text-align: center;
@@ -77,16 +79,16 @@
   }
 }
 
-// @media (min-width: $large-screen){
-//   .section--flipped {
-//     @include clearfix();
-//
-//     & > * {
-//       clear: right;
-//       float: right;
-//     }
-//   }
-// }
+@media (min-width: $large-screen){
+  .section--flipped {
+    @include clearfix();
+
+    & > * {
+      clear: right;
+      float: right;
+    }
+  }
+}
 
 .section--impactful {
   padding-top: 2em;
@@ -103,6 +105,12 @@
   }
 }
 
+.section--white {
+  & + & {
+    border-top: 1px solid $colour_light_grey;
+  }
+}
+
 .section--next {
   @extend .section--centred;
 
@@ -173,3 +181,86 @@
     font-size: 2.5em;
   }
 }
+
+.page--help .section h1 {
+  line-height: 1em;
+  font-weight: 600;
+}
+
+.section--help-volunteers {
+  border-top: 1px solid $colour_light_grey;
+  background-color: mix($colour_blue, #fff, 10%);
+}
+
+.section--help-slideshow {
+  background-color: mix($colour_blue, #fff, 10%);
+
+  & > * {
+    width: auto;
+  }
+
+  & + .section--white {
+    border-top: 1px solid $colour_light_grey;
+  }
+
+  .slideshow__inner {
+    &:after {
+      @extend %inner-shadow;
+    }
+  }
+
+  .slideshow__slide {
+    padding: 0;
+    position: relative;
+
+    &:nth-child(5n + 1) {
+      top: 0em;
+      margin-left: -4em;
+    }
+
+    &:nth-child(5n + 2) {
+      top: 1.5em;
+      margin-left: -3.5em;
+    }
+
+    &:nth-child(5n + 3) {
+      top: 0.5em;
+      margin-left: -6em;
+    }
+
+    &:nth-child(5n + 4) {
+      top: 2.5em;
+      margin-left: -4.5em;
+    }
+
+    &:nth-child(5n + 5) {
+      top: 1em;
+      margin-left: -3.5em;
+    }
+  }
+
+  .screenshot {
+    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+
+    img {
+      border-top: 1px solid #ddd;
+    }
+  }
+}
+
+.section--help-share {
+  background-color: mix($colour_blue, #fff, 10%);
+
+  .button + .button {
+    margin-left: 0.5em;
+
+    @media (min-width: $large-screen) {
+      margin-left: 1em;
+    }
+  }
+}
+
+.section--help-forward {
+  background-color: mix($colour_blue, #000, 50%);
+  color: #fff;
+}