68 lines
1.6 KiB
SCSS
68 lines
1.6 KiB
SCSS
@use "sass:math";
|
|
|
|
@import "../../node_modules/bootstrap/scss/bootstrap";
|
|
|
|
#gamePyramid {
|
|
display: grid;
|
|
grid-template-columns: repeat(60, 1fr);
|
|
place-items: start;
|
|
grid-gap: 4px;
|
|
background-color: #242;
|
|
background-image: linear-gradient(to bottom right, #242, #484);
|
|
border-radius: 5px;
|
|
|
|
.game-pyramid-card {
|
|
width: 100%;
|
|
&::before {
|
|
// content: "";
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 0;
|
|
}
|
|
// first/top row (index 0, row 1)
|
|
@for $i from 0 to 3 {
|
|
&.game-pyramid-card-0-#{$i} {
|
|
grid-row: 1;
|
|
grid-column: #{($i + 1) * 10 + $i * 8} / #{($i + 1) * 10 + $i * 8+6};
|
|
}
|
|
}
|
|
// second row (index 1, row 2)
|
|
@for $i from 0 to 6 {
|
|
&.game-pyramid-card-1-#{$i} {
|
|
grid-row: 2;
|
|
grid-column: #{(($i + 1) * 7)-
|
|
($i % 2)+
|
|
(math.floor(math.div($i, 2)) * 4)} /
|
|
#{(($i + 2) * 7)-
|
|
($i % 2)+
|
|
(math.floor(math.div($i, 2)) * 4)-1};
|
|
margin-top: -75%;
|
|
}
|
|
}
|
|
// third row (index 2, row 3)
|
|
@for $i from 0 to 9 {
|
|
&.game-pyramid-card-2-#{$i} {
|
|
grid-row: 3;
|
|
grid-column: #{4+ (6 * $i)} / #{10+ (6 * $i)};
|
|
margin-top: -75%;
|
|
}
|
|
}
|
|
// last/bottom row (index 3, row 4)
|
|
@for $i from 0 to 10 {
|
|
&.game-pyramid-card-3-#{$i} {
|
|
grid-row: 4;
|
|
grid-column: #{1+ (6 * $i)} / #{7+ (6 * $i)};
|
|
margin-top: -75%;
|
|
}
|
|
}
|
|
// stock cards
|
|
@for $i from 0 to 24 {
|
|
&.game-pyramid-card-4-#{$i} {
|
|
grid-column: #{5+ (2 * $i)} / #{11+ (2 * $i)};
|
|
grid-row: 5;
|
|
margin-top: 25%;
|
|
}
|
|
}
|
|
}
|
|
}
|