@smbcloud / pepakbasajawa-web
Code Commits Issues Pulls Cloud Agent CI/CD
dependabot/npm_and_yarn/astro-5.16.4
copilot/add-i18n-support-for-english dependabot/npm_and_yarn/astro-5.16.4 dependabot/npm_and_yarn/katex-0.16.27 dependabot/npm_and_yarn/prettier-3.7.4 dependabot/npm_and_yarn/tailwindcss-4.1.16 dependabot/npm_and_yarn/tailwindcss/vite-4.1.16 dependabot/npm_and_yarn/typescript-eslint-8.46.2 dependabot/npm_and_yarn/typescript-eslint/parser-8.46.2 development main
astro 74 lines 2.08 KB
Raw
1 ---
2 import { SITE } from '@/config'
3 import TransitionWrapper from '@/components/layout/TransitionWrapper.astro'
4 import type { LayoutProps } from '@/types'
5
6 type Props = LayoutProps
7
8 const { type = 'page' } = Astro.props
9 const contentWidth = SITE.contentWidth
10 const widthValue = Math.min(parseFloat(contentWidth), 50)
11 const shouldUseCustomWidth = widthValue > 25
12 const finalWidth = shouldUseCustomWidth ? `${widthValue}rem` : '25rem'
13
14 const language = SITE.language || 'en-US'
15 ---
16
17 <html
18 lang={language}
19 class={SITE.fadeAnimation ? 'view-transitions-enabled' : 'view-transitions-disabled'}
20 {...SITE.fadeAnimation ? { 'transition:animate': 'initial' } : {}}
21 >
22 <head>
23 <slot name="head" />
24 <script is:inline>
25 // Initialize theme based on system preference
26 function initTheme() {
27 const htmlElement = document.documentElement
28 const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
29
30 // Remove any existing theme classes
31 htmlElement.classList.remove('light', 'dark')
32
33 // Apply the appropriate theme class
34 htmlElement.classList.add(isDark ? 'dark' : 'light')
35 }
36
37 // Run on initial load
38 initTheme()
39
40 // Listen for system theme changes
41 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
42 const htmlElement = document.documentElement
43 htmlElement.classList.remove('light', 'dark')
44 htmlElement.classList.add(e.matches ? 'dark' : 'light')
45 })
46 </script>
47 </head>
48 <body
49 data-centered={SITE.centeredLayout}
50 class={!SITE.fadeAnimation ? 'no-fade' : ''}
51 style={`
52 max-width: ${finalWidth};
53 ${shouldUseCustomWidth ? `--content-width: ${widthValue}rem;` : ''}
54 `}
55 >
56 <TransitionWrapper type={type} class="layout-wrapper">
57 <slot />
58 </TransitionWrapper>
59 </body>
60 </html>
61
62 <style is:global>
63 .layout-wrapper {
64 display: flex;
65 flex-direction: column;
66 min-height: calc(100vh - 7.5rem);
67 }
68
69 @media (max-width: 768px) {
70 .layout-wrapper {
71 min-height: calc(100vh - 5.5rem);
72 }
73 }
74 </style>