tweak footer styles

2 files changed, 27 insertions, 21 deletions

diff --git a/docs/assets/scss/_footer.scss b/docs/assets/scss/_footer.scss
index cb63456d7..1830e2bdc 100644
--- a/docs/assets/scss/_footer.scss
+++ b/docs/assets/scss/_footer.scss
@@ -6,24 +6,28 @@
   padding-top: 2rem;
   margin-top: 2rem;
   font-size: 85%;
-  color: #777;
-  border-top: 1px solid #eee;
+  color: $bd-graphite-light;
+  text-align: center;
+  background-color: $bd-graphite;
+
+  a {
+    color: #fff;
+  }
+
+  @include media-breakpoint-up(sm) {
+    text-align: left;
+  }
 }
+
 .bd-footer-links {
   padding-left: 0;
-  margin-top: 20px;
-  color: #999;
-}
-.bd-footer-links li {
-  display: inline;
-  padding: 0 2px;
-}
-.bd-footer-links li:first-child {
-  padding-left: 0;
-}
+  margin-bottom: 1rem;
+
+  li {
+    display: inline-block;
 
-@media (min-width: 768px) {
-  .bd-footer p {
-    margin-bottom: 0;
+    + li {
+      margin-left: 1rem;
+    }
   }
 }
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 7c8c2494f..b3bdf32e5 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -26,12 +26,14 @@
 @import "../../../scss/mixins";
 
 // Local docs variables
-$bd-purple:       #563d7c;
-$bd-purple-light: #cdbfe3;
-$bd-yellow:       #ffe484;
-$bd-danger:       #d9534f;
-$bd-warning:      #f0ad4e;
-$bd-info:         #5bc0de;
+$bd-purple:         #563d7c;
+$bd-purple-light:   #cdbfe3;
+$bd-graphite:       #2a2730;
+$bd-graphite-light: #99979c;
+$bd-yellow:         #ffe484;
+$bd-danger:         #d9534f;
+$bd-warning:        #f0ad4e;
+$bd-info:           #5bc0de;
 
 // Load docs components
 @import "layout";