From 719307f7ce2da50b75888b25145c82f396d2ae9f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 5 Feb 2019 18:08:51 +0100
Subject: [PATCH] doc footer layout tweaks

---
 src/components/DocFooter.jsx         | 10 ++--------
 src/components/DocFooter.module.scss | 16 +++++++++++++++-
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/DocFooter.jsx b/src/components/DocFooter.jsx
index 77d9383f..a0ced019 100644
--- a/src/components/DocFooter.jsx
+++ b/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 && (
diff --git a/src/components/DocFooter.module.scss b/src/components/DocFooter.module.scss
index b9e5b331..cd575f46 100644
--- a/src/components/DocFooter.module.scss
+++ b/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;
+        }
     }
 }