${state.translate('enableJavascript')}
- ${template(state, emit)} +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)}${state.translate('enableJavascript')}
- ${template(state, emit)} +