Header style changes

PArns · Dec 2, 2024 · 504da02 · 504da02 · vercel · Dec 2, 2024
1 parent 9b71d0a
commit 504da02
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/app/(desktop)/[lng]/@blog/(.)/blog/page/[pageNumber]/page.tsx b/app/(desktop)/[lng]/@blog/(.)/blog/page/[pageNumber]/page.tsx
@@ -94,7 +94,7 @@ export default async function BlogIndex({
 
         <div className="py-8 @md:py-14 @lg:py-20">
           <div className="flex h-full items-center justify-center">
-            <div className="text-white">
+            <div className="rounded-xl border-neutral-500 bg-white/30 p-5 text-white backdrop-blur-md dark:border-neutral-600 dark:bg-neutral-800/50">
               <h1 className="mb-4 text-5xl font-semibold drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] @lg:text-7xl">
                 Blog
               </h1>

diff --git a/app/(desktop)/[lng]/@coaster/(.)/coaster/page.tsx b/app/(desktop)/[lng]/@coaster/(.)/coaster/page.tsx
@@ -87,7 +87,7 @@ export default async function Coaster({ params }: { params: { lng: string } }) {
           poster={"https://assets.arns.dev/header-coaster-loop.jpg"}
           blurDataURL="|DO;DHogIANM-4kDaKbcn#}jWB?^Rk.8WCo~xYSi9~-j_2E6D%NI9GobR5tRR.NGt7I8j[RiRltS%NR+n#s.RPRl.7xYx^?bRjIUR*jue-tmoJjEx]j]ITs:t8flt7ofMx%gR,IUj@%LoLWBfkRPxvWBV?WBx]jYRjR*ae"
         >
-          <div className="text-center text-white">
+          <div className="text-center rounded-xl border-neutral-500 bg-white/30 p-5 text-white backdrop-blur-md dark:border-neutral-600 dark:bg-neutral-800/50">
             <h1 className="mb-2 text-4xl font-semibold drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] @md/header:text-5xl @lg/header:text-6xl">
               {t("title")}
             </h1>

diff --git a/app/(desktop)/[lng]/@pictures/(.)/pictures/page.tsx b/app/(desktop)/[lng]/@pictures/(.)/pictures/page.tsx
@@ -56,7 +56,7 @@ export default async function Welcome({ params }: { params: { lng: string } }) {
 
         <div className="py-8 @md:py-14 @lg:py-20">
           <div className="flex h-full items-center justify-center">
-            <div className="text-white">
+            <div className="rounded-xl border-neutral-500 bg-white/30 p-5 text-white backdrop-blur-md dark:border-neutral-600 dark:bg-neutral-800/50">
               <h1 className="mb-4 text-5xl font-semibold drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] @lg:text-7xl">
                 <Translate id="pictures" locale={params.lng} ns="titles" />
               </h1>

diff --git a/components/blog/blog-header/index.tsx b/components/blog/blog-header/index.tsx
@@ -10,7 +10,7 @@ export default function BlogHeader({
   backgroundImage: any;
 }) {
   return (
-    <div className="@container/header relative w-full overflow-hidden rounded-lg bg-cover bg-no-repeat text-center">
+    <div className="relative w-full overflow-hidden rounded-lg bg-cover bg-no-repeat text-center @container/header">
       <ContentfulImageAsset
         asset={backgroundImage}
         alt={title}
@@ -19,14 +19,14 @@ export default function BlogHeader({
         usePlaceholder={true}
         className="absolute bottom-0 left-0 right-0 top-0 h-max w-max object-cover"
       />
-      <div className="@md/header:py-20 @lg/header:py-28 py-10">
+      <div className="py-10 @md/header:py-20 @lg/header:py-28">
         <div className="flex h-full items-center justify-center">
-          <div className="text-white">
-            <h1 className="@md/header:text-5xl @lg/header:text-6xl mb-2 text-4xl font-semibold drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]">
+          <div className="z-10 rounded-xl border-neutral-500 bg-white/30 p-5 text-white backdrop-blur-md dark:border-neutral-600 dark:bg-neutral-800/50">
+            <h1 className="mb-2 text-4xl font-semibold drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] @md/header:text-5xl @lg/header:text-6xl">
               {title}
             </h1>
             {subTitle && (
-              <h2 className="@md/header:text-3xl @lg/header:text-4xl text-2xl font-semibold drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]">
+              <h2 className="text-2xl font-semibold drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] @md/header:text-3xl @lg/header:text-4xl">
                 {subTitle}
               </h2>
             )}