ADD blocker for moving content lower when there is a header, CHANGE cover image display

assets/scss/index.scss

@@ -106,18 +106,6 @@ img {
   flex-flow: column;
 }
 
-.content {
-  align-self: center;
-  padding-top: 3rem;
-  width: 100%;
-  margin: 0;
-}
-
-.content p img {
-  width: 100%;
-  // height: 500px;
-}
-
 .divider {
   height: 3px;
   border-radius: 50px;
@@ -174,7 +162,7 @@ img {
 }
 
 .content {
-  padding-top: 9rem;
+  padding-top: 2rem;
   padding-bottom: 2rem;
   padding-right: 1.5rem;
   padding-left: 1.5rem;
@@ -185,6 +173,10 @@ img {
   flex-grow: 1;
 }
 
+.content p img {
+  width: 100%;
+}
+
 .notfound {
   display: flex;
   padding-right: 1.5rem;
@@ -590,9 +582,9 @@ button {
 }
 
 .coverimage {
-  height: 60vh;
+  height: auto;
+  max-height: 80vh;
   min-width: 100%;
-  padding-top: 68px;
   object-fit: contain;
 }
 

layouts/_default/list.html

@@ -13,8 +13,6 @@
         {{ end }}
         {{.Content}}
     </div>
-  {{ else if .Params.header.enabled }}
-    <div class="header-blocker"></div>
   {{ end }}
   {{- range $index, $page := .Pages }}
     {{ $odd := mod $index 2 }}

layouts/partials/header.html

@@ -43,6 +43,7 @@
   </div>
   <a href="javascript:void(0);" id="menu-icon" class="menu-icon" onclick="unfoldHeader()">&#9776;</a>
 </header>
+<div class="header-blocker"></div>
 <script src="/js/header.js"></script>
 {{ end }}
 <script src="/js/progress.js"></script>