Responsive home page

1 files changed, 33 insertions, 11 deletions

diff --git a/src/server/Design/LoggedIn/Home/Pages.hs b/src/server/Design/LoggedIn/Home/Pages.hs
index 1d5899f..71f3254 100644
--- a/src/server/Design/LoggedIn/Home/Pages.hs
+++ b/src/server/Design/LoggedIn/Home/Pages.hs
@@ -6,25 +6,47 @@ module Design.LoggedIn.Home.Pages
 
 import Clay
 
-import Design.Color as Color
-import Design.Helper
-import Design.Constants
+import qualified Design.Color as Color
+import qualified Design.Helper as Helper
+import qualified Design.Constants as Constants
+import qualified Design.Media as Media
 
 design :: Css
 design = do
-  padding (px 40) (px 30) (px 30) (px 30)
-  textAlign (alignSide (sideCenter))
-  clearFix
+  textAlign (alignSide sideCenter)
+  Helper.clearFix
+
+  Media.desktop $ do
+    padding (px 40) (px 30) (px 30) (px 30)
+
+  Media.tablet $ do
+    padding (px 30) (px 30) (px 30) (px 30)
+
+  Media.mobile $ do
+    padding (px 20) (px 0) (px 20) (px 0)
+    lineHeight (px 40)
 
   ".page" ? do
-    defaultButton Color.white Color.dustyGray (px 50) focusDarken
     display inlineBlock
-    border solid (px 2) Color.dustyGray
-    marginRight (px 10)
-    paddingLeft (px 10)
-    paddingRight (px 10)
     fontWeight bold
 
+    Media.desktop $ do
+      Helper.button Color.white Color.dustyGray (px 50) Constants.focusDarken
+
+    Media.tabletDesktop $ do
+      border solid (px 2) Color.dustyGray
+      marginRight (px 10)
+
+    Media.tablet $ do
+      Helper.button Color.white Color.dustyGray (px 40) Constants.focusDarken
+      fontSize (px 15)
+
+    Media.mobile $ do
+      Helper.button Color.white Color.dustyGray (px 30) Constants.focusDarken
+      fontSize (px 12)
+      border solid (px 1) Color.dustyGray
+      marginRight (px 5)
+
     ":not(.current)" & cursor pointer
 
     ".current" & do