design/sass/_queries.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

$breakpoint-alpha: 38em; //608
$breakpoint-alpha-2: 450px;
$breakpoint-beta: 49em; //784
$breakpoint-beta-2: 620px;
$breakpoint-gamma: 960px;
$breakpoint-delta: 1170px;
$breakpoint-epsilon: $max_width;

@mixin breakpoint($point) {
    @if $point == "alpha" {
        @media screen and (min-width:$breakpoint-alpha ){ @content; }
    }
    @if $point == "alpha-2" {
        @media screen and (min-width:$breakpoint-alpha-2 ){ @content; }
    }
    @else if $point == "beta" {
        @media screen and  (min-width: $breakpoint-beta) { @content; }
    }
    @else if $point == "beta-2" {
        @media screen and  (min-width: $breakpoint-beta-2) { @content; }
    }
    @else if $point == "gamma" {
        @media screen and (min-width: $breakpoint-gamma)  { @content; }
    }
    @else if $point == "delta" {
        @media screen and (min-width: $breakpoint-delta)  { @content; }
    }
    @else if $point == "epsilon" {
        @media screen and (min-width: $breakpoint-epsilon)  { @content; }
    }
}