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

Add sizes for each rep type

Browse source
This commit is contained in:
Justin Edmund 2025-09-12 05:23:22 -07:00
parent c8da5c4762
commit e18208f7c2
2 changed files with 34 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/themes/_rep.scss Normal file
View file

@ -0,0 +1,30 @@
// Lightweight mixins for reps (weapon/summon/character)
// Keep grid and aspect utilities in one place for consistency.
@mixin aspect($w, $h) {
// Use calc to avoid unit issues and keep intent clear.
aspect-ratio: calc(#{$w} / #{$h});
}
@mixin grid($rows, $cols, $gap) {
display: grid;
grid-template-rows: repeat(#{$rows}, 1fr);
grid-template-columns: repeat(#{$cols}, 1fr);
gap: $gap;
}
// Common proportions and ratios for reps
// Chosen to match legacy visual geometry without redesign.
$rep-body-ratio: 1.95; // width / height for GridRep body; ensures no content cut-off
// Column proportions for weapon/summon layouts
$weapon-cols-proportion: 3.55; // mainhand : grid width proportion (1 : 3.55)
$summon-cols-proportion: 2.25; // main : grid width proportion (1 : 2.25)
// Aspect pairs (w, h) for key cells
$weapon-main-w: 73; $weapon-main-h: 153;
$weapon-cell-w: 280; $weapon-cell-h: 160;
$summon-main-w: 56; $summon-main-h: 97;
$summon-cell-w: 184; $summon-cell-h: 138;
$char-protag-w: 32; $char-protag-h: 66;
$char-cell-w: 16; $char-cell-h: 33;

6
src/themes/_spacing.scss
View file

@ -9,9 +9,11 @@ $desktop: 1920px;
$laptop: 1280px;
$tablet: 768px;
$phone: 375px;
$grid-width: 720px;
$rep-height: 111px;
$character-rep-height: 111px;
$summon-rep-height: 117px;
$weapon-rep-height: 109.75px;
// Legacy
$medium-screen: 768px;