reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-17 03:56:19 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: refactoring project structure and components, optimizing internationalization and page presentation

Browse source
This commit is contained in:
radishzzz 2025-03-08 21:38:08 +00:00
parent 6674cb7072
commit d6cff842e1
37 changed files with 156 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/components/Scrollbar.astro
View file

@ -1,64 +0,0 @@
<script>
import { OverlayScrollbars } from 'overlayscrollbars'
function initScrollbar() {
const bodyElement = document.body
const scrollbarTheme = document.documentElement.classList.contains('dark') ? 'scrollbar-dark' : 'scrollbar-light'
if (!bodyElement.hasAttribute('data-scrollbar-initialized')) {
OverlayScrollbars({
target: bodyElement,
cancel: {
// don't initialize the overlay scrollbar if there is a native one
nativeScrollbarsOverlaid: true,
},
}, {
scrollbars: {
theme: scrollbarTheme,
autoHide: 'scroll',
autoHideDelay: 800,
},
overflow: {
x: 'hidden',
},
})
bodyElement.setAttribute('data-scrollbar-initialized', 'true')
}
}
initScrollbar()
document.addEventListener('astro:after-swap', initScrollbar)
</script>
<style is:global>
@import 'overlayscrollbars/overlayscrollbars.css';
.scrollbar-light,
.scrollbar-dark {
--os-size: 1rem;
--os-padding-perpendicular: 0.2rem;
--os-padding-axis: 0.4rem;
--os-handle-border-radius: 0.7rem;
--os-handle-perpendicular-size-hover: 160%;
--os-handle-perpendicular-size-active: 160%;
--os-handle-interactive-area-offset: 3px;
}
.scrollbar-light {
--os-handle-bg: #CFC5BD;
--os-handle-bg-hover: #ADA49E;
--os-handle-bg-active: #ADA49E;
}
.scrollbar-dark {
--os-handle-bg: #2C2C2C;
--os-handle-bg-hover: #3C3C3C;
--os-handle-bg-active: #3C3C3C;
}
@media (max-width: 1023px) {
.os-scrollbar {
display: none !important;
}
}
</style>