From ba33dfef23d070bfff92d6322808507c1b7d2814 Mon Sep 17 00:00:00 2001
From: Joris
Date: Wed, 29 Jun 2016 23:33:40 +0200
Subject: Responsive home page

---
 src/server/Design/LoggedIn/Home/Pages.hs | 44 ++++++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 11 deletions(-)

(limited to 'src/server/Design/LoggedIn/Home/Pages.hs')

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
-- 
cgit v1.2.3