Fix for #69

Adjusted spacing for #69
episerver · Nov 1, 2024 · c460c3d · c460c3d
1 parent 30b19b9
commit c460c3d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/apps/frontend/src/components/cms/page/BlogPostPage/index.tsx b/apps/frontend/src/components/cms/page/BlogPostPage/index.tsx
@@ -30,9 +30,9 @@ export const BlogPostPage: OptimizelyNextPage<BlogPostPageDataFragment> = ({
   return (
     <>
       <div className="outer-padding">
-      { image && <div className="relative col-span-12 mt-16 lg:mt-32 mb-24 mx-auto aspect-[1/1] md:aspect-[16/5] flex items-end">
-        <CmsEditable cmsFieldName="BlogPostPromoImage" as={ Image } className="top-0 left-0 rounded-[40px] aspect-[1/1] md:aspect-[16/5] object-cover absolute -z-50" src={image} alt="" width={1920} height={1080} />
-        <div className="container max-w-[1024px] px-[24px] mx-auto bg-[rgba(248,248,252,0.75)] dark:bg-[rgba(16,20,29,0.75)] rounded-t-[40px]">
+      { image && <div className="relative col-span-12 mt-16 lg:mt-32 mb-24 mx-auto aspect-[1/1] md:aspect-[2/1] lg:aspect-[16/5] flex items-end">
+        <CmsEditable cmsFieldName="BlogPostPromoImage" as={ Image } className="top-0 left-0 rounded-[40px] aspect-[1/1] md:aspect-[2/1] lg:aspect-[16/5] object-cover absolute -z-50" src={image} alt="" width={1920} height={1080} />
+        <div className="container prose max-w-[1024px] px-[24px] mx-auto bg-[rgba(248,248,252,0.75)] dark:bg-[rgba(16,20,29,0.75)] rounded-t-[40px]">
           <CmsEditable cmsFieldName="Heading" as="h1" className="mt-[24px] mb-[24px] text-[48px] font-extrabold">{ title ?? "" }</CmsEditable>
         </div>
       </div> }
@@ -43,7 +43,7 @@ export const BlogPostPage: OptimizelyNextPage<BlogPostPageDataFragment> = ({
               <CmsEditable cmsFieldName="ArticleAuthor" as="p" className="text-people-eater my-[24px] text-[24px]">{ author ?? "" }</CmsEditable>
               <CmsEditable cmsFieldName="ArticleSubHeading" as="p" className="text-[30px] leading-[36px] mt-[24px] mb-20">{ subtitle ?? "" }</CmsEditable>
               <CmsEditable cmsFieldName="BlogPostBody" as={ RichText } text={ description?.json } factory={ factory } />
-              <div className="col-span-12 lg:col-span-10 lg:col-start-2 mx-auto border-t-2 my-64"></div>
+              <div className="col-span-12 lg:col-span-10 lg:col-start-2 mx-auto border-t-2 mt-32 mb-20"></div>
             </div>
           </section>
         </div>
@@ -69,6 +69,7 @@ export const BlogPostPage: OptimizelyNextPage<BlogPostPageDataFragment> = ({
           selectedPageSize: 3,
         }}
       ></BlogListingBlock>
+      <div className="col-span-12 lg:col-span-10 lg:col-start-2 mx-auto mt-8"></div>
     </>
   );
 };

diff --git a/apps/frontend/src/components/cms/page/StandardPage/index.tsx b/apps/frontend/src/components/cms/page/StandardPage/index.tsx
@@ -27,14 +27,19 @@ export const StandardPage: OptimizelyNextPage<StandardPageDataFragment> = ({
   return (
     <>
       <div className="outer-padding">
+      { image && <div className="relative col-span-12 mt-16 lg:mt-32 mb-24 mx-auto aspect-[1/1] md:aspect-[2/1] lg:aspect-[16/5] flex items-end">
+        <CmsEditable cmsFieldName="BlogPostPromoImage" as={ Image } className="top-0 left-0 rounded-[40px] aspect-[1/1] md:aspect-[2/1] lg:aspect-[16/5] object-cover absolute -z-50" src={image} alt="" width={1920} height={1080} />
+        <div className="container prose max-w-[1024px] px-[24px] mx-auto bg-[rgba(248,248,252,0.75)] dark:bg-[rgba(16,20,29,0.75)] rounded-t-[40px]">
+          <CmsEditable cmsFieldName="Heading" as="h1" className="mt-[24px] mb-[24px] text-[48px] font-extrabold">{ title ?? "" }</CmsEditable>
+        </div>
+      </div> }
         <div className="container mx-auto grid grid-cols-12">
-          {image && <CmsEditable cmsFieldName="StandardPromoImage" as={ Image } className="col-span-12 rounded-[40px] mt-16 lg:mt-32 mb-24 lg:mb-48 mx-auto" src={image} alt="" width={1920} height={1080} />}
           <section className="col-span-12 lg:col-span-10 lg:col-start-2 mx-auto ">
             <div className="prose max-w-[960px] prose-h2:text-[36px] prose-h2:leading-[40px] prose-h2:mb-[24px] prose-h2:mt-[48px] prose-a:text-azure prose-a:font-bold prose-a:no-underline hover:prose-a:underline focus:prose-a:underline prose-img:rounded-[40px] prose-img:p-[20px] prose-img:border-2 dark:text-ghost-white">
-              <CmsEditable cmsFieldName="StandardPageHeading" as="h1" className="mb-[24px] text-[48px]">{ title ?? "" }</CmsEditable>
+              {!image && <CmsEditable cmsFieldName="StandardPageHeading" as="h1" className="mb-[24px] text-[48px]">{ title ?? "" }</CmsEditable>}
               <CmsEditable cmsFieldName="StandardSubHeading" as="p" className="text-[30px] leading-[36px] mt-[24px] mb-20">{ subtitle ?? "" }</CmsEditable>
               <CmsEditable cmsFieldName="MainBody" as={ RichText } className="dark:!text-ghost-white [&>*]:dark:!text-ghost-white" text={ description?.json } factory={ factory } />
-              <div className="col-span-12 lg:col-span-10 lg:col-start-2 mx-auto border-t-2 my-64"></div>
+              <div className="col-span-12 lg:col-span-10 lg:col-start-2 mx-auto border-t-2 mt-32 mb-20"></div>
             </div>
           </section>
         </div>
@@ -60,6 +65,7 @@ export const StandardPage: OptimizelyNextPage<StandardPageDataFragment> = ({
           selectedPageSize: 3,
         }}
       ></BlogListingBlock>
+      <div className="col-span-12 lg:col-span-10 lg:col-start-2 mx-auto mt-8"></div>
     </>
   );
 };