From 9712071e0b8c5f357155c8679152ef77c9719a5e Mon Sep 17 00:00:00 2001
From: Set Hallstrom <set@hallstrom.ch>
Date: Tue, 30 Apr 2019 17:28:23 +0200
Subject: [PATCH] working dat music page

---
 _music/_defaults.md | 11 +++++++++++
 _sass/main.scss     | 32 ++++++++++++++++++++++++++++++++
 music.html          | 16 ++++++++--------
 3 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 _music/_defaults.md

diff --git a/_music/_defaults.md b/_music/_defaults.md
new file mode 100644
index 0000000..33c43d5
--- /dev/null
+++ b/_music/_defaults.md
@@ -0,0 +1,11 @@
+---
+layout:
+title: 
+mp3: 
+ogg: 
+bgimg: 
+uid: 
+category:
+tag: 
+keywords: 
+---
diff --git a/_sass/main.scss b/_sass/main.scss
index 4317dc7..09b672b 100644
--- a/_sass/main.scss
+++ b/_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;
 }
\ No newline at end of file
diff --git a/music.html b/music.html
index 7babee3..16295ed 100644
--- a/music.html
+++ b/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>