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) { function body(template) {
return function(state, emit) { return function(state, emit) {
const b = html`<body> const b = html`<body class="background ${activeBackground(state)}">
${activeBackground(state, emit)}
${banner(state, emit)} ${banner(state, emit)}
${header(state)} ${header(state)}
<main class="main"> <main class="main">

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

@ -1,11 +1,14 @@
.background { .background {
position: absolute; background-position: center center;
left: 0; background-repeat: no-repeat;
top: 0; background-attachment: fixed;
height: 100%; background-size: cover;
z-index: -1;
} }
.background > img { .background_1 {
height: 100%; 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'); const assets = require('../../../common/assets');
module.exports = function(state) { module.exports = function(state) {
if (!state.backgroundUrl) { if (!state.backgroundClass) {
const backgrounds = assets.match(/background/); const backgrounds = assets.match(/background_/);
state.backgroundUrl = state.backgroundClass = `background_${Math.floor(
backgrounds[Math.floor(Math.random() * backgrounds.length)]; Math.random() * backgrounds.length
) + 1}`;
} }
return html`<div class="background"> return state.backgroundClass;
<img src="${state.backgroundUrl}">
</div>`;
}; };