feat(website): adjust code-overlay-height for all screens

guilhermerodz · Feb 22, 2024 · e44c2de · e44c2de
1 parent 41039de
commit e44c2de
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/apps/website/src/app/(local-pages)/example-playground/code.tsx b/apps/website/src/app/(local-pages)/example-playground/code.tsx
@@ -102,7 +102,7 @@ export function ExampleCode() {
     <div className="relative code-example w-full overflow-hidden lg:opacity-0 lg:animate-fade-in [animation-delay:5000ms] animate-none">
       <Code code={code} toCopy={tsx} />
 
-      <div className="hidden lg:[display:unset] absolute inset-0 code-example-overlay pointer-events-none z-20 [animation-delay:5000ms]"></div>
+      <div className="hidden lg:[display:unset] absolute inset-x-0 top-0 -bottom-full code-example-overlay pointer-events-none z-20 [animation-delay:5000ms]"></div>
 
       {/* Anchor */}
       <div className="code-example-anchor absolute pointer-events-none w-px h-px -top-[5.5rem]" />

diff --git a/apps/website/src/app/globals.css b/apps/website/src/app/globals.css
@@ -61,12 +61,12 @@
 .code-example-overlay {
   background-image: linear-gradient(
     to bottom,
-    theme('colors.background') 80%,
+    theme('colors.background') 60%,
     transparent
   );
   transform: translateY(0);
-  animation: move-overlay 2s ease-out forwards;
-  animation-delay: 4s;
+  animation: move-overlay 4s ease-out forwards;
+  animation-delay: 3s;
 }
 @media (prefers-reduced-motion: reduce) {
   .code-example-overlay {