working dat music page

_music/_defaults.md

@@ -0,0 +1,11 @@
+---
+layout:
+title: 
+mp3: 
+ogg: 
+bgimg: 
+uid: 
+category:
+tag: 
+keywords: 
+---

_sass/main.scss

@@ -1,6 +1,38 @@
+html {
+  font-family: "Helvetica", Sans-serif;
+}
+a {
+  font-weight: normal;
+}
 #hero {
   height: 100vh;
   width: 100vw;
   -webkit-transition: background .5s ease-in-out;
   transition: background .5s ease-in-out;
+  background-image: url({{}});
+}
+
+/* MUSIC */
+
+.musiflex {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+}
+.trackcontainer {
+  flex: 1 1 300px;
+  padding: 0;
+  margin: 0;
+  p {
+    padding: 5px;
+  }
+}
+.track {
+  width: 100%;
+  background-size: cover;
+  background-position: 50% 50%;
+  min-height: 300px;
+  padding: 0;
+  margin: 0;
 }

music.html

@@ -4,12 +4,12 @@ description:
 layout: default
 ---
 
-<div>
-{% for track in site.music offset: 0 %}
-  <a href="{{ track.url }}">
-    <div style="background:url({{ site.audio_url }}{{ track.bgimg }});background-size:cover;">
-      <p><strong>{{ track.title }}</strong></p>
-    </div>
-  </a>
-{% endfor %}
+<div class="musiflex">
+  {% for track in site.music reversed %}
+  <div class="trackcontainer">
+    <a href="{{ track.url }}">
+      <div class="track" style="background-image:url({{ site.audio_url }}{{ track.bgimg }});"></div>
+      <p>{{ track.title }}</p></a>
+  </div>
+  {% endfor %}
 </div>