diff --git a/app/base.css b/app/base.css index a66388b7..2360a33a 100644 --- a/app/base.css +++ b/app/base.css @@ -40,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 { diff --git a/app/routes/index.js b/app/routes/index.js index 90db1e63..368c3f1e 100644 --- a/app/routes/index.js +++ b/app/routes/index.js @@ -34,7 +34,13 @@ function body(template) {

${state.translate('enableJavascript')}

- ${template(state, emit)} +
+
+ ${template(state, emit)} +
+
+
+
${footer(state)} `; diff --git a/app/templates/activeBackground/index.js b/app/templates/activeBackground/index.js index ac718129..8312b69b 100644 --- a/app/templates/activeBackground/index.js +++ b/app/templates/activeBackground/index.js @@ -1,10 +1,14 @@ 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)]; +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`