Tweak styles for mobiles and large screen sizes

Author: hasparus

src/app/conf/2025/components/hero/index.tsx

@@ -14,32 +14,36 @@ import { ImageLoaded } from "./image-loaded"
 
 export function Hero() {
   return (
-    <section className="isolate flex flex-col justify-center bg-pri-base text-neu-0 dark:bg-pri-darker dark:text-neu-900">
-      <div className="relative mx-auto flex w-[90rem] max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 md:gap-12 md:bg-left md:px-24 xl:pb-16 xl:pt-24">
+    <article className="relative isolate flex flex-col justify-center bg-pri-base text-neu-0 dark:bg-pri-darker dark:text-neu-900">
+      <article className="relative">
         <Stripes />
-        <div className="flex gap-10 max-md:flex-col md:justify-between">
-          <h1 className="flex flex-wrap gap-2 typography-d1">
-            <span>GraphQLConf</span>
-            <span className="text-sec-base">2025</span>
-          </h1>
-          <div className="flex h-min items-center gap-4">
-            <span className="whitespace-pre typography-body-sm">hosted by</span>
-            <img
-              src={graphqlFoundationWordmarkSvg.src}
-              alt="GraphQL Foundation"
-              width={128}
-              height={34.877}
-            />
+        <div className="gql-conf-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">
+          <div className="flex gap-10 max-md:flex-col md:justify-between">
+            <h1 className="flex flex-wrap gap-2 typography-d1">
+              <span>GraphQLConf</span>
+              <span className="text-sec-base">2025</span>
+            </h1>
+            <div className="flex h-min items-center gap-4">
+              <span className="whitespace-pre typography-body-sm">
+                hosted by
+              </span>
+              <img
+                src={graphqlFoundationWordmarkSvg.src}
+                alt="GraphQL Foundation"
+                width={128}
+                height={34.877}
+              />
+            </div>
           </div>
-        </div>
 
-        <div className="flex flex-col gap-8">
-          <DateAndLocation />
-          <Button className="md:w-fit" href={GET_TICKETS_LINK}>
-            Get your tickets
-          </Button>
+          <div className="flex flex-col gap-8">
+            <DateAndLocation />
+            <Button className="md:w-fit" href={GET_TICKETS_LINK}>
+              Get your tickets
+            </Button>
+          </div>
         </div>
-      </div>
+      </article>
       <div className="bg-[#000]">
         <Image
           src={heroPhoto}
@@ -49,7 +53,7 @@ export function Hero() {
           className="mx-auto h-[560px] w-[1920px] max-w-full object-cover"
         />
       </div>
-    </section>
+    </article>
   )
 }
 
@@ -82,13 +86,12 @@ function Stripes() {
     <ImageLoaded
       role="presentation"
       image={blurBean}
-      className="pointer-events-none absolute inset-x-0 bottom-[-385px] top-[-203px] -z-10 translate-y-12 opacity-0 transition duration-500 ease-linear data-[loaded=true]:translate-y-0 data-[loaded=true]:opacity-100"
+      className="pointer-events-none absolute inset-x-0 bottom-[-385px] top-[-203px] -z-10 translate-y-12 opacity-0 transition duration-[400ms] ease-linear [mask-size:100%_50%] data-[loaded=true]:translate-y-0 data-[loaded=true]:opacity-100 sm:[mask-size:125%] xl:[mask-size:100%]"
       // todo: animate opacity up after the image is loaded
       style={{
         maskImage: `url(${blurBean.src})`,
         WebkitMaskImage: `url(${blurBean.src})`,
-        maskSize: "100%",
-        WebkitMaskSize: "100%",
+        // maskSize: "100%", // todo: I need the newly exported full blur bean with rotation to match the mobile design.
         maskRepeat: "no-repeat",
         WebkitMaskRepeat: "no-repeat",
         maskPosition: "center",

src/app/conf/2025/sponsors.tsx

@@ -2,6 +2,7 @@ import Grafbase from "public/img/conf/Sponsors/Grafbase.svg"
 
 import { clsx } from "clsx"
 import NextImage from "next-image-export-optimizer"
+import { Fragment } from "react"
 
 type LogosType = {
   icon: string
@@ -97,7 +98,7 @@ export function Sponsors() {
     <section>
       <h1 className="conf-heading mb-12">Sponsors</h1>
       {SPONSORS.map(({ title, logos }, i) => (
-        <>
+        <Fragment key={i}>
           <div className="mb-2 flex items-center gap-2 border-b-2 border-dotted border-white/40 pb-1.5">
             {/* Square box */}
             <div className="size-2.5 bg-primary" />
@@ -108,7 +109,7 @@ export function Sponsors() {
             className="flex"
             linkClassName="p-8 lg:p-16 h-28 lg:h-[220px]"
           />
-        </>
+        </Fragment>
       ))}
     </section>
   )

src/globals.css

@@ -507,3 +507,7 @@ div[id^="headlessui-menu-items"] {
 .gql-focus-visible {
   @apply focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-[5px] focus-visible:outline-neu-900;
 }
+
+.gql-conf-container {
+  @apply w-[120rem];
+}