From 4b4d3c694103da56aae22e3a250e0466c077d9bf Mon Sep 17 00:00:00 2001 From: Michael Mullins Date: Mon, 27 Nov 2017 12:15:54 -0600 Subject: [PATCH 1/2] reduce size of logo.svg --- src/icons/logo.svg | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/icons/logo.svg b/src/icons/logo.svg index d1ec3a75..546bb417 100644 --- a/src/icons/logo.svg +++ b/src/icons/logo.svg @@ -1 +1,9 @@ -logo \ No newline at end of file + + React Logo + + + + + + + \ No newline at end of file From 1d7c1d4ad414eb0954d28844674cbb128c15db6e Mon Sep 17 00:00:00 2001 From: Michael Mullins Date: Mon, 27 Nov 2017 12:25:23 -0600 Subject: [PATCH 2/2] convert logo-large into a plain white version of the logo logo-large was a custom version of the logo made just for the banner background. It was also scaled up manually rather than taking advantage of svg's inherit scaling. This change reduces its size, makes it just a plain white version of the react logo, and moves most of the custom stuff into css. It also moves it from the static folder, over to the icons folder where it can be imported as a url. --- src/icons/logo-white.svg | 9 +++++++++ src/pages/index.js | 19 +++++++++++++++---- static/large-logo.svg | 1 - 3 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 src/icons/logo-white.svg delete mode 100644 static/large-logo.svg diff --git a/src/icons/logo-white.svg b/src/icons/logo-white.svg new file mode 100644 index 00000000..bc94adec --- /dev/null +++ b/src/icons/logo-white.svg @@ -0,0 +1,9 @@ + + React Logo + + + + + + + \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 0df1abcb..9c3c4173 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -18,6 +18,7 @@ import createOgUrl from 'utils/createOgUrl'; import loadScript from 'utils/loadScript'; import {babelURL} from 'site-constants'; import ReactDOM from 'react-dom'; +import logoWhiteSvg from 'icons/logo-white.svg'; class Home extends Component { constructor(props, context) { @@ -99,10 +100,20 @@ class Home extends Component { maxWidth: 1500, // Positioning of background logo marginLeft: 'auto', marginRight: 'auto', - backgroundImage: 'url(/large-logo.svg)', - backgroundRepeat: 'no-repeat', - backgroundPosition: '100% 100px', - backgroundSize: '50% auto', + position: 'relative', + '::before': { + content: ' ', + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + backgroundImage: `url(${logoWhiteSvg})`, + backgroundRepeat: 'no-repeat', + backgroundPosition: '100% 100px', + backgroundSize: '50% auto', + opacity: 0.05, + }, }, }}> diff --git a/static/large-logo.svg b/static/large-logo.svg deleted file mode 100644 index 6bd38ac2..00000000 --- a/static/large-logo.svg +++ /dev/null @@ -1 +0,0 @@ -large-logo \ No newline at end of file