fix(portal-theme): fix hero height on mobile

Author: M-A-Boucher

src/Themes/PortalTheme/Assets/scss/_global.scss

@@ -9,8 +9,8 @@ body {
   flex: 1 1 auto;
   flex-direction: column;
   font-family: "Fira Sans", sans-serif;
+  min-height: -webkit-fill-available;
   min-height: 100vh;
-  min-height: calc(var(--vh, 1vh) * 100);
 }
 
 .skip-navigation {
@@ -186,17 +186,13 @@ hr {
 @include media-breakpoint-up(lg) {
   .btn {
     &.btn-primary {
-      transition-property: all;
+      transition-property: transform;
       transition-duration: 300ms;
       transition-timing-function: ease-out;
-      box-shadow: 0 30px 20px rgba(17, 15, 15, 0.25);
       &:hover {
-        box-shadow: 0 40px 25px rgba(17, 15, 15, 0.25);
         transform: translateY(-5px);
       }
       &:focus {
-        box-shadow: 0 40px 25px rgba(17, 15, 15, 0.25),
-          0 0 0 0.2rem transparentize($primary, 0.5);
         transform: translateY(-5px);
       }
     }

src/Themes/PortalTheme/Assets/scss/_hero.scss

@@ -2,6 +2,7 @@
   &.is-fullheight {
     display: flex;
     flex-direction: column;
+    min-height: -webkit-fill-available;
     min-height: 100vh;
 
     .container {
@@ -16,6 +17,24 @@
       flex-grow: 1;
       flex-shrink: 0;
 
+      .btn {
+        &.btn-primary {
+          transition-property: all;
+          transition-duration: 300ms;
+          transition-timing-function: ease-out;
+          box-shadow: 0 30px 20px rgba(17, 15, 15, 0.25);
+          &:hover {
+            box-shadow: 0 40px 25px rgba(17, 15, 15, 0.25);
+            transform: translateY(-5px);
+          }
+          &:focus {
+            box-shadow: 0 40px 25px rgba(17, 15, 15, 0.25),
+              0 0 0 0.2rem transparentize($primary, 0.5);
+            transform: translateY(-5px);
+          }
+        }
+      }
+
       .navbar ul li {
         perspective: 300px;
       }

src/Themes/PortalTheme/Views/Layout.liquid

@@ -40,17 +40,6 @@
     {% render_section "Content" %}
     {% render_section "Footer", required: false %}
     {% render_section "Modal", required: false %}
-
-    {% block "script", at:"Foot" %}
-        $( document ).ready(function() {
-            let vh = window.innerHeight * 0.01;
-            document.documentElement.style.setProperty('--vh', `${vh}px`);
-        });
-        $( window ).on('resize', function() {
-            let vh = window.innerHeight * 0.01;
-            document.documentElement.style.setProperty('--vh', `${vh}px`);
-        });
-    {% endblock %}
     {% resources type: "FootScript" %}
 
 </body>