mirror of
https://github.com/Fluffy-Bean/website.git
synced 2025-05-31 15:53:15 +00:00
Fix Post and Project page rendering
Funky button Yeet the GitHub pages stuff, for now
This commit is contained in:
parent
4fc0ee9d9c
commit
6f7b419841
17 changed files with 187 additions and 156 deletions
|
@ -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;
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue