adding magisphere site

1 files changed, 350 insertions, 0 deletions

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