fix safari not support animate view

outerbase · Jul 17, 2024 · 35ec3f9 · 35ec3f9
1 parent 302383c
commit 35ec3f9
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -280,18 +280,24 @@ For Markdown Side
   }
 }
 
-.fade-view {
-  animation:
-    fadeIn ease-in-out both,
-    fadeOut ease-in forwards;
-  animation-range:
-    cover 30% contain 50%,
-    contain 90% cover 100%;
-  animation-timeline: view();
-}
+@supports (animation-timeline: view()) {
+  .fade-view {
+    animation:
+      fadeIn ease-in-out both,
+      fadeOut ease-in forwards;
+    animation-range:
+      cover 30% contain 50%,
+      contain 90% cover 100%;
+    animation-timeline: view();
+  }
 
-.fade-sticky {
-  position: sticky;
-  bottom: 0;
-  background-image: linear-gradient(to top, var(--background) 40%, transparent);
+  .fade-sticky {
+    position: sticky;
+    bottom: 0;
+    background-image: linear-gradient(
+      to top,
+      var(--background) 40%,
+      transparent
+    );
+  }
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -46,8 +46,10 @@ function TestimonyList() {
         <TestimonyItem />
         <TestimonyItem />
       </div>
-      <div className="text-xl mt-4 px-4">
-        and thousands of happy developers use our tools.
+      <div className="text-xl mt-4 pl-4 pr-2">
+        and thousands of{" "}
+        <span className="border-b-4 border-b-yellow-500">happy developers</span>{" "}
+        use our tools.
       </div>
     </div>
   );
@@ -60,7 +62,7 @@ function HeroSection() {
         <LinkButton title="Open LibSQL Studio" url="/connect" />
       </div>
 
-      <h2 className="text-center text-6xl font-bold">
+      <h2 className="text-center text-4xl lg:text-6xl font-bold">
         Powerful SQLite-based Database Client
       </h2>