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

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>

30
src/components/servantCard.astro
View file

@ -22,9 +22,7 @@ if(bond10 === "false") {
---
<article>
<div class="heading-center">
<h1 class="servantname">{name}</h1>
</div>
<div class="heading">{name}</div>
<img src={servant_img} alt={name}>
<h2 class="subtext">
Level {level}<br>
@ -32,15 +30,22 @@ if(bond10 === "false") {
NP {np}</h2>
<div class="expand-on-hover">
<img class={bondce_css} src={bondce_img} alt="">
<h2 class="subtext">Mana Loading: {ml === "Not Unlocked" && <br>}{ml}</h2>
<h2 class="subtext">Mana Loading: {ml === "Not Unlocked" && <br/>}{ml}</h2>
</div>
</article>
<style>
.heading-center {
display: table;
.heading {
display: flex;
height: 4rem;
width: 100%;
height: 4.5rem;
align-items: center;
justify-content: center;
font-size: 22px;
color: white;
max-width: 200px;
padding-bottom: 0.3rem;
font-weight: bold;
}
.servants-container {
@ -58,7 +63,7 @@ if(bond10 === "false") {
background-color: rgb(27, 27, 27);
border-color: #1e1e1e;
padding: 0em 0.75em;
width: auto;
width: 40%;
height: auto;
justify-content: center;
text-align: center;
@ -91,15 +96,6 @@ if(bond10 === "false") {
line-height: 20px;
}
.servantname {
font-size: 22px;
color: white;
max-width: 200px;
padding-bottom: 0.3rem;
display: table-cell;
vertical-align: middle;
}
.expand-on-hover {
z-index: 99;
transform: scaleY(0);