Setup personal page with Hakyll

1 files changed, 36 insertions, 0 deletions

diff --git a/css/Media.hs b/css/Media.hs
new file mode 100644
index 0000000..f9b56e1
--- /dev/null
+++ b/css/Media.hs
@@ -0,0 +1,36 @@
+module Media
+  ( mobile
+  , mobileTablet
+  , tablet
+  , tabletDesktop
+  , desktop
+  ) where
+
+import           Clay            hiding (query)
+import qualified Clay
+import qualified Clay.Media      as Media
+import           Clay.Stylesheet (Feature)
+
+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 LengthUnit
+mobileTabletLimit = (px 520)
+
+tabletDesktopLimit :: Size LengthUnit
+tabletDesktopLimit = (px 950)