diff --git a/app/base.css b/app/base.css index 4168c387..a66388b7 100644 --- a/app/base.css +++ b/app/base.css @@ -13,13 +13,9 @@ } html { - background: url('../assets/send_bg.svg'); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui', 'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif; font-weight: 200; - background-size: 110%; - background-repeat: no-repeat; - background-position: center top; } body { @@ -225,6 +221,7 @@ a { } .title { + color: var(--textColor); font-size: 33px; line-height: 40px; margin: 20px auto; diff --git a/app/main.css b/app/main.css index 97ee0d86..db53502d 100644 --- a/app/main.css +++ b/app/main.css @@ -1,4 +1,5 @@ @import './base.css'; +@import './templates/activeBackground/activeBackground.css'; @import './templates/header/header.css'; @import './templates/downloadButton/downloadButton.css'; @import './templates/progress/progress.css'; diff --git a/app/routes/index.js b/app/routes/index.js index 2d9ff80c..90db1e63 100644 --- a/app/routes/index.js +++ b/app/routes/index.js @@ -5,6 +5,7 @@ const download = require('./download'); const header = require('../templates/header'); const footer = require('../templates/footer'); const fxPromo = require('../templates/fxPromo'); +const activeBackground = require('../templates/activeBackground'); nanotiming.disabled = true; const app = choo(); @@ -18,6 +19,7 @@ function banner(state, emit) { function body(template) { return function(state, emit) { const b = html` + ${activeBackground(state, emit)} ${banner(state, emit)} ${header(state)}
diff --git a/app/templates/activeBackground/activeBackground.css b/app/templates/activeBackground/activeBackground.css new file mode 100644 index 00000000..ef57484d --- /dev/null +++ b/app/templates/activeBackground/activeBackground.css @@ -0,0 +1,11 @@ +.background { + position: absolute; + left: 0; + top: 0; + height: 100%; + z-index: -1; +} + +.background > img { + height: 100%; +} diff --git a/app/templates/activeBackground/index.js b/app/templates/activeBackground/index.js new file mode 100644 index 00000000..ac718129 --- /dev/null +++ b/app/templates/activeBackground/index.js @@ -0,0 +1,10 @@ +const html = require('choo/html'); +const assets = require('../../../common/assets'); + +module.exports = function() { + const backgrounds = assets.match(/background/); + const src = backgrounds[Math.floor(Math.random() * backgrounds.length)]; + return html`
+ +
`; +}; diff --git a/assets/background_1.jpg b/assets/background_1.jpg new file mode 100644 index 00000000..c92d3fb1 Binary files /dev/null and b/assets/background_1.jpg differ diff --git a/assets/background_2.jpg b/assets/background_2.jpg new file mode 100644 index 00000000..1742afeb Binary files /dev/null and b/assets/background_2.jpg differ diff --git a/common/assets.js b/common/assets.js index b1db9acf..3f301d39 100644 --- a/common/assets.js +++ b/common/assets.js @@ -15,15 +15,33 @@ function getAsset(name) { return prefix + assets[name]; } +function getMatches(match) { + return Object.keys(assets) + .filter(k => match.test(k)) + .map(getAsset); +} + const instance = { get: getAsset, + match: getMatches, setMiddleware: function(middleware) { + function getManifest() { + return JSON.parse( + middleware.fileSystem.readFileSync( + middleware.getFilenameFromUrl('/manifest.json') + ) + ); + } if (middleware) { instance.get = function getAssetWithMiddleware(name) { - const f = middleware.fileSystem.readFileSync( - middleware.getFilenameFromUrl('/manifest.json') - ); - return prefix + JSON.parse(f)[name]; + const m = getManifest(); + return prefix + m[name]; + }; + instance.match = function matchAssetWithMiddleware(match) { + const m = getManifest(); + return Object.keys(m) + .filter(k => match.test(k)) + .map(k => prefix + m[k]); }; } }