fix layout

_includes/header.html

@@ -1,39 +1,18 @@
-{% include relBase.html %}
+<header class="hero" style="background-image: url({{ page.image }});">
-<header class="hero" id="top"
+  <div class="textcontainer">
-  style="{% unless page.video_path %}background-image: url({{ page.image }});{% endunless %}">
+    <h1>{{ page.title }}</h1>
+    <p>{{ page.description }}</p>
+    {% if page.category == 'releases' %}
+    <p><a href="#plwrap" class="button">Listen</a></p>
+    {% endif %}
+    {% if page.category == 'ramblings' %}
+    <p><a href="#read" class="button">Read</a></p>
+    {% endif %}
+    {% if page.url == '/404/' %}
+    <p><a href="/" class="button">Take me home</a></p>
+    {% endif %}
+  </div>
   <div class="imagecontainer">
     <h4>{{ page.title }}</h4>
   </div>
-  <section class="splash">
-
-    <div class="container">
-    
-      <div class="splash-logo">
-        <img src="{{ site.logo }}" width="240px" alt="{{ site.title }} Logo" />
-      </div>
-    
-      <div class="description" {% unless page.url == '/' %}style="padding: 0;"{% endunless %}>
-       
-        <h1>{{ page.title }}</h1>
-        {% if page.category == 'releases' %}
-        
-        {% for album in site.albums %}
-        {% if album.slug == page.album %}
-        <h4>by <strong>{{ album.artists }}</strong></h4>
-        {% endif %}
-        {% endfor %}
-      
-        {% endif %}
-    
-        <p>{{ page.description }}</p>
-    
-      </div>
-    </div>
-    
-    </section>
-
 </header>
-
-
-
-

_sass/_elements.scss

@@ -303,59 +303,9 @@ a:hover {
   }
 
 }
-.front-section:nth-of-type(2) {
-  margin-top: 40px;
 
-}
 
-.splash {
-  background-color: transparent;
-  .container {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 40px;
-  align-items: flex-start;
-  max-width: var(--max-width);
-  margin: auto;
-    .description {
 
-      border-radius: var(--border-radius);
-      background: var(--bg-alt);
-      background: linear-gradient(90deg, transparent 0%, var(--bg) 91%);
-    }
-  h1, h2 {
-    font-size: 2em;
-  }
-  p, h1, h2, h3, h4 {
-    text-align: left;
-    margin-top: 20px;
-
-  }
-  h1:first-child {
-    margin-top: 0;
-  }
-  div {
-    max-width: unset;
-    margin: 0;
-    flex: 1 1 300px;
-    padding: 0 0 0 80px;
-
-  }
-  .splash-logo {
-    padding: 0;
-    margin: 0;
-  }
-  @media only screen and (max-width: 759px) {
-    div {
-      min-width: 100%;
-      padding: 20px 0;
-    }
-    .splash-logo {
-      padding: 20px 0;
-    }
-  }
-}
-}
 
 #contact {
   padding: 20px;

_sass/_layout.scss

@@ -30,6 +30,7 @@ body {
 .wrapper {
   margin: 20px 40px;
 }
+
 .hero {
   display: flex;
   flex-wrap: wrap;
@@ -40,16 +41,18 @@ body {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  padding: 40px;
+  padding: 0;
   position: relative;
   min-height: 80vh;
   width: 100vw;
 
   .textcontainer {
-    background-color: var(--bg-alt);
+    background: rgb(2,0,36);
+    background: linear-gradient(90deg, transparent 0%, var(--bg) 91%);
     border-radius: var(--border-radius);
-    max-width: 700px;
+    max-width: var(--max-width);
-    padding: 20px 20px 40px 20px;
+    padding: 0px 40px 40px 40px;
+    
   }
 
   div {
@@ -57,7 +60,7 @@ body {
     h1,
     p {
       flex: 1 0 100%;
-      width: 100%;
+
       z-index: 10;
       color: var(--fg);
       max-width: var(--max-width);
@@ -100,6 +103,56 @@ body {
       filter: blur(1px);
     }
   }
+  .splash {
+    background-color: transparent;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 40px;
+    align-items: flex-start;
+    max-width: var(--max-width);
+    margin: auto;
+      .description {
+  
+        border-radius: var(--border-radius);
+        background: var(--bg-alt);
+        background: linear-gradient(90deg, transparent 0%, var(--bg) 91%);
+        > * {
+          margin: 40px !important;
+        }
+      }
+    h1, h2 {
+      font-size: 2em;
+    }
+    p, h1, h2, h3, h4 {
+      text-align: left;
+      margin-top: 20px;
+  
+    }
+    h1:first-child {
+      margin-top: 0;
+    }
+    div {
+      max-width: unset;
+      margin: 0;
+      flex: 1 1 300px;
+
+  
+    }
+    .splash-logo {
+      padding: 0;
+      margin: 0;
+    }
+    @media only screen and (max-width: 759px) {
+      div {
+        min-width: 100%;
+        padding: 20px 0;
+      }
+      .splash-logo {
+        padding: 20px 0;
+      }
+    }
+  
+  }
 }
 
 section {

index.html

@@ -8,12 +8,12 @@ video_path: /videos/pingu.mp4
 ---
 {% include relBase.html %}
 <header class="hero" id="top"
-  style="{% unless page.video_path %}background-image: url({{ page.image }});{% endunless %}">
+  style="background-image: url({{ page.image }});">
   <div class="imagecontainer">
     <h4>{{ page.title }}</h4>
   </div>
-  <section class="splash">
+
-    <div class="container">
+    <div class="splash">
       <div class="splash-logo">
         <img src="{{ site.icon }}" width="240px" alt="{{ site.title }} Logo" />
       </div>
@@ -23,7 +23,7 @@ video_path: /videos/pingu.mp4
         <p>{{ page.description }}</p>
       </div>
     </div>
-    </section>
+
 
 </header>