600 || document.documentElement.scrollTop > 600) {
- btn.classList.remove('hide')
- } else {
- btn.classList.add('hide')
- }
-}
-window.onscroll = scrollFunction
diff --git a/src/components/widget/SideBar.astro b/src/components/widget/SideBar.astro
index 224a753..76d386a 100644
--- a/src/components/widget/SideBar.astro
+++ b/src/components/widget/SideBar.astro
@@ -9,7 +9,7 @@ const className = Astro.props.class
-
+
diff --git a/src/config.ts b/src/config.ts
index 352506f..8908057 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -17,7 +17,7 @@ export const siteConfig: SiteConfig = {
banner: {
enable: false,
src: 'assets/images/demo-banner.png', // Relative to the /src directory. Relative to the /public directory if it starts with '/'
- position: 'center', // Equivalent to object-position, defaults center
+ position: 'center', // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
credit: {
enable: false, // Display the credit text of the banner image
text: '', // Credit text to be displayed
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 9ab96b2..6692295 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -58,6 +58,14 @@ if (!lang) {
lang = `${siteConfig.lang}`
}
const siteLang = lang.replace('_', '-')
+
+const bannerOffsetByPosition = {
+ 'top': '30vh',
+ 'center': '15vh',
+ 'bottom': '0'
+}
+const bannerOffset = bannerOffsetByPosition[siteConfig.banner.position || 'center']
+
---
@@ -117,17 +125,20 @@ const siteLang = lang.replace('_', '-')
-
+
-
+ }
+
+
+
-
@@ -300,18 +323,47 @@ const setup = () => {
// Remove the delay for the first time page load
window.swup.hooks.on('link:click', () => {
document.documentElement.style.setProperty('--content-delay', '0ms')
+
+ // prevent elements from overlapping the navbar
+ let threshold = window.innerHeight * 0.30 - 72 - 16
+ let navbar = document.getElementById('navbar-wrapper')
+ if (!navbar || !document.body.classList.contains('lg:is-home')) {
+ return
+ }
+ if (document.body.scrollTop >= threshold || document.documentElement.scrollTop >= threshold) {
+ navbar.classList.add('navbar-hidden')
+ }
})
window.swup.hooks.on('content:replace', initCustomScrollbar)
window.swup.hooks.on('visit:start', (visit: {to: {url: string}}) => {
// change banner height immediately when a link is clicked
const bodyElement = document.querySelector('body')
if (pathsEqual(visit.to.url, url('/'))) {
- bodyElement!.classList.add('is-home');
+ bodyElement!.classList.add('lg:is-home');
} else {
- bodyElement!.classList.remove('is-home');
+ bodyElement!.classList.remove('lg:is-home');
+ }
+
+ // increase the page height during page transition to prevent the scrolling animation from jumping
+ const heightExtend = document.getElementById('page-height-extend')
+ if (heightExtend) {
+ heightExtend.classList.remove('hidden')
+ }
+ });
+ window.swup.hooks.on('page:view', () => {
+ // hide the temp high element when the transition is done
+ const heightExtend = document.getElementById('page-height-extend')
+ if (heightExtend) {
+ heightExtend.classList.remove('hidden')
+ }
+ });
+ window.swup.hooks.on('visit:end', (visit: {to: {url: string}}) => {
+ // execute 1s later
+ const heightExtend = document.getElementById('page-height-extend')
+ if (heightExtend) {
+ heightExtend.classList.add('hidden')
}
});
-
}
if (window?.swup?.hooks) {
setup()
@@ -319,6 +371,33 @@ if (window?.swup?.hooks) {
document.addEventListener('swup:enable', setup)
}
+let backToTopBtn = document.getElementById('back-to-top-btn');
+const bannerEnable = !!document.getElementById('banner-wrapper')
+let navbar = document.getElementById('navbar-wrapper')
+function scrollFunction() {
+ if (backToTopBtn) {
+ if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
+ backToTopBtn.classList.remove('hide')
+ } else {
+ backToTopBtn.classList.add('hide')
+ }
+ }
+
+ if (!bannerEnable) return
+ if (navbar) {
+ let threshold = window.innerHeight * 0.30 - 72 - 16
+ if (document.body.classList.contains('lg:is-home') && window.innerWidth >= 1024) {
+ threshold = window.innerHeight * 0.60 - 72 - 16
+ }
+ if (document.body.scrollTop >= threshold || document.documentElement.scrollTop >= threshold) {
+ navbar.classList.add('navbar-hidden')
+ } else {
+ navbar.classList.remove('navbar-hidden')
+ }
+ }
+}
+window.onscroll = scrollFunction
+
-
-
-
\ No newline at end of file
diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro
index 3cd7141..74c0268 100644
--- a/src/layouts/MainGridLayout.astro
+++ b/src/layouts/MainGridLayout.astro
@@ -22,40 +22,49 @@ const hasBannerLink = !!siteConfig.banner.credit.url
-
-
diff --git a/src/types/config.ts b/src/types/config.ts
index 4471fcf..500035d 100644
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -13,7 +13,7 @@ export type SiteConfig = {
banner: {
enable: boolean
src: string
- position?: string
+ position?: 'top' | 'center' | 'bottom'
credit: {
enable: boolean
text: string