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

Updated README, hopefully fixed mobile design, refactored and refined desktop design

Browse source
This commit is contained in:
Firq 2023-01-26 23:29:36 +01:00
parent f5543cfae2
commit 1b42ad35cf
Signed by: Firq
GPG key ID: 4DE1059A4666E89F
3 changed files with 62 additions and 63 deletions
src/components
ceCard.astro

55
src/components/ceCard.astro
View file

@ -16,11 +16,9 @@ if(mlb === "false") {
---
<article>
<div class="heading-center">
<h1>{name}</h1>
</div>
<div class="heading-center">{name}</div>
<div>
<img class="ce-crop" src={ce_img} alt="A Fragment of 2030">
<img class="ce-crop" src={ce_img} alt={name}>
</div>
<div class={mlb_image}>
<img class="mlb" src="ce/mlb.png" alt="Max-limit broken"/>
@ -38,16 +36,15 @@ if(mlb === "false") {
border-color: #1e1e1e;
padding: 20px;
padding-top: 5px;
width: 7em;
width: 35%;
height: auto;
justify-content: center;
text-align: center;
transition: transform var(--speed) var(--ease);
overflow: hidden;
margin: 0px;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 11em 3em;
grid-template-columns: 100%;
grid-template-rows: auto auto 3em;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
@ -65,22 +62,20 @@ if(mlb === "false") {
}
img {
display: block;
display: flex;
margin-left: auto;
margin-right: auto;
}
.heading-center {
display: table;
display: flex;
height: 4rem;
}
.heading-center > h1 {
width: 100%;
align-items: center;
justify-content: center;
font-size: 1.25em;
color: white;
width: 12rem;
display: table-cell;
vertical-align: middle;
font-weight: bold;
}
.ce-crop {
@ -90,26 +85,30 @@ if(mlb === "false") {
object-position: 0% 0%;
}
@media (min-width: 512px) {
.ce-crop {
width: 10em;
height: 10em;
}
article {
width: auto;
}
}
.mlb {
width: 60%;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.mlbalign {
width: 10em;
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>