From e605fab16170250721d61be669d078a1307a5072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cyril=20=C5=A0ebek?= <cyril@cyrilsebek.cz>
Date: Sun, 7 Jul 2024 13:55:39 +0200
Subject: [PATCH] Added short and ultrashort optimisations

- Added short (max-height: 880px) and ultrashort (max-height: 670px)
  tailwind screens
- Optimised hero and about sections for shorter screens
---
 src/components/About.astro       |  4 ++--
 src/components/AboutModule.astro |  8 ++++----
 src/components/Hero.astro        | 12 ++++++------
 tailwind.config.mjs              |  4 +++-
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/About.astro b/src/components/About.astro
index 689aad7..2959b86 100644
--- a/src/components/About.astro
+++ b/src/components/About.astro
@@ -17,10 +17,10 @@ const t = useTranslations(getLangFromUrl(Astro.url));
           image={t("about")[i].image}
           flipped={i % 2}
         >
-          <h1 class="text-accent text-center text-lg md:text-xl xl:text-3xl font-bold py-3 lg:py-10">
+          <h1 class="text-accent text-center text-lg md:text-xl xl:text-3xl font-bold py-3 lg:py-7">
             {t("about")[i].title}
           </h1>
-          <p class="text-content text-center text-md xl:text-lg xl:px-10">
+          <p class="text-content text-center text-md short:text-sm xl:text-lg xl:px-10">
             {t("about")[i].content}
           </p>
         </AboutModule>
diff --git a/src/components/AboutModule.astro b/src/components/AboutModule.astro
index 759a975..e01f5bb 100644
--- a/src/components/AboutModule.astro
+++ b/src/components/AboutModule.astro
@@ -7,15 +7,15 @@ const { row, flipped, image, alt } = Astro.props;
         {
             flipped ? (
                 <>
-                    <div class="bg-accentRed/65 rounded-lg col-start-0 col-span-2 hover:bg-accentRed/85 ">
+                    <div class="bg-accentRed/65 rounded-lg col-start-0 col-span-2 ultrashort:col-span-3 hover:bg-accentRed/85 ">
                         <slot />
                     </div>
-                    <div class="h-full rounded-lg col-start-3 bg-no-repeat bg-cover" style={`background-image: url(${image})`} />
+                    <div class="h-full rounded-lg col-start-3 bg-no-repeat bg-cover ultrashort:hidden" style={`background-image: url(${image})`} />
                 </>
             ) : (
                 <>
-                    <div class="h-full rounded-lg col-start-0 bg-no-repeat bg-cover" style={`background-image: url(${image})`} />
-                    <div class="bg-accentRed/65 rounded-lg col-start-2 col-span-2 hover:bg-accentRed/85">
+                    <div class="h-full rounded-lg col-start-0 bg-no-repeat bg-cover ultrashort:hidden" style={`background-image: url(${image})`} />
+                    <div class="bg-accentRed/65 rounded-lg col-start-2 col-span-2 hover:bg-accentRed/85 ultrashort:col-span-3">
                         <slot />
                     </div>
                 </>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index e8e1de0..0be65ee 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -7,12 +7,12 @@ const t = useTranslations(getLangFromUrl(Astro.url))
 
 <SinglePage>
     <!-- Hero Image -->
-    <div class="w-full flex justify-center mt-20 ">
+    <div class="w-full flex justify-center mt-20 short:mt-10 ultrashort:mt-5">
         <img src={t("hero")["image"]} alt="" class="rounded-full w-[200px] h-[200px]" />
     </div>
     <!-- Hero Text -->
-    <div class="mt-[6rem]">
-        <h1 class="text-accent text-4xl w-full text-center font-extrabold">
+    <div class="mt-[6rem] short:mt-[3rem]">
+        <h1 class="text-accent text-4xl w-full text-center font-extrabold ultrashort:text-3xl">
             {t("hero")["title"]}
         </h1>
         <h2 class="text-content text-lg w-full text-center mt-[3.2rem]">
@@ -20,18 +20,18 @@ const t = useTranslations(getLangFromUrl(Astro.url))
         </h2>
     </div>
     <!-- Call action buttons -->
-    <div class="mt-[5.5rem] w-full grid justify-around grid-cols-2">
+    <div class="mt-[5.5rem] w-full grid justify-around grid-cols-2 short:mt-[3rem] ultrashort:mt-[1.5rem]">
         <button
           type="button"
           onclick="scrollNext()"
-          class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2"
+          class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2 ultrashort:text-2xl"
         >
           {t("hero")["buttons"][0]}
         </button>
         <button
           type="button"
           onclick="linkToBlog()"
-          class="text-2xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content"
+          class="text-2xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content ultrashort:text-xl"
         >
           {t("hero")["buttons"][1]}  
         </button>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 1ba9619..d813b89 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -28,7 +28,9 @@ module.exports = {
     },
     extend: {
       screens: {
-        "3xl": "1900px"
+        "3xl": "1900px",
+        "short":  { "raw": "(max-height: 880px)" },
+        "ultrashort":  { "raw": "(max-height: 670px)" }
       },
       colors: {
         bkg: withOpacity('--color-bkg'),