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

refactor: fix button positions and adjust component structure

Browse source
This commit is contained in:
radishzzz 2025-03-13 21:52:24 +00:00
parent e37d8ee34e
commit 7671309edf
10 changed files with 161 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

84
src/layouts/Layout.astro
View file

@ -4,13 +4,14 @@ import Footer from '@/components/Footer.astro'
import MainHeader from '@/components/MainHeader.astro'
import MobileHeader from '@/components/MobileHeader.astro'
import Navigation from '@/components/Navbar.astro'
// import LanguageSwitcher from '@/components/Widgets/LanguageSwitcher.astro'
import LanguageSwitcher from '@/components/Widgets/LanguageSwitcher.astro'
// import PhotoSwipe from '@/components/PhotoSwipe.astro'
// import Scrollbar from '@/components/Scrollbar.astro'
import ThemeToggle from '@/components/Widgets/ThemeToggle.astro'
import themeConfig from '@/config'
import Head from '@/layouts/Head.astro'
import { getPagePath } from '@/utils/path'
import '@/styles/font.css'
import '@/styles/global.css'
import '@/styles/heti.css'
@ -23,8 +24,8 @@ interface Props {
const { postTitle, postDescription, postSlug } = Astro.props
const { isHome, isPost } = getPagePath(Astro.url.pathname)
const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
const footerMarginClass = isPost && themeConfig.comment?.waline?.serverURL
? 'mt-8'
: 'mt-12'
@ -45,31 +46,94 @@ const footerMarginClass = isPost && themeConfig.comment?.waline?.serverURL
<!-- desktop max div width: 1100px+90px*2=1280px/4=320 / max words number: 42+2=44 / max content width: 44*16px=704px / title width: 14*16px=224px / max-gap: 1100px-704px-224px=172px/16=10.75rem -->
<!-- content width: calc(32rem+(100vw-1024px)*(44rem-32rem)/(1280-1024))=calc(75vw-16rem) / gap width: calc(6.75rem+(100vw-1024px)*(10.75rem-6.75rem)/(1280-1024))=calc(25vw-9.25rem) -->
<div
class="mx-auto max-w-205.848 min-h-vh min-w-80 min-h-dvh w-full"
class="mx-auto max-w-205.848 min-h-vh w-full min-h-dvh"
p="x-[min(7.25vw,3.731rem)] y-8 lg:(x-22.5 y-20)"
lg="max-w-320 grid cols-[min(calc(75vw-16rem),44rem)_14rem] gap-[min(calc(25vw-9.25rem),10.75rem)]"
>
<!-- hide header and navigation on mobile for post pages -->
<div class={!isHome && isPost ? 'hidden lg:block' : ''}>
<MainHeader />
<Navigation />
<!-- only show footer on desktop-->
<Footer class="fixed hidden lg:block" />
</div>
{!isHome && isPost && <MobileHeader /> }
<!-- show simple header on mobile for post pages -->
{!isHome && isPost && <MobileHeader />}
<!-- main content area -->
<main class="col-start-1 row-start-1">
<slot />
</main>
<Footer class={`block lg:hidden ${footerMarginClass}`} />
</div>
<!-- fix position issue on ios -->
<div class="absolute right-[min(7.25vw,3.731rem)] top-13.5 flex gap-6 [@supports(-webkit-touch-callout:none)]:top-12.5">
<!-- <LanguageSwitcher /> -->
<ThemeToggle />
<!-- show footer on mobile -->
<Footer class={`block lg:hidden ${footerMarginClass}`} />
</div>
<!-- <Scrollbar /> -->
<!-- <BackToTop /> -->
<!-- <PhotoSwipe /> -->
<!-- only show on mobile (fix position issue on ios / fix right distance)-->
<div class="absolute right-7.25vw top-13.5 flex gap-6 [@supports(-webkit-touch-callout:none)]:top-12.5 min-[823px]:right-[calc(50vw-22rem)] lg:hidden">
<ThemeToggle />
<LanguageSwitcher />
</div>
<!--=============================================== Theme Toggle ===============================================-->
<script define:vars={{ lightMode, darkMode }}>
// Update theme
function updateTheme() {
// Toggle website theme
document.documentElement.classList.toggle('dark')
// Get current theme
const isDark = document.documentElement.classList.contains('dark')
// Update meta theme color
const metaThemeColor = document.querySelector('meta[name="theme-color"]')
if (metaThemeColor) {
metaThemeColor.setAttribute('content', isDark ? darkMode : lightMode)
}
// Update theme configuration in local storage
localStorage.setItem('theme', isDark ? 'dark' : 'light')
document.dispatchEvent(new Event('theme-changed'))
}
// Bind click event to the button
function setupThemeToggle() {
// Locate theme toggle button
const themeToggleButtons = document.querySelectorAll('.id-theme-toggle')
// Add click listener to each button
themeToggleButtons.forEach((button) => {
button.addEventListener('click', () => {
// If browser doesn't support View Transitions API, update theme directly
if (!document.startViewTransition) {
updateTheme()
return
}
// Temporarily add markers during animation to implement view transition and disable CSS transitions
document.documentElement.style.setProperty('view-transition-name', 'theme-transition')
document.documentElement.setAttribute('data-theme-transition', '')
// If browser supports View Transitions API, use it to update theme
const themeTransition = document.startViewTransition(updateTheme)
// Remove markers after animation
themeTransition.finished.then(() => {
document.documentElement.style.removeProperty('view-transition-name')
document.documentElement.removeAttribute('data-theme-transition')
})
})
})
}
// Initialize click event (on first load or page transition)
setupThemeToggle()
document.addEventListener('astro:after-swap', setupThemeToggle)
</script>
</body>
</html>