badmanners/badmanners.xyz
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ViewTransitions again for SPA look

Browse source
This commit is contained in:
Bad Manners 2024-09-20 21:00:48 -03:00
parent aa14b2856a
commit 108e134343
10 changed files with 53 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/layouts/BaseLayout.astro
View file

@ -1,10 +1,11 @@
---
import "../styles/base.css";
import "../styles/fonts.css";
import { ViewTransitions } from "astro:transitions";
import DarkModeScript from "@components/DarkModeScript.astro";
import NavHeader from "@components/NavHeader.astro";
import { IconSun, IconMoon } from "@components/icons";
import AgeRestrictedModal from "@components/AgeRestrictedModal.astro";
import "../styles/base.css";
import "../styles/fonts.css";
type Props = {
pageTitle?: string;
@ -31,6 +32,7 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
<meta property="og:url" content={Astro.url} />
<meta content="/logo.webp" property="og:image" />
<slot name="head" />
<ViewTransitions />
</head>
<body>
<div class="flex min-h-screen flex-col">
@ -46,11 +48,12 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
<main
class="w-full max-w-5xl flex-shrink-0 flex-grow-0 justify-center rounded-xl bg-stone-50 px-4 pb-6 pt-4 text-center text-base font-normal tracking-tight text-stone-700 sm:px-8 sm:pb-8 sm:pt-6 sm:text-lg dark:bg-zinc-800 dark:text-zinc-50 print:bg-transparent print:p-0"
>
<NavHeader />
<NavHeader transition:animate="none" />
<slot />
</main>
<footer
class="sm:text-md flex flex-col items-center pt-9 text-sm font-medium tracking-wide text-black dark:text-white"
transition:persist
>
<div class="flex items-center">
<span id="copyright"
@ -80,7 +83,7 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
</footer>
</div>
</div>
<DarkModeScript />
<AgeRestrictedModal />
<DarkModeScript transition:persist />
<AgeRestrictedModal transition:persist />
</body>
</html>