New head declaration, css tweaks on buttons and colours defined.

Changed the operator on Palettes to @ and @@ to avoid clashing with Clay
and Blaze.
The buttonLink is roughly styled.
New organism head: supply components to populate the head or just use
the default head to render global css easily.

etienne-moqueur.cabal

@@ -30,7 +30,10 @@ library
       Kit.Atoms.Stylesheet
       Kit.Atoms.Typography
       Kit.Constants.Breakpoints
+      Kit.Constants.Colors
       Kit.Constants.Spacing
+      Kit.Molecules.DefaultCss
+      Kit.Organisms.Head
       Kit.Templates.Index
       Kit.Templates.Post
       Routes

src/Core/Colors.hs

@@ -1,5 +1,6 @@
 module Core.Colors
   ( Ramp
+  , Data.Colour.Colour
   , rampC
   , rampCBy
   , ramp
@@ -40,7 +41,7 @@ slopeBy f (i, c) (i', c')
 newtype Ramp f a = Ramp (Array Int (f a))
   deriving (Eq, Show, Read)
 
--- |The non-overloaded version of 'rampC'. The provided function must be defined over [0,1] and be 0 at 1 and 1 at 1.
+-- |The non-overloaded version of 'rampC'. The provided function must be defined over [0,1] and be 0 at 0 and 1 at 1.
 rampCBy
   :: (Monoid (f a), AffineSpace f, Floating a)
   => (a -> a)
@@ -103,8 +104,8 @@ dissolve d (Ramp r) = Ramp $ Data.Colour.dissolve d <$> r
 
 -- |The 'Palette' class acts as a front-end for the rest of the code and allows to simply interface 'Ramp's values.
 class Palette p where
-  (!) :: p Float -> Int -> Color
-  (?) :: p Float -> Int -> String
+  (@) :: p Float -> Int -> Color
+  (@@) :: p Float -> Int -> String
 
 rgbToClay :: RGB Integer -> Float -> Color
 rgbToClay (RGB r g b) = rgba r g b
@@ -113,16 +114,16 @@ hex :: Int -> String
 hex w = intToDigit <$> [quot w 16, rem w 16]
 
 instance Palette (Ramp Colour) where
-  (Ramp a) ! i = rgbToClay (toInteger <$> toSRGB24 (a A.! i)) 1
-  (Ramp r) ? i = sRGB24show $ r A.! i
+  (Ramp a) @ i = rgbToClay (toInteger <$> toSRGB24 (a A.! i)) 1
+  (Ramp r) @@ i = sRGB24show $ r A.! i
 
 instance Palette (Ramp AlphaColour) where
-  (Ramp a) ! i = rgbToClay (toInteger <$> toSRGB24 c) alpha
+  (Ramp a) @ i = rgbToClay (toInteger <$> toSRGB24 c) alpha
    where
     c        = alphaCol `over` black
     alpha    = alphaChannel alphaCol
     alphaCol = a A.! i
-  (Ramp a) ? i = sRGB24show c ++ alphaCode
+  (Ramp a) @@ i = sRGB24show c ++ alphaCode
    where
     c         = alphaCol `over` black
     alphaCode = hex . floor . (* 255) . alphaChannel $ alphaCol

src/Kit/Atoms/ButtonLink.hs

@@ -5,6 +5,7 @@ module Kit.Atoms.ButtonLink
 import           Clay                          as C
                                          hiding ( (!) )
 import           Core.Components
+import           Kit.Constants.Colors
 import           Routes
 import           Text.Blaze.Html5              as H
 import           Text.Blaze.Html5.Attributes   as A
@@ -17,11 +18,18 @@ css :: Css
 css = C.a # byClass "button" ? do
   display inlineBlock
   padding (C.em 0.35) (C.em 1.2) (C.em 0.35) (C.em 1.2)
-  border (C.em 0.1) solid C.red
+  border (C.em 0.1) solid (grays @ 60)
   margin (C.em 0) (C.em 0.3) (C.em 0.3) (C.em 0)
-  -- borderRadius (C.em 0.12)
+  borderRadius (pct 4) (pct 4) (pct 4) (pct 4)
+  boxSizing borderBox
   textDecoration none
   textAlign center
+  transition "all" (sec 0.2) ease (sec 0)
+  color (grays @ 70)
+  hover & do
+    color (grays @ 100)
+    backgroundColor (grays @ 70)
+
 
 buttonLink :: Route -> Html -> Component Html
 buttonLink ref = new "buttonLink" css . buttonLinkHtml ref

src/Kit/Atoms/Stylesheet.hs

@@ -2,10 +2,15 @@ module Kit.Atoms.Stylesheet
   ( stylesheet
   ) where
 
+import           Clay                           ( Css )
+import           Core.Components
 import           Routes
 import           Text.Blaze.Html5
 import           Text.Blaze.Html5.Attributes
 
-stylesheet :: Route -> Html
-stylesheet route =
-  link ! rel "stylesheet" ! (href . stringValue . path $ route)
+stylesheet :: Route -> Css -> Component Html
+stylesheet route css =
+  new (path route) css
+    $ link
+    ! rel "stylesheet"
+    ! (href . stringValue . path $ route)

src/Kit/Constants/Colors.hs

@@ -0,0 +1,36 @@
+module Kit.Constants.Colors
+  ( Core.Colors.Palette(..)
+  , grays
+  , primary
+  , secondary
+  ) where
+
+import           Core.Colors
+
+grays, primary, secondary :: Ramp Colour Float
+
+grays = ramp []
+
+primary = ramp
+  [ (10, "#1C2636")
+  , (20, "#28374D")
+  , (30, "#324561")
+  , (40, "#435571")
+  , (50, "#607DA6")
+  , (60, "#8BA0C7")
+  , (70, "#A2BBE0")
+  , (80, "#CFE0FA")
+  , (90, "#E6EDFF")
+  ]
+
+secondary = ramp
+  [ (10, "#2E1E12")
+  , (20, "#523A1E")
+  , (30, "#75522B")
+  , (40, "#966C3F")
+  , (50, "#C28B52")
+  , (60, "#DB9F5E")
+  , (70, "#F7B46D")
+  , (80, "#FFCE99")
+  , (90, "#FFE7CC")
+  ]

src/Kit/Molecules/DefaultCss.hs

@@ -0,0 +1,24 @@
+module Kit.Molecules.DefaultCss
+  ( defaultCss
+  ) where
+
+import           Clay
+import qualified Clay.Pseudo                   as P
+import           Core.Components
+import           Kit.Atoms.Stylesheet
+import           Kit.Atoms.Typography
+import           Kit.Constants.Colors
+import           Routes
+import           Text.Blaze.Html5               ( Html )
+
+css :: Css
+css = do
+  star # P.root ? do
+    defaultFontStyle
+    margin nil nil nil nil
+    color (primary @ 10)
+    backgroundColor (primary @ 45)
+  headings
+
+defaultCss :: Component Html
+defaultCss = stylesheet DefaultStylesheet css

src/Kit/Organisms/Head.hs

@@ -0,0 +1,16 @@
+module Kit.Organisms.Head
+  ( headWith
+  , defaultHead
+  ) where
+
+import           Core.Components
+import           Kit.Molecules.DefaultCss
+import           Text.Blaze.Html5              as H
+import           Text.Blaze.Html5.Attributes   as A
+
+headWith :: Html -> [Component Html] -> Component Html
+headWith title css =
+  H.head <$> pure (H.title title <> meta ! charset "utf-8") <> mconcat css
+
+defaultHead :: Html -> Component Html
+defaultHead title = headWith title [defaultCss]

src/Kit/Templates/Index.hs

@@ -5,29 +5,19 @@ module Kit.Templates.Index
 
 import           Core.Components
 import           Core.Render                    ( putHtml )
-import           Css.Default
 import           Kit.Atoms.Button
 import           Kit.Atoms.ButtonLink
-import           Kit.Atoms.Stylesheet
+import           Kit.Organisms.Head
 import           Routes
 import           Text.Blaze.Html5              as H
                                          hiding ( main )
-import           Text.Blaze.Html5.Attributes   as A
 
-indexHtml :: Html -> Html
-indexHtml h = docTypeHtml $ do
-  H.head $ do
-    H.title "Very first try"
-    stylesheet DefaultStylesheet
-  body $ do
-    h
-
-index :: Component (Html -> Html)
-index = new "index" defaultCss indexHtml
+indexBody :: Component Html
+indexBody = mconcat [buttonWithText "Click!", buttonLink Blog "All posts"]
 
 indexTemplate :: Component Html
 indexTemplate =
-  index <*> buttonWithText "Click!" <> buttonLink Blog "All posts"
+  docTypeHtml <$> defaultHead "Very first try" <> (body <$> indexBody)
 
 main :: IO ()
 main = putHtml indexTemplate

src/Kit/Templates/Post.hs

@@ -5,25 +5,16 @@ module Kit.Templates.Post
 
 import           Core.Components
 import           Core.Render                    ( putHtml )
-import           Routes
-
-import           Kit.Atoms.Stylesheet
+import           Kit.Organisms.Head
 import           Text.Blaze.Html5              as H
                                          hiding ( main )
-import           Text.Blaze.Html5.Attributes   as A
-
-postHtml :: Html
-postHtml = docTypeHtml $ do
-  H.head $ do
-    H.title "$title$"
-    stylesheet DefaultStylesheet
-    meta ! charset "utf-8"
-  body $ do
-    h1 "$title$"
-    "$body$"
 
 postTemplate :: Component Html
-postTemplate = new "postTemplate" mempty postHtml
+postTemplate = docTypeHtml <$> defaultHead "$title$" <> pure
+  (body $ do
+    h1 "$title$"
+    "$body$"
+  )
 
 main :: IO ()
 main = putHtml postTemplate