Fix hero image position issue after Bootstrap 5 migration (#29)

spyder-ide · Mar 5, 2024 · 54b83f8 · 54b83f8
1 parent 1be4fd4
commit 54b83f8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/assets/static/js/main-singlelayout.js b/assets/static/js/main-singlelayout.js
@@ -21,11 +21,16 @@ https://github.com/spyder-ide/lektor-icon/blob/master/NOTICE.txt
   "use strict";
 
   const heroHeight = function () {
+    const headerHeight = $(".js-sticky").outerHeight();
     if ($(window).outerWidth() > 768) {
-      $(".js-fullheight-home").css("height", "100dvh");
+      $(".js-fullheight-home").css(
+        "height",
+        `calc(100dvh - ${headerHeight}px)`
+      );
     } else {
-      $(".js-fullheight-home").css("height", "50dvh");
+      $(".js-fullheight-home").css("height", `50dvh - ${headerHeight}px)`);
     }
+    $(".hero-section").css("margin-top", `${headerHeight}px`);
   };
 
   const setHeroHeight = function () {

diff --git a/templates/single-layout.html b/templates/single-layout.html
@@ -67,7 +67,7 @@
 {%- if this.hero_image %}
 <div id="section-home" class="hero-section" data-section="home" data-stellar-background-ratio="0.5">
   <div class="container">
-    <div class="row row-cols-1 row-cols-lg-2 g-4 justify-content-center justify-content-lg-start">
+    <div class="row row-cols-1 row-cols-lg-2 g-0 justify-content-center justify-content-lg-start">
       <div class="col">
         <div class="fh5co-copy">
           <div class="js-fullheight-home fh5co-copy-inner">