Merge pull request #330 from everypolitician/add-standard-footer

Add standard footer

views/about.erb

@@ -9,7 +9,7 @@
 
     <p>Frustratingly, it’s difficult to provide an answer for these questions, because the objective data just isn’t there.</p>
 
-    <p>The closest thing is data from the <a href="http://www.ipu.org/iss-e/women.htm">Inter-Parliamentary Union</a>, but that can't be used for this kind of in-depth anaylsis.  They simply provide a total for each legislature, rather than data on individual politicians — plus the figures are self-reported, not always up-to-date, and only cover member countries.</p> 
+    <p>The closest thing is data from the <a href="http://www.ipu.org/iss-e/women.htm">Inter-Parliamentary Union</a>, but that can't be used for this kind of in-depth anaylsis.  They simply provide a total for each legislature, rather than data on individual politicians — plus the figures are self-reported, not always up-to-date, and only cover member countries.</p>
 
     <p>For advanced insights, you need rich data that can be sliced in multiple ways. So, alongside politicians' gender, you might also compare by age, or party, or voting records, or by many other exciting factors.</p>
 

views/footer.erb

@@ -0,0 +1,63 @@
+<div class="mysoc-footer" role="contentinfo">
+  <div class="container">
+      <div class="row">
+
+          <div class="col-sm-12">
+              <h2 class="mysoc-footer__site-name">Gender Balance</h2>
+              <div class="mysoc-footer__site-description">
+                  <p>Crowdsourcing open, reliable gender data on the world's politicians.Gender Balance contributes data to the <a href="http://www.http://everypolitician.org/">EveryPolitician</a> project</p>
+              </div>
+          </div>
+
+      </div>
+
+      <div class="row">
+
+          <div class="col-sm-6">
+              <nav class="mysoc-footer__links">
+                  <ul>
+                      <li role="presentation"><a href="/about">About Gender Balance</a></li>
+                  </ul>
+                  <ul>
+                      <li role="presentation"><a href="http://everypolitician.org/">EveryPolitician</a></li>
+                  </ul>
+              </nav>
+          </div>
+
+          <div class="col-sm-6">
+              <div class="mysoc-footer__donate">
+                  <p>Your donations keep this site and others like it running</p>
+                  <a href="https://www.mysociety.org/donate?utm_source=gender-balance.org&utm_content=donate+now&utm_medium=link&utm_campaign=mysoc_footer" class="mysoc-footer__donate__button">Donate now</a>
+              </div>
+          </div>
+
+      </div>
+      <hr class="mysoc-footer__divider" role="presentation">
+      <div class="row">
+
+          <div class="col-sm-5">
+              <div class="mysoc-footer__orgs">
+                  <p class="mysoc-footer__org">
+                      Built by
+                      <a href="https://www.mysociety.org?utm_source=gender-balance.org&utm_content=logo&utm_medium=link&utm_campaign=mysoc_footer" class="mysoc-footer__org__logo mysoc-footer__org__logo--mysociety">mySociety</a>
+                  </p>
+              </div>
+          </div>
+
+          <div class="col-sm-4">
+              <div class="mysoc-footer__legal">
+                  <p>mySociety Limited is a project of UK Citizens Online Democracy, a registered charity in England and Wales. For full details visit <a href="https://www.mysociety.org?utm_source=gender-balance.org&utm_content=full+legal+details&utm_medium=link&utm_campaign=mysoc_footer">mysociety.org</a>.</p>
+              </div>
+          </div>
+
+          <div class="col-sm-3">
+              <ul class="mysoc-footer__badges">
+                  <li role="presentation"><a href="https://github.com/everypolitician/gender-balance" class="mysoc-footer__badge mysoc-footer__badge--github">Github</a></li>
+                  <li role="presentation"><a href="https://twitter.com/mysociety" class="mysoc-footer__badge mysoc-footer__badge--twitter">Twitter</a></li>
+                  <li role="presentation"><a href="https://facebook.com/mysociety" class="mysoc-footer__badge mysoc-footer__badge--facebook">Facebook</a></li>
+              </ul>
+          </div>
+
+      </div>
+  </div>
+</div>

views/home_anonymous.erb

@@ -41,3 +41,5 @@
 <p class="home-attribution">
     Header image: <a href="https://www.flickr.com/photos/uk_parliament/14599371450/">Mark Twain visits Parliament 1907</a>, CC-BY-NC UK Parliament
 </p>
+
+<%= erb :footer %>

views/home_loggedin.erb

