115 lines
1.8 KiB
Text
115 lines
1.8 KiB
Text
---
|
|
export interface Props {
|
|
name: string
|
|
link: string
|
|
mlb: string
|
|
}
|
|
|
|
const { mlb, link, name } = Astro.props
|
|
|
|
const ce_img: string = `/assets/ce/${link}.webp`
|
|
const mlb_ce: string = `/assets/ce/mlb.webp`
|
|
let mlb_image: string = 'mlbalign'
|
|
|
|
if (mlb === 'false') {
|
|
mlb_image = 'hidemlb'
|
|
}
|
|
---
|
|
|
|
<article>
|
|
<div>
|
|
<img class="ce-crop" src={ce_img} alt={name} />
|
|
</div>
|
|
<div class={mlb_image}>
|
|
<img class="mlb" src={mlb_ce} alt="Max-limit broken" />
|
|
</div>
|
|
</article>
|
|
|
|
<style>
|
|
.hidemlb {
|
|
display: none;
|
|
height: 1em;
|
|
}
|
|
|
|
article {
|
|
border-radius: 1.25rem;
|
|
background-color: var(--c-darkergray);
|
|
padding: 20px;
|
|
padding-top: 5px;
|
|
width: 35%;
|
|
height: auto;
|
|
justify-content: center;
|
|
text-align: center;
|
|
transition: transform var(--speed) var(--ease);
|
|
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 {
|
|
transform: scale(var(--hover-scale));
|
|
}
|
|
|
|
article div {
|
|
margin: 0.5em auto;
|
|
}
|
|
|
|
img {
|
|
border-radius: 1.5rem;
|
|
margin-top: 1rem;
|
|
display: flex;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.heading-center {
|
|
display: flex;
|
|
height: 4rem;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25em;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ce-crop {
|
|
width: 6em;
|
|
height: 6em;
|
|
}
|
|
|
|
.mlb {
|
|
width: 5.5rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.mlbalign {
|
|
display: flex;
|
|
justify-items: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (min-width: 512px) {
|
|
.ce-crop {
|
|
width: 7.5em;
|
|
height: 7.5em;
|
|
}
|
|
article {
|
|
width: 10em;
|
|
}
|
|
.mlbalign {
|
|
width: 7.5em;
|
|
}
|
|
|
|
.mlb {
|
|
width: 7rem;
|
|
}
|
|
}
|
|
</style>
|