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

Yeet custom images for blogs and posts and stuff, because I dont wanna loose all my hair FUCK

Browse source 
Clean up examples that I need to work with
Remove un-needed code bluh
Leg
This commit is contained in:
Michał Gdula 2024-05-26 18:29:33 +01:00
parent 457591297a
commit 09c53ed7ac
21 changed files with 56 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/layouts/Layout.astro
View file

@ -1,7 +1,6 @@
---
import { Picture, getImage } from 'astro:assets';
import "../styles/styles.scss";
import Banner from "../assets/banner.png";
interface Props {
title: string;
@ -9,14 +8,7 @@ interface Props {
alt: string,
}
const { title, image, alt } = Astro.props;
let imageData = await getImage({
src: image,
format: "jpeg",
width: 1080,
height: 700,
});
const { title} = Astro.props;
---
<!doctype html>
@ -36,15 +28,13 @@ let imageData = await getImage({
</head>
<body>
<div class="banner">
<Picture
src={imageData.src}
alt={alt}
width={1080}
height={700}
widths={[240, 540, 720, 1080]}
sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1080px`}
formats={['jpeg', 'webp']}
<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>
@ -52,9 +42,10 @@ let imageData = await getImage({
</main>
</body>
<script>
const img = document.querySelector(".banner > picture > img") as HTMLImageElement;
const img = document.querySelector(".banner > img") as HTMLImageElement;
document.addEventListener("scroll", () => {
img.style.top = `${window.scrollY}px`;
img.style.transform = `scale(${(window.scrollY / 10000) + 1})`;
img.style.filter = `blur(${window.scrollY / 100}px)`;
})
</script>

31
src/layouts/Markdown.astro
View file

@ -9,8 +9,6 @@ interface Props {
}
const { post, prev, next, base } = Astro.props;
const { Content } = await post.render();
---
<HomeButton />
@ -29,7 +27,7 @@ const { Content } = await post.render();
<div id="markdown">
<div style="margin-bottom: 32px" />
<Content />
<slot></slot>
<div style="margin-top: 32px" />
</div>
@ -68,9 +66,6 @@ const { Content } = await post.render();
align-content: center;
> li > .button {
// background-color: transparent;
// padding: 0 16px;
min-width: 35px;
height: 35px;
@ -181,22 +176,12 @@ const { Content } = await post.render();
}
}
// pre {
// padding: 8px;
//
// white-space: pre-wrap;
// word-wrap: break-word;
//
// border-radius: $radius;
// background-color: $gray !important;
// color: $light;
//
// overflow-x: scroll;
//
// > code {
// padding: 0;
// }
// }
img {
max-width: 100%;
height: auto;
border-radius: $radius;
}
.astro-code {
margin: 16px 0;
@ -241,7 +226,7 @@ const { Content } = await post.render();
background-color: $gray;
> h2 {
padding-top: 0;
margin-top: 0;
}
}
}