[www] Add "Used by" block to homepage masthead (gatsbyjs#1707)

* This adds the "used by" block to the masthead as originally designed by @SachaG. On small screens said block is displayed below the homepage main content. For now the implementation drops the lighter of the two shapes in the right part of the design, but we can bring that back for bigger screens. This PR currently also implements Futura PT 700 for the homepage masthead claim. This currently happens via Typekit until we decide if it's worth buying the additional weight or not. It's relatively easy to revert this to get this PR through though. Along the way: * remove obsolete presets.purple; use preset.brand * remove obsolete presets.brandDark; use preset.brand * add presets for animation curve and speed * fix padding of last "social link" in main navigation * reduce CtaButton inner whitespace * Remove obsolete breakpoints * Prevent logos displaying on bright masthead background for max-height: 650px screens * Remove Futura PT 700/Heavy As discussed with Kyle via Discord. * Bring back Futura for "Used by" * Unstick masthead background * Almost there ✌️ * Show "Used by" in masthead for Phablet and up * Social links: right-aligned for Phablet and up, fix icon alignment, add title attribute * Tidy: don't use color keyword, lowercase CSS class names (analog to Kyle's .main-body) Still missing some love for "Used by on small screens, both on when displayed below the main content as well as on Phablet.
mcallistersean · Aug 5, 2017 · b8183f6 · b8183f6
1 parent e5d6656
commit b8183f6
Show file tree

Hide file tree

Showing 12 changed files with 487 additions and 299 deletions.
diff --git a/www/src/assets/fabric.svg b/www/src/assets/fabric.svg
diff --git a/www/src/assets/formidable.svg b/www/src/assets/formidable.svg
diff --git a/www/src/assets/logos.js b/www/src/assets/logos.js
@@ -2,3 +2,6 @@ export JSIcon from "./js.svg"
 export GraphQLIcon from "./graphql.svg"
 export WebpackIcon from "./webpack.svg"
 export ReactJSIcon from "./react.svg"
+export SegmentIcon from "./segment.svg"
+export FormidableIcon from "./formidable.svg"
+export FabricIcon from "./fabric.svg"
diff --git a/www/src/assets/segment.svg b/www/src/assets/segment.svg
diff --git a/www/src/components/cta-button.js b/www/src/components/cta-button.js
@@ -18,11 +18,14 @@ const CtaButton = ({ to, overrideCSS, children }) =>
       fontFamily: options.headerFontFamily.join(`,`),
       padding: `${rhythm(1 / 3)} ${rhythm(1 / 2)}`,
       borderRadius: presets.radius,
-      // Increase specificity
-      [presets.Phablet]: {
+      [presets.Tablet]: {
         ...scale(2 / 5),
+        padding: `${rhythm(1 / 3)} ${rhythm(3 / 5)}`,
+      },
+      [presets.VHd]: {
         padding: `${rhythm(1 / 2)} ${rhythm(1)}`,
       },
+      // Increase specificity
       "&&": {
         border: `1px solid ${presets.brand}`,
         boxShadow: `none`,
@@ -34,7 +37,7 @@ const CtaButton = ({ to, overrideCSS, children }) =>
           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`,
+          color: `#fff`,
           animation: `${stripeAnimation} 2.8s linear infinite`,
         },
         ":after": {

diff --git a/www/src/components/discord.js b/www/src/components/discord.js
@@ -1,4 +1,4 @@
-const DiscordIcon = () =>
+const DiscordIcon = ({ overrideCSS }) =>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -8,7 +8,7 @@ const DiscordIcon = () =>
     height="1em"
     width="1em"
     preserveAspectRatio="xMidYMid meet"
-    style={{ verticalAlign: `middle` }}
+    css={{ verticalAlign: `middle`, ...overrideCSS }}
   >
     <g>
       <path d="M11.5,11.7c-0.8,0-1.4,0.7-1.4,1.6s0.6,1.6,1.4,1.6c0.8,0,1.4-0.7,1.4-1.6

diff --git a/www/src/components/masthead-bg.js b/www/src/components/masthead-bg.js
@@ -14,37 +14,17 @@ const cover = {
   bottom: 0,
 }
 
-const MastheadBgRightPoly = ({ fill }) =>
-  <polygon fill={fill} points="-27,105 83,-5 130,-5 130,105 " />
-
-const MastheadBgRightGroup = ({
-  brightOff,
-  darkOff,
-  cssClassName,
-  brightBg,
-}) => {
-  const bg = brightBg ? brightBg : presets.brandLight
-
-  return (
-    <g className={`Masthead-bg-right-group ${cssClassName}`}>
-      <g className="bright" transform={`translate(${brightOff})`}>
-        <MastheadBgRightPoly fill={bg} />
-      </g>
-      <g className="dark" transform={`translate(${darkOff})`}>
-        <MastheadBgRightPoly fill={presets.brandDark} />
-      </g>
-    </g>
-  )
-}
-
 const MastheadBg = () =>
   <div
-    className="Masthead-bg"
+    className="masthead-bg"
     css={{
       ...cover,
-      position: `fixed`,
+      position: `absolute`,
+      background: `#fff`,
+      bottom: `auto`,
+      height: `200vh`,
+      overflow: `hidden`,
       zIndex: -1,
-      background: `white`,
     }}
   >
     <div
@@ -66,107 +46,93 @@ const MastheadBg = () =>
         },
       }}
     />
