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;
$breakpoint-alpha-2: 450px;
$breakpoint-beta: 49em;
$breakpoint-beta-2: 620px;
$breakpoint-gamma: 56em;
$breakpoint-delta: 73.125em;
$breakpoint-epsilon: 79.625em;

@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; }
    }
}