natty
/
fox-send
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved background rendering slightly

This commit is contained in:
Danny Coates 2018-06-21 11:28:31 -07:00
parent ff092d3d84
commit 863a2e9c29
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
3 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/routes/index.js
View File

@ -18,8 +18,7 @@ function banner(state, emit) {
function body(template) {
return function(state, emit) {
const b = html`<body>
${activeBackground(state, emit)}
const b = html`<body class="background ${activeBackground(state)}">
${banner(state, emit)}
${header(state)}
<main class="main">

17
app/templates/activeBackground/activeBackground.css
View File

@ -1,11 +1,14 @@
.background {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.background > img {
height: 100%;
.background_1 {
background-image: url('../assets/background_1.jpg');
}
.background_2 {
background-image: url('../assets/background_2.jpg');
}

14
app/templates/activeBackground/index.js
View File

@ -1,14 +1,12 @@
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)];
if (!state.backgroundClass) {
const backgrounds = assets.match(/background_/);
state.backgroundClass = `background_${Math.floor(
Math.random() * backgrounds.length
) + 1}`;
}
return html`<div class="background">
<img src="${state.backgroundUrl}">
</div>`;
return state.backgroundClass;
};