106 lines
1.9 KiB
Text
106 lines
1.9 KiB
Text
---
|
|
import { Image } from 'astro:assets'
|
|
import mlb_ce from '../../assets/ce/mlb.webp'
|
|
import type { GlobImage } from '../../types/generic'
|
|
import { plsLoadImage } from '../../utils/tools'
|
|
|
|
export interface Props {
|
|
name: string
|
|
imageFile: string
|
|
mlb: boolean
|
|
}
|
|
|
|
const { mlb, imageFile, name } = Astro.props
|
|
const imagePath = `/src/assets/ce/${imageFile}`
|
|
const images_ces = import.meta.glob<GlobImage>('/src/assets/ce/*.png')
|
|
const loadedCEImage = plsLoadImage(images_ces, imagePath)
|
|
|
|
const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
|
|
---
|
|
|
|
<article>
|
|
<div>
|
|
<Image src={loadedCEImage} alt={name} class="ce-crop" />
|
|
</div>
|
|
<div class={mlb_image}>
|
|
<Image src={mlb_ce} alt="Max-limit broken" class="mlb" />
|
|
</div>
|
|
</article>
|
|
|
|
<style>
|
|
.hidemlb {
|
|
display: none;
|
|
height: 1em;
|
|
}
|
|
|
|
article {
|
|
border-radius: 1.25rem;
|
|
border: 2px var(--c-darkgray) solid;
|
|
background-color: var(--c-darkergray);
|
|
width: 35%;
|
|
height: auto;
|
|
justify-content: center;
|
|
text-align: center;
|
|
margin: 0px;
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: auto 3em;
|
|
gap: 0px 0px;
|
|
grid-auto-flow: row;
|
|
grid-template-areas:
|
|
'.'
|
|
'.';
|
|
}
|
|
|
|
article:hover {
|
|
border: 2px var(--c-darkpurple) solid;
|
|
}
|
|
|
|
article div {
|
|
margin: auto;
|
|
}
|
|
|
|
img {
|
|
border-radius: 1.5rem;
|
|
margin-top: 1rem;
|
|
display: flex;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.ce-crop {
|
|
width: min(85%, 85px);
|
|
height: auto;
|
|
}
|
|
|
|
.mlb {
|
|
width: min(85%, 85px);
|
|
height: auto;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.mlbalign {
|
|
display: flex;
|
|
justify-items: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (min-width: 512px) {
|
|
.ce-crop {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
article {
|
|
width: 128px;
|
|
}
|
|
.mlbalign {
|
|
width: 85px;
|
|
}
|
|
|
|
.mlb {
|
|
width: 85px;
|
|
}
|
|
}
|
|
</style>
|