Fix for 404 and favcard
All checks were successful
/ checking (push) Successful in 13s

This commit is contained in:
Firq 2024-01-20 16:21:51 +01:00
parent 483b2cc84b
commit 449006320c
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
2 changed files with 27 additions and 22 deletions

View file

@ -1,5 +1,5 @@
---
import { Image } from 'astro:assets';
import { Image } from 'astro:assets'
import type { GlobImage } from '../types/generic'
import { plsLoadImage } from '../utils/tools'
@ -12,11 +12,18 @@ export interface Props {
const { link, imageFile, origin, name } = Astro.props
const imagePath = `/src/assets/favourites/${imageFile}`
const images = import.meta.glob<GlobImage>('/src/assets/favourites/*.{png,webp}')
const images = import.meta.glob<GlobImage>(
'/src/assets/favourites/*.{png,webp}'
)
const loadedImage = plsLoadImage(images, imagePath)
---
<a href={link} target="_blank" rel="noopener noreferrer" aria-label=`${name} - new window`>
<a
href={link}
target="_blank"
rel="noopener noreferrer"
aria-label=`${name} - new window`
>
<div class="heading">{name}</div>
<Image src={loadedImage} alt={name} />
<h2 class="subtext">
@ -38,10 +45,6 @@ const loadedImage = plsLoadImage(images, imagePath)
align-items: center;
}
a:hover {
transform: scale(var(--hover-scale));
}
a {
border-radius: 1rem;
display: flex;
@ -57,25 +60,27 @@ const loadedImage = plsLoadImage(images, imagePath)
text-align: center;
transition: transform var(--speed) var(--ease);
text-decoration: none;
&:hover {
transform: scale(var(--hover-scale));
}
a > img {
img {
padding: 0px 0.25em;
width: 90%;
height: auto;
}
}
@media (min-width: 512px) {
a {
padding: 10px 10px;
width: auto;
height: auto;
}
a > img {
img {
padding: 0px 1.5em;
width: 200px;
height: auto;
}
}
}

View file

@ -17,7 +17,7 @@ const description = "Error. This shouldn't happen :/"
<Image src={sadshishou} alt="Sad Shishou" />
<h2>Well ... you were not supposed to end up here.</h2>
<a href="/" aria-label="Home" rel="noopener noreferrer">
<i class="iconoir-fast-arrow-left"></i>Go back home
&lt;&lt; Go back home
</a>
</div>
</BaseSection>
@ -50,11 +50,11 @@ const description = "Error. This shouldn't happen :/"
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
}
a:hover {
&:hover {
color: var(--c-darkpurple);
}
}
img {
width: 256px;