From dfb4be490dcece9f03680e4c0ea61816e4781e50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20Cora=C3=A7=C3=A3o?= <nunocoracao@gmail.com>
Date: Mon, 17 Oct 2022 10:34:34 +0100
Subject: [PATCH] UI improvements to background hero

---
 assets/css/compiled/main.css          | 4 ++--
 layouts/_default/single.html          | 9 +++++++--
 layouts/partials/hero/background.html | 2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 558654bb..de1f909c 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1634,8 +1634,8 @@ select {
   height: 2rem;
 }
 
-.h-\[45vh\] {
-  height: 45vh;
+.h-\[300px\] {
+  height: 300px;
 }
 
 .h-36 {
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index c071fced..4766d4a4 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -146,10 +146,15 @@
 
         var header = document.getElementById("single_header")
         var style = getComputedStyle(header);
-        var margin = '-'+ (parseInt(style.height) + parseInt(style.marginTop) + parseInt(style.marginBottom) + 20) + 'px'
         var hero = document.getElementById('hero')
-        if(hero)
+        if(hero){
+          var margin = '-'+ (parseInt(style.height) + parseInt(style.marginTop) + parseInt(style.marginBottom) + 20) + 'px'
+          var height = (-parseInt(margin) + parseInt(getComputedStyle(hero).height)) + "px"
+          console.log(height)
           hero.style["margin-bottom"] = margin;
+          hero.style["height"] = height;
+        }
+
       </script>
   </section>
   <footer class="pt-8 max-w-prose print:hidden">
diff --git a/layouts/partials/hero/background.html b/layouts/partials/hero/background.html
index b07af9fd..323ea85a 100644
--- a/layouts/partials/hero/background.html
+++ b/layouts/partials/hero/background.html
@@ -3,7 +3,7 @@
 {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
 {{- with $featured -}}
     {{ with .Resize "1200x" }}
-        <div id="hero" class="relative h-[45vh] single_hero_background nozoom" style="background-image:url({{ .RelPermalink }});">
+        <div id="hero" class="relative h-[300px] single_hero_background nozoom" style="background-image:url({{ .RelPermalink }});">
             <div class="hero_gradient bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
         </div>
     {{ end }}