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>

20
src/layouts/MainGridLayout.astro
View File

@@ -23,17 +23,19 @@ const sidebarWidth = "280px";
const enableBanner = getConfig().banner.enable;
---
<Layout title={title} banner={banner}>
<div class=`max-w-[1200px] min-h-screen grid grid-cols-[280px_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto] mx-auto gap-4 relative overflow-hidden `
<div class=`max-w-[1200px] min-h-screen grid grid-cols-[280px_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto]
mx-auto gap-4 relative md:px-4 lg:px-0`
transition:animate="none"
>
<div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={{
'min-h-[calc(var(--banner-height-home)_-_72px)]': enableBanner && isHomePage,
'min-h-[calc(var(--banner-height)_-_72px)]': enableBanner && !isHomePage,}}
<div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={["transition-all", {
'h-[calc(var(--banner-height-home)_-_72px)]': enableBanner && isHomePage,
'h-[calc(var(--banner-height)_-_72px)]': enableBanner && !isHomePage,}]}
>
<Navbar transition:animate="fade" transition:persist></Navbar>
</div>
<SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[280px] overflow-hidden" transition:persist></SideBar>
<SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[280px] " transition:persist></SideBar>
<div class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden" transition:animate="slide">
<!-- the overflow-hidden here prevent long text break the layout-->
@@ -46,8 +48,6 @@ const enableBanner = getConfig().banner.enable;
</div>
<BackToTop></BackToTop>
</div>
</Layout>
<style>
@@ -69,5 +69,9 @@ html::view-transition-new(rrrr) {
overflow: clip;
object-fit: none;
}
</style>
<style lang="stylus" is:global>
.banner-closed
#top-row
height: 72px;
</style>