fix layout issues

_layouts/post.html

@@ -5,7 +5,7 @@ layout: default
 <script src="{{ relBase }}/assets/js/jquery-3.5.1.min.js"></script>
 {% include header.html %}
 
-<section>
+<section id="play">
  <div class="album-player">
 
 <!-- HERE BEGINS MADNESS -->
@@ -139,7 +139,7 @@ layout: default
       {% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}
    | <strong>{{ track.common.genre }}</strong></p>
       <p>{{ track.common.year }}</p>
-    <p><a href="{{ relBase }}/tracks/{{ track.slug }}/" class="button"><span class="fas fa-play"></span> Play</a></p>
+    <p><a href="{{ relBase }}/tracks/{{ track.slug }}/" class="button">🔊 Play</a></p>
   </div>
 </section>
 
@@ -301,7 +301,6 @@ layout: default
   
   <section class="info" id="read">
     <div class="info-pages">
-      
         {{ content }}
       {% if page.link %}
       <p><a href="{{ page.link }}?ref=TheMusicSyndicateWashere" target="_bank" rel="noopener" class="button">👀 Check it out!</a></p>

_layouts/track.html

@@ -16,7 +16,7 @@ layout: default
     <div class="coverartwrapped" id="coverart" style="background-image: url({{ site.mediaurl }}/{{ page.slug }}.jpeg);"></div>
   </div>
   <div class="playbutton hideWhenNoJS">
-  <a id="mu_pause" class="button">Play!</a>
+  <a id="mu_pause" class="button">🔊 Play!</a>
   </div>
 
 
@@ -82,23 +82,23 @@ layout: default
 {% endfor %}
 <!-- post Naviation -->
 <section class="post-navigation">
-  {% if page.previous.url or page.next.url %}
+
   <div class="post-nav">
-    {% if page.previous.url %}
+
-    <h4><a href="{{ relBase }}{{ page.previous.url }}" alt="Read {{ page.previous.title }}" title="Read {{ page.previous.title }}"><span
+    <h4><a href="{{ relBase }}/tracks/{{ page.previousTrack.slug }}/" alt="Read {{ page.previousTrack.common.title }}" title="Read {{ page.previousTrack.common.title }}"><span
           class="fas fa-arrow-left" style="font-size:3em;text-decoration: none;"></span></a></h4>
-    <h3>{{ page.previous.common.title }}</h3>
+    <h3>{{ page.previousTrack.common.title }}</h3>
-    <p>{{ page.previous.description }}</p>
+    <p>{{ page.previousTrack.common.description }}</p>
-    {% endif %}
+
   </div>
   <div class="post-nav-next">
-    {% if page.next.url%}
+
-    <h4><a href="{{ page.next.url }}"><span class="fas fa-arrow-right" style="font-size:3em;"></span></a></h4>
+    <h4><a href="{{ relBase }}/tracks/{{ page.nextTrack.slug }}/" alt="Read {{ page.nextTrack.common.title }}" title="Read {{ page.nextTrack.common.title }}"><span class="fas fa-arrow-right" style="font-size:3em;"></span></a></h4>
-    <h3>{{ page.next.common.title }}</h3>
+    <h3>{{ page.nextTrack.common.title }}</h3>
-    <p>{{ page.next.description }}</p>
+    <p>{{ page.nextTrack.common.description }}</p>
-    {% endif %}
+
   </div>
-{% endif %}
+
 </section>
 {% include footer.html %}
 <!-- End Post Navigation -->
@@ -123,13 +123,13 @@ layout: default
 
 
     <div id="tracks">
-      {% if page.previous.url %}
-      <a id="btnPrev" href="{{ relBase }}{{ page.previous.url }}"><span class="fas fa-fast-backward"></span></a>
-      {% endif %}
 
-      {% if page.next.url %}
+      <a id="btnPrev" href="{{ relBase }}/tracks/{{ page.previousTrack.slug }}/" alt="Previous track" title="Previous track"><span class="fas fa-fast-backward"></span></a>
-      <a id="btnNext" href="{{ relBase }}{{ page.next.url }}"><span class="fas fa-fast-forward"></span></a>
+
-      {% endif %}
+
+
+      <a id="btnNext" href="{{ relBase }}/tracks/{{ page.nextTrack.slug }}/" alt="Next track" title="Next track"><span class="fas fa-fast-forward"></span></a>
+
     </div>
     <p id="npTitle" style="font-weight: bold;">{{ page.common.title }} </p>
 
@@ -154,10 +154,10 @@ layout: default
     // only functional if "loop" is removed
     mu.pause();
     mu.currentTime = 0;
-    loadUrl("{{ relBase }}{{ page.next.url }}"); return false;
+    loadUrl("{{ relBase }}/tracks/{{ page.nextTrack.slug }}/"); return false;
   });
   mu.onplaying = function() {
-    pauseButton.innerHTML = "Pause";
+    pauseButton.innerHTML = "⏸️ Pause";
     fixedplayer.classList.remove("hideplayer");
 
   }; 
@@ -179,7 +179,7 @@ layout: default
   });
   mu.addEventListener('pause', function () {
     spincover.classList.add("paused");
-    pauseButton.innerHTML = "Resume";
+    pauseButton.innerHTML = "🔊 Resume";
   });
 
 

_sass/_player.scss

@@ -8,7 +8,7 @@
   padding: 80px 40px 0 40px;
   justify-content: space-evenly;
   flex-direction: row-reverse;
-  align-items: center;
+  align-items: flex-start;
   max-width: var(--max-width);
   margin: auto;
   > div {

index.html

@@ -42,7 +42,7 @@ layout: default
 
 </header>
 
-<section class="section-title">
+<section class="section-title" id="read">
   <div class="container">
     <h2>Latest News</h2>
   </div>