WEB-30 spaCy pattern in .png (#12158)

* Fix gap in landing pattern at the top

* Replace `.jpg` patterns with `.png`

This drastically reduces file size (for the landing page from 221kb to 57kb) while doubling the resolution to look sharper on retina displays.

website/src/components/landing.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import classNames from 'classnames'
 
-import patternDefault from '../images/pattern_blue.jpg'
-import patternNightly from '../images/pattern_nightly.jpg'
-import patternLegacy from '../images/pattern_legacy.jpg'
-import overlayDefault from '../images/pattern_landing.jpg'
-import overlayNightly from '../images/pattern_landing_nightly.jpg'
-import overlayLegacy from '../images/pattern_landing_legacy.jpg'
+import patternDefault from '../images/pattern_blue.png'
+import patternNightly from '../images/pattern_nightly.png'
+import patternLegacy from '../images/pattern_legacy.png'
+import overlayDefault from '../images/pattern_landing.png'
+import overlayNightly from '../images/pattern_landing_nightly.png'
+import overlayLegacy from '../images/pattern_landing_legacy.png'
 
 import Grid from './grid'
 import { Content } from './main'

website/src/components/main.js

@@ -2,11 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import patternBlue from '../images/pattern_blue.jpg'
-import patternGreen from '../images/pattern_green.jpg'
-import patternPurple from '../images/pattern_purple.jpg'
-import patternNightly from '../images/pattern_nightly.jpg'
-import patternLegacy from '../images/pattern_legacy.jpg'
+import patternBlue from '../images/pattern_blue.png'
+import patternGreen from '../images/pattern_green.png'
+import patternPurple from '../images/pattern_purple.png'
+import patternNightly from '../images/pattern_nightly.png'
+import patternLegacy from '../images/pattern_legacy.png'
 import classes from '../styles/main.module.sass'
 
 const patterns = {

website/src/styles/landing.module.sass

@@ -2,22 +2,25 @@
 
 .header
     background: var(--color-theme)
-    padding-top: calc(var(--height-nav) * 1.5)
+    padding-top: var(--height-nav)
     width: 100%
     text-align: center
+    --header-top-margin: 27px
 
 .header-wrapper
     background: var(--color-theme)
-    background-position: top center
+    background-position: center var(--header-top-margin)
     background-repeat: repeat
     width: 100%
+    background-size: 799px 643px
 
 .header-content
-    background: transparent
-    background-position: center -138px
+    background-position: center calc(-138px + var(--header-top-margin))
     background-repeat: no-repeat
     width: 100%
-    min-height: 573px
+    min-height: calc(573px + var(--header-top-margin))
+    background-size: 1444px 573px
+    padding-top: var(--header-top-margin)
 
 .title
     font: normal 600 7rem/#{1} var(--font-secondary)

website/src/styles/main.module.sass

@@ -26,6 +26,7 @@
         background-color: var(--color-theme)
         background-repeat: repeat
         background-position: center top
+        background-size: 799px 643px
         z-index: -1
         min-height: 100vh
 

website/src/widgets/styleguide.js

@@ -6,9 +6,9 @@ import Link from '../components/link'
 import SVG from 'react-inlinesvg'
 
 import logoSpacy from '../images/logo.svg'
-import patternBlue from '../images/pattern_blue.jpg'
-import patternGreen from '../images/pattern_green.jpg'
-import patternPurple from '../images/pattern_purple.jpg'
+import patternBlue from '../images/pattern_blue.png'
+import patternGreen from '../images/pattern_green.png'
+import patternPurple from '../images/pattern_purple.png'
 
 const colors = {
     dark: 'var(--color-front)',