From 89f52d0fcbcd1775af8a43e09e1de2c78b51c007 Mon Sep 17 00:00:00 2001 From: Ben Sima Date: Sat, 16 Jan 2021 11:38:07 -0500 Subject: Style SelectRepo page and all links I'm borrowing heavily from Basecamp.com, but I figure after enough itreation I will settle on something more unique. Anyway, copying Basecamp isn't so bad -- they are a great company after all! --- Biz/Devalloc.hs | 97 ++++++++++++++++++++++++++++++++++++++++++++------------- Biz/Look.hs | 9 ++++++ 2 files changed, 84 insertions(+), 22 deletions(-) diff --git a/Biz/Devalloc.hs b/Biz/Devalloc.hs index f2e514d..3584104 100644 --- a/Biz/Devalloc.hs +++ b/Biz/Devalloc.hs @@ -54,7 +54,7 @@ import Biz.Test ((@=?)) import qualified Biz.Test as Test import qualified CMark as Cmark import qualified CMark.Lucid as Cmark -import Clay (em, px, rem) +import Clay (em, px, rem, sec, (?)) import qualified Clay import qualified Control.Exception as Exception import Crypto.JOSE.JWK (JWK) @@ -453,47 +453,95 @@ htmlApp cooks kp cfg jwk oAuthArgs = let yellow = "#ffe000" let black = "#1d2d35" -- really a dark blue Biz.Look.fuckingStyle + Biz.Look.whenDark <| do - "body" Clay.? do + "body" ? do Clay.backgroundColor black + + "a:link" <> "a:visited" ? do + Clay.textDecorationColor Clay.white + Clay.color Clay.white + "a:hover" ? do + Clay.textDecorationColor yellow + Biz.Look.whenLight <| do - "body" Clay.? do + "body" ? do + Clay.color black + "a:link" <> "a:visited" ? do + Clay.textDecorationColor black Clay.color black - "body" Clay.? Biz.Look.fontStack - "nav" Clay.? do + "a:hover" ? do + Clay.textDecorationColor yellow + + "body" ? Biz.Look.fontStack + -- "a:link" <> "a:visited" <> "a:hover" + "a" ? do + Clay.transition "all" (sec 0.2) Clay.ease 0 + Clay.transitionProperties + [ "text-decoration-color", + "text-decoration-thickness", + "text-decoration-width" + ] + Clay.textDecoration Clay.underline + Biz.Look.textDecorationThickness (em 0.1) + Biz.Look.textDecorationWidth (em 0.1) + "a:hover" ? do + Clay.textDecorationColor yellow + Clay.textDecoration Clay.underline + Biz.Look.textDecorationThickness (em 0.2) + Biz.Look.textDecorationWidth (em 0.2) + "nav" ? do Clay.display Clay.flex Clay.justifyContent Clay.spaceBetween - "nav > ul" Clay.? do + "nav > ul" ? do Clay.display Clay.flex Clay.justifyContent Clay.flexEnd - Clay.listStyleType <| Clay.none + Clay.listStyleType Clay.none Clay.margin (Clay.px 0) 0 0 0 - "nav > ul > li" Clay.? do + "nav > ul > li" ? do Clay.padding 0 (px 5) 0 (px 5) - "#home" Clay.? do - "h1" Clay.? do + + "#home" ? do + Clay.textAlign Clay.center + "h1" ? do Clay.fontSize (Clay.rem 3) - "h1, h2" Clay.? do + "h1, h2" ? do Clay.textAlign Clay.center - "section" Clay.? do + "section" ? do Clay.padding (rem 3) 0 (rem 3) 0 - "a#try-button" <> "a#try-button:visited" Clay.? do + "a#try-button" <> "a#try-button:visited" ? do + Clay.transition "all" (sec 0.2) Clay.ease 0 + Clay.transitionProperties + ["color", "background-color", "border-color"] Clay.padding (em 0.5) (em 1) (em 0.5) (em 1) Clay.display Clay.flex Clay.flexDirection Clay.column Clay.margin (em 3) Clay.auto 0 Clay.auto Clay.width (px 250) + Clay.borderWidth (px 1) + Clay.borderStyle Clay.solid + Clay.borderColor black Clay.backgroundColor yellow Clay.color black Clay.textDecoration Clay.none Clay.justifyContent Clay.center Clay.alignItems Clay.center Clay.fontWeight Clay.bold - "small" Clay.? do + "small" ? do Clay.fontSize (px 10) - "a#try-button:hover" Clay.? do + "a#try-button:hover" ? do + Clay.borderColor yellow Clay.color yellow Clay.backgroundColor black + + "#selectRepo" ? do + "ul" ? do + Clay.listStyleType Clay.none + "li" ? do + Clay.borderBottomWidth (px 1) + Clay.borderBottomColor "#999" -- TODO: more subtle gradient? + Clay.borderBottomStyle Clay.solid + Clay.padding (em 1.5) 0 (em 1.5) 0 } -- | The front page pitch. Eventually I'd like to load the content from markdown @@ -625,20 +673,25 @@ instance Lucid.ToHtml SelectRepo where toHtmlRaw = Lucid.toHtml toHtml (SelectRepo user repos) = do Lucid.header_ <| Lucid.toHtml <. nav <| Just user - Lucid.main_ <| do + Lucid.main_ [Lucid.id_ "selectRepo"] <| do Lucid.h2_ "Select a repo to analyze" - Lucid.ul_ <| forM_ (Vector.toList repos) <| \repo -> - Lucid.li_ - <. Lucid.a_ + Lucid.ul_ <| Lucid.toHtml <| mapM_ displayRepo (Vector.toList repos) + where + displayRepo :: GitHub.Repo -> Lucid.Html () + displayRepo repo = + Lucid.li_ <| do + Lucid.a_ [ Lucid.linkHref_ "/" <| fieldLink githubAnalysis (GitHub.untagName <| GitHub.simpleOwnerLogin <| GitHub.repoOwner repo) (GitHub.untagName <| GitHub.repoName repo) ] - <. Lucid.toHtml - <. GitHub.untagName - <| GitHub.repoName repo + <. Lucid.h3_ + <. Lucid.toHtml + <. GitHub.untagName + <| GitHub.repoName repo + maybe mempty (Lucid.p_ <. Lucid.toHtml) (GitHub.repoDescription repo) -- * parts diff --git a/Biz/Look.hs b/Biz/Look.hs index c2ef55e..e7bcb82 100644 --- a/Biz/Look.hs +++ b/Biz/Look.hs @@ -15,6 +15,9 @@ module Biz.Look noColorPreference, -- | Font fontStack, + -- | Clay.Text extensions + textDecorationThickness, + textDecorationWidth, -- | Elements hoverButton, ) @@ -97,3 +100,9 @@ fuckingStyle = do background ("#444" :: Color) "a:link" ? color ("#5bf" :: Color) "a:visited" ? color ("#ccf" :: Color) + +textDecorationThickness :: Size LengthUnit -> Css +textDecorationThickness = Clay.key "text-decoration-thickness" + +textDecorationWidth :: Size LengthUnit -> Css +textDecorationWidth = Clay.key "text-decoration-width" -- cgit v1.2.3