mobile hero source and animation fix

sanctuarycomputer · Nov 24, 2024 · 096f1fc · 096f1fc
1 parent 0dc18f5
commit 096f1fc
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 29 deletions.
diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Copenhagen",
-  "author": "Zendesk",
-  "version": "4.2.8",
+  "author": "Sanctuary Computer",
+  "version": "4.2.9",
   "api_version": 4,
   "default_locale": "en-us",
   "settings": [

diff --git a/src/modules/homepage/HeaderBackgroundMobile.tsx b/src/modules/homepage/HeaderBackgroundMobile.tsx
@@ -13,7 +13,15 @@ export const HeaderBackgroundMobile: FC<{
             <rect x="271" y="253" width="24" height="24" rx="12" fill="#EDEDED" />
             <rect x="271" y="253" width="24" height="24" fill="url(#pattern1_5543_17009)" />
           </g>
-          <rect x="270.5" y="252.5" width="25" height="25" rx="12.5" stroke="#F50DB4" />
+          <rect
+            x="270.5"
+            y="252.5"
+            width="25"
+            height="25"
+            rx="12.5"
+            stroke="#F50DB4"
+            stroke-width="2"
+          />
         </g>
         <g>
           <g clipPath="url(#clip2_5543_17009)">
@@ -51,7 +59,15 @@ export const HeaderBackgroundMobile: FC<{
             <rect x="10" y="152" width="24" height="24" rx="12" fill="url(#pattern5_5543_17009)" />
             <rect x="10" y="152" width="24" height="24" fill="url(#pattern6_5543_17009)" />
           </g>
-          <rect x="9.5" y="151.5" width="25" height="25" rx="12.5" stroke="#F50DB4" />
+          <rect
+            x="9.5"
+            y="151.5"
+            width="25"
+            height="25"
+            rx="12.5"
+            stroke="#F50DB4"
+            stroke-width="2"
+          />
         </g>
         <g>
           <g clipPath="url(#clip5_5543_17009)">
@@ -77,7 +93,7 @@ export const HeaderBackgroundMobile: FC<{
             rx="18.375"
             transform="matrix(-1 0 0 1 107.75 25)"
             stroke="#F50DB4"
-            stroke-width="0.75"
+            stroke-width="2"
           />
         </g>
         <g>
@@ -107,7 +123,15 @@ export const HeaderBackgroundMobile: FC<{
             <rect x="265" y="4" width="24" height="24" rx="12" fill="#EDEDED" />
             <rect x="265" y="4" width="24" height="24" fill="url(#pattern10_5543_17009)" />
           </g>
-          <rect x="264.5" y="3.5" width="25" height="25" rx="12.5" stroke="#F50DB4" />
+          <rect
+            x="264.5"
+            y="3.5"
+            width="25"
+            height="25"
+            rx="12.5"
+            stroke="#F50DB4"
+            stroke-width="2"
+          />
         </g>
         <g>
           <g clipPath="url(#clip9_5543_17009)">
@@ -121,7 +145,15 @@ export const HeaderBackgroundMobile: FC<{
             <rect x="290" y="153" width="24" height="24" rx="12" fill="#EDEDED" />
             <rect x="290" y="153" width="24" height="24" fill="url(#pattern12_5543_17009)" />
           </g>
-          <rect x="289.5" y="152.5" width="25" height="25" rx="12.5" stroke="#F50DB4" />
+          <rect
+            x="289.5"
+            y="152.5"
+            width="25"
+            height="25"
+            rx="12.5"
+            stroke="#F50DB4"
+            stroke-width="2"
+          />
         </g>
         <g>
           <g clipPath="url(#clip11_5543_17009)">

diff --git a/src/modules/homepage/HomepageModule.tsx b/src/modules/homepage/HomepageModule.tsx
@@ -62,11 +62,11 @@ const Homepage: FC<Props> = ({ homepageData }) => {
   return (
     <div className="page-wrapper">
       {hero && (
-        <div className="Hero rounded-large py-[4.84375rem] sm:py-[3.75rem] px-padding-medium bg-light-surface-2 dark:bg-dark-surface-2 relative overflow-hidden aspect-square sm:aspect-auto h-auto flex flex-col items-center justify-center space-y-8">
-          <div className="size-full absolute top-0 left-0 pointer-events-none flex flex-row items-center justify-center sm:justify-between m-auto overflow-hidden">
-            <HeaderBackgroundLeft className="h-full object-contain absolute top-0 sm:left-0 sm:right-0 sm-md:right-auto bottom-0 m-auto sm:block hidden" />
-            <HeaderBackgroundRight className="h-full object-contain absolute top-0 right-0 bottom-0 sm:block hidden" />
-            <HeaderBackgroundMobile className="w-full object-contain absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 sm:hidden block" />
+        <div className="Hero rounded-large py-[4.84375rem] xs:py-[3.75rem] px-padding-medium bg-light-surface-2 dark:bg-dark-surface-2 relative overflow-hidden aspect-[327/320] xs:aspect-auto h-auto flex flex-col items-center justify-center space-y-8">
+          <div className="size-full absolute top-0 left-0 pointer-events-none flex flex-row items-center justify-center xs:justify-between m-auto overflow-hidden">
+            <HeaderBackgroundLeft className="h-full object-contain absolute top-0 xs:-left-32 sm:-left-24 md:left-0 sm-md:right-auto bottom-0 m-auto xs:block hidden" />
+            <HeaderBackgroundRight className="h-full object-contain absolute top-0 xs:-right-32 sm:-right-24 md:right-0 bottom-0 xs:block hidden" />
+            <HeaderBackgroundMobile className="w-full object-contain absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 xs:hidden block" />
           </div>
           <h2 className="flex flex-col items-center text-light-neutral-1 dark:text-dark-neutral-1 z-50 relative">
             <span

diff --git a/style.css b/style.css
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -35,6 +35,7 @@ const config: Config = {
       /* Max */
       lg: `${SCREEN_SIZE.XL_DESKTOP.min}px`,
       'sm-md': '900px',
+      xs: '600px',
     },
     extend: {
       borderRadius: {