@@ -36,3 +36,5 @@
 <p class="home-attribution">
     Header image: <a href="https://www.flickr.com/photos/uk_parliament/14599371450/">Mark Twain visits Parliament 1907</a>, CC-BY-NC UK Parliament
 </p>
+
+<%= erb :footer %>

views/sass/_mysociety-footer.scss

@@ -0,0 +1,288 @@
+// Standard mySociety Footer v1.0.4
+// https://github.com/mysociety/standard-footer
+
+$mysoc-footer-background-color: #fff !default;
+$mysoc-footer-text-color: #333 !default;
+$mysoc-footer-site-name-text-color: $mysoc-footer-text-color !default;
+
+$mysoc-footer-link-text-color: $color_green !default;
+$mysoc-footer-link-hover-text-color: darken($color_green, 10%) !default;
+
+$mysoc-footer-site-name-font-size: 1.5em !default;
+$mysoc-footer-site-name-margin-bottom: 0.5em !default;
+$mysoc-footer-site-name-line-height: 1em !default;
+
+$mysoc-footer-border-top: none !default;
+$mysoc-footer-divider-color: #E2DFD9 !default;
+
+$mysoc-footer-donate-background-color: #F3F1EB !default;
+$mysoc-footer-donate-text-color: $mysoc-footer-text-color !default;
+$mysoc-footer-donate-button-background-color: $color_green;
+$mysoc-footer-donate-button-text-color: #fff !default;
+$mysoc-footer-donate-button-hover-background-color: darken($mysoc-footer-donate-button-background-color, 5%) !default;
+$mysoc-footer-donate-button-hover-text-color: $mysoc-footer-donate-button-text-color !default;
+
+$mysoc-footer-legal-text-color: #6C6B68 !default;
+
+$mysoc-footer-image-path: '../img/' !default;
+$mysoc-footer-breakpoint-sm: 768px !default;
+
+$high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi' !default;
+
+$grid-max-width: 800px;
+$grid-gutter: 2em;
+$grid-breakpoint-sm: 3000px;
+
+%clearfix {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+.mysoc-footer {
+  text-align: left;
+  .container {
+    margin-right: auto;
+    margin-left: auto;
+    padding-left: $grid-gutter / 2;
+    padding-right: $grid-gutter / 2;
+    max-width: $grid-max-width;
+  }
+
+  .row {
+    @extend %clearfix;
+    margin-left: $grid-gutter / -2;
+    margin-right: $grid-gutter / -2;
+  }
+
+  %col {
+    padding-left: $grid-gutter / 2;
+    padding-right: $grid-gutter / 2;
+    min-height: 1px;
+  }
+
+  @for $i from 1 through 12 {
+    .col-sm-#{$i} {
+      @extend %col;
+    }
+  }
+
+  %col-float {
+    float: left;
+  }
+
+  @for $i from 1 through 12 {
+    .col-sm-#{$i} {
+      @extend %col-float;
+      width: (100% / 12) * $i;
+    }
+  }
+}
+
+.mysoc-footer {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background-color: $mysoc-footer-background-color;
+  color: $mysoc-footer-text-color;
+  padding: 2em 0;
+  font-size: .833333333em;
+  line-height: 1.5em;
+  border-top: $mysoc-footer-border-top;
+
+  @media (min-height: 700px) {
+    padding: 3em 0;
+  }
+
+  @media (min-height: 900px) {
+    padding: 4em 0;
+  }
+
+  *, *:before, *:after {
+    -webkit-box-sizing: inherit;
+    -moz-box-sizing: inherit;
+    box-sizing: inherit;
+  }
+
+  a {
+    color: $mysoc-footer-link-text-color;
+
+    &:hover,
+    &:focus {
+      color: $mysoc-footer-link-hover-text-color;
+    }
+  }
+}
+
+.mysoc-footer__divider {
+  border-top: 1px solid $mysoc-footer-divider-color;
+  margin: 2em 0;
+
+  @media (min-height: 900px) {
+    margin: 3em 0;
+  }
+}
+
+.mysoc-footer__site-name {
+  font-size: $mysoc-footer-site-name-font-size;
+  line-height: $mysoc-footer-site-name-line-height;
+  font-weight: bold;
+  margin: 0 0 $mysoc-footer-site-name-margin-bottom 0;
+  color: $mysoc-footer-site-name-text-color;
+}
+
+.mysoc-footer__links {
+  font-size: 1em;
+  line-height: 1.2em;
+
+  @media (min-width: $mysoc-footer-breakpoint-sm){
+    overflow: auto;
+    margin: 0 -1em;
+
+    // Line up top of .mysoc-footer__links with top of .mysoc-footer__site-description
+    $factor: $mysoc-footer-site-name-font-size / 1em;
+    padding-top: ( $mysoc-footer-site-name-line-height*$factor + $mysoc-footer-site-name-margin-bottom*$factor );
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    @media (min-width: $mysoc-footer-breakpoint-sm){
+      float: left;
+      width: 50%;
+      padding: 0 1em;
+    }
+  }
+
+  li {
+    margin: 0 0 0.5em 0;
+  }
+
+  a {
+    display: block;
+  }
+}
+
+.mysoc-footer__donate {
+  background-color: $mysoc-footer-donate-background-color;
+  color: $mysoc-footer-donate-text-color;
+  padding: 1.5em;
+  border-radius: 0.3em;
+  margin-top: 1em;
+
+  @media (min-width: $mysoc-footer-breakpoint-sm){
+    margin-top: 0;
+  }
+  p {
+    margin-top: 0;
+  }
+}
+
+.mysoc-footer__donate__button {
+  display: inline-block;
+  background-color: $mysoc-footer-donate-button-background-color;
+  color: $mysoc-footer-donate-button-text-color !important;
+  padding: 0.5em 1em;
+  border-radius: 0.3em;
+  font-weight: bold;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: $mysoc-footer-donate-button-hover-background-color;
+    color: $mysoc-footer-donate-button-hover-text-color !important;
+  }
+}
+
+.mysoc-footer__orgs {
+  overflow: auto;
+  margin: 0 -1em;
+}
+
+.mysoc-footer__org {
+  float: left;
+  padding: 0 1em;
+}
+
+.mysoc-footer__org__logo {
+  display: block;
+  margin-top: 0.5em;
+  height: 0;
+  overflow: hidden;
+  padding-top: 32px;
+}
+
+.mysoc-footer__org__logo--mysociety {
+  width: 152px;
+  background: transparent url('#{$mysoc-footer-image-path}logo-mysociety.png') 0 0 no-repeat;
+  background-size: 152px 32px;
+  @media ($high-dpi-screen) {
+    background-image: url('#{$mysoc-footer-image-path}[email protected]');
+  }
+  background-image: url('#{$mysoc-footer-image-path}logo-mysociety.svg'), none;
+}
+
+.mysoc-footer__legal {
+  font-size: 0.8em;
+  line-height: 1.5em;
+  color: $mysoc-footer-legal-text-color;
+}
+
+.mysoc-footer__badges {
+  margin: 0 -4px;
+  padding: 0;
+  list-style: none;
+
+  @media (min-width: $mysoc-footer-breakpoint-sm){
+    text-align: right;
+  }
+
+  li {
+    margin: 0 4px;
+    display: inline-block;
+  }
+}
+
+.mysoc-footer__badge {
+  display: inline-block;
+  width: 32px;
+  height: 0;
+  padding-top: 32px;
+  overflow: hidden;
+  border-radius: 100%;
+}
+
+.mysoc-footer__badge--github {
+  background: transparent url('#{$mysoc-footer-image-path}icon-github.png') 0 0 no-repeat;
+  background-size: 32px 32px;
+  @media ($high-dpi-screen) {
+    background-image: url('#{$mysoc-footer-image-path}[email protected]');
+  }
+  background-image: url('#{$mysoc-footer-image-path}icon-github.svg'), none;
+}
+
+.mysoc-footer__badge--twitter {
+  background: transparent url('#{$mysoc-footer-image-path}icon-twitter.png') 0 0 no-repeat;
+  background-size: 32px 32px;
+  @media ($high-dpi-screen) {
+    background-image: url('#{$mysoc-footer-image-path}[email protected]');
+  }
+  background-image: url('#{$mysoc-footer-image-path}icon-twitter.svg'), none;
+}
+
+.mysoc-footer__badge--facebook {
+  background: transparent url('#{$mysoc-footer-image-path}icon-facebook.png') 0 0 no-repeat;
+  background-size: 32px 32px;
+  @media ($high-dpi-screen) {
+    background-image: url('#{$mysoc-footer-image-path}[email protected]');
+  }
+  background-image: url('#{$mysoc-footer-image-path}icon-facebook.svg'), none;
+}

views/sass/main.scss

@@ -55,6 +55,7 @@ body {
 @import 'typography';
 @import 'components';
 @import 'header';
+@import 'mysociety-footer';
 @import 'content';
 @import 'home';
 @import 'messages';