diff options
Diffstat (limited to 'docs/index.html')
| -rw-r--r-- | docs/index.html | 410 |
1 files changed, 410 insertions, 0 deletions
diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..0c5217f --- /dev/null +++ b/docs/index.html @@ -0,0 +1,410 @@ +<!doctype html> +<html> +<head> +<title>Xena Vectra</title> +<meta charset="utf-8"> +<style> +@font-face { + font-family: nhg; + src: url(./fonts/NHaasGroteskTXPro-55Rg.ttf); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: nhg; + src: url(./fonts/NHaasGroteskTXPro-56It.ttf); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: nhg; + src: url(./fonts/NHaasGroteskTXPro-75Bd.ttf); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: nhg; + src: url(./fonts/NHaasGroteskTXPro-76BdIt.ttf); + font-weight: bold; + font-style: italic; +} +html, body { + margin: 0; padding: 0; width: 100%; height: 100%; + font-family: nhg, sans-serif; + color: rgba(255,255,255,0.9); +} +html { + background-color: rgb(0,0,0); + background-image: linear-gradient(rgba(20, 10, 0, 0.0), rgba(20, 10, 0, 1.0)); + background-attachment: fixed; + transition: background-color 1s; +} +html.day { + background-color: rgb(80,10,60); +} +html.night { + background-color: rgb(8,10,30); +} +body { + background-color: rgba(0,0,0,0); + transition: background-color 1000ms, opacity 500ms; + opacity: 1; +} +body.loading { + background-color: rgba(255,128,192,1); + background-color: black; + opacity: 0; +} +body.fade { + opacity: 1; + background-color: black; + background-color: rgba(255,128,192,1); +} +.shards { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + overflow: hidden; +} +.bgs { + position: absolute; + top: 50%; left: 50%; + opacity: 0.7; + transition: opacity 500ms; +} +.stars { + transition: all 500ms cubic-bezier(0,0,0,1); + transform: translateZ(0) scaleX(1) scaleY(1); +} +.stars.fade { + transform: translateZ(0) scaleX(1.03) scaleY(1.03); +} +.fade { + opacity: 0; +} +.bg { + position: absolute; + top: 0; left: 0; + transition: all 120s; +} +header { + background-color: rgba(40,20,30,0.9); + position: absolute; + width: 100%; + bottom: 100px; + left: 0; +} +p { + margin: 0; padding: 0; + line-height: 1.4; +} +p + p { + margin-top: 14px;ß +} +a { + text-decoration: none; + color: rgba(255,255,255,0.8); + transition: color 200ms; + border-bottom: 1px dotted; +} +a:hover { + color: rgba(255,255,255,1.0); +} +img { + max-width: 100%; +} +img.cover { + max-width: 300px; +} +.menu a { + margin-right: 10px; + border-bottom: 0; +} +.menu a.active { + border-bottom: 1px dotted; + color: rgba(255,255,255,1.0); +} +.logo { + width: 400px; + opacity: 0.8; + animation: fade 10s infinite; +} +.row { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} +h1 { + font-size: 32px; + margin: 0; + padding: 10px 20px; + letter-spacing: -2px; + text-transform: uppercase; + cursor: pointer; + opacity: 0.9; + transition: opacity 500ms; + color: white; +} +h1:hover { + opacity: 1; +} +h2 { + margin: 0; + padding: 0 0 15px 0; + letter-spacing: -1px; +} +h3 { + margin: 0; + padding: 0 0 6px 0; + letter-spacing: 1px; + font-weight: normal; + font-style: italic; + font-size: 14px; + text-transform: uppercase; + opacity: 0.7; +} +ul { + margin: 0 0 20px 0; + padding: 0; + list-style-type: none; +} +ul li { + list-style-type: none; + line-height: 1.4; +} +ol { + margin: 0 0 20px 0; + padding: 0; +} +ol li { + line-height: 1.4; +} +.player { + padding: 10px 20px; + width: 300px; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + cursor: pointer; + border-left: 1px solid #000; +} +.player .icon { + width: 1.2em; + height: 1.2em; + background-image: url(img/play.png); + background-size: 100%; + background-position: center; + border: 2px solid rgba(255,255,255,0.3); + border-radius: 50%; + margin: 0 10px 0 10px; + transition: all 100ms; +} +.player:hover .icon { + background-image: url(img/play-inv.png); +} +.player.paused .icon { + background-image: url(img/pause.png); +} +.player.paused:hover .icon { + background-image: url(img/pause-inv.png); +} +.player .track { + transition: all 100ms; +} +.player:hover .track { + color: rgba(255,255,255,1.0); +} +.playlist { + -webkit-overflow-scrolling: touch; + overflow-y: auto; + max-height: calc(100vh - 140px); + width: 310px; + max-width: calc(100vw - 30px); + background: black; + position: absolute; + bottom: 160px; right: 0; + margin: 10px 10px; + padding: 10px; + background: rgba(0,0,0,0.5); +} +section { + -webkit-overflow-scrolling: touch; + overflow-y: auto; + max-height: calc(100vh - 140px); + max-width: 500px; + background: black; + position: absolute; + bottom: 160px; left: 0; + margin: 10px 10px; + padding: 10px; + background: rgba(0,0,0,0.5); + pointer-events: none; + opacity: 0; + transition: opacity 200ms; +} +.bio #bio, +.discography #discography, +.hardware #hardware, +.contact #contact { + opacity: 1; +} +@keyframes fade { + 0% { opacity: 0.6; } + 50% { opacity: 1.0; } + 90% { opacity: 0.7; } +100% { opacity: 0.6; } +} +</style> +</head> +<body class='loading'> +<div class="shards"> + <div class="bgs fade"></div> +</div> +<header> + <div class="row"> + <div class="row menu"> + <h1>Xena Vectra</h1> + <a href="#bio">Biography</a> + <a href="#discography">Discography</a> + <a href="#hardware">Equipment</a> + <a href="#contact">Contact</a> + </div> + <div class="player"> + <div class="icon"></div> + <div class="track">Dreaming City</div> + </div> + </div> +</header> +<section id="bio"> + <h2>Biography</h2> + <p> + Xena Vectra is the alter ego of synth goddess Bethany Barrett. Born in the mountains of the Black Forest and raised in sunny California, Beth has a long history in Berlin's underground music scene. Over the years she has produced everything from shoegaze to noise, avant garde disco and synthwave alike. Her unique style as Xena Vectra is inspired by vintage horror soundtracks, driven by her love of analog electronics. + </p> + <p> + Beth performs live using an all hardware setup without a laptop in sight. She is available for bookings throughout Europe. Her soundtrack work includes scoring indie film <i>Figaros Wölfe</i> (2017) and she is currently working on several upcoming projects with the German artist Hito Steyerl. + </p> +</section> +<section id="discography"> + <h2>Discography</h2> + <p> + <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> + <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> +</section> +<section id="hardware"> + <h2>Equipment</h2> + <h3>Monosynths</h3> + <ul> + <li>Moog Subphatty</li> + <li>Korg Monologue</li> + <li>Arturia Microbrute</li> + <li>Pittsburgh Modular Lifeforms SV-1</li> + </ul> + <h3>Polysynths</h3> + <ul> + <li>Behringer DeepMind 12</li> + <li>Roland JX-8P</li> + </ul> + <h3>Drum machines</h3> + <ul> + <li>Roland TR-8</li> + <li>Elektron Digitakt</li> + </ul> + <h3>Pedals</h3> + <ul> + <li>Strymon Timeline</li> + <li>Strymon Big Sky</li> + </ul> + <i>"So, are softsynths as nasty as they say?" —Cayde-6</i> +</section> +<section id="contact"> + <h2>Contact</h2> + <p> + Booking: + <a id='email_addr'></a><br> + Twitter: + @<a id='twitter_addr'></a><br> + Soundcloud: + <a href="https://soundcloud.com/xenavectra/">xenavectra</a>, + <a href="https://soundcloud.com/magisphere/">magisphere</a> + <br/> + Bandcamp: <a href="https://xenavectra.bandcamp.com/">xenavectra</a><br/> + </p> +</section> +<div class="playlist"> + <h2>Playlist</h2> +</div> +<script src="./js/util.js"></script> +<script src="./js/cielab.js"></script> +<script src="./js/sounds.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> +</body> +</html> |