June
4c84dabb23
Also define the necessary variables for these breakpoints and viewports. This way they can be used in other contexts as well.
34 lines
779 B
SCSS
34 lines
779 B
SCSS
// Breakpoints and viewports for a responsive website.
|
|
// Taken from Pico CSS, see here:
|
|
// https://github.com/picocss/pico/blob/v1.5.11/scss/_variables.scss#L38
|
|
|
|
// xs: Extra small (portrait phones)
|
|
// sm: Small(landscape phones)
|
|
// md: Medium(tablets)
|
|
// lg: Large(desktops)
|
|
// xl: Extra large (large desktops)
|
|
|
|
// NOTE:
|
|
// To provide an easy and fine styling on each breakpoint
|
|
// we didn't use @each, @mixin or @include.
|
|
// That means you need to edit each CSS selector file to add a breakpoint
|
|
|
|
// Breakpoints
|
|
// 'null' disable the breakpoint
|
|
$breakpoints: (
|
|
xs: 0,
|
|
sm: 576px,
|
|
md: 768px,
|
|
lg: 992px,
|
|
xl: 1200px,
|
|
) !default;
|
|
|
|
// Viewports
|
|
$viewports: (
|
|
// 'null' disable the viewport on a breakpoint
|
|
sm: 510px,
|
|
md: 700px,
|
|
lg: 920px,
|
|
xl: 1130px
|
|
) !default;
|