diff --git a/static/bauchbinde/assets/Changa-SemiBold.ttf b/static/bauchbinde/assets/Changa-SemiBold.ttf
new file mode 100644
index 0000000..a540f31
Binary files /dev/null and b/static/bauchbinde/assets/Changa-SemiBold.ttf differ
diff --git a/static/bauchbinde/assets/Orbitron-VariableFont_wght.ttf b/static/bauchbinde/assets/Orbitron-VariableFont_wght.ttf
deleted file mode 100644
index f327767..0000000
Binary files a/static/bauchbinde/assets/Orbitron-VariableFont_wght.ttf and /dev/null differ
diff --git a/static/bauchbinde/assets/SpaceMono-Regular.ttf b/static/bauchbinde/assets/SpaceMono-Regular.ttf
new file mode 100644
index 0000000..28d7ff7
Binary files /dev/null and b/static/bauchbinde/assets/SpaceMono-Regular.ttf differ
diff --git a/static/bauchbinde/assets/script.js b/static/bauchbinde/assets/script.js
index bf9889b..7ee50ef 100644
--- a/static/bauchbinde/assets/script.js
+++ b/static/bauchbinde/assets/script.js
@@ -53,8 +53,6 @@
async function init() {
const root = document.querySelector('html');
- textEl = document.querySelector('.text');
- textEl.innerHTML = '';
if (window.location.search) {
const pairs = window.location.search.slice(1).split('&').map(x => x.split('='));
@@ -126,7 +124,7 @@
} else {
headline = talk.title;
if (talk.persons) {
- speaker = talk.persons.map(person => person.public_name).join(' / ');
+ speaker = talk.persons.map(person => person.public_name).join(', ');
}
}
}
@@ -135,164 +133,28 @@
return false;
}
- if (speaker && headline) {
- headline += ',';
- }
+ const headlineEl = document.querySelector('.headline');
+ headlineEl.innerHTML = '';
+ const speakerEl = document.querySelector('.speaker');
+ speakerEl.innerHTML = '';
- const headlineEl = document.createElement('span');
- headlineEl.classList.add('headline');
- const speakerEl = document.createElement('span');
- speakerEl.classList.add('speaker');
+ console.log('headline', headline);
+ console.log('speaker', speaker);
if (headline) {
- Array.from(headline).forEach(letter => {
- const letterEl = document.createElement('span');
- letterEl.classList.add('letter');
- letterEl.innerText = letter;
- headlineEl.appendChild(letterEl);
- })
+ headlineEl .innerText = headline;
}
if (speaker) {
- Array.from(speaker).forEach(letter => {
- const letterEl = document.createElement('span');
- letterEl.classList.add('letter');
- letterEl.innerText = letter;
- speakerEl.appendChild(letterEl);
- })
- }
-
- textEl.appendChild(headlineEl);
- textEl.appendChild(document.createTextNode(' '));
- textEl.appendChild(speakerEl);
-
- const mainTilesEl = document.querySelector('.background .main-tiles');
- mainTilesEl.innerHTML = '';
-
- for (let i = 0; i < 16; i++) {
- const tile = document.createElement('div');
- tile.classList.add('tile', 'large');
- mainTilesEl.appendChild(tile);
- }
-
- const secondaryTilesEl = document.querySelector('.background .secondary-tiles');
- secondaryTilesEl.innerHTML = '';
-
- for (let i = 0; i < 17; i++) {
- const tile = document.createElement('div');
- tile.classList.add('tile');
- if (i === 0 || Math.random() > 0.5) {
- tile.classList.add('medium');
- } else {
- tile.classList.add('small');
- }
- secondaryTilesEl.appendChild(tile);
+ speakerEl.innerText = speaker;
}
return true;
}
async function animate() {
- if (autoIntro ? isFirstRun : isIntro) {
- await Promise.all([
- slideIn(),
- fadeInText(),
- ]);
- } else {
- await Promise.all([
- fadeIn(),
- fadeInText(),
- ]);
- }
+ document.querySelector('.container').classList.add('visible');
await new Promise(r => setTimeout(r, holdDuration * 1000));
- await Promise.all([
- fadeOut(),
- fadeOutText(),
- ])
- }
-
- async function slideIn() {
- const tiles = document.querySelectorAll('.tile');
-
- for (const tile of tiles) {
- tile.style.animationName = `slide-in-${Math.floor(Math.random() * 10)}`;
- tile.style.animationDelay = `${Math.random() * 0.4}s`;
- tile.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
- tile.style.animationIterationCount = '1';
- tile.style.animationTimingFunction = 'ease-in';
- }
- await new Promise(r => setTimeout(r, 600));
- for (const tile of tiles) {
- tile.classList.add('visible');
- }
- await new Promise(r => setTimeout(r, 1000));
- }
-
- async function fadeIn() {
- const tiles = document.querySelectorAll('.tile');
-
- for (const tile of tiles) {
- tile.style.animationName = `fade-in`;
- tile.style.animationDelay = `${Math.random() * 0.4}s`;
- tile.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
- tile.style.animationIterationCount = '1';
- tile.style.animationTimingFunction = 'ease-in';
- }
- await new Promise(r => setTimeout(r, 600));
- for (const tile of tiles) {
- tile.classList.add('visible');
- }
- await new Promise(r => setTimeout(r, 1000));
- }
-
- async function fadeOut() {
- const tiles = document.querySelectorAll('.tile');
-
- for (const tile of tiles) {
- tile.style.animationName = `fade-out`;
- tile.style.animationDelay = `${Math.random() * 0.4}s`;
- tile.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
- tile.style.animationIterationCount = '1';
- tile.style.animationTimingFunction = 'ease-in';
- }
- await new Promise(r => setTimeout(r, 600));
- for (const tile of tiles) {
- tile.classList.remove('visible');
- }
- await new Promise(r => setTimeout(r, 1000));
- }
-
- async function fadeInText() {
- const letters = document.querySelectorAll('.letter');
-
- for (const letter of letters) {
- letter.style.animationName = `fade-in`;
- letter.style.animationDelay = `${Math.random() * 0.4}s`;
- letter.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
- letter.style.animationIterationCount = 1;
- letter.style.animationTimingFunction = 'ease-in';
- }
- await new Promise(r => setTimeout(r, 600));
- for (const tile of letters) {
- tile.classList.add('visible');
- }
- await new Promise(r => setTimeout(r, 1000));
- }
-
- async function fadeOutText() {
- const letters = document.querySelectorAll('.letter');
-
- for (const letter of letters) {
- letter.style.animationName = `fade-out`;
- letter.style.animationDelay = `${Math.random() * 0.4}s`;
- letter.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
- letter.style.animationIterationCount = '1';
- letter.style.animationTimingFunction = 'ease-in';
- }
- await new Promise(r => setTimeout(r, 600));
- for (const tile of letters) {
- tile.classList.remove('visible');
- }
- await new Promise(r => setTimeout(r, 1000));
+ document.querySelector('.container').classList.remove('visible');
}
async function cycle() {
diff --git a/static/bauchbinde/assets/style.css b/static/bauchbinde/assets/style.css
index 8726f2e..8473546 100644
--- a/static/bauchbinde/assets/style.css
+++ b/static/bauchbinde/assets/style.css
@@ -1,239 +1,60 @@
@font-face {
- font-family: Orbitron;
- src: url('Orbitron-VariableFont_wght.ttf');
+ font-family: Changa;
+ font-weight: 700;
+ src: url('Changa-SemiBold.ttf');
+}
+
+@font-face {
+ font-family: SpaceMono;
+ src: url('SpaceMono-Regular.ttf');
}
:root {
- --large-tile-color: #02fae0;
- --medium-tile-color: #fff900;
- --small-tile-color: #0bcb60;
- --text-color: #252826;
- --bottom: 9vw;
- --left: 12.5vw;
- --width: 67.5vw;
- --top: auto;
-}
-
-:root.theme-main {
- --large-tile-color: #6800e7;
- --medium-tile-color: #fff;
- --small-tile-color: #05b9ec;
--text-color: #fff;
+ --header-text-color: #252826;
+ --frame-color: #fff;
+ --bottom: 7vw;
+ --left: 25vw;
+ --width: 50vw;
+ --top: auto;
}
body {
margin: 0;
- background-color: #000;
- font-family: Orbitron, sans-serif;
- font-size: 2vw;
- line-height: 2vw;
+ background-color: #444;
+ font-family: SpaceMono, monospace;
+ font-size: 1.7vw;
color: var(--text-color);
- /*color: #0e1c23;*/
- text-transform: uppercase;
- letter-spacing: 0.1vw;
}
.headline {
- font-weight: 900;
+ text-transform: lowercase;
+ font-family: Changa, sans-serif;
+ font-weight: 700;
+ background: var(--frame-color);
+ color: var(--header-text-color);
+ text-align: center;
+ line-height: 1.3;
+ padding: 0 1vw;
+ font-size: 1.25em;
}
.speaker {
- font-size: 0.8em;
+ padding: 0.5vw 1vw 0.7vw;
}
.container {
+ transition: opacity 0.3s ease 0s;
position: fixed;
bottom: var(--bottom);
left: var(--left);
width: var(--width);
top: var(--top);
-}
-
-.background {
- z-index: -20;
- width: 100%;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-}
-
-.text {
- margin-left: 6.25%;
- padding: 1vw 1.5vw;
-}
-
-.tiles {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: row;
- align-items: stretch;
- justify-content: stretch;
-}
-
-.main-tiles {
- margin-left: 6.25%;
- transform: translateY(-100%);
-}
-
-.tile {
- flex: 1;
- position: relative;
- opacity: 0;
-}
-
-.tile::before {
- content: '';
- position: absolute;
- display: block;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-
-.tile.large::before {
- background-color: var(--large-tile-color);
- width: 100%;
- height: 100%;
- box-shadow: 1px 0 0 0 var(--large-tile-color);
-}
-
-.tile.medium::before {
- background-color: var(--medium-tile-color);
- width: 50%;
- padding-top: 50%;
-}
-
-.tile.small::before {
- background-color: var(--small-tile-color);
- width: 35%;
- padding-top: 35%;
-}
-
-.letter {
+ border: 0.1vw solid var(--frame-color);
opacity: 0;
+ background: rgba(0, 0, 0, 0.5);
}
.visible {
opacity: 1;
}
-
-@keyframes slide-in-0 {
- 0% {
- transform: translate(50vw, -100vw) scale(10);
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes slide-in-1 {
- 0% {
- transform: translate(-40vw, -20vw) scale(2);
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes slide-in-2 {
- 0% {
- transform: translate(50vw, 20vw) scale(5);
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes slide-in-3 {
- 0% {
- transform: translate(80vw, -50vw) scale(3);
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes slide-in-4 {
- 0% {
- transform: translate(-30vw, -50vw) scale(7.5);
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes slide-in-5 {
- 0% {
- transform: translate(-30vw, 50vw) scale(4);
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes slide-in-6 {
- 0% {
- transform: translate(5vw, 30vw) scale(2.5);
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes slide-in-7 {
- 0% {
- transform: translate(-70vw, 100vw) scale(4);
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes slide-in-8 {
- 0% {
- transform: translate(-4vw, 2vw) scale(2);
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes slide-in-9 {
- 0% {
- transform: translate(2vw, -5vw) scale(2);
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes fade-in {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes fade-out {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
-}
diff --git a/static/bauchbinde/index.html b/static/bauchbinde/index.html
index 372440b..4865c51 100644
--- a/static/bauchbinde/index.html
+++ b/static/bauchbinde/index.html
@@ -2,17 +2,14 @@
- Intro
+ Bauchbinde