diff --git a/astro.config.mjs b/astro.config.mjs index 4eb8a6775..1c25fd80b 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -37,12 +37,16 @@ export default defineConfig({ tailwind(), swup({ theme: false, - animationClass: 'transition-', + animationClass: 'transition-swup-', // see https://swup.js.org/options/#animationselector + // the default value `transition-` cause transition delay + // when the Tailwind class `transition-all` is used containers: ['main'], smoothScrolling: true, cache: true, preload: true, accessibility: true, + updateHead: true, + updateBodyClass: false, globalInstance: true, }), icon({ diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro index 340d6c3d3..120128091 100644 --- a/src/components/GlobalStyles.astro +++ b/src/components/GlobalStyles.astro @@ -49,8 +49,8 @@ rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30) :root --radius-large 1rem - --banner-height-home 60vh - --banner-height 40vh + --banner-height-home 65vh + --banner-height 35vh --content-delay 150ms @@ -258,10 +258,10 @@ color_set({ @apply text-black/25 dark:text-white/25 } - html.is-changing .transition-fade { + html.is-changing .transition-swup-fade { @apply transition-all duration-200 } - html.is-animating .transition-fade { + html.is-animating .transition-swup-fade { @apply opacity-0 translate-y-4 } } diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 7ecb5548d..b25819876 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -5,13 +5,12 @@ import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css'; import ImageWrapper from "@components/misc/ImageWrapper.astro"; -import {pathsEqual} from "@utils/url-utils"; import ConfigCarrier from "@components/ConfigCarrier.astro"; import {profileConfig, siteConfig} from "@/config"; import {type Favicon} from "../types/config"; import {defaultFavicons} from "../constants/icon"; import {LIGHT_MODE, DARK_MODE, AUTO_MODE, DEFAULT_THEME} from "../constants/constants"; -import {url} from "../utils/url-utils"; +import {pathsEqual, url} from "../utils/url-utils"; interface Props { title?: string; @@ -21,7 +20,10 @@ interface Props { let { title, banner, description } = Astro.props; -const isHomePage = pathsEqual(Astro.url.pathname, '/'); +// apply a class to the body element to decide the height of the banner, only used for initial page load +// Swup can update the body for each page visit, but it's after the page transition, causing a delay for banner height change +// so use Swup hooks instead to change the height immediately when a link is clicked +const isHomePage = pathsEqual(Astro.url.pathname, url('/')); // defines global css variables // why doing this in Layout instead of GlobalStyles: https://github.com/withastro/astro/issues/6728#issuecomment-1502203757 @@ -49,7 +51,7 @@ const siteLang = siteConfig.lang.replace('_', '-') --- - + {pageTitle} @@ -108,9 +110,7 @@ const siteLang = siteConfig.lang.replace('_', '-') -