Merge pull request #26 from zufall-labs/23-maintenance-add-styling-fo…

…r-very-small-screen-sizes feat(responsiveness): Add small phone viewport support
zufall-labs · Dec 12, 2024 · 2750139 · 2750139
2 parents b15a0a0 + d33af74
commit 2750139
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 5 deletions.
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
@@ -8,7 +8,7 @@ export default function Button({ name, link, variant = 'primary' }: ButtonProps)
     const variantStyles = {
         primary: "h-10 w-full rounded-lg border border-solid border-black text-sm font-medium uppercase mobile:mt-1 tablet:mt-2",
         secondary: "mt-6 h-10 w-2/5 rounded-lg border border-solid border-black text-sm font-medium mobile:mt-8 mobile:w-full tablet:w-full desktop:-ml-4",
-        inverted: "ml-auto mr-2 h-12 rounded-lg bg-black px-10 font-helvetica-now font-bold text-white flex items-center justify-center"
+        inverted: "ml-auto mr-2 h-12 rounded-lg bg-black px-10 font-helvetica-now font-bold text-white flex items-center justify-center smobile:px-8"
     }
 
     return (

diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx
@@ -52,7 +52,7 @@ export default function Carousel() {
             {/* Content block */}
             <div className="h-full w-full">
                 {/* Title */}
-                <div className="h-14 w-1/3 text-lg font-extrabold leading-5 tracking-tight tablet:h-10">
+                <div className="h-14 w-1/3 text-lg font-extrabold leading-5 tracking-tight tablet:h-10 smobile:w-1/2">
                     Currently working on
                 </div>
                 {/* Spacer */}

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -7,7 +7,7 @@ export default function Header() {
                 <div className="h-12 w-12 rounded-lg bg-[url('/images/zufall-logo-color.png')] bg-cover bg-center bg-no-repeat"></div>
 
                 {/* Branding Text */}
-                <div className="ml-5 font-helvetica-now font-extrabold mobile:text-lg">Zufall Labs</div>
+                <div className="ml-5 font-helvetica-now font-extrabold mobile:text-lg smobile:ml-3">Zufall Labs</div>
             </div>
 
             {/* Middle Accents */}
@@ -17,7 +17,7 @@ export default function Header() {
             </div>
 
             {/* GitHub Button */}
-            <Button name="Github" link="https://github.com/zufall-labs" variant="inverted"/>
+            <Button name="GitHub" link="https://github.com/zufall-labs" variant="inverted"/>
         </header>
     )
 }
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
@@ -5,7 +5,7 @@ export default function Hero() {
         <div>
             <div className="mt-28 h-4/5 w-1/3 space-y-4 font-helvetica-now mobile:mt-[-40px] mobile:w-full tablet:mt-0 tablet:w-full">
                 {/* Title */}
-                <div className="text-8xl font-bold tracking-tighter mobile:mt-6 mobile:text-8xl tablet:text-center tablet:text-9xl desktop:-ml-4 desktop:w-[85%]">
+                <div className="text-8xl font-bold tracking-tighter mobile:mt-6 mobile:text-8xl tablet:text-center tablet:text-9xl desktop:-ml-4 desktop:w-[85%] smobile:!text-[5rem]">
                     Entropy & AI as a Service
                 </div>
                 {/* Subtitle */}

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -17,6 +17,8 @@ export default {
                 black: "900"
             },
             screens: {
+                smobile: { max: "394px" },
+
                 mobile: { max: "767px" },
 
                 tablet: { min: "768px", max: "1200px" },