Merge pull request #163 from newrelic/jerel/layout-tweaks

Layout tweaks
newrelic · Jun 17, 2020 · 30e7b6c · 30e7b6c
2 parents 1dcb1de + f481c7a
commit 30e7b6c
Show file tree

Hide file tree

Showing 33 changed files with 794 additions and 621 deletions.
diff --git a/src/components/CodeSnippet.module.scss b/src/components/CodeSnippet.module.scss
@@ -11,6 +11,12 @@
   height: 100%;
   overflow-y: auto;
   padding: 1rem;
+
+  code {
+    display: block;
+    padding: 0;
+    background: none;
+  }
 }
 
 .lineNumber {

diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
@@ -18,19 +18,30 @@ const FeatherIcon = ({ className, name, size = '1em' }) => {
   ) : null;
 };
 
+// Icons from https://feathericons.com/
 const ICONS = {
+  edit: (
+    <>
+      <path d="M12 20h9" />
+      <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+    </>
+  ),
   copy: (
     <>
       <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
       <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
     </>
   ),
+  'chevron-right': <polyline points="9 18 15 12 9 6" />,
   clock: (
     <>
       <circle cx="12" cy="12" r="10" />
       <polyline points="12 6 12 12 16 14" />
     </>
   ),
+  github: (
+    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
+  ),
 };
 
 FeatherIcon.propTypes = {

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -3,25 +3,32 @@ import { Link } from 'gatsby';
 import cx from 'classnames';
 import ExternalLink from './ExternalLink';
 import styles from './Footer.module.scss';
+import FeatherIcon from './FeatherIcon';
+import Logo from './Logo';
 
 const Footer = () => (
   <footer className={styles.footer}>
     <div className={cx('site-container', styles.container)}>
       <div className={styles.left}>
-        <Link to="/" className={`${styles.logo} logo`} />
+        <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}>
+        <Link to="/">
+          <FeatherIcon className={styles.linkIcon} name="edit" size="1rem" />
           Edit this page
         </Link>
-        <ExternalLink
-          href="https://github.com/newrelic/developer-website/issues/new/choose"
-          className={styles.issue}
-        >
+        <ExternalLink href="https://github.com/newrelic/developer-website/issues/new/choose">
+          <FeatherIcon className={styles.linkIcon} name="github" size="1rem" />
           Create an issue
         </ExternalLink>
       </div>

diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss
@@ -2,8 +2,12 @@
   background-color: var(--color-neutrals-800);
   color: var(--color-teal-300);
   padding: 1.5rem 0;
-  margin-top: 10rem;
   font-size: 0.75rem;
+  z-index: 1;
+
+  :global(.site-container) {
+    padding: 0 2rem;
+  }
 }
 
 .container {
@@ -22,16 +26,12 @@
 }
 
 .logo {
-  width: 195px;
-  min-width: 195px;
-  height: 45px;
-  display: inline-block;
-  background-image: url('../images/developers-logo-footer.svg');
+  width: 200px;
 }
 
 .copyright {
   margin-left: 1rem;
-  padding: 0.75rem 0.5rem;
+  padding-left: 1rem;
   border-left: 1px dotted var(--color-neutrals-700);
 
   @media (max-width: 760px) {
@@ -46,28 +46,16 @@
 
   a {
     color: var(--color-teal-300);
-    margin-left: 1rem;
-    padding: 0.2rem;
     padding-right: 0;
     display: flex;
     align-items: center;
 
-    &:before {
-      content: '';
-      display: inline-block;
-      height: 1rem;
-      width: 1rem;
-      background-repeat: no-repeat;
-      background-position: center center;
-      margin-right: 0.5rem;
+    &:not(:first-child) {
+      margin-left: 1rem;
     }
   }
 }
 
-.edit:before {
-  background-image: url('../images/edit.svg');
-}
-
-.issue:before {
-  background-image: url('../images/github.svg');
+.linkIcon {
+  margin-right: 0.5rem;
 }
diff --git a/src/components/GithHubIcon.js b/src/components/GithHubIcon.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './GithHubIcon.module.scss';
+
+const GithHubIcon = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 15 15"
+    fill="none"
+    className={cx(styles.icon, className)}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.40075 0C3.31194 0 0 3.44078 0 7.68867C0 11.087 2.12163 13.9661 5.06102 14.9856C5.42903 15.0564 5.56532 14.8204 5.56532 14.6127C5.56532 14.4287 5.56077 13.9472 5.55623 13.3053C3.49819 13.7679 3.06207 12.2764 3.06207 12.2764C2.72586 11.389 2.23975 11.1483 2.23975 11.1483C1.56738 10.6716 2.28974 10.6811 2.28974 10.6811C3.03025 10.7377 3.42551 11.474 3.42551 11.474C4.08427 12.6493 5.15643 12.3094 5.57894 12.1112C5.6471 11.6156 5.83789 11.2758 6.04688 11.0823C4.40683 10.8935 2.68044 10.2327 2.68044 7.28748C2.68044 6.44735 2.96666 5.76296 3.44368 5.22489C3.36644 5.02667 3.11204 4.24789 3.51184 3.19063C3.51184 3.19063 4.13423 2.98296 5.54715 3.97885C6.13775 3.80893 6.76925 3.72398 7.40075 3.71926C8.02768 3.72398 8.66372 3.80893 9.25432 3.97885C10.6672 2.98296 11.2896 3.19063 11.2896 3.19063C11.694 4.24789 11.4396 5.03139 11.3623 5.22489C11.8348 5.76296 12.121 6.44735 12.121 7.28748C12.121 10.2421 10.3901 10.8887 8.74096 11.0823C9.00446 11.3183 9.24524 11.7902 9.24524 12.5077C9.24524 13.5366 9.23615 14.3626 9.23615 14.6174C9.23615 14.8251 9.3679 15.0611 9.74499 14.9856C12.6844 13.9661 14.8015 11.087 14.8015 7.69339C14.8015 3.44078 11.4895 0 7.40075 0Z"
+      fill="#000D0D"
+    />
+  </svg>
+);
+
+GithHubIcon.propTypes = {
+  className: PropTypes.string,
+};
+
+export default GithHubIcon;
diff --git a/src/components/GithHubIcon.module.scss b/src/components/GithHubIcon.module.scss
@@ -0,0 +1,4 @@
+.icon {
+  fill: none;
+  width: var(--icon-size, 15px);
+}
diff --git a/src/components/GlobalHeader.js b/src/components/GlobalHeader.js
@@ -1,21 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import { Link } from 'gatsby';
+import NewRelicLogo from './NewRelicLogo';
+import GithHubIcon from './GithHubIcon';
 import ExternalLink from './ExternalLink';
 
 import styles from './GlobalHeader.module.scss';
 
 const GlobalHeader = ({ className }) => {
   return (
-    <div className={`${styles.globalHeaderContainer} ${className}`}>
-      <div className={styles.globalHeaderContent}>
+    <div className={cx(styles.globalHeaderContainer, className)}>
+      <div className={cx(styles.globalHeaderContent, 'site-container')}>
         <div className={styles.leftSideLinksContainer}>
           <ExternalLink
             href="https://newrelic.com/"
-            className={styles.logo}
-            rel="noopener noreferrer"
+            className={styles.logoContainer}
           >
-            New Relic
+            <NewRelicLogo />
           </ExternalLink>
 
           <ul className={styles.leftSideLinks}>
@@ -44,12 +46,12 @@ const GlobalHeader = ({ className }) => {
         </div>
 
         <ul className={styles.rightSideButtons}>
-          <li className={`${styles.rightSideButton} ${styles.githubButton}`}>
+          <li className={styles.rightSideButton}>
             <ExternalLink
               href="https://github.com/newrelic/developer-website"
               className={styles.githubButtonLink}
             >
-              GitHub
+              <GithHubIcon />
             </ExternalLink>
           </li>
         </ul>

diff --git a/src/components/GlobalHeader.module.scss b/src/components/GlobalHeader.module.scss
@@ -1,25 +1,21 @@
 .globalHeaderContainer {
   background-color: var(--color-neutrals-100);
+
+  :global(.site-container) {
+    padding: 0 2rem;
+  }
 }
 
 .globalHeaderContent {
   height: var(--height-global-header);
   display: flex;
   justify-content: space-between;
-  max-width: 1180px;
-  margin: 0 auto;
 }
 
-.logo {
-  display: inline-block;
-  width: 79px;
-  height: 15px;
-  margin-right: 18px;
-  text-indent: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  background-image: url('../images/new-relic-logo.svg');
-  border: none;
+.logoContainer {
+  display: flex;
+  align-items: center;
+  margin-right: 1rem;
 }
 
 .leftSideLinksContainer {
@@ -73,41 +69,18 @@
 }
 
 .rightSideButton {
-  width: 14px;
-  height: 14px;
-  text-indent: 300%;
-  white-space: nowrap;
-  overflow: hidden;
-  padding: 0;
   opacity: 0.45;
-  background-repeat: no-repeat;
-  background-position: center;
-  transition: opacity 0.1s var(--ease-out-quad);
+  transition: opacity 0.2s ease-out;
 
   &:hover {
     cursor: pointer;
     opacity: 0.75;
   }
-
-  &:last-child {
-    padding-right: 0;
-    background-position: right;
-  }
-}
-
-.githubButton {
-  display: block;
-  width: 15px;
-  height: 15px;
-  text-indent: 0;
 }
 
 .githubButtonLink {
-  display: block;
-  background-image: url('../images/icon-github.svg');
-  text-indent: 100%;
-  white-space: nowrap;
-  overflow: hidden;
+  display: flex;
+  align-items: center;
 }
 
 // ==============================================================

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 
 import Footer from './Footer';
 import GlobalHeader from './GlobalHeader';
@@ -12,21 +13,25 @@ const Layout = ({ children }) => {
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
 
   return (
-    <>
+    <div className={styles.layout}>
       <GlobalHeader />
       <MobileHeader
         className={styles.hideOnDesktop}
         isOpen={isMobileNavOpen}
         toggle={() => setIsMobileNavOpen(!isMobileNavOpen)}
       />
-      <div className={styles.layout}>
+      <div className={cx(styles.main, 'site-container')}>
         <Sidebar className={styles.hideOnMobile} />
-        <main className={isMobileNavOpen && styles.hideOnMobile}>
+        <main
+          className={cx(styles.content, {
+            [styles.hideOnMobile]: isMobileNavOpen,
+          })}
+        >
           {children}
         </main>
       </div>
       <Footer />
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
@@ -1,24 +1,21 @@
 .layout {
   min-height: 100vh;
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  grid-gap: 1rem;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding-top: 1rem;
+  grid-template-rows: auto 1fr auto;
 }
 
-@media (max-width: 760px) {
-  .layout {
-    display: block;
+.main {
+  display: grid;
+  grid-template-columns: 300px minmax(0, 1fr);
+  width: 100%;
+
+  @media screen and (max-width: 760px) {
+    grid-template-columns: 1fr;
   }
 }
 
-@media screen and (max-width: 1240px) {
-  .layout {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
+.content {
+  padding: 2rem;
 }
 
 .hideOnDesktop {