franconian
/
www.franconian.net
13
0
Fork 0
Code Pull Requests Releases Activity

bauchbine update
continuous-integration/drone/push Build is passing Details

This commit is contained in:
xAndy 2020-12-24 17:53:14 +01:00
parent 3586b40ea8
commit 919a957d0d
2 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
static/bauchbinde/assets/script.js
View File

@ -23,11 +23,14 @@
if (key === 'hold') { if (key === 'hold') {
holdDuration = parseInt(value, 10); holdDuration = parseInt(value, 10);
} }
if (key === 'theme') {
const root = document.querySelector('html');
root.className = '';
root.classList.add(`theme-${decodeURIComponent(value)}`)
}
}) })
} }
console.debug({speaker, headline});
const headlineEl = document.createElement('span'); const headlineEl = document.createElement('span');
headlineEl.classList.add('headline'); headlineEl.classList.add('headline');
const speakerEl = document.createElement('span'); const speakerEl = document.createElement('span');
@ -55,7 +58,7 @@
for (let i = 0; i < 16; i++) { for (let i = 0; i < 16; i++) {
const tile = document.createElement('div'); const tile = document.createElement('div');
tile.classList.add('tile', 'blue'); tile.classList.add('tile', 'large');
mainTilesEl.appendChild(tile); mainTilesEl.appendChild(tile);
} }
@ -66,9 +69,9 @@
const tile = document.createElement('div'); const tile = document.createElement('div');
tile.classList.add('tile'); tile.classList.add('tile');
if (i === 0 || Math.random() > 0.5) { if (i === 0 || Math.random() > 0.5) {
tile.classList.add('yellow'); tile.classList.add('medium');
} else { } else {
tile.classList.add('green'); tile.classList.add('small');
} }
secondaryTilesEl.appendChild(tile); secondaryTilesEl.appendChild(tile);
} }

30
static/bauchbinde/assets/style.css
View File

@ -3,13 +3,27 @@
src: url('Orbitron-VariableFont_wght.ttf'); src: url('Orbitron-VariableFont_wght.ttf');
} }
:root {
--large-tile-color: #02fae0;
--medium-tile-color: #fff900;
--small-tile-color: #0bcb60;
--text-color: #252826;
}
:root.theme-main {
--large-tile-color: #6800e7;
--medium-tile-color: #fff;
--small-tile-color: #05b9ec;
--text-color: #fff;
}
body { body {
margin: 0; margin: 0;
background-color: #000; background-color: #000;
font-family: Orbitron, sans-serif; font-family: Orbitron, sans-serif;
font-size: 2vw; font-size: 2vw;
line-height: 2vw; line-height: 2vw;
color: #252826; color: var(--text-color);
/*color: #0e1c23;*/ /*color: #0e1c23;*/
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1vw; letter-spacing: 0.1vw;
@ -74,21 +88,21 @@ body {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.tile.blue::before { .tile.large::before {
background-color: #02fae0; background-color: var(--large-tile-color);
width: 100%; width: 100%;
height: 100%; height: 100%;
box-shadow: 1px 0 0 0 #02fae0; box-shadow: 1px 0 0 0 var(--large-tile-color);
} }
.tile.yellow::before { .tile.medium::before {
background-color: #fff900; background-color: var(--medium-tile-color);
width: 50%; width: 50%;
padding-top: 50%; padding-top: 50%;
} }
.tile.green::before { .tile.small::before {
background-color: #0bcb60; background-color: var(--small-tile-color);
width: 35%; width: 35%;
padding-top: 35%; padding-top: 35%;
} }