Merge remote-tracking branch 'origin/master' into jerel/layout-tweaks

src/components/Footer.js

@@ -1,20 +1,36 @@
 import React from 'react';
 import { Link } from 'gatsby';
+import cx from 'classnames';
+import ExternalLink from './ExternalLink';
 import styles from './Footer.module.scss';
 import Logo from './Logo';
 
 const Footer = () => (
   <footer className={styles.footer}>
-    <div className={styles.leftColumn}>
-      <Link to="/">
-        <Logo
-          className={styles.logo}
-          textColor="#7DA5A8"
-          bracketColor="#7DA5A8"
-        />
-      </Link>
-      <div className={styles.copyright}>
-        Copyright &copy; 2020 New Relic Inc.
+    <div className={cx('site-container', styles.container)}>
+      <div className={styles.left}>
+        <Link to="/">
+          <Logo
+            className={styles.logo}
+            textColor="#7DA5A8"
+            bracketColor="#7DA5A8"
+          />
+        </Link>
+        <div className={styles.copyright}>
+          Copyright &copy; 2020 New Relic Inc.
+        </div>
+      </div>
+
+      <div className={styles.right}>
+        <Link to="/" className={styles.edit}>
+          Edit this page
+        </Link>
+        <ExternalLink
+          href="https://github.com/newrelic/developer-website/issues/new/choose"
+          className={styles.issue}
+        >
+          Create an issue
+        </ExternalLink>
       </div>
     </div>
   </footer>

src/components/Footer.module.scss

@@ -1,12 +1,17 @@
 .footer {
-  --footer-text-color: #7da5a8;
-
   background-color: var(--color-neutrals-800);
-  color: var(--footer-text-color);
+  color: var(--color-teal-300);
   padding: 1.5rem 0;
+  font-size: 0.75rem;
 }
 
-.leftColumn {
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.left {
   display: flex;
   align-items: center;
 
@@ -20,7 +25,6 @@
 }
 
 .copyright {
-  font-size: 0.75rem;
   margin-left: 1rem;
   padding: 0.75rem 0.5rem;
   border-left: 1px dotted var(--color-neutrals-700);
@@ -32,31 +36,33 @@
   }
 }
 
-.nav {
-  @media (max-width: 760px) {
-    display: none;
-  }
+.right {
+  display: flex;
 
-  ul {
+  a {
+    color: var(--color-teal-300);
+    margin-left: 1rem;
+    padding: 0.2rem;
+    padding-right: 0;
     display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    li {
-      text-align: center;
-    }
+    align-items: center;
 
-    a {
-      color: var(--footer-text-color);
-      text-decoration: none;
-      font-size: 0.9rem;
-      padding: 0.5rem 0 0.5rem 1rem;
+    &:before {
+      content: '';
       display: inline-block;
-    }
-
-    a:hover {
-      color: var(--color-white);
+      height: 1rem;
+      width: 1rem;
+      background-repeat: no-repeat;
+      background-position: center center;
+      margin-right: 0.5rem;
     }
   }
 }
+
+.edit:before {
+  background-image: url('../images/edit.svg');
+}
+
+.issue:before {
+  background-image: url('../images/github.svg');
+}

src/components/Layout.js

@@ -15,7 +15,7 @@ const Layout = ({ children }) => (
       <Sidebar pages={pages} />
       <main className={styles.content}>{children}</main>
     </div>
-    <Footer pages={pages} />
+    <Footer />
   </div>
 );
 

src/components/styles.scss

@@ -180,4 +180,9 @@ code {
     font-size: 1.125rem;
     line-height: 2rem;
   }
+
+  .site-container {
+    max-width: 1200px;
+    margin: auto;
+  }
 }