6492 surfin 404 (nodejs#7056)

* feat: turtle surfin * fix indentation per our style * specify unit on TW * better whitespace at least on Chrome responsive mode this looks better. still testing * unit of measures on all arbitrary values * Apply suggestions from code review Co-authored-by: Caner Akdas <[email protected]> Signed-off-by: Brian Muenzenmeyer <[email protected]> * use TW content rule * center the error state headings did not alter .special, as that is used for the homepage --------- Signed-off-by: Brian Muenzenmeyer <[email protected]> Co-authored-by: Darcy Clarke <[email protected]> Co-authored-by: Caner Akdas <[email protected]>
NOUIY · Sep 25, 2024 · 29e64d7 · 29e64d7
1 parent 06400ad
commit 29e64d7
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 10 deletions.
diff --git a/apps/site/app/[locale]/error.tsx b/apps/site/app/[locale]/error.tsx
@@ -19,7 +19,7 @@ const ErrorPage: FC<{ error: Error }> = ({ error }) => {
 
       <main>
         500
-        <h1 className="special -mt-4">
+        <h1 className="special -mt-4 text-center">
           {t('layouts.error.internalServerError.title')}
         </h1>
         <p className="-mt-4 max-w-sm text-center text-lg">

diff --git a/apps/site/app/[locale]/not-found.tsx b/apps/site/app/[locale]/not-found.tsx
@@ -18,14 +18,18 @@ const NotFoundPage: FC = () => {
 
       <main>
         404
-        <h1 className="special -mt-4">{t('layouts.error.notFound.title')}</h1>
-        <div className="my-4 flex items-center justify-center">
-          <Image
-            src="/static/images/node-mascot.svg"
-            alt="The Node.js mascot"
-            height={114.69}
-            width={100}
-          />
+        <h1 className="special -mt-4 text-center">
+          {t('layouts.error.notFound.title')}
+        </h1>
+        <div className="my-4 flex h-[150px] items-center justify-center md:h-[300px]">
+          <div className="turtle motion-safe:animate-surf motion-reduce:animate-none">
+            <Image
+              src="/static/images/node-mascot.svg"
+              alt="The Node.js mascot"
+              height={114.69}
+              width={100}
+            />
+          </div>
         </div>
         <p className="-mt-4 max-w-sm text-center text-lg">
           {t('layouts.error.notFound.description')}

diff --git a/apps/site/app/global-error.tsx b/apps/site/app/global-error.tsx
@@ -21,7 +21,9 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
 
             <main>
               500
-              <h1 className="special -mt-4">Internal Server Error</h1>
+              <h1 className="special -mt-4 text-center">
+                Internal Server Error
+              </h1>
               <p className="-mt-4 max-w-sm text-center text-lg">
                 This page has thrown a non-recoverable error.
               </p>

diff --git a/apps/site/public/static/images/smoke.gif b/apps/site/public/static/images/smoke.gif
diff --git a/apps/site/styles/effects.css b/apps/site/styles/effects.css
@@ -10,3 +10,34 @@ h1.special {
     md:leading-[4rem]
     md:-tracking-[0.06rem];
 }
+
+.turtle {
+  @apply animate-surf
+    absolute
+    z-10
+    translate-x-0
+    translate-y-0;
+}
+
+.turtle img {
+  @apply h-auto
+    w-24
+    md:w-48;
+}
+
+.turtle::after {
+  @apply absolute
+    -left-full
+    top-[20%]
+    -z-10
+    block
+    h-36
+    w-36
+    -rotate-90
+    select-none
+    bg-[url('/static/images/smoke.gif')]
+    opacity-[0.15]
+    content-['']
+    md:-left-1/2
+    md:top-1/2;
+}
diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts
@@ -139,6 +139,18 @@ export default {
       spacing: { '4.5': '1.125rem', '18': '4.5rem' },
       aria: { current: 'current="page"' },
       maxWidth: { '8xl': '95rem' },
+      animation: {
+        surf: 'surf 1s infinite ease-in-out',
+      },
+      keyframes: {
+        surf: {
+          '0%': { transform: 'translate(0, 0)' },
+          '25%': { transform: 'translate(0, 6px)' },
+          '50%': { transform: 'translate(0, -6px)' },
+          '75%': { transform: 'translate(0, 3px)' },
+          '100%': { transform: 'translate(0, 0)' },
+        },
+      },
     },
   },
   darkMode: ['class', '[data-theme="dark"]'],