From 80dbbc1d92c94cc101477e26e16fe333d4bf704b Mon Sep 17 00:00:00 2001 From: liyunze <50455574+liyunze-coding@users.noreply.github.com> Date: Sat, 8 Feb 2025 18:53:19 +0800 Subject: [PATCH] add in fade in animation --- src/components/elements/Card.astro | 10 +-- src/layouts/Layout.astro | 106 ++++++++++++++--------------- src/pages/index.astro | 6 +- tailwind.config.cjs | 5 ++ 4 files changed, 69 insertions(+), 58 deletions(-) diff --git a/src/components/elements/Card.astro b/src/components/elements/Card.astro index 74b18dd..4fdd088 100644 --- a/src/components/elements/Card.astro +++ b/src/components/elements/Card.astro @@ -1,9 +1,10 @@ --- interface Props { primaryColor: string; - bgColor?: string | undefined; - scaleOnHover?: boolean | undefined; - pixelHeight?: string | undefined; + bgColor?: string; + scaleOnHover?: boolean; + pixelHeight?: string; + className?: string; } const { @@ -11,10 +12,11 @@ const { bgColor = "#282828", scaleOnHover = false, pixelHeight = "70px", + className = "", } = Astro.props; --- -
+
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 8d6fe0c..42eb803 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,7 +1,7 @@ --- interface Props { - title: string; - description: string; + title: string; + description: string; } const { title, description } = Astro.props; @@ -10,62 +10,62 @@ import { ViewTransitions } from "astro:transitions"; - - - - - - - - - {title} - - - - - + + + + + + + + + {title} + + + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index 5f7607b..e7646d6 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -19,7 +19,11 @@ import Footer from "../components/sections/FooterComponent.astro";
- +
diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 5bbea6a..b68b7db 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -15,9 +15,14 @@ module.exports = { "background-position": "0% 50%", }, }, + fadeIn: { + "0%": { opacity: 0 }, + "100%": { opacity: 1 }, + }, }, animation: { gradient: "gradient 15s ease infinite", + fadeIn: "fadeIn 1s ease", }, }, },