blog-rekahsoft-ca/clay/Header.hs

144 lines
3.8 KiB
Haskell
Raw Normal View History

-- (C) Copyright Collin J. Doering 2015
--
-- This program is free software: you can redistribute it and/or modify
-- it under the terms of the GNU General Public License as published by
-- the Free Software Foundation, either version 3 of the License, or
-- (at your option) any later version.
--
-- This program is distributed in the hope that it will be useful,
-- but WITHOUT ANY WARRANTY; without even the implied warranty of
-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-- GNU General Public License for more details.
--
-- You should have received a copy of the GNU General Public License
-- along with this program. If not, see <http://www.gnu.org/licenses/>.
-- File: Header.hs
-- Author: Collin J. Doering <collin.doering@rekahsoft.ca>
-- Date: Jan 9, 2015
{-# LANGUAGE OverloadedStrings #-}
module Header
( logoHeader
, navigation
, theHeader
) where
import Clay hiding (i, s, id)
import Prelude hiding (div, span, (**))
theHeader :: Css
theHeader = do
logoHeader
navigation
statusMessage
logoHeader :: Css
logoHeader = do
"#logo-background" ? do
backgroundColor "#cef" -- fallback background color
backgroundImage $ vGradient "#cef" "#cff"
sym2 padding (em 0.75) nil
"#logo" ? do
backgroundImage $ url "/images/logo-banner.svg"
backgroundRepeat noRepeat
backgroundPosition $ positioned (pct 50) (pct 50)
backgroundSize contain
height (px 175)
navigation :: Css
navigation = do
keyframesFromTo "nav-slide"
(backgroundPosition $ positioned nil nil)
(backgroundPosition $ positioned (px 304) nil)
"#nav" ? do
border solid (px 2) black
borderRightWidth 0
borderLeftWidth 0
backgroundImage $ url "/images/diagonal-stripes.png"
animation "nav-slide" (sec 5) linear (sec 0) infinite normal none
animationPlayState paused
"#nav" # ".loading" ?
animationPlayState running
"#nav-menu" ? do
textAlign $ alignSide sideCenter
marginBottom nil
li ? do
display inlineBlock
sym margin nil
sym2 padding (px 10) (em 3)
".menuitem" ? do
display block
color "#eee"
fontSize (em 1.5)
fontWeight bold
textDecoration none
textShadow (px 1) (px 1) nil black
transitionProperty "transform"
transitionDuration (ms 20)
".menuitem" # ":hover" ? do
color "#ddd"
transform $ scale 1.1 1.1
".menuitem" # ":active" ? do
transform $ scale 0.95 0.95
li # ".active" ? do
".menuitem" ? do
color "#fff"
textShadow (px 2) (px 2) nil black
transform $ scale 1.2 1.2
-- ".menuitem" # ":hover" ? do
-- transitionProperty "none" -- WHY? this doesn't seem to be needed.
".menuitem" # ":active" ? do
-- transitionProperty "none" -- WHY? this doesn't seem to be needed.
transform $ scale 1.1 1.1
a # ".rss-icon" ? do
display inlineBlock
position absolute
backgroundImage $ url "/images/rss-icon.png"
backgroundSize contain
sym borderRadius (px 5)
minHeight (px 25)
minWidth (px 25)
sym margin nil
top (px 7)
right (px 10)
a # ".rss-icon" # ":hover" ? do
transform $ scale 1.1 1.1
a # ".rss-icon" # ":active" ? do
transform $ scale 0.9 0.9
statusMessage :: Css
statusMessage = do
"#status" ? do
display none
border solid (px 1) black
borderTop solid nil black
borderBottomRightRadius (px 5) (px 5)
borderBottomLeftRadius (px 5) (px 5)
backgroundColor $ rgb 146 208 240
-- boxShadow (px 2) (px 5) (px 5) (px 2) "#888888"
boxShadow (px 2) (px 5) (px 5) "#888888"
sym padding (px 8)
marginBottom (em 1.25)
"#status" # ".error" ?
backgroundColor "#FD6F6F"
"#status" # ".success" ? do
backgroundColor $ rgb 136 211 136