[docs] Use docs-page-shell (mapbox#7742)

* Use docs-page-shell

* fix p pre nesting error

* updates docs-page-shell

* adds cushion for footer

* adds spaces

* adds margin-left to footer to clear left_nav

* rm pad4 for consistent padding around content pages

* adds z-index to page-footer to make links active

batfish.config.js

@@ -10,7 +10,7 @@ module.exports = () => {
         stylesheets: [
             `${__dirname}/docs/components/site.css`,
             `${__dirname}/docs/components/prism_highlight.css`,
-            `${__dirname}/vendor/dotcom-page-shell/page-shell-styles.css`
+            `${__dirname}/vendor/docs-page-shell/page-shell-styles.css`
         ],
         applicationWrapperPath: `${__dirname}/docs/components/application-wrapper.js`,
         webpackLoaders: [
@@ -30,7 +30,7 @@ module.exports = () => {
         ],
         inlineJs: [
             {
-                filename: `${__dirname}/vendor/dotcom-page-shell/page-shell-script.js`
+                filename: `${__dirname}/vendor/docs-page-shell/page-shell-script.js`
             }
         ],
         dataSelectors: {

docs/components/page_shell.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Helmet from 'react-helmet';
-import ReactPageShell from '../../vendor/dotcom-page-shell/react-page-shell.js';
+import ReactPageShell from '../../vendor/docs-page-shell/react-page-shell.js';
 
 // initialize analytics
 if (typeof window !== 'undefined' && window.initializeMapboxAnalytics) {

docs/components/quickstart.js

@@ -73,18 +73,15 @@ export default class extends React.Component {
 
     render() {
         return (
-            <section className='pad4 contain'>
+            <section className='contain'>
                 <h1 className=''>Mapbox GL JS</h1>
                 <div className='pad1y quiet small'>Current version:
                     <span className='round fill-light pad0'><a href='https://github.com/mapbox/mapbox-gl-js/releases'>mapbox-gl.js v{version}</a></span>
                 </div>
                 <div className='prose space-bottom2'>
                     <p className='space-bottom2 pad1y'>
-                        Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from
-                        <a href='https://www.mapbox.com/help/define-vector-tiles'>vector tiles</a> and
-                        <a href={prefixUrl('/style-spec')}>Mapbox styles</a>.
-                        It is part of the Mapbox GL ecosystem, which includes
-                        <a href='https://www.mapbox.com/mobile/'>Mapbox Mobile</a>,
+                        Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from{' '}<a href='https://www.mapbox.com/help/define-vector-tiles'>vector tiles</a> and{' '}<a href={prefixUrl('/style-spec')}>Mapbox styles</a>.
+                        It is part of the Mapbox GL ecosystem, which includes{' '}<a href='https://www.mapbox.com/mobile/'>Mapbox Mobile</a>,
                         a compatible renderer written in C++ with bindings
                         for desktop and mobile platforms. To see what new features our team is working on,
                         take a look at our <a href={prefixUrl('/roadmap')}>roadmap</a>.
@@ -156,8 +153,7 @@ export default class extends React.Component {
                             Including it with a {'<link>'} in the head of the document via the Mapbox CDN is
                             the simplest and easiest way to provide the CSS,
                             but it is also bundled in the Mapbox module, meaning that if you have a bundler
-                            that can handle CSS, you can import the CSS from
-                            <pre><code>{`mapbox-gl/dist/mapbox-gl.css`}</code></pre>.
+                            that can handle CSS, you can import the CSS from <code>{`mapbox-gl/dist/mapbox-gl.css`}</code>.
                         </p>
                         <p>
                             Note too that if the CSS isn't available by the first render, as soon as the CSS is provided,

docs/components/site.css

@@ -30,3 +30,14 @@ a.dark-link:hover {
 
 div.toggle-sibling:hover { opacity: 0.7; }
 .line-height15 {line-height: 15px}
+
+@media only screen and (min-width: 640px) {
+  #page-footer-legal-social {
+    margin-left: 25% !important;
+  }
+}
+
+#page-footer {
+  z-index: 1;
+  position: relative;
+}