module Lykah.Style where
import qualified Clay as C
import Clay hiding(table)
import qualified Clay.Media as M
import Clay.Stylesheet
import Control.Monad
import Data.Function hiding ((&))
import qualified Data.Text as T
import qualified Data.Text.Lazy as TL
import qualified Data.Text.Lazy.IO as TL
import Prelude hiding (div,span)
render' :: Css -> TL.Text
render' = renderWith compact []
pa :: Integer -> Clay.Stylesheet.StyleM ()
pa = (position absolute >>).zIndex
myCss :: T.Text
myCss = TL.toStrict $ render myCss'
smallScreen :: Css -> Css
smallScreen = queryOnly M.screen [M.maxWidth $ px threshold]
threshold :: Num a => a
threshold = 480
bw = False
myCss' :: Clay.Stylesheet.StyleM ()
myCss' = do
body ? do
margin nil nil nil nil
fAbel
fontSize $ px 16
fontWeight $ weight 300
".clearfix" & "::after" & do
clear both
display block
content $ stringContent ""
let clf w mw = do
img ? do
width $ px w
maxWidth $ pct 98
queryOnly M.screen [M.maxWidth $ px mw] $
float none
".imgP" & do
".halfBorder" & img ? do
borderRight solid (px 1) "#ccc"
borderBottom solid (px 1) "#ccc"
".border" & img ? do
border solid (px 1) "#ccc"
".clearfix" & do
marginBottom $ px 16
marginBottom $ px 0
img ? do
float floatLeft
marginRight $ px 20
marginBottom $ px 10
".normal" & clf 300 495
".small" & clf 220 415
".tiny" & clf 163 265
".right" & do
textAlign $ alignSide sideRight
marginRight $ px 5
display block
".keyValue" & do
td ? do
firstChild & do
width $ px 104
verticalAlign vAlignTop
a ? do
paddingRight $ px 7
"#v" & do position fixed
left nil >> right nil >> top nil
overflow hidden
height $ pct 100
video ? do pa 0
span ? do pa 1
bottom $ px 10
right $ px 10
"#content" & do
zIndex 1
marginTop $ px 100
smallScreen $ do
marginTop $ px 0
marginBottom $ px 30
marginLeft auto
marginRight auto
maxWidth $ px 670
".anchor" & do
position relative
a ? do
position absolute
top $ em $ 2
visibility hidden
".menu" & do
fontSize $ px 20
fJul
marginBottom $ px 4
let fe x = div ? ".fixedExtra" & x
fe $ do
paddingBottom $ px 11
paddingLeft $ px 9
display none
".title" & do
cursor pointer
".fixed" ? do
fe $ display block
(".collapsed" &) $ fe $ display none
div ? ".collapsedExtra" & do
float floatLeft
whiteSpace nowrap
".title" & do
paddingLeft $ px 5
display none
float none
overflow hidden
textOverflow overflowEllipsis
cursor pointer
".hamburger" & do
display none
span ? do
padding'' 1 4 16 4
verticalAlign $ vAlignTop
fontSize $ px 12
hover & cursor pointer
".menuItem1" ? do
clear clearLeft
".collapsed" ? do
fontSize $ px 16
".menuItem1" ? do
clear none
span ?".preload" & do
position fixed
left $ px $ 100
visibility hidden
".hidden" <? do
visibility hidden
a ? ".name" & ".short" <? do
display none
".visible" <? do
position relative
div <? do
boxShadow (px 1) (px 1) (px 2) $ setA 0.85 $ white
position absolute
background white
width $ pct 100
".fixed" & do
zIndex 3
top $ px 0
position fixed
width $ pct 100
".collapsed" & do
a ? ".name" & do
marginRight $ px $ 2
".long" <? display none
".short" <? display block
a ? ".inactive" & do
opacity 0
paddingLeft $ px 0
paddingRight $ px 0
marginLeft $ px 0
marginRight $ px 0
a ? ".active" & do
width auto
marginRight $ px 5
marginLeft $ px 5
div ? ".collapsedExtra" & do
".hamburger" & do
display block
div <? div <? do
paddingTop $ px 11
a <? do
queryOnly M.screen [M.maxWidth $ px threshold] $ do
width $ px 101
textAlign $ alignSide sideLeft
".finance" & do
width $ px 83
width auto
textAlign center
whiteSpace nowrap
let t = 0.5
tp = [("width", t, ease, 0)
,("padding", t, ease, 0)
,("margin", t, ease, 0)
,("opacity", t, easeOut, 0)
]
transitions tp
display inline
float floatLeft
marginRight $ px 14
marginLeft $ px 9
paddingLeft $ px 0
paddingRight $ px 0
paddingBottom $ px 0
marginBottom $ px 11
firstChild & do
width auto
transitionDuration 0
paddingRight $ px 8
cursor cursorDefault
fontWeight bold
hover & do
fontWeight bold
".active" & do
transitionDuration 0
fontWeight bold
"::after" & do
display block
content $ attrContent "data-text"
fontWeight bold;
height $ px 1
color transparent
overflow hidden
visibility hidden
marginBottom $ px $ 1
".body" & do
float floatLeft
padding' $ px 11
p ? marginTop (px 0)
marginBottom $ px 4
maxWidth $ px 550
".section" & do
float floatLeft
"#contentBody" & do
marginTop $ px 42
smallScreen $ do
marginTop $ px 22
a ? do
textDecoration underline
".title" ? do
fJul
clear clearLeft
marginRight $ px 4
marginBottom $ px 4
padding' $ px 11
cursor cursorDefault
fontWeight normal
h1 ? ".title" & do
fontSize $ px 41
marginTop $ px 0
maxWidth $ px 590
h2 ? ".title" & do
fontSize $ px 32
marginTop $ px 0
paddingLeft $ px 0
maxWidth $ px 590
h3 ? ".title" & do
fontSize $ px 23
marginTop $ px 0
paddingLeft $ px 0
h4 ? ".title" & do
fontSize $ px 19
marginTop $ px 0
paddingLeft $ px 0
".none" & display none
".entry" & do
paddingRight $ px 40
float floatLeft
position relative
".title" ? do
fontSize $ px 35
paddingBottom $ px 5
".single" & ".title" ? do
fontSize $ px 45
".date" ? do
fAbel
paddingTop $ px 2
fontSize $ px 13
textAlign end
footer ? do
fontSize $ px 11
textAlign center
paddingTop $ px 40
clear both
a ? do
textDecoration none
color black
".more" ? do
fontWeight $ weight 700
unless bw $
".menu" & do
".menuItem1" ? color
"#00c100"
".letterSpace" ? do
letterSpacing $ px 1
".menuItem2" ? color
"#a100ff"
".menuItem3" ? color
"#00b7e4"
".menuItem4" ? color "#e00000"
".menuItem5" ? color
"#deb200"
code ? do
padding' $ em 0.2
quad borderRadius $ px 3
backgroundColor "#f3f3f3"
fontSize $ pct 85
t = setA 0.625
shad = textShadow 0 0 (px 2) "#000000"
juliusFace = fontFace $ do
fontFamily ["Julius"] []
fontFaceSrc [FontFaceSrcUrl "fonts/JuliusSansOne-Regular.ttf"
$ Just TrueType
,FontFaceSrcLocal "Julius Sans One"
,FontFaceSrcLocal "JuliusSansOne-Regular"
]
fJul =
fontFamily ["Julius Sans One"] [sansSerif]
fAbel = fontFamily ["Merriweather"] [serif]
main = TL.putStr $ flip TL.snoc '\n' $ render myCss'
padding' = quad padding
quad y x = y x x x x
padding'' a b = on padding px a b `on` px
margin' x = margin x x x x
c1 = "#566f11"
c2 = "#729415"
c3 = "#3a500c"
c4 = "#1f3009"
c5 = "#8aa31b"
c6 = "#9ea856"
c7 = "#7f9b4b"
c8 = "#eff2a8"
c9 = "#f5fbe4"
c10 = "#9a722b"
c11 = "#6d754f"
c12 = "#583410"
c13 = "#dbb964"
c14 = "#e5de76"
c15 = "#afb697"
c16 = "#b9d471"
c17 = "#997b4b"
c18 = "#bfd8a5"
c19 = "#993511"
c20 = "#d86c20"
c201 ="#eb7523"
c21 = "#dbbb94"
c22 = "#d99529"
c23 = "#2f5546"
c24 = "#659488"
c25 = "#cc4444"
c26 = "#88cccc"
c261= "#00cccc"
c262= "#1480d0"
c263= "#0998f8"
ca 1 = "#00ff22"
ca 2 = "#0085e8"
ca 3 = "#ae00ff"
ca 4 = "#e82c0c"
ca 5 = "#ffcd00"
cb 1 = "#0cf574"
cb 2 = "#118ab2"
cb 3 = "#00ffe7"
cb 4 = "#ef476f"
cb 5 = "#ffe716"
pos [t,l,w,h] = top (px t) >> left (px l) >> width (px w) >> height (px h)