Refine responsive cover layout for mobile and outlier sizes

Author: geealbers

static/css/custom.css

@@ -111,7 +111,8 @@
     max-width: 25vw;
   }
 }
-@media screen and (max-width:1000px) {
+
+@media screen and (((max-width:1370px) and (min-height:800px)) or (max-width:1000px)) {
   .quire-cover__hero.hero.is-fullheight {
     position: relative;
     display: flex;
@@ -123,15 +124,17 @@
     margin: 0;
   }
   .quire-cover__hero-body__text-pane {
-    background-color: rgb(232, 219, 189, .8);
+    background: linear-gradient(0deg, rgb(232, 219, 189, 0), rgb(232, 219, 189, .8), rgb(232, 219, 189, 1), rgb(232, 219, 189, .8), rgb(232, 219, 189, 0));
+    padding-bottom: 3rem;
+    padding-top: 3rem;
+    padding: 3rem .75rem;
   }
   .quire-cover__hero .title {
     margin-top: 0;
   }
   .quire-cover__hero .title,
   .quire-cover__hero .contributor {
     text-align: center;
-    width: 100vw;
     max-width: 100vw;
     margin-left: 0;
     margin-right: 0;
@@ -163,6 +166,23 @@
   }
 }
 
+@media screen and (max-width:500px) {
+  .quire-cover__hero.hero.is-fullheight {
+    min-height: auto !important;
+  }
+  .quire-cover__hero-body__image-pane,
+  .quire-cover__hero-body__image-pane img {
+    height: auto !important;
+    position: inherit;
+  }
+  .quire-cover__hero .title {
+    font-size: 2.25rem;
+  }
+  .quire-cover__hero .title .sm {
+    font-size: 1.75rem;
+  }
+}
+
 /* STANDARD OCCASIONAL PAPERS SERIES DESIGN (EXCEPT FOR COVER)
 ============================================================================= */