[www] Refactor Homepage and Navigation & convert diagram to html/css

www/src/assets/logos.js

@@ -0,0 +1,4 @@
+export JSIcon from "./js.svg"
+export GraphQLIcon from "./graphql.svg"
+export WebpackIcon from "./webpack.svg"
+export ReactJSIcon from "./react.svg"

www/src/components/card-headline.js

@@ -0,0 +1,27 @@
+import presets from "../utils/presets"
+import { rhythm, scale, options } from "../utils/typography"
+
+const CardHeadline = ({ children }) =>
+  <h2
+    css={{
+      ...scale(2 / 5),
+      lineHeight: 1.2,
+      marginTop: 0,
+      [presets.Tablet]: {
+        fontSize: scale(1 / 10).fontSize,
+      },
+      [presets.Desktop]: {
+        fontSize: scale(3 / 10).fontSize,
+      },
+      [presets.VHd]: {
+        fontSize: scale(5 / 10).fontSize,
+      },
+      [presets.VVHd]: {
+        fontSize: scale(7 / 10).fontSize,
+      },
+    }}
+  >
+    {children}
+  </h2>
+
+export default CardHeadline

www/src/components/card.js

@@ -0,0 +1,57 @@
+import presets from "../utils/presets"
+import { rhythm, scale, options } from "../utils/typography"
+import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters"
+
+const Card = ({ children }) =>
+  <div
+    css={{
+      boxSizing: `border-box`,
+      display: `flex`,
+      [presets.Tablet]: {
+        flex: `0 0 50%`,
+        maxWidth: `50%`,
+        boxShadow: `0 1px 0 0 ${presets.veryLightPurple}`,
+        "&:nth-child(5),&:nth-child(6)": {
+          boxShadow: `none`,
+        },
+        "&:nth-child(2n)": {
+          borderLeft: `1px solid ${presets.veryLightPurple}`,
+        },
+      },
+      [presets.Hd]: {
+        flex: `0 0 33.33333333%`,
+        maxWidth: `33.33333333%`,
+        borderLeft: `1px solid ${presets.veryLightPurple}`,
+        "&:nth-child(4)": {
+          boxShadow: `none`,
+        },
+        "&:nth-child(3n+1)": {
+          borderLeft: 0,
+        },
+      },
+    }}
+  >
+    <div
+      css={{
+        padding: rhythm(presets.gutters.default / 2),
+        paddingBottom: 0,
+        [presets.Mobile]: {
+          padding: vP,
+          paddingBottom: 0,
+        },
+        [presets.Phablet]: {
+          padding: vP,
+        },
+        [presets.VHd]: {
+          padding: vPHd,
+        },
+        [presets.VVHd]: {
+          padding: vPVHd,
+        },
+      }}
+    >
+      {children}
+    </div>
+  </div>
+
+export default Card

www/src/components/cards.js

@@ -0,0 +1,19 @@
+import presets from "../utils/presets"
+import { rhythm, scale, options } from "../utils/typography"
+import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters"
+
+const Cards = ({ children }) =>
+  <div
+    css={{
+      display: `flex`,
+      flex: `0 1 auto`,
+      flexWrap: `wrap`,
+      background: `rgba(255, 255, 255, 0.975)`,
+      borderRadius: presets.radiusLg,
+      boxShadow: `0 5px 20px rgba(25, 17, 34, 0.1)`,
+    }}
+  >
+    {children}
+  </div>
+
+export default Cards

www/src/components/cta-button.js

@@ -0,0 +1,51 @@
+import Link from "gatsby-link"
+import { rhythm, scale, options } from "../utils/typography"
+import presets from "../utils/presets"
+
+import { css } from "glamor"
+
+let stripeAnimation = css.keyframes({
+  "0%": { backgroundPosition: `0 0` },
+  "100%": { backgroundPosition: `30px 60px` },
+})
+
+const CtaButton = ({ to, overrideCSS, children }) =>
+  <Link
+    css={{
+      ...overrideCSS,
+      ...scale(1 / 5),
+      display: `inline-block`,
+      fontFamily: options.headerFontFamily.join(`,`),
+      padding: `${rhythm(1 / 3)} ${rhythm(1 / 2)}`,
+      borderRadius: presets.radius,
+      // Increase specificity
+      [presets.Phablet]: {
+        ...scale(2 / 5),
+        padding: `${rhythm(1 / 2)} ${rhythm(1)}`,
+      },
+      "&&": {
+        border: `1px solid ${presets.brand}`,
+        boxShadow: `none`,
+        color: presets.brand,
+        backgroundColor: `transparent`,
+        backgroundSize: `30px 30px`,
+        transiton: `all .15s ease-out`,
+        ":hover": {
+          backgroundSize: `30px 30px`,
+          backgroundColor: presets.brand,
+          backgroundImage: `linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.1) 75%, transparent 75%, transparent)`,
+          color: `white`,
+          animation: `${stripeAnimation} 2.8s linear infinite`,
+        },
+        ":after": {
+          content: ``,
+          display: `block`,
+        },
+      },
+    }}
+    to={to}
+  >
+    {children}
+  </Link>
+
+export default CtaButton