summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--docs/pavone/index.html465
1 files changed, 315 insertions, 150 deletions
diff --git a/docs/pavone/index.html b/docs/pavone/index.html
index 8070446..a20a6a4 100644
--- a/docs/pavone/index.html
+++ b/docs/pavone/index.html
@@ -1,166 +1,331 @@
-<!doctype html>
+<!DOCTYPE html>
<html>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-<title>Pavone Cristallo</title>
-<style type="text/css">
-* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
-html,body{width:100%;height:100%;margin:0;padding:0;}
-body { text-align: center; background: linear-gradient(#000, #102); background-attachment: fixed; }
-#pavone { background-image:url('pavone.jpg'); background-size: 400px; background-position: center center; text-align: center; }
-#misc { position: fixed; z-index: -1; width: 100%; height: 100%; pointer-events: none; transform-origin: 50% 50%; }
-#misc canvas { width: 100%; height: 100%; }
-#content { z-index: 1; }
-#content section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 20px; margin: 10px 0 }
-#content div { display: inline-block; padding: 10px; margin: 10px; background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,80,0.8)); color: #fff; border: 10px solid rgba(128,255,255,0.05); box-shadow: 10px 10px 10px rgba(0,0,0,0.6); }
-audio { box-shadow: 12px 12px 12px rgba(0,0,0,0.3); border-radius: 20px; }
-h1 { color: yellow; padding: 0; margin: 0; transform: skewX(-10deg); font-size: 48px; letter-spacing: 6px; }
-h2 { color: yellow; }
-i { color: #0ff; }
-b { color: #ffb; }
-a { color: #3bf; }
-#demos a { color: #ff8; display: inline-block; margin: 20px; padding: 20px; background: black; background: #008; box-shadow: 0 4px 5px #000; transition: all 0.4s; text-decoration: none; }
-#demos a.playing { background: #00f; color: #ff0; }
-span { color: #fbb; }
-audio { -webkit-filter: invert(100%); }
-#gifz {position:absolute;top:0;left:0;z-index:-2; }
-#gifz img { position: absolute; animation: faderz; }
-#demos i { color: #f88; }
-@keyframes faderz { 0% { opacity: 0 } 50% { opacity: 1} 100%{ opacity: 0}}
-#horizon { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: linear-gradient(rgba(0,0,255,0.01), rgba(255,128,128,0.3), #008, #00f); opacity: 0.2; }
-#horizona { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: linear-gradient(rgba(0,0,255,0.01), #00f); opacity: 0.3; z-index: -2; }
-#horizon2 { width: 100%; height: 200px; background: linear-gradient(rgba(255,128,0,0.01), rgba(255,128,0, 0.2), rgba(128,192,255,0.8)); opacity: 0.2; }
-</style>
-<body>
- <div id='misc'><canvas id='c'></canvas><div id='gifz'></div><div id='horizon'></div><div id='horizona'></div></div>
- <div id='content'>
- <br>
- <br><br>
-<section><div><img src="pavone.jpg" width=300></div></section>
-<section>
-<div>
-<h1>PAVONE CRISTALLO</h1>
-</div>
-</section>
+ <meta charset="utf-8" />
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1.0, user-scalable=yes"
+ />
+ <title>Pavone Cristallo</title>
+ <style type="text/css">
+ * {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+ html,
+ body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ }
+ body {
+ text-align: center;
+ background: linear-gradient(#000, #102);
+ background-attachment: fixed;
+ }
+ #pavone {
+ background-image: url("pavone.jpg");
+ background-size: 400px;
+ background-position: center center;
+ text-align: center;
+ }
+ #misc {
+ position: fixed;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ transform-origin: 50% 50%;
+ }
+ #misc canvas {
+ width: 100%;
+ height: 100%;
+ }
+ #content {
+ z-index: 1;
+ }
+ #content section {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ margin: 10px 0;
+ }
+ #content div {
+ display: inline-block;
+ padding: 10px;
+ margin: 10px;
+ background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 80, 0.8));
+ color: #fff;
+ border: 10px solid rgba(128, 255, 255, 0.05);
+ box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6);
+ }
+ audio {
+ box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.3);
+ border-radius: 20px;
+ }
+ h1 {
+ color: yellow;
+ padding: 0;
+ margin: 0;
+ transform: skewX(-10deg);
+ font-size: 48px;
+ letter-spacing: 6px;
+ }
+ h2 {
+ color: yellow;
+ }
+ i {
+ color: #0ff;
+ }
+ b {
+ color: #ffb;
+ }
+ a {
+ color: #3bf;
+ }
+ #demos a {
+ color: #ff8;
+ display: inline-block;
+ margin: 20px;
+ padding: 20px;
+ background: black;
+ background: #008;
+ box-shadow: 0 4px 5px #000;
+ transition: all 0.4s;
+ text-decoration: none;
+ }
+ #demos a.playing {
+ background: #00f;
+ color: #ff0;
+ }
+ span {
+ color: #fbb;
+ }
+ audio {
+ -webkit-filter: invert(100%);
+ }
+ #gifz {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -2;
+ }
+ #gifz img {
+ position: absolute;
+ animation: faderz;
+ }
+ #demos i {
+ color: #f88;
+ }
+ @keyframes faderz {
+ 0% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+ }
+ #horizon {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ background: linear-gradient(
+ rgba(0, 0, 255, 0.01),
+ rgba(255, 128, 128, 0.3),
+ #008,
+ #00f
+ );
+ opacity: 0.2;
+ }
+ #horizona {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ background: linear-gradient(rgba(0, 0, 255, 0.01), #00f);
+ opacity: 0.3;
+ z-index: -2;
+ }
+ #horizon2 {
+ width: 100%;
+ height: 200px;
+ background: linear-gradient(
+ rgba(255, 128, 0, 0.01),
+ rgba(255, 128, 0, 0.2),
+ rgba(128, 192, 255, 0.8)
+ );
+ opacity: 0.2;
+ }
+ </style>
+ <body>
+ <div id="misc">
+ <canvas id="c"></canvas>
+ <div id="gifz"></div>
+ <div id="horizon"></div>
+ <div id="horizona"></div>
+ </div>
+ <div id="content">
+ <br />
+ <br /><br />
+ <section>
+ <div><img src="pavone.jpg" width="300" /></div>
+ </section>
+ <section>
+ <div>
+ <h1>PAVONE CRISTALLO</h1>
+ </div>
+ </section>
-<section>
-<div><i><b>Pavone Cristallo</b></i> <span>is a live hardware/acoustic horror disco trio</span></div>
-</section>
+ <section>
+ <div>
+ <i><b>Pavone Cristallo</b></i>
+ <span>is a live hardware/acoustic horror disco trio</span>
+ </div>
+ </section>
-<section id='demos'>
- <div>
- <a href="https://s3.amazonaws.com/i.asdf.us/bucky/data/4598/Pavone%20Cristallo%20Approaching%20Dawn%20drums%20fix.mp3">▶ Approaching Dawn</a><br>
- <a href="https://s3.amazonaws.com/i.asdf.us/bucky/data/4598/Pavone%20Cristallo%20Bog%20Zombie%20drums%202%20no%20markers.mp3">▶ Bog Zombie</a><br>
- </div>
-</section>
+ <section id="demos">
+ <div>
+ <a
+ href="https://s3.amazonaws.com/i.asdf.us/bucky/data/4655/Pavone%20Cristallo%202022.04.02%20fog%20short%20version.mp3"
+ >▶ Something's In The Fog</a
+ ><br />
+ <a
+ href="https://s3.amazonaws.com/i.asdf.us/bucky/data/4655/pavone%20cristallo%20-%202022.03.18%20bog%20zombie%20moog%20rework.mp3"
+ >▶ Bog Zombie</a
+ ><br />
+ </div>
+ </section>
-<section><table></table></section>
+ <section><table></table></section>
-<section>
-<div><i>Beth</i> leads &amp; bass<br><i>Jules</i> pads &amp; arps<br><i>Liam</i> drums</div>
- <div>
- For more music check out<br>
- <a href="https://lfolobster.bandcamp.com/">LFO Lobster</a>
- <br>
- or follow us on
- <a href="https://twitter.com/lfolobster">Twitter</a>
- </div>
-</section>
- </div>
- <div id='horizon2'></div>
-</body>
-<script src="/assets/js/stars.js"></script>
-<script src="/assets/js/audio-player.js"></script>
+ <section>
+ <div>
+ <i>Beth</i> leads &amp; bass<br /><i>Jules</i> pads &amp; arps<br /><i
+ >Liam</i
+ >
+ drums
+ </div>
+ <div>
+ For more music check out<br />
+ <a href="https://lfolobster.bandcamp.com/">Magisphere</a>
+ <br />
+ or follow us on
+ <a href="https://twitter.com/lfolobster">Twitter</a>
+ </div>
+ </section>
+ </div>
+ <div id="horizon2"></div>
+ </body>
+ <script src="/assets/js/stars.js"></script>
+ <script src="/assets/js/audio-player.js"></script>
<script>
- var w = c.width = window.innerWidth * devicePixelRatio
- var h = c.height = window.innerHeight * devicePixelRatio
- var ctx = c.getContext('2d');
+ var w = (c.width = window.innerWidth * devicePixelRatio);
+ var h = (c.height = window.innerHeight * devicePixelRatio);
+ var ctx = c.getContext("2d");
-var zzz = Math.max(w, h) * 0.05
-var zzzA = Math.max(w, h) * 0.02
-function r(n) { return n + Math.random() * zzzA }
-ctx.beginPath()
-ctx.moveTo(r(w/2), r(zzz))
-ctx.lineTo(r(w - zzz), r(h/2))
-ctx.lineTo(r(zzz), r(h - zzz))
-ctx.lineTo(r(w/2), r(zzz))
+ var zzz = Math.max(w, h) * 0.05;
+ var zzzA = Math.max(w, h) * 0.02;
+ function r(n) {
+ return n + Math.random() * zzzA;
+ }
+ ctx.beginPath();
+ ctx.moveTo(r(w / 2), r(zzz));
+ ctx.lineTo(r(w - zzz), r(h / 2));
+ ctx.lineTo(r(zzz), r(h - zzz));
+ ctx.lineTo(r(w / 2), r(zzz));
-var lingrad = ctx.createLinearGradient(0,0,w,h);
-lingrad.addColorStop(0, 'rgba(128,0,128,0.3)');
-lingrad.addColorStop(1, 'rgba(10,0,128,0.3)');
-ctx.fillStyle = lingrad;
-ctx.fill()
+ var lingrad = ctx.createLinearGradient(0, 0, w, h);
+ lingrad.addColorStop(0, "rgba(128,0,128,0.3)");
+ lingrad.addColorStop(1, "rgba(10,0,128,0.3)");
+ ctx.fillStyle = lingrad;
+ ctx.fill();
-ctx.beginPath()
-ctx.moveTo(r(w/2), r(zzz))
-ctx.lineTo(r(w - zzz), r(h/2))
-ctx.lineTo(r(zzz), r(h - zzz))
-ctx.lineTo(r(w/2), r(zzz))
+ ctx.beginPath();
+ ctx.moveTo(r(w / 2), r(zzz));
+ ctx.lineTo(r(w - zzz), r(h / 2));
+ ctx.lineTo(r(zzz), r(h - zzz));
+ ctx.lineTo(r(w / 2), r(zzz));
-var lingrad = ctx.createLinearGradient(w/2,0,w,h);
-lingrad.addColorStop(0, 'rgba(0,0,255,0.2)');
-lingrad.addColorStop(1, 'rgba(255,0,0,0.2)');
-ctx.fillStyle = lingrad;
-ctx.fill()
+ var lingrad = ctx.createLinearGradient(w / 2, 0, w, h);
+ lingrad.addColorStop(0, "rgba(0,0,255,0.2)");
+ lingrad.addColorStop(1, "rgba(255,0,0,0.2)");
+ ctx.fillStyle = lingrad;
+ ctx.fill();
-var gifs = [
- 'animated-star-image-0142.gif',
- 'animated-star-image-0142.gif',
- 'animated-star-image-0142.gif',
- 'animated-star-image-0142.gif',
- 'animated-star-image-0142.gif',
- 'animated-star-image-0142.gif',
- 'animated-star-image-0142.gif',
- 'animated-star-image-0142.gif',
- 'animated-star-image-0142.gif',
- 'animated-star-image-0142.gif',
- 'animated-star-image-0142.gif',
- 'animated-star-image-0142.gif',
- 'animated-star-image-0142.gif',
- 'animated-star-image-0142.gif',
- 'animated-star-image-0142.gif',
- 'animated-star-image-0005.gif',
- 'animated-star-image-0147.gif',
-]
-function choice(a) { return a[Math.floor(Math.random()*a.length)] }
-function a() {
- var img = new Image()
- img.src=choice(gifs) + '?' + Math.random()
- img.style.top = Math.round(Math.random() * window.innerHeight) + "px"
- img.style.left = Math.round(Math.random() * window.innerWidth) + "px"
- img.style.opacity = (Math.random() / 2) + 0.5
- img.style.animationDelay = (10 + Math.random() * 10) + 's'
- img.style.animationDuration = (10 + Math.random() * 10) + 's'
- gifz.appendChild(img)
-}
-a();a();a()
-for (var i = 0; i < 23; i++) { setTimeout(a, Math.random() * 10000) }
-document.body.classList.add('done')
-function u(t){
- var p = t / document.body.scrollHeight
- var s = [
- 'rotateX(' + (p*1.2 ) + 'rad)',
- 'rotateY(' + (p*2) + 'rad)',
- 'rotateZ(' + (-p*3) + 'rad)'
- ].join(' ')
- console.log(s)
- c.style.transform = s
-}
-let last_known_scroll_position = 0;
-let ticking = false;
+ var gifs = [
+ "animated-star-image-0142.gif",
+ "animated-star-image-0142.gif",
+ "animated-star-image-0142.gif",
+ "animated-star-image-0142.gif",
+ "animated-star-image-0142.gif",
+ "animated-star-image-0142.gif",
+ "animated-star-image-0142.gif",
+ "animated-star-image-0142.gif",
+ "animated-star-image-0142.gif",
+ "animated-star-image-0142.gif",
+ "animated-star-image-0142.gif",
+ "animated-star-image-0142.gif",
+ "animated-star-image-0142.gif",
+ "animated-star-image-0142.gif",
+ "animated-star-image-0142.gif",
+ "animated-star-image-0005.gif",
+ "animated-star-image-0147.gif",
+ ];
+ function choice(a) {
+ return a[Math.floor(Math.random() * a.length)];
+ }
+ function a() {
+ var img = new Image();
+ img.src = choice(gifs) + "?" + Math.random();
+ img.style.top = Math.round(Math.random() * window.innerHeight) + "px";
+ img.style.left = Math.round(Math.random() * window.innerWidth) + "px";
+ img.style.opacity = Math.random() / 2 + 0.5;
+ img.style.animationDelay = 10 + Math.random() * 10 + "s";
+ img.style.animationDuration = 10 + Math.random() * 10 + "s";
+ gifz.appendChild(img);
+ }
+ a();
+ a();
+ a();
+ for (var i = 0; i < 23; i++) {
+ setTimeout(a, Math.random() * 10000);
+ }
+ document.body.classList.add("done");
+ function u(t) {
+ var p = t / document.body.scrollHeight;
+ var s = [
+ "rotateX(" + p * 1.2 + "rad)",
+ "rotateY(" + p * 2 + "rad)",
+ "rotateZ(" + -p * 3 + "rad)",
+ ].join(" ");
+ console.log(s);
+ c.style.transform = s;
+ }
+ let last_known_scroll_position = 0;
+ let ticking = false;
-window.addEventListener('scroll', function(e) {
- last_known_scroll_position = window.scrollY;
+ window.addEventListener("scroll", function (e) {
+ last_known_scroll_position = window.scrollY;
- if (!ticking) {
- window.requestAnimationFrame(function() {
- u(window.scrollY/ 10)
- ticking = false;
- });
+ if (!ticking) {
+ window.requestAnimationFrame(function () {
+ u(window.scrollY / 10);
+ ticking = false;
+ });
- ticking = true;
- }
-});
-u(window.scrollY)
+ ticking = true;
+ }
+ });
+ u(window.scrollY);
</script>
</html>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 13:22:36 +0000