doc footer layout tweaks

src/components/DocFooter.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { ReactComponent as Pencil } from '../images/pencil.svg'
 import styles from './DocFooter.module.scss'
-import { githubContentPath, githubDevOceanPath } from '../../config'
+import { social, githubContentPath, githubDevOceanPath } from '../../config'
 
 const DocFooter = ({ post, url, externalName }) => {
     let path
@@ -24,13 +24,7 @@ const DocFooter = ({ post, url, externalName }) => {
 
     return (
         <footer className={styles.footer}>
-            <a
-                href="https://gitter.im/oceanprotocol/Lobby"
-                className={post && !post.html ? styles.active : null}
-            >
-                ✋ Ask a question on Gitter
-            </a>
-            <br />
+            <a href={social.gitter}>✋ Ask a question on Gitter</a>
             <a href={url} className={post && !post.html ? styles.active : null}>
                 <Pencil /> Edit this page on GitHub
                 {externalName && (

src/components/DocFooter.module.scss

@@ -6,12 +6,22 @@
     font-size: $font-size-small;
     text-align: center;
 
+    @media (min-width: $break-point--small) {
+        display: flex;
+        justify-content: space-between;
+    }
+
     a {
         font-family: $font-family-button;
         font-weight: $font-weight-bold;
         text-transform: uppercase;
         color: $brand-grey-light;
-        margin: 0 $spacer / 2;
+        display: block;
+        margin-bottom: $spacer / 2;
+
+        @media (min-width: $break-point--small) {
+            margin-bottom: 0;
+        }
 
         &:hover,
         &:focus {
@@ -24,6 +34,10 @@
             margin-bottom: -1px;
             fill: $brand-grey-light;
         }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 }