blob: d61a8e108f996157933ff582b3333aed21d38b21 (
plain)
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
|
module Design.Media
( mobile
, mobileTablet
, tablet
, tabletDesktop
, desktop
) where
import Clay hiding (query)
import qualified Clay
import Clay.Stylesheet (Feature)
import qualified Clay.Media as Media
mobile :: Css -> Css
mobile = query [Media.maxWidth mobileTabletLimit]
mobileTablet :: Css -> Css
mobileTablet = query [Media.maxWidth tabletDesktopLimit]
tablet :: Css -> Css
tablet = query [Media.minWidth mobileTabletLimit, Media.maxWidth tabletDesktopLimit]
tabletDesktop :: Css -> Css
tabletDesktop = query [Media.minWidth mobileTabletLimit]
desktop :: Css -> Css
desktop = query [Media.minWidth tabletDesktopLimit]
query :: [Feature] -> Css -> Css
query = Clay.query Media.screen
mobileTabletLimit :: Size Abs
mobileTabletLimit = (px 520)
tabletDesktopLimit :: Size Abs
tabletDesktopLimit = (px 950)
|
