Add Cards, Card, and CardHeadline components; tidy moar

* remove Diagram "Deploy" icon for now
* tidy webpack.svg
* make use of presets.radius, brand colors
* tidy Diagram, Masthead and presets moar
* add gutters component, can't make rhythm work in utils/presets.js

www/src/assets/logos.js

@@ -2,4 +2,3 @@ export JSIcon from "./js.svg"
 export GraphQLIcon from "./graphql.svg"
 export WebpackIcon from "./webpack.svg"
 export ReactJSIcon from "./react.svg"
-export StaticWebHostIcon from "./static-web-host.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

@@ -17,7 +17,7 @@ const CtaButton = ({ to, overrideCSS, children }) =>
       display: `inline-block`,
       fontFamily: options.headerFontFamily.join(`,`),
       padding: `${rhythm(1 / 3)} ${rhythm(1 / 2)}`,
-      borderRadius: `3px`,
+      borderRadius: presets.radius,
       // Increase specificity
       [presets.Tablet]: {
         ...scale(2 / 5),