From 5e5eb6dbdaf8d85de2222b594f1e5e5ad42d7fcc Mon Sep 17 00:00:00 2001 From: r Date: Wed, 5 May 2021 21:58:04 +0200 Subject: [PATCH] add some fancy stuff to prototype --- lumbung.space/videofeedprototype.html | 137 +++++++++++++++++++++++--- 1 file changed, 122 insertions(+), 15 deletions(-) diff --git a/lumbung.space/videofeedprototype.html b/lumbung.space/videofeedprototype.html index c931c6f..2fce8e2 100644 --- a/lumbung.space/videofeedprototype.html +++ b/lumbung.space/videofeedprototype.html @@ -74,10 +74,69 @@ padding-top: 0.2em; display: inline-block; padding-bottom: 0.2em; - - } + .play-icon { + width: 0; + height: 0; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%) scale(.5); + border-top: 13px solid transparent; + border-bottom: 13px solid transparent; + border-left: 18px solid hsla(0,0%,100%,.95); + } + + .video-thumbnail { + position: absolute; + width: 100%; + height: 100%; + top: 0; + } + .video-thumbnail { + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; + background-color: #ececec; + transition: filter .2s ease; + } + + .video-thumbnail-duration-overlay { + display: inline-block; + background-color: rgb(255, 240, 157); + color: #0e0e22; + font-size: 14px; + line-height: 1.1; + z-index: 10; + position: absolute; + padding: 1px 3px 1px 3px; + right: 5px; + bottom: 5px; + border: 2px solid #0e0e22; + } + + .play-overlay { + transition: all .2s ease; + position: absolute; + right: 0; + bottom: 0; + width: inherit; + height: inherit; + opacity: 0; + background-color: rgba(0,0,0,.3); + } + + .video-thumbnail:hover { + text-decoration:none!important + } + .video-thumbnail:hover .play-overlay { + opacity:1 + } + .video-thumbnail:hover .play-overlay .play-icon { + transform:translate(-50%,-50%) scale(1) + @@ -88,8 +147,16 @@
- - + + + +
+ 1:25:29 +
+
+
+
+
Futures Literacy for the Regenerative Economy — Oliver Bream McIntosh & FuPro Collective | RF2020 @@ -102,8 +169,16 @@
- - + + + +
+ 0:16:59 +
+
+
+
+
Through the Algorithmic Lens —Irini Papadimitriou | RF2020 @@ -116,8 +191,16 @@
- - + + + +
+ 2:59:28 +
+
+
+
+
Peek- creating games for understanding futures — Evan Raskob | RF2020 @@ -130,8 +213,16 @@
- - + + + +
+ 0:19:25 +
+
+
+
+
From cradle-to-grave: Tech won’t save us — Benjamin Gaulon | RF2020 @@ -144,8 +235,16 @@
- - + + + +
+ 0:44:17 +
+
+
+
+
PGPoetry workshop — Yoav Lifshitz | RF2020 @@ -158,8 +257,16 @@
- - + + + +
+ 1:50:55 +
+
+
+
+
Avatars in Zoom for All — Eyal Gruss | RF2020 @@ -173,4 +280,4 @@
- + \ No newline at end of file