Merge branch 'darcyclarke/make-mascot-major' into 6492-surfin-404

nodejs · Sep 23, 2024 · 056dab1 · 056dab1
2 parents 06400ad + 249760e
commit 056dab1
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 7 deletions.
diff --git a/apps/site/app/[locale]/not-found.tsx b/apps/site/app/[locale]/not-found.tsx
@@ -19,13 +19,15 @@ 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}
-          />
+        <div className="my-4 flex h-[300] items-center justify-center">
+          <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/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,47 @@ 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-[200];
+}
+
+.turtle::after {
+  @apply absolute
+    left-[-50%]
+    top-[50%]
+    -z-10
+    block
+    h-[150]
+    w-[150]
+    rotate-[-90deg]
+    select-none
+    bg-[url('/static/images/smoke.gif')]
+    opacity-[0.15];
+  /* stylelint-disable-next-line declaration-empty-line-before */
+  content: '';
+}
+
+@media (max-width: 750px) {
+  .turtle {
+    @apply m-0;
+  }
+
+  .turtle img {
+    @apply w-[100];
+  }
+
+  .turtle::after {
+    @apply left-[-100%]
+    top-[20%];
+  }
+}
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"]'],