Merge pull request #278 from JaneliaSciComp/fix-homepage-display-on-s…

…mall-screens style: fixes hero overflow on smaller screens
JaneliaSciComp · Jul 18, 2024 · 216becf · 216becf
2 parents 4d9a1bc + 2867a0f
commit 216becf
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 19 deletions.
diff --git a/src/components/CallToAction.astro b/src/components/CallToAction.astro
@@ -26,7 +26,10 @@ const {
       <div class={`grid grid-cols-2 gap-4 w-full ${btnContainerClasses}`}>
         {Array.isArray(actions) ? (
           actions.map((action) => (
-            <Button {...(action || {})} class="btn w-full sm:mb-0 md:text-lg" />
+            <Button
+              {...(action || {})}
+              class="btn w-full sm:mb-0 text-sm sm:text-base md:text-lg"
+            />
           ))
         ) : (
           <Fragment set:html={actions} />

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -44,20 +44,20 @@ export default function Hero({
       >
         <div>
           {title && (
-            <h1 className="text-5xl lg:text-6xl 2xl:text-7xl font-bold leading-tighter tracking-tighter mb-4 font-heading text-gray-200">
+            <h1 className="text-4xl sm:text-5xl lg:text-6xl 2xl:text-7xl font-bold leading-tighter tracking-tighter mb-4 font-heading text-gray-200">
               {title}
             </h1>
           )}
 
           {subtitle && (
-            <p className="text-xl lg:text-2xl  text-white dark:text-slate-300">
+            <p className="text-lg sm:text-xl lg:text-2xl  text-white dark:text-slate-300">
               {subtitle}
             </p>
           )}
         </div>
         {children && (
           <div
-            className={`max-w-3xl bg-blue-50 dark:bg-slate-900 bg-opacity-90 mb-4 md:mb-0 py-6 lg:py-8 w-auto rounded-2xl`}
+            className={`max-w-3xl bg-blue-50 dark:bg-slate-900 bg-opacity-90 mb-4 md:mb-0 py-3 sm:py-6 lg:py-8 w-auto rounded-2xl`}
           >
             {children}
           </div>

diff --git a/src/components/TextBlock.astro b/src/components/TextBlock.astro
@@ -1,17 +1,10 @@
 ---
-import { twMerge } from "tailwind-merge";
-import { twMerge } from "tailwind-merge";
-
 const {
   title = await Astro.slots.render("title"),
   subtitle = await Astro.slots.render("subtitle"),
   content = await Astro.slots.render("content"),
   tagline,
 } = Astro.props;
-
-// const containerClass = "max-w-3xl";
-const titleClass = "mb-4 text-3xl lg:text-4xl font-bold font-heading";
-const subtitleClass = "mb-8 text-xl text-muted dark:text-slate-400";
 ---
 
 {
@@ -25,24 +18,21 @@ const subtitleClass = "mb-8 text-xl text-muted dark:text-slate-400";
       )}
       {title && (
         <h2
-          class={twMerge(
-            "font-bold leading-normal tracking-tighter font-heading text-heading text-3xl md:pb-8",
-            titleClass
-          )}
+          class="font-bold leading-normal tracking-tighter font-heading text-2xl sm:text-3xl lg:text-4xl md:pb-8 mb-4"
           set:html={title}
         />
       )}
 
       {subtitle && (
         <p
-          class={twMerge("mt-4 text-muted 2xl:text-3xl", subtitleClass)}
+          class="sm:mb-8 text-xl text-muted dark:text-slate-400 mt-4 2xl:text-3xl"
           set:html={subtitle}
         />
       )}
 
       {content && (
         <p
-          class="md:leading-normal 2xl:leading-relaxed pb-8 text-lg md:text-xl 2xl:text-2xl dark:text-slate-200"
+          class="md:leading-normal 2xl:leading-relaxed pb-4 sm:pb-8 text-base sm:text-lg md:text-xl 2xl:text-2xl dark:text-slate-200"
           set:html={content}
         />
       )}

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -12,7 +12,7 @@ import Wrapper from "../components/Wrapper.astro";
     client:load
     title={siteConfig.name}
     subtitle="Making scientific software user-friendly and developer-friendly"
-    heightClasses="h-[calc(100vh-88px)] min-h-[588px]"
+    heightClasses="h-[calc(100vh-60px)] sm:h-[calc(100vh-88px)] min-h-[588px]"
   >
     <Wrapper containerClass="max-w-5xl md:px-6 lg:px-12 xl:px-16">
       <div class="max-w-3xl rounded-md">
@@ -55,7 +55,7 @@ import Wrapper from "../components/Wrapper.astro";
     </Fragment>
   </Wrapper> -->
 
-  <Wrapper containerClass="py-8 md:py-12">
+  <Wrapper containerClass="py-4 sm:py-8 md:py-12">
     <CallToAction
       actions={[
         {