forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1---
2import { themeConfig } from '@/config'
3import { ClientRouter } from 'astro:transitions'
4import TransitionWrapper from '@/components/layout/TransitionWrapper.astro'
5import type { LayoutProps } from '@/types'
6
7type Props = LayoutProps
8
9const { type = 'page' } = Astro.props
10const language = themeConfig.site.language || 'en-US'
11const contentWidth = themeConfig.general.contentWidth
12const fadeAnimation = themeConfig.general.fadeAnimation
13const widthValue = Math.min(parseFloat(contentWidth), 50)
14const shouldUseCustomWidth = widthValue > 25
15const finalWidth = shouldUseCustomWidth ? `${widthValue}rem` : '25rem'
16---
17
18<html lang={language}>
19 <head>
20 {fadeAnimation && <ClientRouter />}
21 <slot name="head" />
22 </head>
23 <body
24 data-centered={themeConfig.general.centeredLayout}
25 style={`
26 max-width: ${finalWidth};
27 ${shouldUseCustomWidth ? `--content-width: ${widthValue}rem;` : ''}
28 `}
29 >
30 {
31 fadeAnimation ? (
32 <TransitionWrapper type={type} class="layout-wrapper">
33 <slot />
34 </TransitionWrapper>
35 ) : (
36 <div class="layout-wrapper">
37 <slot />
38 </div>
39 )
40 }
41 </body>
42</html>
43
44<style is:global>
45 .layout-wrapper {
46 display: flex;
47 flex-direction: column;
48 min-height: calc(100vh - 7.5rem);
49 }
50
51 @media (max-width: 768px) {
52 .layout-wrapper {
53 min-height: calc(100vh - 5.5rem);
54 }
55 }
56</style>