+
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      className="Masthead-bg-right"
-      viewBox="0 0 100 100"
-      preserveAspectRatio="xMidYMin slice"
+      viewBox="0 0 10 10"
+      preserveAspectRatio="xMinYMin slice"
+      className="masthead-bg-left"
       css={{
-        ...cover,
         position: `absolute`,
+        ...cover,
+        left: vPOff,
+        zIndex: -2,
+        [presets.Hd]: {
+          left: vPHdOff,
+        },
+        [presets.VHd]: {
+          left: vPVHdOff,
+        },
+        [presets.VVHd]: {
+          left: vPVVHdOff,
+        },
         width: `100%`,
         height: `100%`,
-        zIndex: -1,
       }}
     >
-      <style type="text/css">
-        {`
-          .Masthead-bg-right--sm-landscape,
-          .Masthead-bg-right--lg,
-          .Masthead-bg-right--lg-landscape {
-            display: none;
+      <polygon fill={presets.brandLighter} points="-5,-5 15,15 -5,15 " />
+    </svg>
+    <style>
+      {`
+          .masthead-bg-left-dark {
+            transition: fill 100ms linear;
           }
-          @media (min-aspect-ratio: 1/1) {
-            .Masthead-bg-right--sm-landscape {
-              display: block;
-            }
-            .Masthead-bg-right--sm,
-            .Masthead-bg-right--lg,
-            .Masthead-bg-right--lg-landscape {
-              display: none;
+          @media (max-width: 650px),
+          (max-width: 768px) and (orientation:portrait) {
+            .masthead-bg-left {
+              width: calc(180% + 4vh);
             }
           }
-          @media (min-aspect-ratio: 1/1) and ${presets.desktop},
-                 (max-aspect-ratio: 1/1) and ${presets.tablet} {
-            .Masthead-bg-right--lg {
-              display: block;
+          ${presets.Phablet} {
+            .masthead-bg-left {
+              width: calc(130% + 2vh);
             }
-            .Masthead-bg-right--lg-landscape {
-              display: none;
+          }
+          ${presets.Tablet} {
+            .masthead-bg-left {
+              width: calc(125% + 4vh);
             }
           }
-          @media (min-aspect-ratio: 1/1) and ${presets.hd} {
-            .Masthead-bg-right--lg-landscape {
-              display: block;
+          ${presets.Desktop}  {
+            .masthead-bg-left {
+              width: 110%;
             }
-            .Masthead-bg-right--lg {
-              display: none;
+          }
+          ${presets.Hd}  {
+            .masthead-bg-left {
+              width: calc(100%);
             }
           }
         `}
-      </style>
-      <MastheadBgRightGroup
-        brightOff="20,0"
-        darkOff="40,0"
-        //brightBg="yellow"
-        cssClassName="Masthead-bg-right--sm"
-      />
-      <MastheadBgRightGroup
-        brightOff="5,0"
-        darkOff="30,0"
-        //brightBg="orange"
-        cssClassName="Masthead-bg-right--sm-landscape"
-      />
-      <MastheadBgRightGroup
-        brightOff="-10,0"
-        darkOff="5,0"
-        //brightBg="red"
-        cssClassName="Masthead-bg-right--lg"
-      />
-      <MastheadBgRightGroup
-        brightOff="-15,0"
-        darkOff="0,0"
-        //brightBg="purple"
-        cssClassName="Masthead-bg-right--lg-landscape"
-      />
-    </svg>
+    </style>
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      viewBox="0 0 100 100"
-      xmlSpace="preserve"
-      preserveAspectRatio="xMinYMin slice"
-      className="Masthead-bg-left"
+      viewBox="0 0 10 10"
+      preserveAspectRatio="xMidYMin meet"
+      className="masthead-bg-left"
       css={{
-        position: `absolute`,
         ...cover,
-        left: vPOff,
-        zIndex: -2,
-        [presets.Hd]: {
-          left: vPHdOff,
-        },
-        [presets.VHd]: {
-          left: vPVHdOff,
-        },
-        [presets.VVHd]: {
-          left: vPVVHdOff,
-        },
-        width: `100%`,
+        position: `absolute`,
+        width: `calc(180% - + 4vh)`,
         height: `100%`,
+        zIndex: -1,
+        transition: `width 100ms linear`,
       }}
     >
-      <polygon fill={presets.brandLighter} points="-50,-50 150,150 -50,150 " />
+      <svg
+        x="-15%"
+        y="-10%"
+        style={{
+          overflow: `visible`,
+        }}
+      >
+        <rect
+          className="masthead-bg-left-dark"
+          width="10000%"
+          height="10000%"
+          fill={presets.brand}
+          transform="rotate(45 100 50) translate(0 0)"
+        />
+        {/*<polygon fill="blue" points="0,10 10,0 10,10" />*/}
+      </svg>
     </svg>
   </div>