115 lines
No EOL
2.2 KiB
Text
115 lines
No EOL
2.2 KiB
Text
---
|
|
export interface Props {
|
|
name: string;
|
|
link: string;
|
|
mlb: string;
|
|
}
|
|
|
|
const {mlb, link, name } = Astro.props;
|
|
|
|
const ce_img: string = `/ce/${link}.webp`;
|
|
const mlb_ce: string = `/ce/mlb.webp`
|
|
let mlb_image: string = "mlbalign";
|
|
|
|
if(mlb === "false") {
|
|
mlb_image = "hidemlb";
|
|
}
|
|
---
|
|
|
|
<article>
|
|
<div class="heading-center">{name}</div>
|
|
<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 {
|
|
background-color: var(--c-darkergray);
|
|
border-color: var(--c-darkgray);
|
|
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 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 {
|
|
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;
|
|
object-fit: cover;
|
|
object-position: 0% 0%;
|
|
}
|
|
|
|
.mlb {
|
|
width: 100%;
|
|
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;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: auto auto 3em;
|
|
}
|
|
.mlbalign {
|
|
width: 7.5em;
|
|
}
|
|
}
|
|
</style> |