blog/src/layouts/Layout.astro

69 lines
2.2 KiB
Text

---
import LanguageSwitcher from '@/components/Buttons/LanguageSwitcher.astro'
// import PhotoSwipe from '@/components/PhotoSwipe.astro'
// import Scrollbar from '@/components/Scrollbar.astro'
import ThemeToggle from '@/components/Buttons/ThemeToggle.astro'
// import BackToTop from '@/components/BackToTop.astro'
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 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'
interface Props {
postTitle?: string
postDescription?: string
postImage?: string
}
const { postTitle, postDescription, postImage } = Astro.props
const { isHome, isPost } = getPagePath(Astro.url.pathname)
const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
const footerMarginClass = isPost && themeConfig.comment?.waline?.serverURL
? 'mt-8'
: 'mt-12'
---
<html
lang={Astro.currentLocale || 'en-US'}
class={fontStyle}
data-overlayscrollbars-initialize
>
<Head {postTitle} {postDescription} {postImage} />
<body data-overlayscrollbars-initialize>
<!-- -->
<div
class="mx-auto max-w-205.848 min-w-80 min-h-dvh"
p="x-[min(7.25vw,3.731rem)] y-8 lg:(x-22.5 y-20)"
lg="max-w-320 grid cols-[1fr_13.875rem] gap-[min(calc(16.35vw-3.46rem),11.25rem)]"
>
<div class={!isHome && isPost ? 'hidden lg:block' : ''}>
<MainHeader />
<Navigation />
<Footer class="fixed hidden lg:block" />
</div>
{!isHome && isPost && <MobileHeader /> }
<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 />
</div>
<!-- <Scrollbar /> -->
<!-- <BackToTop /> -->
<!-- <PhotoSwipe /> -->
</body>
</html>