summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--docs/assets/js/stars.js12
-rw-r--r--docs/index.html14
-rw-r--r--docs/magisphere/index.html74
-rw-r--r--docs/magisphere/magisphere.css350
4 files changed, 437 insertions, 13 deletions
diff --git a/docs/assets/js/stars.js b/docs/assets/js/stars.js
index 0637473..7c1f5de 100644
--- a/docs/assets/js/stars.js
+++ b/docs/assets/js/stars.js
@@ -17,11 +17,11 @@ const stars = (function(){
})
function ri(n){ return Math.random() * n }
function rr(a,b){ return (b-a) * Math.random() + a }
- function build(){
+ function build(d,ar){
var w = canvas.width = window.innerWidth * window.devicePixelRatio
var h = canvas.height = window.innerHeight * window.devicePixelRatio
ctx.clearRect(0,0,w,h)
- var n = Math.sqrt(w*h)|0
+ var n = Math.sqrt(w*h*d)|0
while (n--) {
var x = ri(w)
var y = ri(h)
@@ -40,20 +40,20 @@ const stars = (function(){
ctx.beginPath()
ctx.moveTo(x,y)
ctx.bezierCurveTo(x0,y0,x1,y1,x2,y2)
- var color = rr(0, 255)|0
- ctx.strokeStyle="rgb("+color+","+color+","+color+")"
+ var ch = rr(0, 255)|0
+ ctx.strokeStyle=ar ? "rgb("+ch+",0,0)" : "rgb("+ch+","+ch+","+ch+")"
ctx.stroke()
}
}
let rebuilding = false
- function rebuild(){
+ function rebuild(d,ar){
if (rebuilding) return
rebuilding = true
canvas.classList.add('fade')
document.body.classList.add('fade')
setTimeout(() => {
// destroy()
- build()
+ build(d,ar)
canvas.classList.remove('fade')
document.body.classList.remove('fade')
rebuilding = false
diff --git a/docs/index.html b/docs/index.html
index ddee963..fcd714d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -98,12 +98,12 @@
<div class="playlist">
<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 src="./js/site.js"></script>
+<script src="./assets/js/util.js"></script>
+<script src="./assets/js/cielab.js"></script>
+<script src="./assets/js/sounds.js"></script>
+<script src="./assets/js/player.js"></script>
+<script src="./assets/js/stars.js"></script>
+<script src="./assets/js/shards.js"></script>
+<script src="./assets/js/site.js"></script>
</body>
</html>
diff --git a/docs/magisphere/index.html b/docs/magisphere/index.html
new file mode 100644
index 0000000..a6cd77f
--- /dev/null
+++ b/docs/magisphere/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html>
+<head>
+<title>Xena Vectra</title>
+<meta charset="utf-8">
+<link rel="stylesheet" href="magisphere.css" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+</head>
+<body class='loading'>
+<div class='content'>
+ <b>MAGISPHERE</b> IS
+ <a href="/">XENA VECTRA</a>
+ and
+ <a href="https://asdf.us/">COSMIC SANDS</a>
+ cosmic analog underwater excursion / debut and cassette release at <a href="http://panke.gallery/">panke . gallery</a> WEDDING THURSDAY 17-01-2019.
+ descent into THETA-5 / sonar wave shadows. benthic illumination.
+ magma atrium and the chamber of glyphs. C20. Produced in 2019.
+</div>
+<!-- <div class="player paused">
+ <div class="icon"></div>
+ <div class="track"></div>
+ <div class="playlistToggle">
+ <div></div>
+ <div></div>
+ <div></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>
+ As Xena Vectra, she 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).
+ </p>
+</section>
+<section id="discography">
+ <h2>Discography</h2>
+ <p>
+ <i>As Xena Vectra</i>
+ </p>
+ <p>
+ <b>Escape from Neukölln</b> EP (2018)<br>
+ Digital on <a href="https://xenavectra.bandcamp.com/albums/escape-from-neukolln/">Bandcamp</a>
+ <br>
+ <br>
+ </p>
+ <p>
+ <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="contact">
+</section>
+-->
+<div class="playlist">
+ <ul></ul>
+</div>
+<script src="/assets/js/util.js"></script>
+<script src="/assets/js/cielab.js"></script>
+<script src="/assets/js/sounds.js"></script>
+<script src="/assets/js/player.js"></script>
+<script src="/assets/js/stars.js"></script>
+<script>
+const site = (function(){
+ document.body.classList.remove('loading')
+ stars.rebuild(0.6, true)
+})()
+</script>
+</body>
+</html>
diff --git a/docs/magisphere/magisphere.css b/docs/magisphere/magisphere.css
new file mode 100644
index 0000000..9c2d760
--- /dev/null
+++ b/docs/magisphere/magisphere.css
@@ -0,0 +1,350 @@
+@font-face {
+ font-family: alarmclock;
+ src: url(/assets/fonts/alarmclock.ttf);
+ font-weight: normal;
+ font-style: normal;
+}
+@font-face {
+ font-family: nhg;
+ src: url(/assets/fonts/NHaasGroteskTXPro-55Rg.ttf);
+ font-weight: normal;
+ font-style: normal;
+}
+@font-face {
+ font-family: nhg;
+ src: url(/assets/fonts/NHaasGroteskTXPro-56It.ttf);
+ font-weight: normal;
+ font-style: italic;
+}
+@font-face {
+ font-family: nhg;
+ src: url(/assets/fonts/NHaasGroteskTXPro-75Bd.ttf);
+ font-weight: bold;
+ font-style: normal;
+}
+@font-face {
+ font-family: nhg;
+ src: url(/assets/fonts/NHaasGroteskTXPro-76BdIt.ttf);
+ font-weight: bold;
+ font-style: italic;
+}
+.desktop .m,
+.mobile .d { display: none; }
+html, body {
+ margin: 0; padding: 0; width: 100%; height: 100%;
+ font-family: nhg, sans-serif;
+ color: rgba(255,255,255,0.9);
+ overflow: hidden;
+}
+html {
+ background-color: rgb(0,0,0);
+ background-image: linear-gradient(rgba(30, 0, 0, 1.0), rgba(30, 0, 0, 0.0));
+ background-attachment: fixed;
+ transition: background-color 1s;
+}
+html.day {
+ background-color: rgb(30,0,0);
+}
+html.night {
+ background-color: rgb(0,0,40);
+}
+body {
+ background-color: rgba(0,0,0,0);
+ transition: background-color 1000ms, opacity 500ms;
+ opacity: 1;
+}
+body.loading {
+ background-color: black;
+ opacity: 0;
+}
+.glow {
+ position: absolute;
+ top: 50%; left: 0;
+ width: 100%; height: 20%;
+ background-color: rgba(0,0,0,0.9);
+ background-image: linear-gradient(rgba(10,0,0,1.0), rgba(0,0,20,1.0));
+ opacity: 0.4;
+ transform: skewY(3deg);
+ overflow: hidden;
+ pointer-events: none;
+}
+.horizon {
+ position: absolute;
+ top: 65%; left: 0;
+ width: 100%; height: 80%;
+ background-color: rgba(0,0,0,1.0);
+ background-image: linear-gradient(rgba(0,0,0,1.0), rgba(10,0,0,1.0));
+ transform: skewY(3deg);
+ overflow: hidden;
+ pointer-events: none;
+}
+.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;
+}
+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;
+}
+.desktop a:hover {
+ color: rgba(255,255,255,1.0);
+}
+img {
+ max-width: 100%;
+}
+img.cover {
+ max-width: 300px;
+}
+.row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+}
+.content {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate3d(-50%, -50%, 0) skewY(3deg);
+ background: black;
+ padding: 20px;
+
+ font-family: 'alarmclock', monospace;
+ color: #800;
+ font-size: 32px;
+ margin: 0;
+ letter-spacing: -2px;
+ cursor: pointer;
+ opacity: 0.9;
+ transition: opacity 500ms;
+ text-align: justify;
+}
+.loading .content b,
+.loading .content a {
+ color: #000;
+}
+.content b {
+ transition: color 1500ms;
+ color: red;
+}
+.content a {
+ transition: color 1500ms;
+ color: red;
+ border: 0;
+ text-decoration: none;
+}
+.desktop .content a:hover {
+ color: #ff0;
+ transition: color 250ms;
+}
+.desktop 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: 12px 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/pause-inv.png);
+ background-size: 100%;
+ background-position: center;
+ border: 2px solid rgba(255,255,255,0.3);
+ border-radius: 100%;
+ margin: 0 10px 0 10px;
+}
+.player.playing .icon {
+ background-image: url(../img/pause-inv.png);
+}
+.player.paused .icon {
+ background-image: url(../img/play-inv.png);
+}
+.player .track {
+ transition: all 100ms;
+ flex: auto;
+}
+.desktop .player:hover .track {
+ color: rgba(255,255,255,1.0);
+}
+.playlist {
+ -webkit-overflow-scrolling: touch;
+ overflow-y: auto;
+ max-height: calc(100vh - 140px);
+ width: 331px;
+ max-width: calc(100vw - 30px);
+ background: black;
+ position: absolute;
+ bottom: 160px; right: 0;
+ 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;
+ 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;
+ 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(20,5,10,0.5);
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity 200ms;
+}
+.bio #bio,
+.discography #discography,
+.hardware #hardware,
+.contact #contact {
+ opacity: 1;
+ pointer-events: auto;
+}
+@keyframes fade {
+ 0% { opacity: 0.6; }
+ 50% { opacity: 1.0; }
+ 90% { opacity: 0.7; }
+100% { opacity: 0.6; }
+}
+
+@media (max-width: 700px) {
+ * { box-sizing: border-box; }
+ header {
+ bottom: auto;
+ top: 0px;
+ }
+ header .row {
+ flex-direction: column;
+ }
+ header .row .menu {
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+ h1 {
+ flex: 1 1 100%;
+ text-align: center;
+ }
+ .menu a {
+ display: block;
+ text-align: center;
+ margin-left: 6px;
+ margin-right: 6px;
+ padding-bottom: 10px;
+ }
+ .menu a.active {
+ border: 0;
+ }
+ .playlist {
+ width: 100vw;
+ margin: 0;
+ bottom: 59px;
+ }
+ section {
+ height: calc(100vh - 150px);
+ width: 100%;
+ max-width: auto;
+ min-width: auto;
+ max-height: auto;
+ padding-bottom: 20px;
+ bottom: auto;
+ top: 90px;
+ margin: 0;
+ }
+ .player {
+ position: fixed;
+ bottom: 0;
+ background: rgba(80,10,60,0.6);
+ width: 100vw;
+ padding: 12px 20px;
+ }
+ .playlistToggle {
+ width: 36px;
+ height: 36px;
+ }
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-14 16:24:31 +0000