finalboss

_layouts/music.html

@@ -16,32 +16,24 @@ layout: default
         {% if page.next != nil %}
         <a href="{{ site.baseurl }}{{ page.next.url }}" title="Next Track"><img
             src="{{ site.baseurl }}/assets/img/icons/skipfwd.png" title="Next Track" /></a>{% endif %}
-        
       </div>
-
-
     </div>
-
   </div>
   <div class="trackcontainer">
-      
-      <h1>{{ page.title }}</h1>
-      <p style="margin-bottom: 0px;">{{ page.keywords }}<br />{{ page.date | date: '%Y - %B' }}
-        
-        <br />
+  
+    <h1>{{ page.title }}</h1>
+    <p style="margin-bottom: 0px;">{{ page.keywords }}<br />{{ page.date | date: '%Y - %B' }}
+  
+      <br />
       <span id="tracktime" style="font-weight: normal;">&nbsp;</span></p>
-      {% include cookiemonster.html %}
-    </div>
+    {% include cookiemonster.html %}
+  </div>
 
   <div id="timer">
-
     {{ page.content }}
-    
-
   </div>
-  <!-- stylemachine by Sakrecoer -snipthis if ya feel it - its the pary that runs the player ;) -->
 </div>
-<audio preload="true" autoplay
+<audio preload="true" autoplay="true"
   ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration) + ' Seconds';">
   <source src="{{ page.mp3 }}" type="audio/mpeg" />
   <source src="{{ page.ogg }}" type="audio/ogg" />
@@ -53,9 +45,11 @@ layout: default
     return false;
   }
   var mu = document.getElementsByTagName("audio")[0];
+  var anim = document.getElementById("wallpaper");
   var pauseButton = document.getElementById("mu_pause");
   function muFade() {
     mu.classList.add("stopfade");
+    anim.classList.add("stopfade");
   }
   mu.addEventListener('ended', function () {
     // only functional if "loop" is removed
@@ -82,9 +76,34 @@ layout: default
   body {
     background-image:url('{{ page.image }}') ;
   }
+  #navigation {
+    opacity: 1;
+  }
 
-#navigation {
+  #wallpaper {
+  background-image: url(/assets/img/world.svg);
+  -webkit-animation: AnimationName 30s ease infinite;
+  -moz-animation: AnimationName 30s ease infinite;
+  animation: AnimationName 30s ease infinite;
+  height: fit-content;
+    @-webkit-keyframes AnimationName {
+        0%{background-position:0% 91%}
+        50%{background-position:100% 10%}
+        100%{background-position:0% 91%}
+    }
+    @-moz-keyframes AnimationName {
+        0%{background-position:0% 91%}
+        50%{background-position:100% 10%}
+        100%{background-position:0% 91%}
+    }
+    @keyframes AnimationName {
+        0%{background-position:0% 91%}
+        50%{background-position:100% 10%}
+        100%{background-position:0% 91%}
+    }
+  }
+  .stopfade {
+    animation-play-state: paused; 
+  }
 
-  opacity: 1;
-}
 </style>