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

fix collection page grid: use correct 280x160 aspect ratio for character images

Browse source
This commit is contained in:
Justin Edmund 2025-12-02 15:06:56 -08:00
parent a6a0a38d75
commit 9ed505623e
1 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/routes/(app)/[username]/collection/characters/+page.svelte
View file

@ -288,7 +288,6 @@
@use '$src/themes/spacing' as *; @use '$src/themes/spacing' as *;
@use '$src/themes/colors' as *; @use '$src/themes/colors' as *;
@use '$src/themes/typography' as *; @use '$src/themes/typography' as *;
@use '$src/themes/rep' as rep;
.collection-page { .collection-page {
display: flex; display: flex;
@ -309,8 +308,8 @@
} }
.character-grid { .character-grid {
display: grid; display: flex;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); flex-wrap: wrap;
gap: $unit; gap: $unit;
} }
@ -338,8 +337,9 @@
.card-image { .card-image {
position: relative; position: relative;
width: 100%; // Character grid images are 280x160 (7:4 ratio)
@include rep.aspect(rep.$char-cell-w, rep.$char-cell-h); width: 100px;
aspect-ratio: 280 / 160;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
background: var(--card-bg, #f5f5f5); background: var(--card-bg, #f5f5f5);