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 type { GlobImage } from '../types/generic'
import { plsLoadImage } from '../utils/tools' import { plsLoadImage } from '../utils/tools'
@ -12,11 +12,18 @@ export interface Props {
const { link, imageFile, origin, name } = Astro.props const { link, imageFile, origin, name } = Astro.props
const imagePath = `/src/assets/favourites/${imageFile}` 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) 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> <div class="heading">{name}</div>
<Image src={loadedImage} alt={name} /> <Image src={loadedImage} alt={name} />
<h2 class="subtext"> <h2 class="subtext">
@ -38,10 +45,6 @@ const loadedImage = plsLoadImage(images, imagePath)
align-items: center; align-items: center;
} }
a:hover {
transform: scale(var(--hover-scale));
}
a { a {
border-radius: 1rem; border-radius: 1rem;
display: flex; display: flex;
@ -57,12 +60,16 @@ const loadedImage = plsLoadImage(images, imagePath)
text-align: center; text-align: center;
transition: transform var(--speed) var(--ease); transition: transform var(--speed) var(--ease);
text-decoration: none; text-decoration: none;
}
a > img { &:hover {
padding: 0px 0.25em; transform: scale(var(--hover-scale));
width: 90%; }
height: auto;
img {
padding: 0px 0.25em;
width: 90%;
height: auto;
}
} }
@media (min-width: 512px) { @media (min-width: 512px) {
@ -70,12 +77,10 @@ const loadedImage = plsLoadImage(images, imagePath)
padding: 10px 10px; padding: 10px 10px;
width: auto; width: auto;
height: auto; height: auto;
} img {
padding: 0px 1.5em;
a > img { width: 200px;
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" /> <Image src={sadshishou} alt="Sad Shishou" />
<h2>Well ... you were not supposed to end up here.</h2> <h2>Well ... you were not supposed to end up here.</h2>
<a href="/" aria-label="Home" rel="noopener noreferrer"> <a href="/" aria-label="Home" rel="noopener noreferrer">
<i class="iconoir-fast-arrow-left"></i>Go back home &lt;&lt; Go back home
</a> </a>
</div> </div>
</BaseSection> </BaseSection>
@ -50,10 +50,10 @@ const description = "Error. This shouldn't happen :/"
text-decoration: none; text-decoration: none;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: bold; font-weight: bold;
}
a:hover { &:hover {
color: var(--c-darkpurple); color: var(--c-darkpurple);
}
} }
img { img {