-
Notifications
You must be signed in to change notification settings - Fork 0
/
_keanu.scss
109 lines (96 loc) · 4.9 KB
/
_keanu.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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// *****************************************************************************
// Keanu Sass Media Query Generator
// By: Lynn Wallenstein & John Athayde
// *****************************************************************************
// Breakpoints are:
// Smartphones Devices: smartphone, smartphone-landscape, smartphone-portrait, smartphone-hires, smartphone-iphone4
// Tablets: tablet, tablet-portrait, tablet-landscape, tablet-hires,
// Laptop/Desktop: TBD
// ------------------------------------------------------------------
// VARIABLES
// ------------------------------------------------------------------
$smartphone-width-min: 320px;
$smartphone-width-min-landscape: 480px;
$smartphone-width-max: 480px;
$tablet-width-min: 768px;
$tablet-width-max: 1024px;
$laptop-netbook-width: 1024px;
$laptop-width: 1280px;
$laptop-mac-air-width: 1366px;
$laptop-mac-15-width: 1680px;
$desktop-hd-monitor: 1920px;
$desktop-apple-monitor: 2300px;
// ------------------------------------------------------------------
// MIXIN
// ------------------------------------------------------------------
@mixin respond-to($breakpoint) {
// SMARTPHONES
@if $breakpoint == smartphone { // Smartphones (portrait and landscape) : Android, iPhone and Palm Pre
@media
only screen and (min-device-width : $smartphone-width-min) and (max-device-width : $smartphone-width-max),
only screen and (min-width : $smartphone-width-min) and (max-width : $smartphone-width-max)
{ @content; }
}
@if $breakpoint == smartphone-landscape { // Smartphones (landscape) : Android, iPhone and Palm Pre
$smartphone-width-min-landscape: $smartphone-width-min + 1;
@media
only screen and (min-width : $smartphone-width-min-landscape)
{ @content; }
}
@if $breakpoint == smartphone-portrait { // Smartphones (portrait) : Android, iPhone and Palm Pre
@media
only screen and (max-width : $smartphone-width-min)
{ @content; }
}
@if $breakpoint == smartphone-hires { // Smartphone + HiRes/Retina Screen
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width : $smartphone-width-min) and (max-width : $smartphone-width-max),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width : $smartphone-width-min) and (max-width : $smartphone-width-max),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width : $smartphone-width-min) and (max-width : $smartphone-width-max),
only screen and ( min-device-pixel-ratio: 2) and (min-width : $smartphone-width-min) and (max-width : $smartphone-width-max),
only screen and ( min-resolution: 192dpi) and (min-width : $smartphone-width-min) and (max-width : $smartphone-width-max),
only screen and ( min-resolution: 2dppx) and (min-width : $smartphone-width-min) and (max-width : $smartphone-width-max)
{ @content; }
}
@if $breakpoint == smartphone-iphone4 { // Smartphone - iPhone 4 Specific
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)
{ @content; }
}
// TABLETS
@if $breakpoint == tablet { // Tablet, iPad
@media
only screen and (min-device-width : $tablet-width-min) and (max-device-width : $tablet-width-max),
only screen and (min-width : $tablet-width-min) and (max-width : $tablet-width-max)
{ @content; }
}
@else if $breakpoint == tablet-landscape { // iPads (landscape)
@media only screen and (min-device-width : $tablet-width-min) and (max-device-width : $tablet-width-max) and (orientation : landscape)
{ @content; }
}
@else if $breakpoint == tablet-portrait { // Tablet, iPads (portrait)
@media only screen and (min-device-width : $tablet-width-min) and (max-device-width : $tablet-width-max) and (orientation : portrait)
{ @content; }
}
@if $breakpoint == tablet-hires { // Tablet, iPad + Retina
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width : $tablet-width-min) and (max-device-width : $tablet-width-max),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-device-width : $tablet-width-min) and (max-device-width : $tablet-width-max),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-device-width : $tablet-width-min) and (max-device-width : $tablet-width-max),
only screen and ( min-device-pixel-ratio: 2) and (min-device-width : $tablet-width-min) and (max-device-width : $tablet-width-max),
only screen and ( min-resolution: 192dpi) and (min-device-width : $tablet-width-min) and (max-device-width : $tablet-width-max),
only screen and ( min-resolution: 2dppx) and (min-device-width : $tablet-width-min) and (max-device-width : $tablet-width-max)
{ @content; }
}
@if $breakpoint == desktop {
@media
only screen and (min-width : ($tablet-width-max + 1))
{ @content; }
}
// PRINT
@if $breakpoint == print {
@media
only print
{ @content; }
}
}