added striped box

This commit is contained in:
Danny Coates 2018-06-20 15:23:15 -07:00
parent 211b1a8576
commit 207179484c
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
4 changed files with 50 additions and 19 deletions

View File

@ -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 {

View File

@ -34,7 +34,13 @@ function body(template) {
<p>${state.translate('enableJavascript')}</p>
</div>
</noscript>
<div class="stripedBox">
<div class="mainContent">
${template(state, emit)}
</div>
</div>
<div class="spacer"></div>
<div class="uploads"></div>
</main>
${footer(state)}
</body>`;

View File

@ -1,10 +1,14 @@
const html = require('choo/html');
const assets = require('../../../common/assets');
module.exports = function() {
module.exports = function(state) {
if (!state.backgroundUrl) {
const backgrounds = assets.match(/background/);
const src = backgrounds[Math.floor(Math.random() * backgrounds.length)];
state.backgroundUrl =
backgrounds[Math.floor(Math.random() * backgrounds.length)];
}
return html`<div class="background">
<img src="${src}">
<img src="${state.backgroundUrl}">
</div>`;
};

View File

@ -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`
<header class="header">
<div class="logo">
<a class="logo__link" href="/">
<img
src="${assets.get('send_logo.svg')}"
alt="Send"/>
<h1 class="logo__title">Send</h1>
</a>
<div class="logo__subtitle">
<a class="logo__subtitle-link" href="https://testpilot.firefox.com">Firefox Test Pilot</a>
<div>${state.translate('siteSubtitle')}</div>
</div>
</div>
<a href="${feedbackUrl}"
rel="noreferrer noopener"