chore: updated image overlay sizing

ringoldsdev · ringoldsdev · commit 09b1bb8d71a8 · 2025-05-14T23:36:31.000+03:00
diff --git a/src/pages/test.astro b/src/pages/test.astro
@@ -35,11 +35,11 @@ import "../styles/global.css";
 </head>
 <body x-data="{ scrollPosition: 0, mobileMenuOpen: false }" @scroll.window="scrollPosition = window.scrollY" class="bg-white" :class="{ 'no-scroll': mobileMenuOpen }">
     <!-- Black background section with relative positioning -->
-    <div class="relative bg-black w-full pb-40 overflow-hidden">
+    <div class="relative bg-black w-full sm:pb-40 overflow-hidden">
         <!-- Text overlay as background texture with parallax effect -->
         <div class="absolute inset-0 w-full h-full overflow-hidden">
             <div 
-                class="text-darker-gray text-[50vw] sm:text-[25vw] font-black font-display leading-[0.9] text-center uppercase absolute top-1/2 left-1/2 w-[150%]  select-none"
+                class="text-darker-gray text-[33vw] sm:text-[25vw] font-black font-display leading-[0.9] text-center uppercase absolute top-1/2 left-1/2 w-[150%]  select-none"
                 x-bind:style="'transform: translate(-50%, -50%) rotate(45deg) translateY(' + scrollPosition * 0.6 + 'px)'"
             >
                 Some blog entry headline thats quite long
@@ -49,8 +49,8 @@ import "../styles/global.css";
         
         <!-- Red blob with horizontal parallax effect - positioned directly in the header -->'
         <div class="absolute top-0 bottom-0 left-0 right-0">
-            <div class="max-w-screen-xl mx-auto h-full flex justify-end items-end">
-                <img src="/images/example.png" class=" select-none h-[80%]" x-bind:style="'transform: translateY(' + scrollPosition * 0.67 + 'px)'"/>
+            <div class="max-w-[68rem] mx-auto h-full flex justify-end items-end ">
+                <img src="/images/example.png" class=" select-none h-[67%] sm:h-[87%]" x-bind:style="'transform: translateY(' + scrollPosition * 0.67 + 'px)'"/>
             </div>
         </div>
 
@@ -79,9 +79,9 @@ import "../styles/global.css";
         </div>
 
         <!-- Headline with same padding as content -->
-        <div class="relative z-10 text-center text-white max-w-screen-md mx-auto px-8 sm:px-20">
-            <div class="py-15 sm:py-20">
-                <h1 class="text-4xl sm:text-6xl font-bold font-display leading-tight text-stroke">
+        <div class="relative z-10 text-white max-w-screen-md mx-auto px-8 sm:px-20">
+            <div class="py-15 sm:py-20 pr-25">
+                <h1 class="text-4xl sm:text-6xl font-bold font-display leading-tight">
                     Some blog entry headline that's quite long
                 </h1>
             </div>
@@ -119,7 +119,7 @@ import "../styles/global.css";
     </div>
 
     <!-- Content Box with responsive padding -->
-    <div class="max-w-screen-md mx-auto bg-white text-black p-8 sm:p-20 -mt-40 relative z-10">
+    <div class="max-w-screen-md mx-auto bg-white text-black p-8 sm:p-20 -mt-5 sm:-mt-40 relative z-10">
         <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
         
         <p class="mb-6">Ut aliquam sollicitudin iaculis. Praesent ac semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus eget tempor dolor.</p>
