From 65a32dd1ef11d0638d1ce04c4e6337206ec8bb2f Mon Sep 17 00:00:00 2001
From: magsout <guillaume.demesy@gmail.com>
Date: Fri, 14 Apr 2017 22:32:58 +0200
Subject: [PATCH 1/3] Issue #1419 - Fixed  overflow SVG, causing a scroll on
 all the page

---
 .../css/development/components/footer.css     | 34 ++++++++-----------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/webcompat/static/css/development/components/footer.css b/webcompat/static/css/development/components/footer.css
index 0a01ca612..f5d84e166 100644
--- a/webcompat/static/css/development/components/footer.css
+++ b/webcompat/static/css/development/components/footer.css
@@ -54,6 +54,7 @@
 
   /* link */
   .wc-Footer-link {
+    display: block;
     color: inherit;
     text-decoration:none;
   }
@@ -72,28 +73,23 @@
         margin-left:1em;
       }
     }
+
 .wc-Twitter {
-  
-  width:1.5em;
-  display:inline-block;
-  background-image:url(/img/twitter.svg);
-  color:transparent;
+  display: block;
+  width: 1.5em;
+  height: 1.5em;
+  overflow: hidden;
+  background-image: url("../../../img/twitter.svg");
   background-repeat: no-repeat;
+  color: transparent;
 }
+
 .wc-Github {
-  
-  width:1.5em;
-  display:inline-block;
-  background-image:url(/img/github-logo.svg);
-  color:transparent;
+  display: block;
+  width: 1.5em;
+  height: 1.5em;
+  overflow: hidden;
+  background-image: url("../../../img/github-logo.svg");
   background-repeat: no-repeat;
-}
-
-@media all and (max-width: 28em) {
-  .wc-Twitter {
-    margin:0;
-  }
-  .wc-Github {
-    margin:0;
-  }
+  color: transparent;
 }

From d97f35e930f54142d2e69d72d2aa33f303f7b84d Mon Sep 17 00:00:00 2001
From: magsout <guillaume.demesy@gmail.com>
Date: Fri, 14 Apr 2017 22:37:07 +0200
Subject: [PATCH 2/3] Issue #1491 - fixed className to be consistent with the
 Component Footer

---
 .../css/development/components/footer.css     | 45 ++++++++-----------
 webcompat/templates/shared/footer.html        |  4 +-
 2 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/webcompat/static/css/development/components/footer.css b/webcompat/static/css/development/components/footer.css
