Bunch of fixes, full song data

CSS, favicon, song listing done

_includes/songlist.html

@@ -0,0 +1,18 @@
+<div class="song">
+    <p>
+        {%- assign isFirst = true -%}
+        {%- for artistName in song.artists -%}
+        {%- if isFirst == true -%}
+        {%- assign isFirst = false -%}
+        {%- else -%}, {% comment %} Comma and space to separate artists {% endcomment %}
+        {%- endif -%}
+        {%- assign artist = site.artists | where: 'name', artistName | first -%}
+        {%- if artist -%}
+        <a href="{{ artist.url | prepend: site.baseurl }}">{{ artist.name }}</a>
+        {%- else -%}
+        {{ artistName }}
+        {%- endif -%}
+        {%- endfor -%}
+        {% comment %} Space needed {% endcomment %} - <a href="{{ song.url }}">{{ song.name }}</a>
+    </p>
+</div>

_layouts/default.html

@@ -7,8 +7,9 @@
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <link rel="apple-touch-icon" href="icon.png">
+  <link rel="apple-touch-icon" href="{{ site.baseurl }}/icon.png">
   <!-- Place favicon.ico in the root directory -->
+  <link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/favicon.ico" />
 
   <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
 

css/main.css

@@ -1,5 +1,8 @@
 body {
     background-color: #003239;
+}
+
+* {
     color: aqua;
 }
 
@@ -21,9 +24,10 @@ body {
 
 
 #popularSongs, #hiddenSongs {
-    width: 40%;
+    width: 38%;
     margin: 4%;
     border: 1px #78ffee solid;
+    padding: 20px;
 }
 
 #popularSongs h2, #hiddenSongs h2 {
@@ -42,3 +46,7 @@ body {
 h1 {
     text-align: center;
 }
+
+.content {
+    /*background-color: #1f2523;*/
+}

index.html

@@ -3,31 +3,19 @@ layout: default
 title: Hidden Sounds
 ---
 <h1>Hidden Sounds Unofficial (Fan) Website</h1>
-<div id="popularSongs">
+<div id="popularSongs" class="content">
     <h2>Popular Songs</h2>
     <div id="popularContainer">
         {% for song in site.data.songs %}
-        <div class="song">
-            <p>
-                {% assign artist = site.artists | where: 'name', song.artist | first %}
-                {% if artist %}
-                <a href="{{ artist.url | prepend: site.baseurl }}">{{ artist.name }}</a>
-                {% else %}
-                {{ song.artist }}
-                {% endif %}
-                - <a href="https://spotify.com/">{{ song.title }}</a>
-            </p>
-        </div>
+        {% include songlist.html %}
         {% endfor %}
     </div>
 </div>
-<div id="hiddenSongs">
+<div id="hiddenSongs" class="content">
     <h2>Hidden Songs</h2>
     <div id="hiddenContainer">
         {% for song in site.data.songs %}
-        <div class="song">
-            <p><a href="https://spotify.com/">Artist - Title</a></p>
-        </div>
+        {% include songlist.html %}
         {% endfor %}
     </div>
 </div>