Xena Vectra

From eb0da3158480fdf2914361f664eb7495424c85c9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 7 Jan 2019 23:52:21 +0100 Subject: adding magisphere site --- docs/assets/js/stars.js | 12 +- docs/index.html | 14 +- docs/magisphere/index.html | 74 +++++++++ docs/magisphere/magisphere.css | 350 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 437 insertions(+), 13 deletions(-) create mode 100644 docs/magisphere/index.html create mode 100644 docs/magisphere/magisphere.css (limited to 'docs') 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 @@

- - - - - - - + + + + + + + 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 @@ + + + +Xena Vectra + + + + + +

+ MAGISPHERE IS + XENA VECTRA + and + COSMIC SANDS + cosmic analog underwater excursion / debut and cassette release at panke . gallery 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. +

+ + + +

+ + + + + + + + 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 -- cgit v1.2.3-70-g09d2