aboutsummaryrefslogtreecommitdiff
path: root/src/server/Design
diff options
context:
space:
mode:
Diffstat (limited to 'src/server/Design')
-rw-r--r--src/server/Design/Header.hs59
1 files changed, 38 insertions, 21 deletions
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index a45a7b2..8a348ad 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -4,6 +4,8 @@ module Design.Header
( headerDesign
) where
+import Data.Monoid ((<>))
+
import Clay
import Design.Color as C
@@ -13,28 +15,43 @@ headerDesign :: Css
headerDesign =
header ? do
- let headerHeight = 80
- let sidePercent = (pct blockPercentMargin)
+ let headerHeight = px 80
+ let headerPadding = px 20
+ let darkenedRed = C.red +. 10
+ lineHeight headerHeight
+ height headerHeight
+ marginBottom blockMarginBottom
+ position relative
- h1 ? do
- fontSize (px 45)
- textAlign (alignSide sideLeft)
- backgroundColor C.red
+ button ? do
color C.white
- lineHeight (px headerHeight)
- marginBottom blockMarginBottom
- paddingLeft sidePercent
+ backgroundColor C.red
+ hover & backgroundColor darkenedRed
+ focus & backgroundColor darkenedRed
+
+ ".title" ? do
+ width (pct 100)
+ height (pct 100)
+
+ h1 ? do
+ fontSize (px 35)
+ textAlign (alignSide sideLeft)
+ paddingLeft headerPadding
+ paddingRight headerPadding
- button # ".icon" ? do
- let iconHeight = 50
- let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2)
+ ".signedPanel" ? do
+ float floatRight
+ height (pct 100)
+ display flex
position absolute
- top (px sideMargin)
- right sidePercent
- height (px iconHeight)
- lineHeight (px iconHeight)
- backgroundColor C.red
- color C.white
- fontSize iconFontSize
- hover & i ? transform (scale 1.2 1.2)
- focus & i ? transform (scale 1.2 1.2)
+ top (px 0)
+ right (px 0)
+
+ ".user" <> ".icon" ? do
+ paddingLeft headerPadding
+ paddingRight headerPadding
+ borderLeft solid (px 1) darkenedRed
+
+ ".icon" ? do
+ fontSize iconFontSize
+ borderRight solid (px 1) darkenedRed