Mergin dev - new header, updated servants #29
2 changed files with 27 additions and 22 deletions
|
@ -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,12 +60,16 @@ const loadedImage = plsLoadImage(images, imagePath)
|
|||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a > img {
|
||||
padding: 0px 0.25em;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
&:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
|
||||
img {
|
||||
padding: 0px 0.25em;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 512px) {
|
||||
|
@ -70,12 +77,10 @@ const loadedImage = plsLoadImage(images, imagePath)
|
|||
padding: 10px 10px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a > img {
|
||||
padding: 0px 1.5em;
|
||||
width: 200px;
|
||||
height: auto;
|
||||
img {
|
||||
padding: 0px 1.5em;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
<< Go back home
|
||||
</a>
|
||||
</div>
|
||||
</BaseSection>
|
||||
|
@ -50,10 +50,10 @@ const description = "Error. This shouldn't happen :/"
|
|||
text-decoration: none;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--c-darkpurple);
|
||||
&:hover {
|
||||
color: var(--c-darkpurple);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
Loading…
Reference in a new issue