Reorganized music player design #2

app/views/pages/music2.twig

@@ -17,8 +17,9 @@
     <!-- no javascript warning -->
     <noscript class="card">Woah there, lassy! You will need to enable Javascript to use this page!</noscript>
 
-    <!-- left album stuff -->
-    <article class="col-sm-5 col-xs-12">
+    <!-- left stuff -->
+    <div class="col-sm-6 col-xs-12">
+      <!-- now playing -->
       <div class="thumbnail shadow-1">
         <img id="album-artwork" class="image-responsive album-art" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
         <div class="caption">
@@ -29,10 +30,8 @@
           {% endif %}
         </div>
       </div>
-    </article>
 
-    <!-- right album stuff -->
-    <div class="col-sm-7 col-xs-12">
+      <!-- music player -->
       <article id="music-player-card" class="card">
         <audio id="music-player" controls>
           <source src="{{ songs[0].audio_file }}.ogg" type="audio/ogg" />
@@ -40,6 +39,7 @@
         </audio>
       </article>
 
+      <!-- available songs -->
       <article class="card">
         <ul class="now-playing-list">
           {% for song in songs %}
@@ -50,10 +50,10 @@
         </ul>
       </article>
     </div>
-  </section>
 
-  <!-- available albums -->
-  <section class="row">
+    <!-- right stuff -->
+    <div class="col-sm-6 col-xs-12">
+      <div class="row">
         {% for album in albums %}
           <!-- album details -->
           <div class="music-album {% if loop.index0 == 0 %}selected{% endif %} col-sm-3 col-xs-6" data-albumid="{{ album.id }}">
@@ -65,6 +65,8 @@
             </div>
           </div>
         {% endfor %}
+      </div>
+    </div>
   </section>
 
 {% endblock %}