muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

made first good profile layout

Browse source
This commit is contained in:
Fedor Katurov 2025-01-27 15:05:56 +07:00
parent 42f8f96e34
commit 1d0ecc54a9
4 changed files with 144 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/layouts/FlowLayout/styles.module.scss
View file

@ -4,17 +4,6 @@
$target_flow_cell_width: 225px;
/** Makes a breakpoint for target cell width **/
@mixin breakpoint($columns) {
@container sizer (max-width: #{$target_flow_cell_width* $columns}) {
grid-template-columns: repeat(#{$columns}, 1fr);
grid-auto-rows: calc(
(100cqw - #{$columns - 1} * #{$gap} / 2) / #{$columns}
);
@content;
}
}
.wrap {
max-width: 2000px;
padding: 0 40px 40px 40px;
@ -26,8 +15,9 @@ $cols: math.div($content_width, $cell);
.container {
@include container;
@include flow_container;
margin-top: $page_top_offset;
container: sizer / size;
@include tablet {
padding: 0 $gap;
@ -38,20 +28,18 @@ $cols: math.div($content_width, $cell);
.grid {
width: 100%;
min-height: 200px;
display: grid;
gap: #{$gap};
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: calc((100cqw - 4 * #{$gap} / 2) / 5);
grid-template-rows: 40vh;
grid-auto-flow: row dense;
@include breakpoint(5);
@include breakpoint(4);
@include breakpoint(3) {
@include flow_grid() {
grid-template-rows: 40vh;
}
@include flow_breakpoint(5);
@include flow_breakpoint(4);
@include flow_breakpoint(3) {
grid-template-rows: calc(66cqw - #{$gap}) auto;
}
@include breakpoint(2) {
@include flow_breakpoint(2) {
grid-template-rows: calc(100cqw - #{$gap}) auto;
}