Responsive home page

1 files changed, 20 insertions, 7 deletions

diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index dfe19b0..26c1a42 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -15,9 +15,10 @@ import qualified Design.Form as Form
 import qualified Design.Dialog as Dialog
 import qualified Design.Tooltip as Tooltip
 
-import Design.Color as Color
-import Design.Helper as Helper
-import Design.Constants as 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
 
 globalDesign :: Text
 globalDesign = renderWith compact [] global
@@ -35,13 +36,25 @@ global = do
   body ? do
     minWidth (px 320)
     fontFamily ["Cantarell"] [sansSerif]
+    Media.tablet $ do
+      fontSize (px 15)
+      button ? fontSize (px 15)
+      input ? fontSize (px 15)
+    Media.mobile $ do
+      fontSize (px 14)
+      button ? fontSize (px 14)
+      input ? fontSize (px 14)
 
   a ? cursor pointer
 
   h1 ? do
-    fontSize (px 24)
     color Color.chestnutRose
-    "margin-bottom" -: "3vh"
+    marginBottom (em 1)
+    lineHeight (em 1.2)
+
+    Media.desktop $ fontSize (px 24)
+    Media.tablet $ fontSize (px 22)
+    Media.mobile $ fontSize (px 20)
 
   ul ? do
     "margin-bottom" -: "3vh"
@@ -57,7 +70,7 @@ global = do
         "margin-top" -: "2vh"
 
   ".dialog" ? ".content" ? button ? do
-    ".confirm" & Helper.defaultButton Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
-    ".undo" & Helper.defaultButton Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
+    ".confirm" & Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+    ".undo" & Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
 
   svg ? height (pct 100)