Fix Post and Project page rendering

Funky button
Yeet the GitHub pages stuff, for now
This commit is contained in:
Michał Gdula 2024-05-24 01:09:05 +01:00
parent 4fc0ee9d9c
commit 6f7b419841
17 changed files with 187 additions and 156 deletions

View file

@ -27,46 +27,51 @@ const { title, src, alt } = Astro.props;
</head>
<body>
<div class="banner">
{src && <img src={src} alt={alt} />}
{src && (
<img src={src} alt={alt} />
<script>
const img = document.querySelector(".banner > img");
document.addEventListener("scroll", () => {
img.style.top = `${window.scrollY}px`;
img.style.filter = `blur(${window.scrollY / 100}px)`;
})
</script>
)}
</div>
<main>
<slot />
</main>
</body>
</html>
<style is:global lang="scss">
@import "../styles/vars";
.banner {
margin: 0 -16px;
position: relative;
height: 700px;
background-color: rgba($light, 0.01);
box-shadow: 0 8px 8px rgba(#000, 0.3);
overflow: hidden;
> img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
object-fit: cover;
}
}
footer {
padding: 0 32px;
height: 50px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
hr {
margin: 32px 0;