68 lines
2.3 KiB
Text
68 lines
2.3 KiB
Text
---
|
|
import "@fontsource-variable/inter";
|
|
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";
|
|
|
|
import KawaiiLogo from "../assets/kawaii.svg";
|
|
|
|
import TrafficConeAlt from "../assets/traffic-cone-alt.svg";
|
|
import Lunar from "../assets/lunar.svg";
|
|
---
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta name="generator" content={Astro.generator} />
|
|
<title>trafficlunar.net</title>
|
|
|
|
<meta name="title" content="trafficlunar.net" />
|
|
<meta name="description" content="welcome to trafficlunar's website!" />
|
|
<meta name="keywords" content="trafficlunar, programming" />
|
|
<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>
|
|
<KawaiiLogo class="w-full h-48 mt-16 transition-transform duration-300 hover:rotate-2 hover:scale-105" />
|
|
</a>
|
|
|
|
<Lunar class="absolute top-8 right-8 size-12 cursor-pointer animate-avoid hover:animate-running not-hover:animate-pause" />
|
|
|
|
<div class="max-w-4xl grid grid-cols-5 gap-4 py-8 max-[56rem]:grid-cols-1">
|
|
<div class="flex flex-col items-center max-[56rem]:flex-row max-[56rem]:justify-center max-sm:flex-col gap-8" transition:persist>
|
|
<a href="/">
|
|
<img
|
|
src="/pfp.png"
|
|
alt="profile picture"
|
|
class="rounded-full animate-spin animate-duration-2s hover:animate-running not-hover:animate-pause max-h-40"
|
|
/>
|
|
</a>
|
|
|
|
<div class="flex flex-col justify-center max-sm:flex-row max-[56rem]:items-center max-[56rem]:mt-8 max-sm:mt-0 max-sm:gap-2">
|
|
<Socials />
|
|
<Clock client:only />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-4 flex flex-col relative">
|
|
<TrafficConeAlt class="absolute size-12 bottom-full left-16 text-peach" />
|
|
<TrafficConeAlt class="absolute size-14 bottom-full left-27 text-peach" />
|
|
|
|
<slot />
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|