From 38c0b2b18ec09960fba7c52c0ebe2681ab50e608 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Fri, 5 Jan 2018 01:23:09 +0100
Subject: [PATCH] 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.
---
 css/m-components.css | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index e96c3644..dc9f7aff 100644
--- 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 {
-- 
2.30.2