andras/life-towers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

better

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-30 14:47:25 +01:00
parent 003f38ea60
commit f87480e79d
7 changed files with 124 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

39
frontend/src/app/components/page/page.component.scss
View file

@ -28,7 +28,8 @@
transition: box-shadow $short-animation-time;
max-width: 800px;
max-width: 100%;
gap: var(--medium-padding);
&.cdk-drop-list-dragging {
*:not(.cdk-drag-placeholder) {
@ -55,38 +56,17 @@
}
& > * {
width: 100%;
max-width: 200px;
box-sizing: content-box;
flex: 0 0 auto;
box-sizing: border-box;
flex: 1 1 0;
min-width: 0;
min-height: 0;
&:not(:nth-last-child(1)) {
margin-right: var(--medium-padding);
@media (max-width: $mobile-width) {
// Was --small-padding (7.5px) — too tight to read as a real gap
// between white tower cards on the cream-pink background.
margin-right: var(--medium-padding);
}
}
}
position: relative;
@for $i from 1 to 12 {
& > *:first-child:nth-last-child(#{$i}),
& > *:first-child:nth-last-child(#{$i}) ~ * {
width: calc((100% - (#{$i} - 1) * var(--medium-padding)) / #{$i});
@media (max-width: $mobile-width) {
width: calc((100% - (#{$i} - 1) * var(--small-padding)) / #{$i});
}
}
}
// Mobile: fixed-width towers with horizontal scroll (1.5-column rhythm).
// This block is declared AFTER the @for loop so it wins the specificity race
// without needing !important on every property — only the width triples need it
// to beat the per-child-count selectors generated above.
@media (max-width: $mobile-width) {
--mobile-tower-width: calc(66vw - var(--small-padding));
--mobile-tower-side-padding: max(
@ -109,17 +89,12 @@
display: none;
}
// Override the @for width-calc rules above.
& > * {
width: var(--mobile-tower-width) !important;
max-width: var(--mobile-tower-width) !important;
min-width: var(--mobile-tower-width) !important;
scroll-snap-align: center;
flex-shrink: 0;
}
& > *:not(:nth-last-child(1)) {
margin-right: 0;
flex: 0 0 var(--mobile-tower-width);
}
}
}