Responsive header

1 files changed, 28 insertions, 15 deletions

diff --git a/src/server/Design/Media.hs b/src/server/Design/Media.hs
index df91505..d61a8e1 100644
--- a/src/server/Design/Media.hs
+++ b/src/server/Design/Media.hs
@@ -1,23 +1,36 @@
 module Design.Media
-  ( smallScreen
-  , largeScreen
+  ( mobile
+  , mobileTablet
+  , tablet
+  , tabletDesktop
+  , desktop
   ) where
 
-import Clay
-import Clay.Stylesheet
-import qualified Clay.Media as M
+import Clay hiding (query)
+import qualified Clay
+import Clay.Stylesheet (Feature)
+import qualified Clay.Media as Media
 
-limit :: Integer
-limit = 950
+mobile :: Css -> Css
+mobile = query [Media.maxWidth mobileTabletLimit]
 
-smallFeature :: [Feature]
-smallFeature = [M.maxWidth (px limit)]
+mobileTablet :: Css -> Css
+mobileTablet = query [Media.maxWidth tabletDesktopLimit]
 
-largeFeature :: [Feature]
-largeFeature = [M.minWidth (px limit)]
+tablet :: Css -> Css
+tablet = query [Media.minWidth mobileTabletLimit, Media.maxWidth tabletDesktopLimit]
 
-smallScreen :: Css -> Css
-smallScreen = query M.screen smallFeature
+tabletDesktop :: Css -> Css
+tabletDesktop = query [Media.minWidth mobileTabletLimit]
 
-largeScreen :: Css -> Css
-largeScreen = query M.screen largeFeature
+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)