Add layout and css pre-reqs for foundation site

Signed-off-by: Brian Warner <[email protected]>

Author: brianwarner

src/assets/css/_css/foundation.less

@@ -0,0 +1,34 @@
+.foundation {
+  .foundation-hero {
+    background: url(http://github.com/%3Cspan%20class=%22pl-s%22%3E/img/graphql_foundation-hero.jpg%3C/span%3E) top left;
+    height: 35vmin;
+    position: relative;
+    width: 100%;
+
+    .foundation-hero-inner-content {
+      background-color: rgba(221,23,151,0.75);
+      height: 35vmin;
+      width: 100%;
+      position: absolute;
+    }
+
+    img {
+      padding: 4vmin 0 1vmin;
+      height: 20vmin;
+      display: block;
+      margin: 0 auto;
+    }
+
+    h2 {
+      color: #FFF;
+      display: block;
+      margin: auto;
+      padding: 2vmin 5vmin;
+      height: 15vmin;
+      width: 100%;
+      text-align: center;
+      font-size: 2.5vmin;
+      line-height: 3vmin;
+    }
+  }
+}

src/components/FoundationLayout/index.tsx

@@ -0,0 +1,48 @@
+import React from "react"
+import { Link } from "gatsby"
+import DocsSidebar from "../DocsSidebar"
+import Marked from '../Marked'
+
+interface Props {
+  title: string
+  heroText: string
+  nextDoc: any
+  permalink: string
+  sideBarData: any
+  rawMarkdownBody: string
+  pageContext: any
+}
+
+const index = ({ title, heroText, nextDoc, sideBarData, rawMarkdownBody, pageContext }: Props) => {
+  return (
+    <section>
+      <div class="foundation">
+        <div className="foundation-hero">
+          <div className="foundation-hero-inner-content">
+              <img src="/img/graphql_foundation-logo-white.svg" alt="GraphQL Foundation logo" />
+              <h2>{heroText}</h2>
+          </div>
+        </div>
+        <div className="documentationContent">
+          <div className="inner-content">
+            <h1>{title}</h1>
+            <Marked pageContext={pageContext}>{rawMarkdownBody}</Marked>
+            {nextDoc?.frontmatter?.permalink && (
+              <Link className="read-next" to={nextDoc.frontmatter.permalink}>
+                <span className="read-next-continue">
+                  Continue Reading &rarr;
+                </span>
+                <span className="read-next-title">
+                  {nextDoc.frontmatter.title}
+                </span>
+              </Link>
+            )}
+          </div>
+          <DocsSidebar sideBarData={sideBarData} />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default index