Consolidate socials on index and add View Transitions API support

This commit is contained in:
Bad Manners 2024-08-20 00:16:28 -03:00
parent 580cd2da26
commit 483f406037
23 changed files with 493 additions and 458 deletions

View file

@ -1,11 +1,13 @@
---
import { ViewTransitions } from "astro:transitions";
import { ENABLE_VIEW_TRANSITIONS } from "astro:env/client";
import "../styles/base.css";
import "../styles/fonts.css";
import DarkModeScript from "../components/DarkModeScript.astro";
import AgeRestrictedModal from "../components/AgeRestrictedModal.astro";
import NavHeader from "../components/NavHeader.astro";
import IconSun from "../components/icons/IconSun.astro";
import IconMoon from "../components/icons/IconMoon.astro";
import AgeRestrictedModal from "../components/AgeRestrictedModal.astro";
type Props = {
pageTitle?: string;
@ -44,6 +46,7 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
<slot name="head-description" />
<meta property="og:url" content={Astro.url} />
<meta content="/logo.webp" property="og:image" />
{ENABLE_VIEW_TRANSITIONS ? <ViewTransitions /> : null}
</head>
<body>
<div class="flex min-h-screen flex-col">
@ -55,13 +58,13 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
</div>
<div class="relative my-auto flex flex-col items-center justify-center px-3 py-8 sm:py-12 md:px-12 print:p-0">
<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-light 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"
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 />
<slot />
</main>
<footer
class="sm:text-md flex flex-col items-center pt-9 text-sm font-normal tracking-wide text-black dark:text-white"
class="sm:text-md flex flex-col items-center pt-9 text-sm font-medium tracking-wide text-black dark:text-white"
>
<div class="flex items-center">
<span id="copyright"
@ -80,8 +83,8 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
</div>
<button
data-dark-mode
style={{display: "none"}}
class="mt-2 print:hidden p-2 transition-colors hover:text-green-700 focus:text-green-700 motion-reduce:transition-none dark:hover:text-bm-300 dark:focus:text-bm-300"
style={{ display: "none" }}
class="mt-2 p-2 transition-colors hover:text-green-700 focus:text-green-700 motion-reduce:transition-none dark:hover:text-bm-300 dark:focus:text-bm-300 print:hidden"
aria-labelledby="label-toggle-dark-mode"
>
<IconSun width="1.5rem" height="1.5rem" class="hidden dark:block" />