refactor: remove text-62.5%, update site layout and add site footer

- Adjust font and typography settings across components
- Update footer with new links and start year configuration
- Modify header and navbar styling for responsive design
- Remove @unpic/astro dependency
- Refine global and component-level styling
- Update font preloading and font face definitions
This commit is contained in:
radishzzz 2025-02-21 08:33:00 +00:00
parent 1a302af9d4
commit 09fe7dcb37
18 changed files with 238 additions and 249 deletions

View file

@ -33,7 +33,8 @@ const { commentURL = '', imageHostURL = '', customGoogleAnalyticsJS = '', custom
<!-- Preload -->
<link rel="preload" href="/font/Snell-Black.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/font/EarlySummer-subset.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/font/EarlySummer-Subset.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/font/Snell-Bold.woff2" as="font" type="font/woff2" crossorigin />
{commentURL && <link rel="preconnect" href={commentURL} crossorigin />}
{commentURL && <link rel="dns-prefetch" href={commentURL} />}
{imageHostURL && <link rel="preconnect" href={imageHostURL} crossorigin />}

View file

@ -1,12 +1,12 @@
---
import BackToTop from '@/components/BackToTop.astro'
// import BackToTop from '@/components/BackToTop.astro'
import Footer from '@/components/Footer.astro'
import LanguageSwitcher from '@/components/LanguageSwitcher.astro'
import MainHeader from '@/components/MainHeader.astro'
import MobileHeader from '@/components/MobileHeader.astro'
import Navigation from '@/components/Navbar.astro'
import PhotoSwipe from '@/components/PhotoSwipe.astro'
import Scrollbar from '@/components/Scrollbar.astro'
// import PhotoSwipe from '@/components/PhotoSwipe.astro'
// import Scrollbar from '@/components/Scrollbar.astro'
import ThemeToggle from '@/components/ThemeToggle.astro'
import themeConfig from '@/config'
import Head from '@/layouts/Head.astro'
@ -34,15 +34,16 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
>
<Head {postTitle} {postDescription} {postImage} />
<body data-overlayscrollbars-initialize>
<!-- -->
<div
class="mx-auto max-w-313.344 min-w-128 min-h-dvh"
p="x-[min(7.25vw,5.568rem)] y-17.6 lg:(x-36 y-[max(10.4vh,7.8rem)])"
lg="grid cols-[1fr_22rem] rows-1 gap-[min(calc(16.83vw-6.27rem),18rem)]"
class="mx-auto max-w-205.848 min-w-80 min-h-dvh"
p="x-[min(7.25vw,3.731rem)] y-10 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 />
<Footer class="fixed hidden lg:block" />
</div>
{!isHome && isPost && <MobileHeader /> }
@ -50,11 +51,18 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
<main class="col-start-1 row-start-1">
<slot />
</main>
<Footer class="mt-12 block lg:hidden" />
</div>
<Scrollbar />
<ThemeToggle />
<LanguageSwitcher />
<BackToTop />
<PhotoSwipe />
<div
class="absolute right-[min(7.25vw,3.731rem)] top-15 flex gap-6"
lg="fixed"
>
<LanguageSwitcher />
<ThemeToggle />
</div>
<!-- <Scrollbar /> -->
<!-- <BackToTop /> -->
<!-- <PhotoSwipe /> -->
</body>
</html>