mirror of
https://github.com/Fluffy-Bean/website.git
synced 2025-05-14 08:02:16 +00:00
55 lines
1.8 KiB
Text
55 lines
1.8 KiB
Text
---
|
|
import "../styles/styles.scss";
|
|
import Banner from "../assets/banner.png";
|
|
|
|
interface Props {
|
|
title: string;
|
|
image: string,
|
|
alt: string,
|
|
}
|
|
|
|
const { title} = Astro.props;
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="description" content="Astro description" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta name="generator" content={Astro.generator} />
|
|
|
|
<link rel="icon" type="image/webp" href="/src/assets/leg.webp" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
|
|
|
<title>{title}</title>
|
|
</head>
|
|
<body>
|
|
<div class="banner">
|
|
<img
|
|
src={Banner.src}
|
|
alt="Stretch of road leading to cloudy hills with houses in the horizon"
|
|
width="1080"
|
|
height="700"
|
|
loading="eager"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<main>
|
|
<slot />
|
|
</main>
|
|
</body>
|
|
<script>
|
|
function update(element: HTMLElement) {
|
|
element.style.top = `${window.scrollY * 0.75 }px`;
|
|
// element.style.transform = `scale(${(window.scrollY * 0.0001) + 1})`;
|
|
// element.style.filter = `blur(${window.scrollY * 0.005}px)`;
|
|
}
|
|
|
|
const img = document.querySelector(".banner > img") as HTMLImageElement;
|
|
document.addEventListener("scroll", () => update(img))
|
|
document.addEventListener("DOMContentLoaded", () => update(img))
|
|
</script>
|
|
</html>
|