2021-05-23 16:09:03 +00:00
<!DOCTYPE html>
2021-05-23 19:48:08 +00:00
< html lang = "en" class = "no-js" >
2021-05-23 16:09:03 +00:00
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width" >
< title > lumbung[dot]space streams< / title >
< meta name = "description" content = "Page description" >
< meta property = "og:title" content = "Unique page title - My Site" >
< meta property = "og:description" content = "Page description" >
< meta property = "og:image" content = "https://www.mywebsite.com/image.jpg" >
< meta property = "og:image:alt" content = "Image description" >
< meta property = "og:locale" content = "en_GB" >
< meta property = "og:type" content = "website" >
< meta name = "twitter:card" content = "summary_large_image" >
< meta property = "og:url" content = "https://www.mywebsite.com/page" >
< link rel = "canonical" href = "https://www.mywebsite.com/page" >
< link rel = "icon" href = "/favicon.ico" >
< link rel = "icon" href = "/favicon.svg" type = "image/svg+xml" >
< link rel = "apple-touch-icon" href = "/apple-touch-icon.png" >
< link rel = "manifest" href = "/my.webmanifest" >
< meta name = "theme-color" content = "#FF00FF" >
< style type = "text/css" >
body {font-size:1.3rem;font-family: sans-serif;}
.wrapper {
width: 50%;
margin: auto;
}
.box{
border:2px solid #0e0e22;
max-width:800px;
margin:auto;
box-shadow:1em 1em 0 #d2d1c8;
background-color: #fff09d;
}
2021-05-23 19:48:08 +00:00
.video.box{
margin-top:3em;
}
2021-05-23 16:09:03 +00:00
.bar{
border:2px solid #0e0e22;
box-shadow:0.6em 0.6em 0 #d2d1c8;
margin-bottom: 2em;
margin-top:3em;
display: inline-block;
background-color: #fff09d;
}
.title{
margin-top:1em;
border-top: 2px solid #0e0e22;
padding:0.5em;
font-weight:700;
font-size:1.3rem;
transform: rotate(-7deg);
2021-05-23 19:48:08 +00:00
z-index: 2;
position: absolute;
box-shadow:unset;
2021-05-23 16:09:03 +00:00
}
.footer{
margin-top:0;
border-top: 2px solid #0e0e22;
display: flex;
justify-content: space-between;
}
.controls {
display: flex;
justify-content: space-between;
transform: rotate(2deg);
2021-05-23 19:48:08 +00:00
font-size:16px;
max-width: 300px;
2021-05-23 16:09:03 +00:00
}
#playtoggle {
border-right: 2px solid black;
padding: 0.5em;
}
#duration {
padding: 0.5em;
}
#volume{
border-left: 2px solid black;
padding: 0.5em;
}
.metadata {
font-size: 0.9rem;
max-width: 60ch;
}
.metadata-header{
display: flex;
justify-content: space-between;
border-bottom: 2px solid black;
}
#close{
padding: 0.5em;
border-left: 2px solid black;
}
#about{
padding: 0.5em;
border-right: 2px solid black;
font-weight:700;
}
#description {
padding:1em;
}
.something {
display: flex;
2021-05-23 19:48:08 +00:00
flex-direction: column;
}
2021-05-23 16:09:03 +00:00
2021-05-23 19:48:08 +00:00
#conversejs{
height:500px;
}
.box.chat{
position: absolute;
left: 4em;
bottom: 2em;
}
2021-05-23 16:09:03 +00:00
2021-05-23 19:48:08 +00:00
#titleshadow{
mix-blend-mode: darken;
z-index: 1;
box-shadow:0.6em 0.6em 0 #d2d1c8;
2021-05-23 16:09:03 +00:00
}
< / style >
< / head >
< body >
< div class = 'wrapper' >
2021-05-23 19:48:08 +00:00
< div class = 'title bar' > A SOMEWHAT LONGER STREAM TITLE < / div >
< div class = 'title bar' id = 'titleshadow' > A SOMEWHAT LONGER STREAM TITLE < / div >
2021-05-23 16:09:03 +00:00
< div class = 'video box' >
2021-05-23 19:48:08 +00:00
< iframe width = "800" height = "450" sandbox = "allow-same-origin allow-scripts allow-popups" src = "https://tv.lumbung.space/videos/embed/b4aafef4-892f-4036-a4bc-2e09027e2b4b?start=52s&title=0&warningTitle=0&controls=0" frameborder = "0" allowfullscreen > < / iframe >
2021-05-23 16:09:03 +00:00
< / div >
< div class = 'something' >
< div class = 'controls bar' >
< span id = 'playtoggle' > ▶ < / span >
< span id = 'duration' > 14:02 - ??? < / span >
2021-05-23 19:48:08 +00:00
< span id = 'volume' > 70% + - mute < / span > < / div >
2021-05-23 16:09:03 +00:00
< div class = 'metadata box' >
< div class = 'metadata-header' > < span id = 'about' > about< / span > < span id = 'close' > x< / span > < / div >
< div id = 'description' >
2021-05-23 19:48:08 +00:00
Radio Alhara is a radio station based in Bethlehem, Ramallah and Amman. Launched during a global lockdown crisis in March 2020, it encompasses the idea of a public space. The radio hosts musical sets, conversations, recordings, discussions, and its main aim is to blend the limits between producers and listeners. Radio Alhara have together with a group of sound platforms and sound artists started The Sonic Liberation Front in order to create one sound for Palestine.Radio Alhara is in the ecosystem of Question of Funding.
2021-05-23 16:09:03 +00:00
< / div >
2021-05-23 19:48:08 +00:00
< / div >
< div class = 'box chat' >
2021-10-22 06:50:07 +00:00
< iframe src = "https://lumbung.lurk.org/" id = 'conversejs' sandbox = "allow-same-origin allow-scripts allow-popups" > < / iframe >
2021-05-23 16:09:03 +00:00
< / div >
< / div >
< / div >
< / body >
< / html >