Update bauchbinde by fl0rp

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) {
+        const headlineEl = document.querySelector('.headline');
-            headline += ',';
+        headlineEl.innerHTML = '';
-        }
+        const speakerEl = document.querySelector('.speaker');
+        speakerEl.innerHTML = '';
 
-        const headlineEl = document.createElement('span');
+        console.log('headline', headline);
-        headlineEl.classList.add('headline');
+        console.log('speaker', speaker);
-        const speakerEl = document.createElement('span');
-        speakerEl.classList.add('speaker');
 
         if (headline) {
-            Array.from(headline).forEach(letter => {
+            headlineEl  .innerText = headline;
-                const letterEl = document.createElement('span');
-                letterEl.classList.add('letter');
-                letterEl.innerText = letter;
-                headlineEl.appendChild(letterEl);
-            })
         }
         if (speaker) {
-            Array.from(speaker).forEach(letter => {
+            speakerEl.innerText = speaker;
-                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);
         }
 
         return true;
     }
 
     async function animate() {
-        if (autoIntro ? isFirstRun : isIntro) {
+        document.querySelector('.container').classList.add('visible');
-            await Promise.all([
-                slideIn(),
-                fadeInText(),
-            ]);
-        } else {
-            await Promise.all([
-                fadeIn(),
-                fadeInText(),
-            ]);
-        }
         await new Promise(r => setTimeout(r, holdDuration * 1000));
-        await Promise.all([
+        document.querySelector('.container').classList.remove('visible');
-            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));
     }
 
     async function cycle() {

static/bauchbinde/assets/style.css

@@ -1,239 +1,60 @@
 @font-face {
-    font-family: Orbitron;
+    font-family: Changa;
-    src: url('Orbitron-VariableFont_wght.ttf');
+    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;
+    background-color: #444;
-    font-family: Orbitron, sans-serif;
+    font-family: SpaceMono, monospace;
-    font-size: 2vw;
+    font-size: 1.7vw;
-    line-height: 2vw;
     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);
-}
+    border: 0.1vw solid var(--frame-color);
-
-.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 {
     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;
-    }
-}

static/bauchbinde/index.html

@@ -2,17 +2,14 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Intro</title>
+    <title>Bauchbinde</title>
     <link rel="stylesheet" href="./assets/style.css">
     <script src="./assets/script.js"></script>
 </head>
 <body>
 <div class="container">
-    <div class="text"></div>
+    <div class="headline"></div>
-    <div class="background">
+    <div class="speaker"></div>
-        <div class="secondary-tiles tiles"></div>
-        <div class="main-tiles tiles"></div>
-    </div>
 </div>
 </body>
 </html>