fixing collection naming

_config.yml

@@ -49,7 +49,7 @@ pagination:
 
 ### collection
 collections:
-  music:
+  tracks:
     output: true
     permalink: /music/:title.html
 

_layouts/music.html

@@ -3,20 +3,21 @@ layout: default
 ---
 <div id="player">
   <div id="controls">
-    <button id="mu_pause">Play</button>
-    <h1>{% if page.previous_in_category != nil %}
-      <a href="{{ site.baseurl }}{{ page.previous_in_category.url }}" title="Previous Track"><img
-          src="{{ site.baseurl }}/assets/img/icons/skiprwd.png" title="Previous Track" /></a>
-      {% endif %}
-      <a id="download" title="Download This Track!" href="{{ site.audio_url }}{{ page.mp3 }}"><img
-          src="{{ site.baseurl }}/assets/img/icons/dl.png" title="Download Track" /></a>
-      {% if page.next_in_category != nil %}
-      <a href="{{ site.baseurl }}{{ page.next_in_category.url }}" title="Next Track"><img
-          src="{{ site.baseurl }}/assets/img/icons/skipfwd.png" title="Next Track" /></a>{% endif %}
-    </h1>
-    <a href="{{ site.baseurl }}/music/">Back to Index</a>
+    <div class="container">
+      <button id="mu_pause">Play</button>
+      <h1>{% if page.previous != nil %}
+        <a href="{{ site.baseurl }}{{ page.previous.url }}" title="Previous Track"><img
+            src="{{ site.baseurl }}/assets/img/icons/skiprwd.png" title="Previous Track" /></a>
+        {% endif %}
+        <a id="download" title="Download This Track!" href="{{ site.audio_url }}{{ page.mp3 }}"><img
+            src="{{ site.baseurl }}/assets/img/icons/dl.png" title="Download Track" /></a>
+        {% 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 %}
+      </h1>
+      <a href="{{ site.baseurl }}/music/">Back to Index</a>
+    </div>
   </div>
-
   <div id="info">
     <h1 class="title">{{ page.title }}</h1>
     {{ page.content }}
@@ -64,9 +65,8 @@ layout: default
   });
 </script>
 <style type="text/css">
-  html,
-  body {
-    background:url('{{ site.audio_url }}{{ page.image }}') #0ff no-repeat center fixed;
-    background-size: contain;
+  #player {
+    background-image:url('{{ site.audio_url }}{{ page.image }}') ;
+
   }
 </style>

music.html

@@ -5,7 +5,7 @@ layout: default
 ---
 
 <div class="musiflex">
-  {% for track in site.music reversed %}
+  {% for track in site.tracks reversed %}
   <div class="trackcontainer">
     <a href="{{ track.url }}">
       <div class="track" style="background-image:url({{ site.audio_url }}{{ track.image }});"></div>