style: update breakpoints

This commit is contained in:
Lucas Larroche 2023-03-20 20:31:27 +07:00
parent de6ba10757
commit d7d11308af
11 changed files with 88 additions and 9 deletions

View file

@ -57,7 +57,7 @@ $breakpoints: map.deep-merge(
root-font-size: 112.5%,
),
// Large (desktops)
// Large
// Font size: 19px
lg:
(
@ -66,13 +66,22 @@ $breakpoints: map.deep-merge(
root-font-size: 118.75%,
),
// Extra large (large desktops)
// Extra large
// Font size: 20px
xl:
(
breakpoint: 1280px,
viewport: 1200px,
root-font-size: 125%,
),
// Extra extra large
// Font size: 21px
xxl:
(
breakpoint: 1536px,
viewport: 1450px,
root-font-size: 131.25%,
)
),
$breakpoints

View file

@ -94,7 +94,7 @@
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
$multiplier: 1;
$multiplier: 2;
@if $key == "sm" {
$multiplier: 2.5;
} @else if $key == "md" {
@ -103,6 +103,8 @@
$multiplier: 3.5;
} @else if $key == "xl" {
$multiplier: 4;
} @else if $key == "xxl" {
$multiplier: 4.5;
}
#{$✨}block-spacing-vertical: calc(var(#{$}spacing) * $multiplier);
@ -127,6 +129,8 @@
$multiplier: 1.75;
} @else if $key == "xl" {
$multiplier: 2;
} @else if $key == "xxl" {
$multiplier: 2.25;
}
#{$✨}block-spacing-horizontal: calc(var(#{$}spacing) * $multiplier);