Moved images to assets, rewrote to use Image component, fixed styling issues

This commit is contained in:
Firq 2023-12-25 18:39:44 +01:00
parent 709f459963
commit aec4660bec
Signed by: Firq
GPG key ID: 4DE1059A4666E89F
160 changed files with 386 additions and 331 deletions
src/components

View file

@ -1,21 +1,25 @@
---
import type { ImageMetadata } from 'astro'
import { Image } from 'astro:assets'
export interface Props {
title: string
link: string
image: string
imageFile: string
}
const { image, link, title } = Astro.props
const icon: string = `background-image: url('/assets/technologies/${image}.webp')`
const { imageFile, link, title } = Astro.props
const imagePath = `/src/assets/technologies/${imageFile}`
const images_logos = import.meta.glob<{ default: ImageMetadata }>(
'/src/assets/technologies/*.webp'
)
---
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
<article>
<div style={icon}>
<span>
<h2>{title}</h2>
</span>
<Image src={images_logos[imagePath]()} alt="" />
<div>
<h2>{title}</h2>
</div>
</article>
</a>
@ -25,31 +29,31 @@ const icon: string = `background-image: url('/assets/technologies/${image}.webp'
text-decoration: none;
}
article {
--size-value: 6.25rem;
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
transition: transform var(--speed) var(--ease);
height: auto;
width: auto;
line-height: 100px;
border-radius: 1.25rem;
position: relative;
}
article:hover {
transform: scale(var(--hover-scale));
}
article > div {
article > img {
border-radius: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
background-size: contain;
--size-value: 6.25rem;
width: var(--size-value);
height: var(--size-value);
}
article:hover span {
article:hover div {
border-radius: 1.25rem;
padding: 0 0.5rem;
display: flex;
@ -57,13 +61,16 @@ const icon: string = `background-image: url('/assets/technologies/${image}.webp'
justify-content: center;
text-align: center;
background-color: var(--c-darkgray);
height: calc(var(--size-value) + 0.1rem);
width: calc(var(--size-value) + 0.1rem);
height: calc(var(--size-value));
width: calc(var(--size-value) - 1rem);
opacity: 90%;
z-index: 100;
position: absolute;
}
article:hover h2 {
margin: 0;
position: absolute;
display: inline-flex;
font-weight: bold;
color: white;
@ -75,7 +82,7 @@ const icon: string = `background-image: url('/assets/technologies/${image}.webp'
display: none;
}
article span {
article div {
display: none;
}
</style>