From b5ba9d72a5383a57e06031b1a168b426b25f570b Mon Sep 17 00:00:00 2001
From: Luca Beltrame <lbeltrame@kde.org>
Date: Sat, 9 Jan 2021 15:00:34 +0100
Subject: [PATCH] Make at least a semblance of responsiveness in the header.

I might need a media query to make it cover when it is not.
---
 layouts/partials/page-header.html | 2 +-
 layouts/partials/site-header.html | 2 +-
 static/css/isso.css               | 5 +++++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/layouts/partials/page-header.html b/layouts/partials/page-header.html
index 9272d4d..550f7fd 100644
--- a/layouts/partials/page-header.html
+++ b/layouts/partials/page-header.html
@@ -2,7 +2,7 @@
 {{ if $featured_image }}
   {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
   {{ $featured_image := (trim $featured_image "/") | absURL }}
-  <header class="cover bg-top" style="background-image: url('{{ $featured_image }}');">
+  <header class="cover bg-top responsive-header" style="background-image: url('{{ $featured_image }}');">
     <div class="pb3-m pb6-l {{ .Site.Params.cover_dimming_class | default "bg-black-10" }}">
       {{ partial "site-navigation.html" . }}
       <div class="tc-l pv6 ph3 ph4-ns">
diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html
index a252b92..89caa0d 100755
--- a/layouts/partials/site-header.html
+++ b/layouts/partials/site-header.html
@@ -2,7 +2,7 @@
 {{ if $featured_image }}
   {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
   {{ $featured_image := (trim $featured_image "/") | absURL }}
-  <header class="cover bg-top" style="background-image: url('{{ $featured_image }}');">
+  <header class="cover bg-top responsive-header" style="background-image: url('{{ $featured_image }}');">
     <div class="{{ .Site.Params.cover_dimming_class | default "bg-black-10" }}">
       {{ partial "site-navigation.html" .}}
       <div class="tc-l pv4 pv6-l ph3 ph4-ns">
diff --git a/static/css/isso.css b/static/css/isso.css
index 878ff61..259880b 100644
--- a/static/css/isso.css
+++ b/static/css/isso.css
@@ -69,3 +69,8 @@
 .isso-comment > div.text-wrapper > div.text p {
     font-size: 0.9rem !important;
 }
+
+.responsive-header  {
+    background-repeat:no-repeat;
+    background-size:contain !important;
+}