67 lines
1.5 KiB
SCSS
67 lines
1.5 KiB
SCSS
// Overall container – never taller than $rep-height:
|
||
.rep {
|
||
height: $rep-height;
|
||
display: grid;
|
||
// First column: mainhand width = $rep-height * (200/420)
|
||
// Second column: weapons grid – its width will be auto (we calculate it below)
|
||
grid-template-columns:
|
||
calc(#{$rep-height} * (200 / 420))
|
||
auto;
|
||
gap: $unit-half;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* --- Mainhand image --- */
|
||
.mainhand {
|
||
background: var(--card-bg);
|
||
border-radius: 4px;
|
||
height: 100%;
|
||
width: 100%; // takes the grid column’s computed width
|
||
overflow: hidden;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain; // or "cover" if you prefer cropping
|
||
}
|
||
}
|
||
|
||
/* --- Weapons grid --- */
|
||
.weapons {
|
||
/* Reset default UL spacing */
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
height: 100%;
|
||
|
||
display: grid;
|
||
// We know there will be 3 columns and 3 rows.
|
||
// Each row's height is one-third of $rep-height:
|
||
// Subtract the 2 vertical gaps from the total height before dividing:
|
||
grid-template-rows: repeat(
|
||
3,
|
||
calc((#{$rep-height} - (2 * #{$unit-half})) / 3)
|
||
);
|
||
// Each column's width is calculated as: (cell height * (280/160))
|
||
grid-template-columns: repeat(
|
||
3,
|
||
calc((#{$rep-height} - (2 * #{$unit-half})) / 3 * (280 / 160))
|
||
);
|
||
gap: $unit-half;
|
||
}
|
||
|
||
/* Each grid cell (a .weapon) */
|
||
.weapon {
|
||
background: var(--card-bg);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
// Center the image (or placeholder) within the cell:
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|