diff --git a/src/Tintin/ConfigurationLoading.hs b/src/Tintin/ConfigurationLoading.hs --- a/src/Tintin/ConfigurationLoading.hs +++ b/src/Tintin/ConfigurationLoading.hs @@ -86,6 +86,7 @@ projectSynopsis = (tintinConfig & getFieldValue "synopsis") <|> synopsis projectGithub = (tintinConfig & getFieldValue "github") <|> github <|> location projectAuthor = (tintinConfig & getFieldValue "author") <|> author + authorWebsite = (tintinConfig & getFieldValue "authorWebsite") tintinColor = tintinConfig & getFieldValue "color" tintinLogo = tintinConfig & getFieldValue "logo" tintinTitleFont = (tintinConfig & getFieldValue "titleFont") <|> (Just $ fromString "Montserrat") @@ -98,7 +99,8 @@ { name = Unsafe.fromJust projectName , synopsis = Unsafe.fromJust projectSynopsis , githubLink = parseGithubUrl <$> projectGithub - , githubAuthor = projectAuthor + , author = projectAuthor + , authorWebsite = authorWebsite , color = makeColor $ Unsafe.fromJust tintinColor , logoUrl = tintinLogo , titleFont = Unsafe.fromJust tintinTitleFont diff --git a/src/Tintin/Domain/Project.hs b/src/Tintin/Domain/Project.hs --- a/src/Tintin/Domain/Project.hs +++ b/src/Tintin/Domain/Project.hs @@ -32,7 +32,8 @@ , synopsis :: Text , color :: Color , githubLink :: Maybe Text - , githubAuthor :: Maybe Text + , author :: Maybe Text + , authorWebsite :: Maybe Text , logoUrl :: Maybe Text , titleFont :: Text , titleFontWeight :: Integer diff --git a/src/Tintin/Html/Style.hs b/src/Tintin/Html/Style.hs --- a/src/Tintin/Html/Style.hs +++ b/src/Tintin/Html/Style.hs @@ -12,6 +12,7 @@ style :: Project.Info -> Text style info = toText . render $ do let (themeColorName, themeColorCode) = themeColor $ Project.color info + html ? do height (pct 100) minHeight (pct 100) @@ -22,6 +23,11 @@ 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] @@ -35,7 +41,7 @@ blockquote ? do borderLeft solid (px 4) "#DDD" paddingLeft (rem 1) - color "#777" + color codeTextColor ".next-prev" ? do marginTop (pct 5) @@ -44,14 +50,17 @@ "#header-container" ? do marginTop (rem 5) marginBottom (rem 5) + textAlign center + "img" ? do + maxHeight (rem 7) + ".cover-heading" ? do fontSize (pct 800) - maxHeight (rem 6) marginBottom (rem 1.563) ".cover-container" ? do - backgroundColor (rgba 255 255 255 0.0) + backgroundColor themeColorCode ".watermark" ? do position absolute @@ -64,6 +73,7 @@ ".cover-heading-subtitle" ? do marginTop (rem 3) fontSize (rem 1.953) + color $ contrastingColorFor themeColorCode ".vertical-auto" ? do marginTop auto @@ -117,18 +127,12 @@ display block textDecoration none fontWeight bold - ".tintin-fg-disabled" ? do - ":hover" & do - "mix-blend-mode" -: "normal" - Clay.filter $ invert (pct 0) - textDecoration none - color black + color $ shade 0.6 themeColorCode + "a:hover" ? do + textDecoration none + color $ shade 0.7 themeColorCode ".tintin-fg-active" ? do - ":hover" & do - "mix-blend-mode" -: "normal" - Clay.filter $ invert (pct 0) - textDecoration none - color white + color white "#menu-toggle" ? do position absolute @@ -144,8 +148,6 @@ marginLeft (rem 1) marginTop (rem 0) width (rem 1.5) - img ? do - Clay.filter (invert $ pct 70) ".filter-gray" ? do position relative @@ -153,20 +155,18 @@ marginLeft (rem 0.25) marginRight (rem 1) height (rem 1) - Clay.filter (brightness 0.75) ".footer-theam" ? do position relative bottom (px $ 1) marginLeft (rem $ -0.25) height (rem 1.75) - Clay.filter (invert (pct 75)) ".tintin-doc-footer" ? do bottom (px 0) height (rem $ -15) width (pct 100) - color (rgba 0 0 0 0.30) + color footerTextColor ".main-container" ? do minHeight (pct 100) @@ -188,7 +188,7 @@ ".tintin-navbar" ? do fontWeight bold - backgroundColor (rgba 255 255 255 0.15) + backgroundColor $ shade 0.2 themeColorCode ".left-part" ? do important $ paddingLeft (px 0) ul ? do @@ -198,28 +198,20 @@ marginRight (rem 1) display inline a ? do - color black - Clay.filter $ invert (pct 35) - "mix-blend-mode" -: "difference" + color $ shade 0.6 themeColorCode "a:hover" ? do - "mix-blend-mode" -: "normal" - Clay.filter $ invert (pct 0) textDecoration none - color black + color $ shade 0.7 themeColorCode ".tintin-navbar-active" ? do a ? do - "mix-blend-mode" -: "normal" - Clay.filter $ invert (pct 0) - color white + color $ contrastingColorFor themeColorCode "a:hover" ? do - "mix-blend-mode" -: "normal" - Clay.filter $ invert (pct 0) textDecoration none - color white + color . shade 0.2 $ contrastingColorFor themeColorCode ".tintin-bg-70" ? do - backgroundColor (rgba 255 255 255 0.15) + backgroundColor $ shade 0.2 themeColorCode (element $ ".tintin-bg-" <> themeColorName) ? do backgroundColor themeColorCode @@ -228,13 +220,11 @@ color themeColorCode ".tintin-fg-active" ? do - color (rgba 255 255 255 1.0) + color white ".tintin-fg-disabled" ? do color black - Clay.filter $ invert (pct 35) - "mix-blend-mode" -: "difference" footer ? do position relative @@ -243,6 +233,24 @@ 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) @@ -267,15 +275,46 @@ themeColor :: Project.Color -> (Text, Color) -themeColor (Project.HexColor colorCode) = ("custom", fromString $ toString colorCode) -themeColor Project.Purple = ("purple" , "#9F76B4") +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.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 = ("l ", "#FAA73E") -themeColor Project.Red = ("red" , "#D30228") -themeColor Project.Grey = ("grey" , "#4D4D4D") +themeColor Project.LightOrange = ("lightorange", "#FAA73E") +themeColor Project.Red = ("red" , "#D30228") +themeColor Project.Grey = ("grey" , "#4D4D4D") +codeTextColor :: Color +codeTextColor = "#777" + +blackish :: Color -- This is the default dark grey color from Boostrap +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 diff --git a/src/Tintin/Html/Templating.hs b/src/Tintin/Html/Templating.hs --- a/src/Tintin/Html/Templating.hs +++ b/src/Tintin/Html/Templating.hs @@ -60,7 +60,7 @@ toHtmlRaw $ Project.content page div_ [class_ "tintin-doc-footer clear-fix"] $ do nextPrev context - siteGenerated + footer info tintinPostInit nextPrev :: Project.Context -> Html () @@ -75,17 +75,27 @@ a_ [href_ $ Project.refFilename next] $ do ( toHtml $ "Next: " <> Project.refTitle next <> " >") -siteGenerated = do - div_ [class_ "float-right"] $ do - div_ [class_ "d-inline", style_ "float: left"] $ do - p_ [class_ ""] "Site generated with " - a_ [ style_ "float: left", href_ "https://theam.github.io/tintin"] $ do - img_ [ class_ "filter-gray", src_ $ asset "logo.svg" ] - div_ [class_ "clear-fix float-right"] $ do - span_ [style_ "float:left"] $ toHtmlRaw ("— © 2018 " :: Text) - a_ [class_ "float:left", href_ "http://theam.io"] $ - img_ [class_ "footer-theam", src_ "http://theam.io/logo_theam.png"] +footer :: Project.Info -> Html () +footer info = + footer_ [] $ + div_ [class_ "container"] $ + div_ [class_ "row"] $ + div_ [class_ "col"] $ do + when (isJust $ Project.author info) $ do + let author = fromJust $ Project.author info + p_ [class_ "author"] $ do + "Developed by " + case Project.authorWebsite info of + Just website -> a_ [ href_ website, target_ "blank" ] (toHtml author) + Nothing -> span_ [] $ toHtml author + p_ [class_ "site-generated-message"] $ do + "Site generated with " + a_ [ href_ "https://theam.github.io/tintin", class_ "tintin-logo" ] $ + img_ [ class_ "filter-gray", src_ $ asset "logo.svg" ] + span_ [] $ toHtmlRaw ("— © 2019 " :: Text) + a_ [ href_ "https://www.theagilemonkeys.com"] "The Agile Monkeys" + wrapHome :: Project.Info -> Maybe Project.PageRef -> Project.Page -> Text wrapHome info nextRef page = toText . renderText $ do doctypehtml_ $ do @@ -114,7 +124,7 @@ div_ [] $ do toHtmlRaw $ Project.content page nextPrev (Project.Context Nothing nextRef) - footer + footer info tintinPostInit where navbar = @@ -126,7 +136,9 @@ ul_ [class_ "left-part"] $ do li_ [class_ "tintin-navbar-active"] $ a_ [class_ "", href_ "index.html"] "Home" - let (page:_) = filter (\x -> "index.html" /= Project.filename x ) (Project.pages info) + let page = case filter (\x -> "index.html" /= Project.filename x ) (Project.pages info) of + p:_ -> p + [] -> error "At least two documentation pages required: index.md, and one other file." li_ [class_ ""] $ a_ [class_ "", href_ (Project.filename page)] "Docs" whenJust (Project.githubLink info) $ \ghlink -> @@ -135,21 +147,7 @@ li_ [class_ ""] $ a_ [class_ "", href_ $ "https://github.com/" <> ghlink] "View on GitHub" - footer = - footer_ [ class_ "tintin-bg-darkgrey tintin-fg-white"] $ - div_ [class_ "container"] $ - div_ [class_ "row"] $ do - div_ [class_ "col"] $ - p_ [class_ "tintin-fg-lightgrey"] $ - when (isJust $ Project.githubLink info) $ do - "Developed by " - a_ [ href_ $ "https://github.com/" <> (fromJust $ Project.githubAuthor info) - , class_ $ "tintin-fg-" <> bgColorNameOf info - ] (toHtml $ fromJust $ Project.githubAuthor info) - div_ [class_ "col", style_ ""] $ do - siteGenerated - tintinHeader :: Project.Info -> Project.Page -> Html () tintinHeader info@Project.Info {..} Project.Page {..} = head_ $ do @@ -170,7 +168,7 @@ meta_ [ name_ "twitter:description" , content_ synopsis ] - whenJust githubAuthor $ \author -> + whenJust author $ \author -> meta_ [ name_ "twitter:creator" , content_ author ] diff --git a/tintin.cabal b/tintin.cabal --- a/tintin.cabal +++ b/tintin.cabal @@ -1,13 +1,13 @@ -cabal-version: 1.12 +cabal-version: 1.12 --- This file has been generated from package.yaml by hpack version 0.31.1. +-- This file has been generated from package.yaml by hpack version 0.31.2. -- -- see: https://github.com/sol/hpack -- --- hash: 5809563abfa619872cbce79a1f04096fff76efea04b325cd64e797e4edc3b011 +-- hash: 63d4f643c74e68adb1d0b661c22bcdb67b8337b37a4bd0fb26b17a3f93dd39b9 name: tintin -version: 1.10.0 +version: 1.10.1 synopsis: A softer alternative to Haddock description: Please see the website category: Documentation @@ -15,7 +15,7 @@ bug-reports: https://github.com/theam/tintin/issues author: The Agile Monkeys maintainer: hackers@theam.io -copyright: 2018 Theam +copyright: 2020 Theam license: Apache-2.0 license-file: LICENSE.md build-type: Simple