Started header.

This commit is contained in:
Etienne Werly 2023-06-09 03:12:16 +02:00
parent 6428597dde
commit ccc0bf7afd
5 changed files with 44 additions and 3 deletions

View file

@ -26,7 +26,9 @@ library
Kit.Atoms.BreakpointQueries
Kit.Atoms.Button
Kit.Atoms.ButtonLink
Kit.Atoms.Container
Kit.Atoms.Fonts
Kit.Atoms.Header
Kit.Atoms.Stylesheet
Kit.Atoms.Typography
Kit.Constants.Breakpoints

View file

@ -0,0 +1,16 @@
module Kit.Atoms.Container
( container
) where
import Clay
import Core.Components
import Text.Blaze.Html5 as H
import Text.Blaze.Html5.Attributes as A
css :: Css
css = element ".container" ? do
paddingLeft <> paddingRight $ px 15
marginLeft <> marginRight $ auto
container :: Component (Html -> Html)
container = new "container" css $ H.div H.! class_ "container"

17
src/Kit/Atoms/Header.hs Normal file
View file

@ -0,0 +1,17 @@
module Kit.Atoms.Header
( Kit.Atoms.Header.header
) where
import Clay as C
import Core.Components
import Kit.Constants.Colors
import Text.Blaze.Html5 as H
css :: Css
css = C.header ? do
paddingTop <> paddingBottom $ px 30
backgroundColor $ grays @ 90
borderTop (px 10) solid (primary @ 20)
header :: Component (Html -> Html)
header = new "header" css H.header

View file

@ -2,7 +2,7 @@ module Kit.Molecules.DefaultCss
( defaultCss
) where
import Clay
import Clay as C
import qualified Clay.Pseudo as P
import Core.Components
import Kit.Atoms.Stylesheet
@ -15,9 +15,9 @@ css :: Css
css = do
star # P.root ? do
defaultFontStyle
margin nil nil nil nil
color (primary @ 10)
backgroundColor (primary @ 45)
C.body ? margin nil nil nil nil
headings
defaultCss :: Component Html

View file

@ -7,13 +7,19 @@ import Core.Components
import Core.Render ( putHtml )
import Kit.Atoms.Button
import Kit.Atoms.ButtonLink
import Kit.Atoms.Container
import Kit.Atoms.Header as K
import Kit.Organisms.Head
import Routes
import Text.Blaze.Html5 as H
hiding ( main )
indexBody :: Component Html
indexBody = mconcat [buttonWithText "Click!", buttonLink Blog "All posts"]
indexBody = mconcat
[ K.header <*> (container <*> pure (h1 "My site"))
, buttonWithText "Click!"
, buttonLink Blog "All posts"
]
indexTemplate :: Component Html
indexTemplate =