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 -->
@@ -41,7 +41,7 @@ layout: default
   <div class="plItem">
     <div class="plNum">{{ track.common.track.no }}.</div>
     <div class="plTitle"><a href="{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.mp3" target="_blank"
-        rel="noopener">{{ track.common.title }} </a></div>
+      rel="noopener">{{ track.common.title }} </a></div>
     <div class="plLength">
       {% 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 }}
     </div>
@@ -63,7 +63,7 @@ layout: default
     <div class="bio">
       <p><a href="mailto:{{ author.email }}"><strong>{{ author.name }}</strong></a></p>
       <p>{{ author.position }}{% if author.gpg != nil %} | <a target="_blank" rel="noopener"
-          href="{{ author.gpg }}">GPG</a>{% endif %}</p>
+        href="{{ author.gpg }}">GPG</a>{% endif %}</p>
       <p class="date">
         Published the
   
@@ -77,17 +77,17 @@ layout: default
       </h6>
       <ul>
         <a target="_blank" rel="nofollow noopener" title="Share to facebook" alt="Share to facebook"
-          href="https://touch.facebook.com/sharer.php?u={{ site.url }}{{ page.url | xml_escape }}&amp;quote={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}%20via%20{{ site.url }}"
+        href="https://touch.facebook.com/sharer.php?u={{ site.url }}{{ page.url | xml_escape }}&amp;quote={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}%20via%20{{ site.url }}"
-          class="icon smaller fab fa-facebook-f"><span class="label">Facebook</span></a>
+        class="icon smaller fab fa-facebook-f"><span class="label">Facebook</span></a>
         <a target="_blank" rel="nofollow noopener" title="Share to twitter" alt="Share to twitter"
-          href="https://twitter.com/share?url={{ site.url }}{{ page.url | xml_escape }}&amp;text={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}%20&amp;hashtags=basspistol"
+        href="https://twitter.com/share?url={{ site.url }}{{ page.url | xml_escape }}&amp;text={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}%20&amp;hashtags=basspistol"
-          class="icon smaller fab fa-twitter"><span class="label">Twitter</span></a>
+        class="icon smaller fab fa-twitter"><span class="label">Twitter</span></a>
         <a target="_blank" rel="nofollow noopener" title="Share to telegram" alt="Share to telgram"
-          href="https://telegram.me/share/url?url={{ site.url }}{{ page.url }}&amp;text={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}"
+        href="https://telegram.me/share/url?url={{ site.url }}{{ page.url }}&amp;text={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}"
-          class="icon smaller fab fa-telegram"><span class="label ">Telegram</span></a>
+        class="icon smaller fab fa-telegram"><span class="label ">Telegram</span></a>
         <a target="_blank" rel="nofollow noopener" title="Share to reddit" alt="Share to reddit"
-          href="https://reddit.com/submit/?url={{ site.url }}{{ page.url }}&amp;title={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}"
+        href="https://reddit.com/submit/?url={{ site.url }}{{ page.url }}&amp;title={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}"
-          class="icon smaller fab fa-reddit"><span class="label">Reddit</span></a>
+        class="icon smaller fab fa-reddit"><span class="label">Reddit</span></a>
       </ul>
   
   
@@ -98,7 +98,7 @@ layout: default
 </section>
 <section class="info">
   <div class="container">
-    {{ content }}
+  {{ content }}
   </div>
 </section>
 <div id="fixedPlayer" class="showplayer hideplayer">
@@ -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>
 
@@ -158,8 +158,8 @@ layout: default
     <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 class="fas fa-arrow-left"
+        title="Read {{ page.previous.title }}"><span class="fas fa-arrow-left"
-            style="font-size:3em;text-decoration: none;"></span></a></h4>
+        style="font-size:3em;text-decoration: none;"></span></a></h4>
       <h3>{{ page.previous.title }}</h3>
       <p>{{ page.previous.description }}</p>
       {% endif %}
@@ -301,8 +301,7 @@ layout: default
   
   <section class="info" id="read">
     <div class="info-pages">
-      
+        {{ content }}
-      {{ content }}
       {% if page.link %}
       <p><a href="{{ page.link }}?ref=TheMusicSyndicateWashere" target="_bank" rel="noopener" class="button">👀 Check it out!</a></p>
       {% endif %}
@@ -318,7 +317,7 @@ layout: default
   <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
-          class="fas fa-arrow-left" style="font-size:3em;text-decoration: none;"></span></a></h4>
+      class="fas fa-arrow-left" style="font-size:3em;text-decoration: none;"></span></a></h4>
     <h3>{{ page.previous.title }}</h3>
     <p>{{ page.previous.description }}</p>
     {% endif %}

_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>