From b9426877cfe30b74d03ec756b93bd047c402d7ad Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 25 Nov 2018 18:44:06 +0100
Subject: we have site

---
 docs/index.html | 138 ++++++++++++++++++++++++--------------------------------
 1 file changed, 60 insertions(+), 78 deletions(-)

(limited to 'docs/index.html')

diff --git a/docs/index.html b/docs/index.html
index 0c5217f..9263023 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -65,6 +65,7 @@ body.fade {
   top: 0; left: 0;
   width: 100%; height: 100%;
   overflow: hidden;
+  pointer-events: none;
 }
 .bgs {
   position: absolute;
@@ -181,7 +182,7 @@ ol li {
   line-height: 1.4;
 }
 .player {
-  padding: 10px 20px;
+  padding: 12px 20px;
   width: 300px;
   display: flex;
   flex-direction: row;
@@ -193,25 +194,22 @@ ol li {
 .player .icon {
   width: 1.2em;
   height: 1.2em;
-  background-image: url(img/play.png);
+  background-image: url(img/pause-inv.png);
   background-size: 100%;
   background-position: center;
   border: 2px solid rgba(255,255,255,0.3);
-  border-radius: 50%;
+  border-radius: 100%;
   margin: 0 10px 0 10px;
-  transition: all 100ms;
 }
-.player:hover .icon {
-  background-image: url(img/play-inv.png);
+.player.playing .icon {
+  background-image: url(img/pause-inv.png);
 }
 .player.paused .icon {
-  background-image: url(img/pause.png);
-}
-.player.paused:hover .icon {
-  background-image: url(img/pause-inv.png);
+  background-image: url(img/play-inv.png);
 }
 .player .track {
   transition: all 100ms;
+  flex: auto;
 }
 .player:hover .track {
   color: rgba(255,255,255,1.0);
@@ -220,14 +218,46 @@ ol li {
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   max-height: calc(100vh - 140px);
-  width: 310px;
+  width: 331px;
   max-width: calc(100vw - 30px);
   background: black;
   position: absolute;
   bottom: 160px; right: 0;
-  margin: 10px 10px;
+  margin: 0px 10px;
+  padding: 0px;
+  height: 0; overflow: hidden;
+  transition: all 0.5s cubic-bezier(0,1,1,1);
+}
+.playlist.visible {
+  height: 180px;
+}
+.playlist ul {
+  margin: 0; padding: 0;
+}
+.playlist li {
+  margin: 0; padding: 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: rgba(20,5,10,0.5);
+}
+.playlist li.active {
+  color: #000;
+  background: rgba(255,255,255,0.9);
+}
+.playlistToggle {
+  align-self: flex-end;
+  width: 15px;
+  height: 15px;
   padding: 10px;
-  background: rgba(0,0,0,0.5);
+  display: flex;
+  flex-direction: column;
+  justify-content:space-between;
+}
+.playlistToggle div {
+  width: 100%;
+  height: 2px;
+  border-bottom: 1px solid #999;
+  background: white;
 }
 section {
   -webkit-overflow-scrolling: touch;
@@ -239,7 +269,7 @@ section {
   bottom: 160px; left: 0;
   margin: 10px 10px;
   padding: 10px;
-  background: rgba(0,0,0,0.5);
+  background: rgba(20,5,10,0.5);
   pointer-events: none;
   opacity: 0;
   transition: opacity 200ms;
@@ -249,6 +279,7 @@ section {
 .hardware #hardware,
 .contact #contact {
   opacity: 1;
+  pointer-events: auto;
 }
 @keyframes fade {
   0% { opacity: 0.6; }
@@ -271,9 +302,14 @@ section {
       <a href="#hardware">Equipment</a>
       <a href="#contact">Contact</a>
     </div>
-    <div class="player">
+    <div class="player paused">
       <div class="icon"></div>
       <div class="track">Dreaming City</div>
+      <div class="playlistToggle">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
     </div>
   </div>
 </header>
@@ -292,14 +328,12 @@ section {
     <i>As Xena Vectra</i>
   </p>
   <p>
-    <img src="img/escape-from-neukoelln.jpg" class="cover"><br/>
     <b>Escape from Neukölln</b> EP (2018)<br>
-    12" / digital on <a href="https://xenavectra.bandcamp.com/albums/escape-from-neukolln/">Bandcamp</a>
+    Digital on <a href="https://xenavectra.bandcamp.com/albums/escape-from-neukolln/">Bandcamp</a>
     <br>
     <br>
   </p>
   <p>
-    <img src="img/dreaming-city.jpg" class="cover"><br/>
     <b>Dreaming City</b> EP (2018)<br>
     Cassette / digital on <a href="https://xenavectra.bandcamp.com/albums/escape-from-neukolln/">Bandcamp</a>
   </p>
@@ -334,77 +368,25 @@ section {
   <h2>Contact</h2>
   <p>
     Booking:
-      <a id='email_addr'></a><br>
+      <a target='_blank' id='email_addr'></a><br>
     Twitter:
-      @<a id='twitter_addr'></a><br>
+      @<a target='_blank' id='twitter_addr'></a><br>
     Soundcloud:
-      <a href="https://soundcloud.com/xenavectra/">xenavectra</a>,
-      <a href="https://soundcloud.com/magisphere/">magisphere</a>
+      <a target='_blank' href="https://soundcloud.com/xenavectra/">xenavectra</a>,
+      <a target='_blank' href="https://soundcloud.com/magisphere/">magisphere</a>
     <br/>
-    Bandcamp: <a href="https://xenavectra.bandcamp.com/">xenavectra</a><br/>
+    Bandcamp: <a target='_blank' href="https://xenavectra.bandcamp.com/">xenavectra</a><br/>
   </p>
 </section>
 <div class="playlist">
-  <h2>Playlist</h2>
+  <ul></ul>
 </div>
 <script src="./js/util.js"></script>
 <script src="./js/cielab.js"></script>
 <script src="./js/sounds.js"></script>
+<script src="./js/player.js"></script>
 <script src="./js/stars.js"></script>
 <script src="./js/shards.js"></script>
-<script type="text/javascript">
-const site = (function(){
-  let section
-  let links = toArray(document.querySelectorAll('.menu a'))
-  let time = new Date()
-  let hour = time.getHours()
-  if (hour < 8 || hour > 16) {
-    document.body.parentNode.classList.add('night')
-  } else {
-    document.body.parentNode.classList.add('day')
-  }
-  setTimeout(() => {
-    document.body.classList.remove('loading')
-    navigateHash(window.location.hash)
-    const email = atob("eGVuYXZlY3RyYTkwOUBnbWFpbC5jb20=")
-    const twitter = atob("dmVjdHJheGVuYQ==")
-    document.querySelector("#email_addr").href = 'mailto:' + email
-    document.querySelector("#email_addr").innerHTML = email
-    document.querySelector("#twitter_addr").innerHTML = twitter
-    document.querySelector("#twitter_addr").href = 'https://twitter.com/' + email
-  }, 0)
-  function navigateHash(url){
-    let new_section = url.split('#')[1]
-    if (section) {
-      document.body.classList.remove(section)
-      links.forEach(link => link.classList.remove('active'))
-    }
-    if (new_section && new_section !== section) {
-      document.body.classList.add(new_section)
-      links.forEach(link => link.getAttribute('href').match(new_section) && link.classList.add('active'))
-      section = new_section
-    } else {
-      section = null
-    }
-    window.location.hash = section || ""
-  }
-  toArray(document.querySelectorAll('.menu a')).forEach(a => {
-    a.addEventListener("click", e => {
-      e.preventDefault()
-      sounds.play('click')
-      navigateHash(e.target.href)
-    })
-  })
-})()
-const player = (function(){
-  let player = {}
-  let tracks = [
-    { file: "sounds/dreaming_city_2.mp3", title: "Dreaming City 2" },
-    { file: "sounds/dreaming_city_2.mp3", title: "Dreaming City 2" },
-    { file: "sounds/dreaming_city_2.mp3", title: "Dreaming City 2" },
-    { file: "sounds/dreaming_city_2.mp3", title: "Dreaming City 2" },
-  ]
-})
-</script>
+<script src="./js/site.js"></script>
 </body>
 </html>
-- 
cgit v1.2.3-70-g09d2