index f5d84e166..1affe6f00 100644
--- a/webcompat/static/css/development/components/footer.css
+++ b/webcompat/static/css/development/components/footer.css
@@ -8,14 +8,13 @@
 }
 
 .wc-Footer {
-  font-size:var(--Footer-fontSize);
+  font-size: var(--Footer-fontSize);
   background-color: var(--Footer-backgroundColor);
   border-top: 5px solid var(--Footer-border);
   padding: 1em 0;
 }
 
 @media all and (min-width: 28.12em) {
-
   .wc-Footer {
     margin-top: 3em;
   }
@@ -33,7 +32,6 @@
   }
 
   @media all and (min-width: 37.52em) {
-
     .wc-Footer-list {
       display: flex;
     }
@@ -41,7 +39,6 @@
 
   /* item */
   @media all and (min-width: 37.52em) {
-
     .wc-Footer-item + .wc-Footer-item {
       padding-left: .75em;
     }
@@ -56,7 +53,7 @@
   .wc-Footer-link {
     display: block;
     color: inherit;
-    text-decoration:none;
+    text-decoration: none;
   }
 
     /* event */
@@ -67,29 +64,25 @@
 
     /* modifier */
     @media all and (min-width: 37.51em) {
-
       .wc-Footer-link--separator:after {
-        content:"//";
-        margin-left:1em;
+        content: "//";
+        margin-left: 1em;
       }
     }
 
-.wc-Twitter {
-  display: block;
-  width: 1.5em;
-  height: 1.5em;
-  overflow: hidden;
-  background-image: url("../../../img/twitter.svg");
-  background-repeat: no-repeat;
-  color: transparent;
-}
+  .wc-Footer-icon {
+    display: block;
+    width: 1.5em;
+    height: 1.5em;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    color: transparent;
+  }
 
-.wc-Github {
-  display: block;
-  width: 1.5em;
-  height: 1.5em;
-  overflow: hidden;
-  background-image: url("../../../img/github-logo.svg");
-  background-repeat: no-repeat;
-  color: transparent;
-}
+  .wc-Footer-icon--twitter {
+    background-image: url("../../../img/twitter.svg");
+  }
+
+  .wc-Footer-icon--github {
+    background-image: url("../../../img/github-logo.svg");
+  }
diff --git a/webcompat/templates/shared/footer.html b/webcompat/templates/shared/footer.html
index 8609d9929..9d051d1dc 100644
--- a/webcompat/templates/shared/footer.html
+++ b/webcompat/templates/shared/footer.html
@@ -26,12 +26,12 @@
       <ul class="wc-Footer-list r-ResetList">
         <li class="wc-Footer-item wc-Footer-item--follow">
           <a class="wc-Footer-link" href="https://twitter.com/webcompat/with_replies" target="_blank">
-            <span class="wc-Twitter">Follow on Twitter</span>
+            <span class="wc-Footer-icon wc-Footer-icon--twitter">Follow on Twitter</span>
           </a>
         </li>
         <li class="wc-Footer-item wc-Footer-item--follow">
           <a class="wc-Footer-link" href=" https://github.com/webcompat/webcompat.com/" target="_blank">
-            <span class="wc-Github">See on Github</span>
+            <span class="wc-Footer-icon wc-Footer-icon--github">See on Github</span>
           </a>
         </li>
       </ul>

From a572e800500b275f4f189797d9060195220d8bdc Mon Sep 17 00:00:00 2001
From: magsout <guillaume.demesy@gmail.com>
Date: Wed, 26 Apr 2017 08:12:13 +0200
Subject: [PATCH 3/3] Issue #1491 - added more space on small screen between
 these icons

---
 .../static/css/development/components/footer.css  | 15 +++++++++++++--
 webcompat/templates/shared/footer.html            |  2 +-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/webcompat/static/css/development/components/footer.css b/webcompat/static/css/development/components/footer.css
index 1affe6f00..f84bc904b 100644
--- a/webcompat/static/css/development/components/footer.css
+++ b/webcompat/static/css/development/components/footer.css
@@ -5,6 +5,7 @@
   --Footer-backgroundColor: #fff;
   --Footer-border: var(--base-colorDark);
   --Footer-colorHover: var(--base-colorDark);
+  --Footer-withIcon : 1.5em;
 }
 
 .wc-Footer {
@@ -37,6 +38,16 @@
     }
   }
 
+  /* modifier */
+  @media all and (max-width: 37.51em) {
+    .wc-Footer-list--right {
+      display: flex;
+      align-content: space-between;
+      flex-flow: row wrap;
+      width: var(--Footer-withIcon);
+    }
+  }
+
   /* item */
   @media all and (min-width: 37.52em) {
     .wc-Footer-item + .wc-Footer-item {
@@ -72,8 +83,8 @@
 
   .wc-Footer-icon {
     display: block;
-    width: 1.5em;
-    height: 1.5em;
+    width: var(--Footer-withIcon);
+    height: var(--Footer-withIcon);
     overflow: hidden;
     background-repeat: no-repeat;
     color: transparent;
diff --git a/webcompat/templates/shared/footer.html b/webcompat/templates/shared/footer.html
index 9d051d1dc..a1bdbc696 100644
--- a/webcompat/templates/shared/footer.html
+++ b/webcompat/templates/shared/footer.html
@@ -23,7 +23,7 @@
           </a>
         </li>
       </ul>
-      <ul class="wc-Footer-list r-ResetList">
+      <ul class="wc-Footer-list wc-Footer-list--right r-ResetList">
         <li class="wc-Footer-item wc-Footer-item--follow">
           <a class="wc-Footer-link" href="https://twitter.com/webcompat/with_replies" target="_blank">
             <span class="wc-Footer-icon wc-Footer-icon--twitter">Follow on Twitter</span>