module Tintin.Html.Style where
import Tintin.Core as Core hiding (( & ), rem, (|>))
import Clay
import qualified Clay.Media as Media
require Tintin.Domain.Project
data Style
style :: Project.Info -> Text
style info = toText . render $ do
let (themeColorName, themeColorCode) = themeColor $ Project.color info
html ? do
height (pct 100)
minHeight (pct 100)
body ? do
height (pct 100)
minHeight (pct 100)
fontFamily [Project.bodyFont info] [sansSerif]
fontSize (em 1)
overflowX hidden
"a" ? do
color $ shade 0.3 themeColorCode
"a:hover" ? do
color $ shade 0.1 themeColorCode
forM_ (zip [(0::Double)..] [h1, h2, h3]) $ \(n, x) -> x ? do
fontFamily [Project.titleFont info] [sansSerif]
fontWeight $ weight $ Project.titleFontWeight info
fontSize (em (2.441 Core.** n))
h1 ? fontSize (em 2.441)
h2 ? fontSize (em 1.953)
h3 ? fontSize (em 1.563)
blockquote ? do
borderLeft solid (px 4) "#DDD"
paddingLeft (rem 1)
color codeTextColor
".next-prev" ? do
marginTop (pct 5)
marginBottom (pct 5)
"#header-container" ? do
marginTop (rem 5)
marginBottom (rem 5)
textAlign center
"img" ? do
maxHeight (rem 7)
".cover-heading" ? do
fontSize (pct 800)
marginBottom (rem 1.563)
".cover-container" ? do
backgroundColor themeColorCode
".watermark" ? do
position absolute
top (px 0)
left (px 0)
maxHeight (rem 1.2504)
marginTop (rem 1.2504)
marginLeft (rem 1.2504)
".cover-heading-subtitle" ? do
marginTop (rem 3)
fontSize (rem 1.953)
color $ contrastingColorFor themeColorCode
".vertical-auto" ? do
marginTop auto
marginBottom auto
".content" ? do
marginTop (pct 5)
marginBottom (pct 5)
"#wrapper" ? do
paddingLeft (px 0)
transition "all" (sec 0.5) ease (sec 0)
".toggled" & do
paddingLeft (px 250)
"#sidebar-wrapper" ? do
width (px 250)
"#page-content-wrapper" & do
position absolute
marginRight (px (-250))
"#page-content-wrapper" ? do
width (pct 100)
position absolute
marginTop (rem 3)
padding (px 15) (px 15) (px 15) (px 15)
img ? do
maxWidth (pct 100)
"#sidebar-wrapper" ? do
zIndex 1000
position fixed
left (px 250)
width (px 0)
marginLeft (px (-250))
overflowY hidden
overflowX hidden
transition "all" (sec 0.5) ease (sec 0)
".sidebar-nav" ? do
position absolute
top (px 0)
width (px 250)
margin (px 0) (px 0) (px 0) (px 0)
padding (px 0) (px 0) (px 0) (px 0)
listStyleType none
"li" ? do
textIndent (indent $ px 20)
lineHeight (px 40)
"a" ? do
display block
textDecoration none
fontWeight bold
color $ shade 0.6 themeColorCode
"a:hover" ? do
textDecoration none
color $ shade 0.7 themeColorCode
".tintin-fg-active" ? do
color white
"#menu-toggle" ? do
position absolute
img ? do
position absolute
left (px 0)
".rotateIn" ? do
zIndex 999
".tintin-doc-topbar" ? do
height (rem 3)
a ? do
marginLeft (rem 1)
marginTop (rem 0)
width (rem 1.5)
".filter-gray" ? do
position relative
bottom (px ( 3 ))
marginLeft (rem 0.25)
marginRight (rem 1)
height (rem 1)
".footer-theam" ? do
position relative
bottom (px $ 1)
marginLeft (rem $ -0.25)
height (rem 1.75)
".tintin-doc-footer" ? do
bottom (px 0)
height (rem $ -15)
width (pct 100)
color footerTextColor
".main-container" ? do
minHeight (pct 100)
position relative
"#content" ? do
minHeight (pct 95)
".sidebar-nav" |> ".sidebar-brand" ? do
height (rem 3)
fontSize (rem 2)
fontFamily [Project.titleFont info] [sansSerif]
fontWeight $ weight $ Project.titleFontWeight info
paddingTop (rem 2.5)
paddingBottom (rem 2.5)
marginBottom (rem 1.5)
img ? do
height (rem 1.5)
".tintin-navbar" ? do
fontWeight bold
backgroundColor $ shade 0.2 themeColorCode
".left-part" ? do
important $ paddingLeft (px 0)
ul ? do
marginTop (rem 1)
listStyleType none
li ? do
marginRight (rem 1)
display inline
a ? do
color $ shade 0.6 themeColorCode
"a:hover" ? do
textDecoration none
color $ shade 0.7 themeColorCode
".tintin-navbar-active" ? do
a ? do
color $ contrastingColorFor themeColorCode
"a:hover" ? do
textDecoration none
color . shade 0.2 $ contrastingColorFor themeColorCode
".tintin-bg-70" ? do
backgroundColor $ shade 0.2 themeColorCode
(element $ ".tintin-bg-" <> themeColorName) ? do
backgroundColor themeColorCode
(element $ ".tintin-fg-" <> themeColorName) ? do
color themeColorCode
".tintin-fg-active" ? do
color white
".tintin-fg-disabled" ? do
color black
footer ? do
position relative
bottom (px 0)
left (px 0)
width (pct 100)
paddingTop (px 30)
paddingBottom (px 30)
color $ contrastingColorFor themeColorCode
backgroundColor $ shade 0.2 themeColorCode
textAlign center
a ? do
color $ shade 0.6 themeColorCode
"a:hover" ? do
textDecoration none
color $ shade 0.7 themeColorCode
".author" ? do
marginTop (em 1.2)
fontSize (em 1.2)
".site-generated-message" ? do
fontSize (em 0.8)
marginTop (em 3)
marginBottom (em 3)
".container" ? do
maxWidth (rem 50)
query Media.screen [Media.minWidth (px 768)] $ do
"#wrapper" ? do
paddingLeft (px 0)
".toggled" ? do
paddingLeft (px 250)
"#sidebar-wrapper" ? do
width (px 250)
"#page-content-wrapper" ? do
position relative
marginRight (px 0)
"#sidebar-wrapper" ? do
width (px 0)
"#page-content-wrapper" ? do
padding (px 20) (px 20) (px 20) (px 20)
position relative
themeColor :: Project.Color -> (Text, Color)
themeColor (Project.HexColor colorCode) = ("custom" , fromString $ toString colorCode)
themeColor Project.Purple = ("purple" , "#9F76B4")
themeColor Project.LightGreen = ("lightgreen" , "#A4CB58")
themeColor Project.DarkGreen = ("darkgreen" , "#3C8B6A")
themeColor Project.Blue = ("blue" , "#94C1E8")
themeColor Project.DarkBlue = ("darkblue" , "#007C99")
themeColor Project.Bronze = ("bronze" , "#A4A27A")
themeColor Project.DarkOrange = ("darkorange" , "#FF6602")
themeColor Project.LightOrange = ("lightorange", "#FAA73E")
themeColor Project.Red = ("red" , "#D30228")
themeColor Project.Grey = ("grey" , "#4D4D4D")
codeTextColor :: Color
codeTextColor = "#777"
blackish :: Color
blackish = "#212529"
footerTextColor :: Color
footerTextColor = rgba 0 0 0 0.30
contrastingColorFor :: Color -> Color
contrastingColorFor color =
case soulFor color of
Light -> blackish
Darkness -> white
shade :: Float -> Color -> Color
shade percent color =
case soulFor color of
Light -> Clay.darken percent color
Darkness -> Clay.lighten percent color
data Soul = Darkness | Light
soulFor :: Color -> Soul
soulFor (Clay.Rgba red green blue _) =
if ((fromIntegral (red + green + blue) / 3) > midTone)
then Light
else Darkness
where
midTone = 128.0
soulFor c = soulFor $ Clay.toRgba c