Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases172 Packages1 Wiki Activity Actions

Merge fix

Browse source
This commit is contained in:
Firq 2023-03-09 11:44:18 +01:00
parent 9584987150
commit a2ee3564bc
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
26 changed files with 1125 additions and 1039 deletions
src/components
ceCard.astro

180
src/components/ceCard.astro
View file

@ -1,115 +1,115 @@
---
export interface Props {
name: string;
link: string;
mlb: string;
name: string
link: string
mlb: string
}
const {mlb, link, name } = Astro.props;
const { mlb, link, name } = Astro.props
const ce_img: string = `/ce/${link}.webp`;
const ce_img: string = `/ce/${link}.webp`
const mlb_ce: string = `/ce/mlb.webp`
let mlb_image: string = "mlbalign";
let mlb_image: string = 'mlbalign'
if(mlb === "false") {
mlb_image = "hidemlb";
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>
<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;
}
.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 {
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:hover {
transform: scale(var(--hover-scale));
}
article div {
margin: 0.5em auto;
}
article div {
margin: 0.5em auto;
}
img {
display: flex;
margin-left: auto;
margin-right: 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;
}
.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: 6em;
height: 6em;
object-fit: cover;
object-position: 0% 0%;
width: 7.5em;
height: 7.5em;
}
.mlb {
width: 100%;
margin-left: auto;
margin-right: auto;
article {
width: 10em;
grid-template-columns: auto;
grid-template-rows: auto auto 3em;
}
.mlbalign {
display: flex;
justify-items: center;
align-items: center;
width: 7.5em;
}
@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>
}
</style>