trafficlunar/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: page transitions not working and style issues

Browse source
This commit is contained in:
trafficlunar 2025-07-20 21:58:15 +01:00
parent d42e9278ab
commit c5598c6620
5 changed files with 1087 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
astro.config.mjs
View file

@ -8,6 +8,8 @@ import nekoweb from "@indiefellas/astro-adapter-nekoweb";
import svelte from "@astrojs/svelte";
import sitemap from "@astrojs/sitemap";
import swup, { Theme } from "@swup/astro";
const { NEKOWEB_API_KEY, NEKOWEB_COOKIE } = loadEnv(env.NODE_ENV ?? "", process.cwd(), "");
// https://astro.build/config
@ -21,5 +23,5 @@ export default defineConfig({
cookie: NEKOWEB_COOKIE,
folder: "dist",
}),
integrations: [svelte(), sitemap()],
integrations: [svelte(), sitemap(), swup()],
});

1073
bun.lock
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -14,6 +14,7 @@
"@fontsource-variable/inter": "^5.2.6",
"@fontsource-variable/jetbrains-mono": "^5.2.6",
"@indiefellas/astro-adapter-nekoweb": "^1.1.0",
"@swup/astro": "^1.6.0",
"@tailwindcss/vite": "^4.1.11",
"astro": "^5.12.0",
"svelte": "^5.36.8",

15
src/layouts/Layout.astro
View file

@ -4,8 +4,6 @@ import "@fontsource-variable/jetbrains-mono";
import "../style.css";
import { ClientRouter } from "astro:transitions";
import Socials from "../components/Socials.astro";
import Clock from "../components/Clock.svelte";
import Footer from "../components/Footer.astro";
@ -30,8 +28,6 @@ import Lunar from "../assets/lunar.svg";
<meta name="robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="English" />
<ClientRouter />
</head>
<body class="bg-base text-text flex flex-col items-center px-8">
<a href="/" transition:persist>
@ -40,8 +36,8 @@ import Lunar from "../assets/lunar.svg";
<Lunar class="absolute top-8 right-8 size-12 animate-avoid hover:animate-running not-hover:animate-pause" />
<div class="max-w-4xl grid grid-cols-5 gap-4 py-8 max-sm:grid-cols-1">
<div class="flex flex-col items-center gap-8 max-[56rem]:flex-row" transition:persist>
<div class="max-w-4xl w-full grid grid-cols-5 gap-4 py-8 max-[60rem]:grid-cols-1">
<div class="flex flex-col items-center gap-8 max-[60rem]:flex-row max-[60rem]:justify-center flex-wrap" transition:persist>
<a href="/">
<img
src="/pfp.png"
@ -50,7 +46,7 @@ import Lunar from "../assets/lunar.svg";
/>
</a>
<div class="flex flex-col justify-center w-full max-sm:flex-row max-sm:mt-0 max-sm:gap-2">
<div class="flex flex-col justify-center w-fit max-[60rem]:flex-row max-[60rem]:mt-0 max-[60rem]:gap-2">
<Socials />
<Clock client:only />
</div>
@ -60,7 +56,10 @@ import Lunar from "../assets/lunar.svg";
<TrafficConeAlt class="absolute size-12 bottom-full left-16 text-peach" />
<TrafficConeAlt class="absolute size-14 bottom-full left-27 text-peach" />
<slot />
<!-- need <main /> for transitions -->
<main>
<slot />
</main>
<Footer />
</div>
</div>

9
src/style.css
View file

@ -46,9 +46,14 @@
--color-mantle: #292c3c;
--color-crust: #232634;
--color-base-darker: #2b2e3f;
--color-peach-darker: #695454;
}
body {
--swup-fade-theme-duration: 0.2s;
}
@utility animate-duration-30s {
animation-duration: 30s;
}
@ -70,7 +75,7 @@
}
section {
@apply bg-mantle/75 p-4 rounded-lg relative border border-surface0 shadow-md;
@apply bg-base-darker p-4 rounded-lg relative border border-surface0 shadow-md;
}
section:has(legend) {
@ -78,7 +83,7 @@ section:has(legend) {
}
section legend {
@apply bg-mantle/75 absolute -left-[1px] bottom-full px-2 py-0.5 text-overlay2 font-medium text-xs rounded-t-md border border-surface0 border-b-0 font-sans;
@apply bg-base-darker absolute -left-[1px] bottom-full px-2 py-0.5 text-overlay2 font-medium text-xs rounded-t-md border border-surface0 border-b-0 font-sans;
}
.link {