Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/trueberryless/the-thinking-hub. The central knowledge hub for 8 key Computer Science thinking modes. the-thinking-hub.felixs.dev
Something went wrong. Try again.
1.5 kB · 56 lines
Astro
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657---import { themeConfig } from '@/config'import { ClientRouter } from 'astro:transitions'import ThemeManager from '@/components/ui/ThemeManager.astro'import TransitionWrapper from '@/components/layout/TransitionWrapper.astro'import type { LayoutProps } from '@/types'
type Props = LayoutProps
const { type = 'page' } = Astro.propsconst language = themeConfig.site.language || 'en-US'const contentWidth = themeConfig.general.contentWidthconst fadeAnimation = themeConfig.general.fadeAnimationconst widthValue = Math.min(parseFloat(contentWidth), 50)const shouldUseCustomWidth = widthValue > 25const finalWidth = shouldUseCustomWidth ? `${widthValue}rem` : '25rem'---
<html lang={language}> <head> <ThemeManager /> {fadeAnimation && <ClientRouter />} <slot name="head" /> </head> <body data-centered={themeConfig.general.centeredLayout} style={` max-width: ${finalWidth}; ${shouldUseCustomWidth ? `--content-width: ${widthValue}rem;` : ''} `} > {fadeAnimation ? ( <TransitionWrapper type={type} class="layout-wrapper"> <slot /> </TransitionWrapper> ) : ( <div class="layout-wrapper"> <slot /> </div> )} </body></html>
<style is:global> .layout-wrapper { display: flex; flex-direction: column; min-height: calc(100vh - 7.5rem); }
@media (max-width: 768px) { .layout-wrapper { min-height: calc(100vh - 5.5rem); } }</style>