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 svelte from "@astrojs/svelte";
import sitemap from "@astrojs/sitemap"; import sitemap from "@astrojs/sitemap";
import swup, { Theme } from "@swup/astro";
const { NEKOWEB_API_KEY, NEKOWEB_COOKIE } = loadEnv(env.NODE_ENV ?? "", process.cwd(), ""); const { NEKOWEB_API_KEY, NEKOWEB_COOKIE } = loadEnv(env.NODE_ENV ?? "", process.cwd(), "");
// https://astro.build/config // https://astro.build/config
@ -21,5 +23,5 @@ export default defineConfig({
cookie: NEKOWEB_COOKIE, cookie: NEKOWEB_COOKIE,
folder: "dist", 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/inter": "^5.2.6",
"@fontsource-variable/jetbrains-mono": "^5.2.6", "@fontsource-variable/jetbrains-mono": "^5.2.6",
"@indiefellas/astro-adapter-nekoweb": "^1.1.0", "@indiefellas/astro-adapter-nekoweb": "^1.1.0",
"@swup/astro": "^1.6.0",
"@tailwindcss/vite": "^4.1.11", "@tailwindcss/vite": "^4.1.11",
"astro": "^5.12.0", "astro": "^5.12.0",
"svelte": "^5.36.8", "svelte": "^5.36.8",

15
src/layouts/Layout.astro
View file

@ -4,8 +4,6 @@ import "@fontsource-variable/jetbrains-mono";
import "../style.css"; import "../style.css";
import { ClientRouter } from "astro:transitions";
import Socials from "../components/Socials.astro"; import Socials from "../components/Socials.astro";
import Clock from "../components/Clock.svelte"; import Clock from "../components/Clock.svelte";
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
@ -30,8 +28,6 @@ import Lunar from "../assets/lunar.svg";
<meta name="robots" content="index, follow" /> <meta name="robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="English" /> <meta name="language" content="English" />
<ClientRouter />
</head> </head>
<body class="bg-base text-text flex flex-col items-center px-8"> <body class="bg-base text-text flex flex-col items-center px-8">
<a href="/" transition:persist> <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" /> <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="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-[56rem]:flex-row" transition:persist> <div class="flex flex-col items-center gap-8 max-[60rem]:flex-row max-[60rem]:justify-center flex-wrap" transition:persist>
<a href="/"> <a href="/">
<img <img
src="/pfp.png" src="/pfp.png"
@ -50,7 +46,7 @@ import Lunar from "../assets/lunar.svg";
/> />
</a> </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 /> <Socials />
<Clock client:only /> <Clock client:only />
</div> </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-12 bottom-full left-16 text-peach" />
<TrafficConeAlt class="absolute size-14 bottom-full left-27 text-peach" /> <TrafficConeAlt class="absolute size-14 bottom-full left-27 text-peach" />
<slot /> <!-- need <main /> for transitions -->
<main>
<slot />
</main>
<Footer /> <Footer />
</div> </div>
</div> </div>

9
src/style.css
View file

@ -46,9 +46,14 @@
--color-mantle: #292c3c; --color-mantle: #292c3c;
--color-crust: #232634; --color-crust: #232634;
--color-base-darker: #2b2e3f;
--color-peach-darker: #695454; --color-peach-darker: #695454;
} }
body {
--swup-fade-theme-duration: 0.2s;
}
@utility animate-duration-30s { @utility animate-duration-30s {
animation-duration: 30s; animation-duration: 30s;
} }
@ -70,7 +75,7 @@
} }
section { 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) { section:has(legend) {
@ -78,7 +83,7 @@ section:has(legend) {
} }
section 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 { .link {