Finished basic showcase for homepage, Improved grid CSS styles

Update index.php, grid.scss, and 3 more files...
This commit is contained in:
2023-12-09 01:39:24 +01:00
parent 38740d3bdb
commit df853485fd
5 changed files with 85 additions and 7 deletions

View File

@@ -10,6 +10,12 @@
}
}
@mixin grid-gap-maker($gap-size-key, $gap-size-value) {
.gap-#{$gap-size-key} {
grid-gap: #{$gap-size-value};
}
}
// Defining rules for all devices.
@include grid-col-maker("1", "");
@include grid-col-maker("2", "");
@@ -18,6 +24,18 @@
@include grid-col-maker("6", "");
@include grid-col-maker("8", "");
@include grid-gap-maker("xs", calc(#{$grid-gap-base-size} * 0.5));
@include grid-gap-maker("s", calc(#{$grid-gap-base-size} * 0.75));
@include grid-gap-maker("m", #{$grid-gap-base-size});
@include grid-gap-maker("l", calc(#{$grid-gap-base-size} * 1.5));
@include grid-gap-maker("xl", calc(#{$grid-gap-base-size} * 2.0));
@media only screen and (max-width: 992px) {
@include grid-col-maker("1", "medium-");
@include grid-col-maker("2", "medium-");
@include grid-col-maker("3", "medium-");
}
@media only screen and (max-width: 768px) {
@include grid-col-maker("1", "mobile-");
@include grid-col-maker("2", "mobile-");