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.
|
@ -1,12 +1,12 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
|
|
||||||
import patternDefault from '../images/pattern_blue.jpg'
|
import patternDefault from '../images/pattern_blue.png'
|
||||||
import patternNightly from '../images/pattern_nightly.jpg'
|
import patternNightly from '../images/pattern_nightly.png'
|
||||||
import patternLegacy from '../images/pattern_legacy.jpg'
|
import patternLegacy from '../images/pattern_legacy.png'
|
||||||
import overlayDefault from '../images/pattern_landing.jpg'
|
import overlayDefault from '../images/pattern_landing.png'
|
||||||
import overlayNightly from '../images/pattern_landing_nightly.jpg'
|
import overlayNightly from '../images/pattern_landing_nightly.png'
|
||||||
import overlayLegacy from '../images/pattern_landing_legacy.jpg'
|
import overlayLegacy from '../images/pattern_landing_legacy.png'
|
||||||
|
|
||||||
import Grid from './grid'
|
import Grid from './grid'
|
||||||
import { Content } from './main'
|
import { Content } from './main'
|
||||||
|
|
|
@ -2,11 +2,11 @@ import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
|
|
||||||
import patternBlue from '../images/pattern_blue.jpg'
|
import patternBlue from '../images/pattern_blue.png'
|
||||||
import patternGreen from '../images/pattern_green.jpg'
|
import patternGreen from '../images/pattern_green.png'
|
||||||
import patternPurple from '../images/pattern_purple.jpg'
|
import patternPurple from '../images/pattern_purple.png'
|
||||||
import patternNightly from '../images/pattern_nightly.jpg'
|
import patternNightly from '../images/pattern_nightly.png'
|
||||||
import patternLegacy from '../images/pattern_legacy.jpg'
|
import patternLegacy from '../images/pattern_legacy.png'
|
||||||
import classes from '../styles/main.module.sass'
|
import classes from '../styles/main.module.sass'
|
||||||
|
|
||||||
const patterns = {
|
const patterns = {
|
||||||
|
|
Before Width: | Height: | Size: 114 KiB |
BIN
website/src/images/pattern_blue.png
Normal file
After Width: | Height: | Size: 48 KiB |
Before Width: | Height: | Size: 119 KiB |
BIN
website/src/images/pattern_green.png
Normal file
After Width: | Height: | Size: 48 KiB |
Before Width: | Height: | Size: 101 KiB |
BIN
website/src/images/pattern_landing.png
Normal file
After Width: | Height: | Size: 7.8 KiB |
Before Width: | Height: | Size: 86 KiB |
BIN
website/src/images/pattern_landing_legacy.png
Normal file
After Width: | Height: | Size: 7.9 KiB |
Before Width: | Height: | Size: 126 KiB |
BIN
website/src/images/pattern_landing_nightly.png
Normal file
After Width: | Height: | Size: 7.9 KiB |
Before Width: | Height: | Size: 106 KiB |
BIN
website/src/images/pattern_legacy.png
Normal file
After Width: | Height: | Size: 48 KiB |
Before Width: | Height: | Size: 157 KiB |
BIN
website/src/images/pattern_nightly.png
Normal file
After Width: | Height: | Size: 48 KiB |
Before Width: | Height: | Size: 112 KiB |
BIN
website/src/images/pattern_purple.png
Normal file
After Width: | Height: | Size: 48 KiB |
|
@ -2,22 +2,25 @@
|
||||||
|
|
||||||
.header
|
.header
|
||||||
background: var(--color-theme)
|
background: var(--color-theme)
|
||||||
padding-top: calc(var(--height-nav) * 1.5)
|
padding-top: var(--height-nav)
|
||||||
width: 100%
|
width: 100%
|
||||||
text-align: center
|
text-align: center
|
||||||
|
--header-top-margin: 27px
|
||||||
|
|
||||||
.header-wrapper
|
.header-wrapper
|
||||||
background: var(--color-theme)
|
background: var(--color-theme)
|
||||||
background-position: top center
|
background-position: center var(--header-top-margin)
|
||||||
background-repeat: repeat
|
background-repeat: repeat
|
||||||
width: 100%
|
width: 100%
|
||||||
|
background-size: 799px 643px
|
||||||
|
|
||||||
.header-content
|
.header-content
|
||||||
background: transparent
|
background-position: center calc(-138px + var(--header-top-margin))
|
||||||
background-position: center -138px
|
|
||||||
background-repeat: no-repeat
|
background-repeat: no-repeat
|
||||||
width: 100%
|
width: 100%
|
||||||
min-height: 573px
|
min-height: calc(573px + var(--header-top-margin))
|
||||||
|
background-size: 1444px 573px
|
||||||
|
padding-top: var(--header-top-margin)
|
||||||
|
|
||||||
.title
|
.title
|
||||||
font: normal 600 7rem/#{1} var(--font-secondary)
|
font: normal 600 7rem/#{1} var(--font-secondary)
|
||||||
|
|
|
@ -26,6 +26,7 @@
|
||||||
background-color: var(--color-theme)
|
background-color: var(--color-theme)
|
||||||
background-repeat: repeat
|
background-repeat: repeat
|
||||||
background-position: center top
|
background-position: center top
|
||||||
|
background-size: 799px 643px
|
||||||
z-index: -1
|
z-index: -1
|
||||||
min-height: 100vh
|
min-height: 100vh
|
||||||
|
|
||||||
|
|
|
@ -6,9 +6,9 @@ import Link from '../components/link'
|
||||||
import SVG from 'react-inlinesvg'
|
import SVG from 'react-inlinesvg'
|
||||||
|
|
||||||
import logoSpacy from '../images/logo.svg'
|
import logoSpacy from '../images/logo.svg'
|
||||||
import patternBlue from '../images/pattern_blue.jpg'
|
import patternBlue from '../images/pattern_blue.png'
|
||||||
import patternGreen from '../images/pattern_green.jpg'
|
import patternGreen from '../images/pattern_green.png'
|
||||||
import patternPurple from '../images/pattern_purple.jpg'
|
import patternPurple from '../images/pattern_purple.png'
|
||||||
|
|
||||||
const colors = {
|
const colors = {
|
||||||
dark: 'var(--color-front)',
|
dark: 'var(--color-front)',
|
||||||
|
|