Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-12 07:12:52 +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

4
src/components/Footer.astro
View File

@@ -1,10 +1,12 @@
---
import {getConfig} from "../utils/config-utils";
---
<div class="card-base max-w-[var(--page-width)] min-h-[72px] rounded-b-none mx-auto flex items-center px-6">
<div class="text-black/50 dark:text-white/50 text-sm">
© 2023 Author. All Rights Reserved.
© 2023 {getConfig().profile.author}. All Rights Reserved.
<br>
Powered by Vivia
</div>

1
src/components/GlobalStyles.astro
View File

@@ -54,6 +54,7 @@ rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30)
color_set({
--primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue))
--page-bg: oklch(0.95 0.01 var(--hue)) oklch(0.16 0.014 var(--hue))
--card-bg: white oklch(0.23 0.015 var(--hue))
--btn-content: oklch(0.55 0.12 var(--hue)) oklch(0.75 0.1 var(--hue))

2
src/components/control/BackToTop.astro
View File

@@ -4,7 +4,7 @@ import Button from "./Button.astro";
---
<!-- There can't be a filter on parent element, or it will break `fixed` -->
<div class="back-to-top-wrapper" transition:persist>
<div class="back-to-top-wrapper hidden lg:block" transition:persist>
<div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition" onclick="topFunction()">
<Button card height="60px" width="60px">
<Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon>

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"
>