Fluffy/WebsiteFluffy
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2025-06-26 20:06:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix Post and Project page rendering

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

33
src/layouts/Layout.astro
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;

56
src/layouts/Markdown.astro
View file

@ -1,56 +0,0 @@
---
import Layout from "./Layout.astro";
const { frontmatter } = Astro.props;
---
<Layout title="Leggy Land" src={frontmatter.image.url} alt={frontmatter.image.alt}>
<a id="back" href="/">Back</a>
<h1>{frontmatter.title}</h1>
<p>By {frontmatter.author}</p>
<ul id="tags">
{frontmatter.tags.map((item: string) => ( <li class="pill">#{item}</li> ))}
</ul>
<hr>
<slot />
</Layout>
<style is:global lang="scss">
@import "../styles/vars";
#back {
margin-bottom: 32px;
padding: 0 32px;
width: max-content;
height: 35px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8px;
text-decoration: none;
border-radius: 9999px;
border: 0 solid $gray;
background-color: $gray;
color: $light;
&:hover, &:focus-visible {
background-color: lighten($gray, 1%);
}
}
#tags {
padding-top: 16px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
</style>