diff --git a/app/base.css b/app/base.css index 4168c387..2360a33a 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 { @@ -44,12 +40,44 @@ a { } .main { + display: flex; + flex-direction: row; flex: auto; - max-width: 650px; - margin: 0 auto; padding: 0 20px; box-sizing: border-box; - width: 96%; +} + +.stripedBox { + width: 480px; + background-color: white; + border-radius: 6px; + box-shadow: 0 0 0 3px rgba(155, 155, 155, 0.4); + background-image: repeating-linear-gradient( + 45deg, + white, + white 5px, + #ea000e 5px, + #ea000e 25px, + white 25px, + white 30px, + #0083ff 30px, + #0083ff 50px + ); +} + +.mainContent { + height: 100%; + background-color: white; + margin: 0 10px; + padding: 1px 10px 0 10px; /* top wtf? */ +} + +.spacer { + flex: auto; +} + +.uploads { + flex: auto; } .noscript { @@ -225,6 +253,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..368c3f1e 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)}
@@ -32,7 +34,13 @@ function body(template) {

${state.translate('enableJavascript')}

- ${template(state, emit)} +
+
+ ${template(state, emit)} +
+
+
+
${footer(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..8312b69b --- /dev/null +++ b/app/templates/activeBackground/index.js @@ -0,0 +1,14 @@ +const html = require('choo/html'); +const assets = require('../../../common/assets'); + +module.exports = function(state) { + if (!state.backgroundUrl) { + const backgrounds = assets.match(/background/); + state.backgroundUrl = + backgrounds[Math.floor(Math.random() * backgrounds.length)]; + } + + return html`
+ +
`; +}; diff --git a/app/templates/header/index.js b/app/templates/header/index.js index f5fd56f2..a2f749fb 100644 --- a/app/templates/header/index.js +++ b/app/templates/header/index.js @@ -1,5 +1,4 @@ const html = require('choo/html'); -const assets = require('../../../common/assets'); /* The current weback config uses package.json to generate version.json for /__version__ meaning `require` returns the @@ -18,16 +17,6 @@ module.exports = function(state) { const header = html`
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]); }; } }