From ed685eab457654cc3443d3d049379273e35b872c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Wed, 5 Dec 2018 17:30:48 +0100
Subject: [PATCH] style: make header responsive for even smaller widths
 (#28648)

---
 gadjo/static/css/gadjo.scss | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/gadjo/static/css/gadjo.scss b/gadjo/static/css/gadjo.scss
index d86b854..7729a2d 100644
--- a/gadjo/static/css/gadjo.scss
+++ b/gadjo/static/css/gadjo.scss
@@ -199,7 +199,10 @@ div#header h1 {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	@include vendor-prefix('transition', 'all ease 200ms');
-
+	@media screen and (max-width: $mobile-limit) {
+		width: 100%;
+		max-width: calc(100% - #{$sidepage-icon-width} - 21px);
+	}
 	a {
 		opacity: 0.8;
 		color: inherit;
@@ -241,6 +244,14 @@ div#header h1 {
 			border: 1px solid white;
 			border-width: 2px 2px 0 0;
 		}
+		@media screen and (max-width: $mobile-limit) {
+			a {
+				display: none;
+			}
+			a:first-child {
+				display: inline-block;
+			}
+		}
 	}
 }
 
@@ -251,6 +262,12 @@ body[data-environment-label] div#header {
 	h1 {
 		// + picture width
 		padding-left: $sidepage-width + $sidepage-left-space + 70px;
+		@media screen and (max-width: $mobile-limit) {
+			max-width: calc(100% - 60px);
+		}
+		@media screen and (max-width: 380px) {
+			display: none;
+		}
 	}
 }
 
-- 
2.20.0.rc2