feat: Add site-container to header and layout

newrelic · Jun 16, 2020 · a320069 · a320069
1 parent 98e20f6
commit a320069
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 35 deletions.
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -10,38 +10,40 @@ const Header = () => {
 
   return (
     <header className={cx(styles.main, { [styles.isOpen]: isOpen })}>
-      <nav role="navigation" aria-label="New Relic" className={styles.navNr}>
-        <h3 className={styles.hideOnDesktop}>Sites</h3>
-        <ul>
-          <li className={styles.hideOnMobile}>
-            <ExternalLink
-              className={cx(styles.logo, styles.logoNr)}
-              href="//newrelic.com"
-            />
-          </li>
-          <li>
-            <Link to="/" className={styles.isActive}>
-              Developers
-            </Link>
-          </li>
-          <li>
-            <ExternalLink href="//opensource.newrelic.com">
-              Open Source
-            </ExternalLink>
-          </li>
-          <li>
-            <ExternalLink href="//docs.newrelic.com">
-              Documentation
-            </ExternalLink>
-          </li>
-        </ul>
-      </nav>
+      <div className="site-container">
+        <nav role="navigation" aria-label="New Relic" className={styles.navNr}>
+          <h3 className={styles.hideOnDesktop}>Sites</h3>
+          <ul>
+            <li className={styles.hideOnMobile}>
+              <ExternalLink
+                className={cx(styles.logo, styles.logoNr)}
+                href="//newrelic.com"
+              />
+            </li>
+            <li>
+              <Link to="/" className={styles.isActive}>
+                Developers
+              </Link>
+            </li>
+            <li>
+              <ExternalLink href="//opensource.newrelic.com">
+                Open Source
+              </ExternalLink>
+            </li>
+            <li>
+              <ExternalLink href="//docs.newrelic.com">
+                Documentation
+              </ExternalLink>
+            </li>
+          </ul>
+        </nav>
 
-      <HamburgerMenu
-        className={styles.hamburgerMenu}
-        toggle={() => setIsOpen(!isOpen)}
-        isOpen={isOpen}
-      />
+        <HamburgerMenu
+          className={styles.hamburgerMenu}
+          toggle={() => setIsOpen(!isOpen)}
+          isOpen={isOpen}
+        />
+      </div>
     </header>
   );
 };

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 
 import Footer from './Footer';
 import Header from './Header';
@@ -11,7 +12,7 @@ import './styles.scss';
 const Layout = ({ children }) => (
   <div className={styles.layout}>
     <Header />
-    <div className={styles.main}>
+    <div className={cx(styles.main, 'site-container')}>
       <Sidebar pages={pages} />
       <main className={styles.content}>{children}</main>
     </div>

diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
@@ -7,8 +7,6 @@
 .main {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
-  max-width: 1460px;
-  margin: 0 auto;
   width: 100%;
 }
 

diff --git a/src/components/styles.scss b/src/components/styles.scss
@@ -182,7 +182,7 @@ code {
   }
 
   .site-container {
-    max-width: 1200px;
+    max-width: 1460px;
     margin: auto;
   }
 }