minimum homepage hero image height

Author: outofambit

src/components/PageHeader/HomePage.astro

@@ -16,7 +16,7 @@ const { config } = Astro.props;
       </p>
       <Icon
         kind="asterisk-thick"
-        className="col-span-1 motion-safe:animate-spin-slow text-logo-color h-full max-w-full"
+        className="col-span-1 motion-safe:animate-spin-slow text-logo-color h-full max-w-full max-h-[200px]"
       />
     </div>
     {
@@ -33,7 +33,7 @@ const { config } = Astro.props;
   {
     config.data.heroImages.map((im, i) => (
       <img
-        class={`hero-image full-bleed-image ${i > 0 ? "hidden" : ""}`}
+        class={`hero-image ${i > 0 ? "hidden" : ""}`}
         src={im.image.src}
         alt={im.altText}
         loading={i > 0 ? "lazy" : "eager"}

src/layouts/BaseLayout.astro

@@ -72,7 +72,7 @@ const headerTopic = topic
     <div class="top-layout-grid">
       <Nav />
       <Settings hideSearch={variant === "search"} />
-      <header class={homepageConfig && "h-[100vh]"}>
+      <header class={homepageConfig && "h-[100vh] md:min-h-[calc(378px+50vh)]"}>
         {
           variant === "root" ? (
             <RootPageHeader

styles/global.scss

@@ -338,12 +338,12 @@ pre.code-box {
       max-height: calc(50vh - var(--spacing-5xl) - 43px);
 
       @media (min-width: $breakpoint-tablet) {
-        height: 50vh;
+        height: calc(50vh - var(--spacing-5xl));
         max-height: calc(50vh - var(--spacing-5xl));
+        min-height: 300px;
       }
 
       @media (min-width: $breakpoint-laptop) {
-        height: 50vh;
         max-height: calc(50vh - var(--spacing-3xl));
       }
     }
@@ -403,7 +403,7 @@ th {
   padding: var(--spacing-xs);
 }
 
-.full-bleed-image {
+.hero-image {
   left: -2.5rem;
   width: calc(100% + 5rem);
   max-width: calc(100% + 5rem);
@@ -418,6 +418,7 @@ th {
     left: calc(-1 * var(--spacing-lg));
     width: calc(100% + var(--spacing-lg) * 2);
     max-width: calc(100% + var(--spacing-lg) * 2);
+    min-height: 250px;
   }
 }