granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix styling of summons in GridRep

Browse source
This commit is contained in:
Justin Edmund 2025-02-13 01:11:04 -08:00
parent a02a6c70aa
commit e9a3ad0cb6
1 changed files with 25 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
components/reps/GridRep/index.module.scss
View file

@ -70,6 +70,7 @@
.gridContainer { .gridContainer {
aspect-ratio: 2.1/1; aspect-ratio: 2.1/1;
width: 100%; width: 100%;
align-self: start;
} }
.characterGrid { .characterGrid {
@ -179,44 +180,42 @@
aspect-ratio: 2/0.91; aspect-ratio: 2/0.91;
display: flex; display: flex;
gap: $unit; gap: $unit;
justify-content: space-between; width: 100%;
height: 100%;
.summon,
.mainSummon {
background: var(--background);
border-radius: $item-corner-small;
img {
border-radius: $item-corner-small;
width: 100%;
}
}
.mainSummon { .mainSummon {
aspect-ratio: 56/97; aspect-ratio: 56/97;
display: grid; display: grid;
grid-column: 1 / 2; /* spans one column */ flex-shrink: 0;
background: var(--unit-bg);
border-radius: $item-corner-small;
img {
border-radius: 4px;
width: 100%;
height: 100%;
}
} }
.summons { .summons {
display: grid; /* make the right-images container a grid */ display: grid;
grid-template-columns: repeat( flex-shrink: 1;
2, grid-template-rows: repeat(3, 1fr);
1fr grid-template-columns: repeat(2, 1fr);
); /* create 3 columns, each taking up 1 fraction */
grid-template-rows: repeat(
2,
1fr
); /* create 3 rows, each taking up 1 fraction */
gap: $unit; gap: $unit;
aspect-ratio: 83/100;
// column-gap: $unit;
// row-gap: $unit-2x;
} }
.summon { .summon {
aspect-ratio: 184 / 138; aspect-ratio: 184/138;
display: grid; display: grid;
background: var(--unit-bg);
border-radius: $item-corner-small;
img {
border-radius: 4px;
width: 100%;
height: 100%;
}
} }
} }