styling

_includes/header.html

@@ -3,7 +3,7 @@
     <h1>{{ page.title }}</h1>
     <p>{{ page.description }}</p>
     {% if page.category == 'releases' %}
-    <p><a href="#plwrap" class="button">Listen</a></p>
+    <p><a href="#play" class="button">Listen</a></p>
     {% endif %}
     {% if page.category == 'ramblings' %}
     <p><a href="#read" class="button">Read</a></p>

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

_sass/_layout.scss

@@ -43,7 +43,7 @@ body {
   background-repeat: no-repeat;
   padding: 0;
   position: relative;
-  min-height: 80vh;
+  min-height: 100vh;
   width: 100vw;
 
   .textcontainer {
@@ -78,7 +78,7 @@ body {
     width: 100%;
     height: 100%;
     background-image: url("../img/vignette.svg");
-    background-size: 240px;
+    background-size: 640px;
     background-repeat: repeat-x;
     background-position: bottom;
     z-index: 1;
@@ -185,7 +185,7 @@ footer {
   background-color: var(--fg);
   color: var(--bg);
   background-image: url("../img/vignette-footer.svg");
-  background-size: 400px;
+  background-size: 200px;
   background-repeat: repeat-x;
   background-position: top;
   box-sizing: border-box;

_sass/_player.scss

@@ -5,7 +5,7 @@
 .album-player {
   display: flex;
   flex-wrap: wrap;
-  padding: 0 40px;
+  padding: 80px 40px 0 40px;
   justify-content: space-evenly;
   flex-direction: row-reverse;
   align-items: center;