From 5fea26c7f7786e990c013f6036a9ad68b16e2025 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 12 Jul 2017 15:22:52 +0100
Subject: [PATCH] Fix alignment and spacing of page footer on mobile

SASS pinched from here:
https://github.com/alphagov/pay-product-page/blob/696ce451a74866ee01412628af894c9698019678/source/pay-product-page/stylesheets/modules/_footer-categories.scss
---
 app/assets/stylesheets/app.scss               | 20 -------------
 .../stylesheets/components/site-footer.scss   | 29 +++++++++++++++++++
 app/assets/stylesheets/main.scss              |  1 +
 3 files changed, 30 insertions(+), 20 deletions(-)
 create mode 100644 app/assets/stylesheets/components/site-footer.scss

diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
index d9ee28958..1e9d32b95 100644
--- a/app/assets/stylesheets/app.scss
+++ b/app/assets/stylesheets/app.scss
@@ -126,26 +126,6 @@ td {
   margin-top: $gutter;
 }
 
-#footer {
-
-  .footer-categories {
-
-    @extend %site-width-container;
-
-    &-wrapper {
-      padding: 0 0 $gutter * 2;
-      margin: 0 0 $gutter;
-      border-bottom: 1px solid $border-colour;
-    }
-
-    h2 {
-      margin: 0 0 $gutter-two-thirds;
-    }
-
-  }
-
-}
-
 .form-label {
   margin-bottom: 5px;
 }
diff --git a/app/assets/stylesheets/components/site-footer.scss b/app/assets/stylesheets/components/site-footer.scss
new file mode 100644
index 000000000..e4f2e24e1
--- /dev/null
+++ b/app/assets/stylesheets/components/site-footer.scss
@@ -0,0 +1,29 @@
+#footer {
+  .footer-categories {
+    margin: 0 auto;
+
+    &-wrapper {
+      margin-bottom: $gutter;
+      padding-bottom: $gutter * 2;
+      border-bottom: 1px solid $grey-2;
+    }
+
+    h2 {
+      margin: 20px 0;
+
+      @include media(tablet) {
+        margin-top: 0;
+      }
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      margin-bottom: 5px;
+      font-size: 16px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 89b283ddd..ec57bf390 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -34,6 +34,7 @@ $path: '/static/images/';
 
 // Specific to this application
 @import 'grids';
+@import 'components/site-footer';
 @import 'components/placeholder';
 @import 'components/sms-message';
 @import 'components/page-footer';