Compare commits

...

2 commits

Author SHA1 Message Date
305b7d4272
fix: attempted image fix
All checks were successful
Deploy to Web Server / deploy (push) Successful in 5m5s
2025-07-25 13:29:58 +10:00
39540fcde5
feat(BaseLayout): fix page sizing 2025-07-25 23:15:13 +10:00
8 changed files with 33 additions and 21 deletions

View file

@ -18,7 +18,7 @@ export default defineConfig({
site: "https://aria.coffee",
integrations: [
preact(),
tailwind(),
// tailwind(),
icon(),
mdx(),
matomo({

View file

@ -3,14 +3,16 @@ import { Image, Picture } from "astro:assets";
const { name, image, target } = Astro.props;
---
<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="max" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
<a href={`${target}`} target="_blank"><Picture src={image} width=176 height=62 alt={`${name}`} sizes={"0.5x 1x 2x 4x"} class="flex" quality="max" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
<style>
img {
image-rendering: pixelated;
min-width: 88px;
min-width: 176px;
width: 176px;
min-height: 31px;
max-width: 176px;
min-height: 62px;
height: 62px;
padding: 4px;
max-height: 62px;
scale: 1;
}
</style>

View file

@ -3,14 +3,16 @@ import { Image, Picture } from "astro:assets";
const { name, image, target } = Astro.props;
---
<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="high" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
<a href={`${target}`} target="_blank"><Picture src={image} width=176 height=62 alt={`${name}`} class="flex" quality="high" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
<style>
img {
image-rendering: pixelated;
min-width: 88px;
min-width: 176px;
width: 176px;
min-height: 31px;
max-width: 176px;
min-height: 62px;
height: 62px;
max-height: 62px;
padding: 4px;
}
</style>

View file

@ -3,14 +3,16 @@ import { Image, Picture } from "astro:assets";
const { name, image, target } = Astro.props;
---
<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="low" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
<a href={`${target}`} target="_blank"><Picture src={image} width=176 height=62 alt={`${name}`} class="flex" quality="low" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
<style>
img {
image-rendering: pixelated;
min-width: 88px;
min-width: 176px;
width: 176px;
min-height: 31px;
max-width: 176px;
min-height: 62px;
height: 62px;
max-height: 62px;
padding: 4px;
}
</style>

View file

@ -3,14 +3,16 @@ import { Image, Picture } from "astro:assets";
const { name, image, target } = Astro.props;
---
<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="low" decoding="async" loading="lazy" formats={['webp']} /></a>
<a href={`${target}`} target="_blank"><Picture src={image} width=176 height=62 alt={`${name}`} class="flex" quality="low" decoding="async" loading="lazy" formats={['webp']} /></a>
<style>
img {
image-rendering: pixelated;
min-width: 88px;
min-width: 176px;
width: 176px;
min-height: 31px;
max-width: 176px;
min-height: 62px;
height: 62px;
max-height: 62px;
padding: 4px;
}
</style>

View file

@ -3,14 +3,16 @@ import { Image, Picture } from "astro:assets";
const { name, image, target } = Astro.props;
---
<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="mid" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
<a href={`${target}`} target="_blank"><Picture src={image} width=176 height=62 alt={`${name}`} class="flex" quality="mid" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
<style>
img {
image-rendering: pixelated;
min-width: 88px;
min-width: 176px;
width: 176px;
min-height: 31px;
max-width: 176px;
min-height: 62px;
height: 62px;
max-height: 62px;
padding: 4px;
}
</style>

View file

@ -3,14 +3,16 @@ import { Image, Picture } from "astro:assets";
const { name, image, target } = Astro.props;
---
<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="mid" decoding="async" loading="lazy" formats={['webp']} /></a>
<a href={`${target}`} target="_blank"><Picture src={image} width=176 height=62 alt={`${name}`} class="flex" quality="mid" decoding="async" loading="lazy" formats={['webp']} /></a>
<style>
img {
image-rendering: pixelated;
min-width: 88px;
min-width: 176px;
width: 176px;
min-height: 31px;
max-width: 176px;
min-height: 62px;
height: 62px;
max-height: 62px;
padding: 4px;
}
</style>

View file

@ -33,7 +33,7 @@ const { pageTitle, description = "Aria's little corner of the web" } = Astro.pro
href={new URL("rss.xml", Astro.site)}
/>
</head>
<body>
<body class="max-w-5xl w-full mx-auto">
<NavHeader />
<slot />
<Footer />