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: sticky navbar and sidebar, minor fixes

Browse Source 
(cherry picked from commit cd3c1444ab72dbab172f9135f293b29ac5eee14e)
This commit is contained in:
saicaca
2023-10-11 22:30:20 +08:00
parent f4dc88e982
commit eb7c408b6a
7 changed files with 106 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/layouts/Layout.astro
View File

@@ -62,7 +62,7 @@ if (title) {
---
<!DOCTYPE html>
<html lang="en" isHome={isHomePage} pathname={testPathName}>
<html lang="en" isHome={isHomePage} pathname={testPathName} class="bg-[var(--page-bg)] transition">
<head>
<ViewTransitions />
@@ -81,10 +81,12 @@ if (title) {
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon/favicon-dark-180.png" sizes="180x180">
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon/favicon-dark-192.png" sizes="192x192">
<link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.9/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
<style define:vars={{ configHue }}></style> <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
</head>
<body class="bg-[oklch(0.95_0.01_var(--hue))] dark:bg-[oklch(0.16_0.014_var(--hue))] min-h-screen transition ">
<body class=" min-h-screen transition ">
<GlobalStyles>
<div id="banner-wrapper" class="absolute w-full transition-all"
class:list={{'banner-home': isHomePage, 'banner-else': !isHomePage}}
@@ -167,6 +169,7 @@ html::view-transition-new(banner-ani) {
/* TODO This is a temporary solution for style flicker issue when the transition is activated */
/* issue link: https://github.com/withastro/astro/issues/8711, the solution get from here too */
/* update: fixed in Astro 3.2.4 */
function disableAnimation() {
const css = document.createElement('style')
css.appendChild(
@@ -180,7 +183,6 @@ function disableAnimation() {
}`
)
)
console.log("add")
document.head.appendChild(css)
return () => {
@@ -189,7 +191,6 @@ function disableAnimation() {
// Wait for next tick before removing
setTimeout(() => {
console.log("remove")
document.head.removeChild(css)
}, 1)
}
@@ -268,7 +269,8 @@ function setBannerHeight() {
}
/* Load settings when entering the site */
disableAnimation()() // TODO
// disableAnimation()() // TODO
setBannerHeight();
loadTheme();
loadHue();
activateDisplaySettings();
@@ -279,9 +281,8 @@ document.addEventListener('astro:after-swap', () => {
setBannerHeight();
loadTheme();
loadHue();
disableAnimation()(); // TODO
// disableAnimation()(); // TODO
activateDisplaySettings();
fb();
});
</script>

4
src/layouts/MainGridLayout.astro
View File

@@ -17,15 +17,13 @@ const { title, banner } = Astro.props;
const isHomePage = pathsEqual(Astro.url.pathname, '/') || pathsEqual(Astro.url.pathname, '/page/1');
const pageWidth = "1200px";
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]
<div class=`max-w-[var(--page-width)] 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"
>