Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-11 23:02:53 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: post styles and transition improvements

Browse Source 
(cherry picked from commit 53d2c803be5c9bc81ed1705d7053a8fde8bafe27)
This commit is contained in:
saicaca
2023-10-06 03:02:46 +08:00
parent cf0bf8d606
commit cd01149f7e
8 changed files with 1312 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/layouts/Layout.astro
View File

@@ -83,16 +83,15 @@ if (title) {
<style define:vars={{ configHue }}></style> <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
<title>{title}</title>
</head>
<body class="bg-[oklch(0.95_0.01_var(--hue))] dark:bg-[oklch(0.16_0.014_var(--hue))] min-h-screen transition ">
<GlobalStyles>
<div class="absolute w-full"
<div id="banner-wrapper" class="absolute w-full transition-all"
class:list={{'banner-home': isHomePage, 'banner-else': !isHomePage}}
id="banner-wrapper"
>
<!-- TODO the transition here is not correct -->
<ImageBox id="boxtest" class:list={["object-center object-cover h-full", {"hidden": !viConf.banner.enable}]}
<ImageBox id="boxtest" class:list={["object-center object-cover h-full", {"hidden": !viConf.banner.enable}]}
src={banner} transition:animate="fade"
>
</ImageBox>
@@ -151,12 +150,6 @@ html::view-transition-new(banner-ani) {
overflow: clip;
object-fit: none;
}
.banner-home {
}
</style>
<script is:inline>
/* Preload fonts */
@@ -290,4 +283,15 @@ document.addEventListener('astro:after-swap', () => {
activateDisplaySettings();
fb();
});
</script>
</script>
<style is:global lang="stylus">
#banner-wrapper
top: 0
opacity: 1
.banner-closed
#banner-wrapper
top: -120px
opacity: 0
</style>