19.0 RC2

[index]
- background videos:
  - compressed and encoded background videos using av1
  - added title to videos in data file
  - chained videos on end
- overlay:
  - better styling
  - new 'next' button
  - show 'now playing' on video change
  - load overlay from js instead of html
- better randomize lib

[general]
- minor tweaks

Author: miermontoto

assets/media/background/birthday-nile.mp4

@@ -1,6 +1,6 @@
 [
-	"birthday-nile.mp4",
-	"ram-unboxed.mp4",
-	"unseen-ram.mp4",
-	"electroma-ad.mp4"
+	{"name": "Daft Punk - \"Happy Birthday\" from Daft Punk to Nile Rodgers", "src": "birthday-nile.mp4"},
+	{"name": "Daft Punk - Random Access Memories Unboxed", "src": "ram-unboxed.mp4"},
+	{"name": "Daft Punk - Random Access Memories Ad (Unseen Advert)", "src": "unseen-ram.mp4"},
+	{"name": "Daft Punk - 10th Anniversary Teaser of Electroma", "src": "electroma-ad.mp4"}
 ]

assets/media/background/electroma-ad.mp4

@@ -144,7 +144,3 @@ js: index
 </section>
 
 <video id="background" autoplay loop muted playsinline></video>
-<div id="overlay">
-    <span id="fullscreen-background" class="button light">⛶</span>
-    <span id="stop-background" class="button light">⨯</span>
-</div>

assets/media/background/ram-unboxed.mp4

@@ -48,15 +48,6 @@ a, a:visited
     text-decoration: none
     user-select: none
 
-    &.light
-        background-color: transparent
-        border-radius: 8px
-        margin: 2.5px
-
-        &:hover, &.active
-            animation: none
-            background-color: colors.$secondary
-
     &:hover
         animation: animations.$multicolor
         cursor: pointer
@@ -84,6 +75,7 @@ code
     text-decoration: none
     cursor: alias
     z-index: 2
+    padding: 0.125em
 
 ::selection
     background-color: colors.$white

assets/media/background/unseen-ram.mp4

@@ -94,7 +94,7 @@ video#background
     left: 50%
     transform: translate(-50%, -50%)
     z-index: -3
-    opacity: 0.1
+    opacity: 0.125
     transition: all 0.5s ease
     width: 100%
     height: 100%
@@ -104,22 +104,41 @@ video#background
         z-index: 3
         opacity: 1
 
-#overlay
+#overlay-container
+    display: ruby
     position: fixed
     bottom: 16px
     left: 16px
     margin-bottom: 0
     z-index: 2
 
-    .button
-        color: white
-        font-weight: bolder
+    #overlay-box
+        border: 2px solid transparent
+        border-radius: base.$radius
+        opacity: 0.4
 
-    #fullscreen-background
-        font-size: 0.85em
+        &:hover, &.active
+            border-color: colors.$light
+            background-color: colors.$secondary
+            opacity: 1
+
+        .button
+            color: white
+            font-weight: bolder
+            background-color: transparent
+            border-radius: 8px
+            margin: 2.5px
 
-    #stop-background
-        font-size: 1.15em
+            &:hover, &.active
+                animation: none
+                background-color: colors.$dark
+
+    #bg-nowplaying
+        overflow: hidden
+        white-space: nowrap
+        color: colors.$light
+        font-style: italic
+        margin: 1em
 
 .project
     .project-title

package.json

@@ -1,7 +1,7 @@
-import randomize from './randomize.js';
+import {randElement} from './randomize.js';
 
 fetch('/content/data/marquee.json').then(response => response.json()).then(data => {
-    let string = randomize(data);
+    let string = randElement(data);
     let marquee = document.getElementById('marquee');
     marquee.innerHTML = string.text;
     if (string.url && string.url !== '') {