diff options
Diffstat (limited to 'docs/index.html')
| -rw-r--r-- | docs/index.html | 138 |
1 files changed, 60 insertions, 78 deletions
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> |