css: fix jumbo article header behavior on very narrow / very wide screens.

In some cases the content after got floated right after the article
title, on iOS Safari the content was even overlapping the header. Also
added a minimal font size so the (sub)title and date/author text don't
get scaled below 1rem.

Now the cover image also slides a bit under the summary / content, like
it is on landing pages.

diff --git a/css/m-components.css b/css/m-components.css
index e96c3644bbcb5434a1d27e9c7173568b9a3249c1..dc9f7aff0130f5f1f4204090fd7cbef9da8ec0b5 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -460,11 +460,6 @@ article section > h4 a, article section > h5 a, article section > h6 a {
 article#m-jumbo {
   margin-top: -1rem;
 }
-article#m-jumbo > header #m-jumbo-image {
-  font-size: 2.5vh;
-  height: 60vh;
-  margin-bottom: 1rem;
-}
 #m-landing-cover, #m-cover-image > div, article#m-jumbo > header #m-jumbo-cover {
   background: linear-gradient(transparent 0%, transparent 50%, var(--background-color) 100%);
   width: 100%;
@@ -474,14 +469,30 @@ article#m-jumbo > header h1, article#m-jumbo > header h2 {
   text-align: center;
   font-weight: bold;
 }
+article#m-jumbo > header a {
+  text-decoration: none;
+}
+article#m-jumbo > header #m-jumbo-cover {
+  padding-bottom: 5rem;
+}
+article#m-jumbo > header #m-jumbo-image {
+  font-size: 2.5vmin;
+  margin-bottom: -3rem;
+}
 article#m-jumbo > header h1 {
-  font-size: 10vh;
+  font-size: 10vmin;
 }
 article#m-jumbo > header h2 {
-  font-size: 3vh;
+  font-size: 3vmin;
 }
-article#m-jumbo > header a {
-  text-decoration: none;
+/* 2.5vmin equals to 16px (= 1 rem) on 640px, use that as the lower limit */
+@media screen and (max-height: 640px) , screen and (max-width: 640px) {
+  article#m-jumbo > header h1 {
+    font-size: 3rem;
+  }
+  article#m-jumbo > header #m-jumbo-image, article#m-jumbo > header h2 {
+    font-size: 1rem;
+  }
 }
 
 article#m-jumbo > header, article#m-jumbo > header h1, article#m-jumbo > header a {