Add embedded spotify playlist to Your Music

URN · Nov 12, 2016 · 395061a · 395061a
1 parent e5de921
commit 395061a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/music.php b/music.php
@@ -22,12 +22,10 @@
         ?>
 
     </div>
+<div class="row">
+        <iframe class="row vertical" src="https://embed.spotify.com/?uri=spotify%3Auser%3Aurnplaylist%3Aplaylist%3A7a5zE78nIKxubabMBYq3EA" width="300" height="800" frameborder="0" allowtransparency="true"></iframe>
 
-    <section class="tabs">
-        <input id="tab-playlist-a" type="radio" name="grp" checked="checked"/>
-        <label for="tab-playlist-a" class="tab-title">Playlists</label>
-        <div class="tab-content">
-            <div class="videos">
+        <div class="row vertical">
                 <!-- Youtube Grid of images -->
                 <div class="youmax"></div>
 
@@ -38,9 +36,9 @@
                             apiKey: 'AIzaSyBWZBeWeXbWUHcNKbt-vEXH6q3ltP6CDLs', // harry.mumford-turner@urn1350.net
                             youTubeChannelURL: "http://www.youtube.com/user/urn1350",
                             youTubePlaylistURL: "PL9tY0BWXOZFvWi6WNdcokF_YvXUxyESRW",
-                            youmaxColumns: 3,
+                            youmaxColumns: 1,
                             showVideoInLightbox: false,
-                            maxResults: 20,
+                            maxResults: 3,
                             showHeader: false,
                             customTabs: [
                                 {
@@ -63,8 +61,6 @@
                     });
                 </script>
             </div>
-        </div>
-    </section>
-</div>
 
+</div>
 <?php get_footer(); ?>
diff --git a/sass/_vendor/_youmax.scss b/sass/_vendor/_youmax.scss
@@ -159,7 +159,9 @@
     font-size: 18px;
 
     @include breakpoint(tablet) {
-        padding: 40px 10px 20px;
+        font-size: 20px;
+        padding-top: 15px;
+        text-align: center;
     }
 
     @include breakpoint(tiny) {
@@ -173,6 +175,11 @@
         padding: 5px;
         cursor: pointer;
 
+        @include breakpoint(tablet) {
+            display: block;
+            margin: 10px 2px 5px;
+        }
+
         @include breakpoint(tiny) {
             display: block;
             margin: 10px 2px 5px;

diff --git a/style.css b/style.css
@@ -218,7 +218,9 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 }
 @media (max-width: 780px) {
   .youmax-tabs {
-    padding: 40px 10px 20px;
+    font-size: 20px;
+    padding-top: 15px;
+    text-align: center;
   }
 }
 @media (max-width: 440px) {
@@ -233,6 +235,12 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
   padding: 5px;
   cursor: pointer;
 }
+@media (max-width: 780px) {
+  .youmax-tabs span {
+    display: block;
+    margin: 10px 2px 5px;
+  }
+}
 @media (max-width: 440px) {
   .youmax-tabs span {
     display: block;